Forward 2 Notes - Part 2

This post is a continuation from my earlier post, Foward 2 Notes - Part 1


Here are the talks I attended:

  1. Keynote by Karolina Szczur and Sarah Groff-Paermo
  2. The Better Parts, Douglas Crockford
  3. What the… JavaScript?, Kyle Simpson
  4. We Will All Be Game Programmers, Hunter Loftis
  5. No More Tools, Karolina Szczur
  6. Developing High Performance Websites and Modern Apps with JavaScript and HTML5, Doris Chen
  7. Love & Node, Sarah Groff-Palermo
  8. Developer Led Innovation, James Sacra
  9. Choosing a JavaScript Framework, Pam Selle
  10. Test-driven client-side apps, Pete Hodgson

This post will have notes on the remaining talks starting with Hunter Loftis. Enjoy!

We Will All Be Game Developers, Hunter Loftis

3 weeks to build out an FPS game in HTML5 for an internationally releasing album.


  1. Budget (cheap), because the marketing people found Hunter really late, and so they had little left
  2. 3 weeks
  3. Technical constraints (must work on iPhone, iPad, Android & Desktop!)

Sure! sounds like an awesome project. Why not help these “no-name” artists. But… Apparently the guy behind the album is a big artist in the UK, and Hunter was the no-name artist. Pressure! For the next three weeks, no sleep.

“Optimism is an occupational hazard of programming” - Kent Beck


Demo of game built in 3 weeks

Why should You Care?

3 Ideas from Game Dev for Better User Interfaces

Let’s steal from game dev community

1. Minimize and isolate state.

For a simple game of a guy walking around, we might need to keep track of:

We can all capture all that with just these:

function Player() {
  this.x = [0, 0, 0];
  this.y = [0, 0, 0];

And a set of pure functions. Given an input -> Always the same output.

var velocity = this.getVelocity(state.x, state.y, state.interval);
var direction = this.getDirection(velocity);
var pose = this.getPose(state.distance);
var frame = this.getFrame(direction, post);

No side effects. The point is to figure out where the state is, and then use pure functions to derive the rest.

2. Enforce deterministic rendering (frames should be independent)

function render(seconds) {
  this.renderer.render(seconds, this.getState());

It would be a lot easier to do undo / redo if we kept a history of states, instead of modifying a state object directly. (again, FP and immutability is a big hot topic at Forward.)

Keep state independent of rendering. React is great at doing this. React works like a game engine and supports isomorphic JS

3. Separating rendering and simulation

Simulation leads to good animation.

The pursuit of 60fps

Compared to:

If you’re delivering any online experience, optimize for 60 fps

Instead, what you want to do is decouple rendering and simulation. If you drop a frame, you track it. For every frame you drop, you simulate it. Drop 2 frames, simulate it twice. This way, you get the same exact behavior, regardless of dropped frames.

My favorite bug

Created a git tag just for finding this bug.

Ken’s Thoughts

What he said about TODOMVC makes a lot of sense… We fuss over which framework to use to build such a simple TODOMVC, yet game developers are building complex worlds and game mechanics all in 60 fps.

No More Tools, Karolina Szczur

Have we reached a tipping point with too many tools? A look at up-to-date front-end tooling and better ideas for teamwork


Tool - we have a plethora of tools to use to help us make our lives easier, but is that always the case?

“Creatives aren’t good at their art because of their tools; their talent stems from the skills and knowledge they’ve acquired while using their tools” - The Good Creative - Paul Jarvis

But tools are still good to use. Which frameworks / tools are good and what will eventually break our heart?

Things to think about


Automation gives us time to work on problems that cannot be delegated to scripts



Gulp & Grunt


When to do what?


Developing High Performance Websites and Modern Apps with JS and HTML5, Doris Chen

Game - How to make it run faster

This talk is about the principles to improving the JS performance of your app

Today, we’ll improve a game called High Five Yeah. The more you get high fives, the more points you get.

High Five Yeah!

Components and control flow of the game

  1. Matrix of players
  2. Each player has a set of directions
  3. On touch select a player
  4. Generate a list of neighbors to rotate
  5. Rorate the player
  6. Repeat from step 4

The game allocates lots of memory if you increase the size of the grid.

Always measure

Principle 1: Memory usage - Stay Lean

Best practices for staying lean

Principle 2: Use Fast Object Types and Manipulations

Object.defineProperty(this, "n", {
  get: function () { return nVal;}

Principle 3: Best Practices for Fast Arithmetic

Principle 4: Do Less Work

Avoid chattiness with the DOM




var el = document.body.get.getElementById("id").classList;


If you know a value is a integer, such as when this.borderSize = domelement.getBorderSize, it is better to parseInt it. 25% better performance in marshaling.

Paint as much as your users can see, which is 60 FPS

Key Take Away

For super performance critical code, we can do a lot of micro optimizations to make performance better. Better performance = longer battery life,

Love & Node, Sarah Groff-Palermo

This is the second part to her key note about relatables - objects that allow us to explore the relationship between people and objects

Creating Relatability

How do we create a robot that is relatable?

There are 6 ways

  1. Give it a face. From a very young age, humans are learned to detect faces. @facepics
  2. Sense of agency
  3. Social behavior - teaching objects to remember.
  4. Make the robot unpredictable. gives the feeling of personality
  5. Creating a sense of helplessness. Helps people feel less lonely.
  6. Objects that mimic us. If I turn my head and it turns its head then we like it.


How does one create a robot? Her process.

Take input -> Do something with it (the gear) -> Output

1. Take input

2. The gear

3. Outputs

Possible outputs


Questions and Demos

FriendBot being friendly

Developer Led Innovation, James Sacra


How did he fail?

Steps to Getting Your Idea Heard

Step 0: Need a friend (ally). - Someone to support your ideas. They can help you push your ideas from a unique perspective. - Who should you befriend? Fellow developers, technical managers, business support, etc. Grab them over lunch, talk to them

Step 1: What’s the problem?

Step 2: Innovate

Step 3: Define the solution

Step 4: Pitch


Key Take Away

Don’t be afraid to fail, that is the only way to succeed

Choosing a Javascript Framework, Pam Selle

There’s a book!

Spoiler: I will not tell you what to do. The hope is for you to make informed decisions for a project

What is a JS framework?




Rising stars!



Evaluating frameworks

Test Driven Client-side Apps, Pete Hogsdon

Test driven development

  1. Write a failing test
  2. Write code that makes it pass
  3. Refactor code (people miss this part a lot)
  4. Go back to 1

The whole point is to build out a test suite that gives you the safety net to go and refactor your code to make it better

What’s the Advantage of TDD?

Live Coding - Example of TDD

Functional testing

Key Take Away

TDD drives developers toward better design


And that’s it folks! Hope you got a glimpse of what Forward 2 was like. It will be interesting to look back to this post 10 years from now and see how JavaScript has moved forward. What I’d like to know is, will JavaScript still be the monopoly client-side language it is today? My gut feeling tells me that it will, and will be for a good long time.