Javascript

Wilhelm Eklund

SRC

Developer @ Aftonbladet

What is Javascript?

  • Clientside vs Serverside
  • Everything are Objects
  • Weakly typed scripting language
  • Non-blocking & Asynchronous

JS frameworks

What makes them unique?

 

jQuery

  • Simple API
  • Plugins
  • DOM-manipulation


Example

 

Backbone

  • MVC-structure

 

Angular

  • MVC-structure
  • Data-binding within client
  • Extend HTML with new functionality
  • Build an app


Example: admin page with data-binding

 

Node.js

  • Server-side Javascript
  • Non-blocking I/O

 

Meteor

  • Data-binding in client(s)
  • Sync with the servern (real-time system)


Example: wedding webshop

 

d3.js

  • Data-driven documents (d3)
  • Vector graphics
  • Transitions / animations


Example: election graphics

 

Famo.us

  • Cool animations
  • New way to build and render page
  • Build an app, not a document

 

Pseudo code

Classic programming language
Blocking operations

    parse_file(1);
    parse_file(2);
    parse_file(3);
    save_to_db();

 

Node.js - callbacks


function (fileContent, callback) {
    // Parse the file
    .....
    callback();
}

 

Node.js


  • non-blocking I/O
  • Perfect for workers
  • 120 sec → 12 sec

 

Demo

 

Real case: election graphics

 

Results

 

  • 20 interactions / visit
  • 2 million unique visitor / 24h
  • 11.7 million page loads / 24h
  • 122.000 concurrent users
  • ...

 

Most viewed article at Aftonbladet.se

- ever!

 

Thank you!