Do Things, tell people

(ideally in that order)

Let's talk about JavaScript

I believe in elegant, well-tested code unless I'm working with Javascript, in which case I hack like a crazed baboon til it kinda works.

— Cody Powell (@codypo) June 11, 2011

Try not to do it (all the time)

JavaScript has a history of being treated as a second-class citizen on web applications.

Mostly used for "web 2.0" (ughh) visual effects and occasional AJAX requests.

Rarely used by people who actually know the language. Seen as a toy.

Snippets spread through the codebase make it unmaintanable, error-prone mess.

Inlined code make logic non-reusable, hard to debug and troubleshoot.

Possible improvement: separate behaviour from content (unobtrusive), in the same way that CSS separates presentation from content.

To the rescue!1

Backbone.js

is:

• MVC JavaScript framework
• Hash-routing engine
• RESTful JSON interface

We'll focus on the MVC bit.

MVC

MVC (roughly)

• Model: data + business logic
• View: user interface
• Controller: input handler (and everything else)

I wanna see code!1

              <div id='character'></div>
            

              var character = new Backbone.Model({
                name: 'Frodo'
              });

              var characterView = new Backbone.View({
                el: '#character',

                model: character,

                render: function() {
                  this.$el.append('Hi, I\'m ' + this.model.get('name'));
                }
              });

              characterView.render();
            

              <div id='character'>Hi, I'm Frodo</div>
            

K, what about canvas?

<canvas>

is:

• Bitmap drawed by JavaScript
• 2D shapes and images

Enables you to do cool stuff

A diagonal line

              <canvas id='first-canvas' width='800px' height='200px'></canvas>
            

              var context = document.getElementById('first-canvas').getContext('2d');

              context.moveTo(150, 50);
              context.lineTo(600, 150);
              context.lineWidth = 15;
              context.stroke();
            

A rectangle with borders

              <canvas id='second-canvas' width='800px' height='200px'></canvas>
            

              var context = document.getElementById('second-canvas').getContext('2d');

              context.beginPath();
              context.rect(225, 25, 300, 150);
              context.fillStyle = 'yellow';
              context.fill();
              context.lineWidth = 5;
              context.strokeStyle = 'black';
              context.stroke();
            

A semicircle with gradient

              <canvas id='third-canvas' width='800px' height='150px'></canvas>
            

              var context = document.getElementById('third-canvas').getContext('2d');

              context.beginPath();
              context.arc(400, 60, 100, 0, Math.PI, false);
              context.closePath();
              context.lineWidth = 15;
              var gradient = context.createLinearGradient(300, 50, 500, 50);
              gradient.addColorStop(0, 'yellow');
              gradient.addColorStop(1, 'green');
              context.fillStyle = gradient;
              context.fill();
              context.strokeStyle = 'black';
              context.stroke();
            

Let's build a simple "game"

*Try moving with WASD