Pro Yearly is on sale from $80 to $50! »

Beyond the To-Do List

909c852288c110098ea28f5441255d03?s=47 janvt
April 27, 2014

Beyond the To-Do List

version held at JSUNCONF 2014 in Hamburg

909c852288c110098ea28f5441255d03?s=128

janvt

April 27, 2014
Tweet

Transcript

  1. Beyond the To-Do List

  2. About Me • http://janvt.com • @janvanthoor • Photographer by night,

    accidentally became a developer during the day... • G & M, Assembler, SSE, C++, PHP, JS • Front end dev @ trivago
  3. What is trivago? • Hotel metasearch site • “High performance”

    Javascript • LOTS of AB(C) testing • Maintainability / code quality • Browser support
  4. Back to the basics Let’s write some Javascript! No Hipsterschabernack...

  5. In case you didn’t know... • Javascript is a programming

    language. • It has it’s own paradigms. • Respect that shit...
  6. Basic JS App • modules (no, not controllers…) • data

    objects (models) • display / user interaction (views)
  7. Definition: module • Initialization of event bindings. • Instantiates and

    glues data / view components. • Communication with server or other modules. Self-contained implementation of a website component.
  8. Module Pattern • Common JS coding pattern. • Encapsulates “privacy”

    using closures. • Returns an object literal as public API.
  9. var DeepThought = function() { var _theAnswer = 42; return

    { tellUsTheAnswer: function() { return _theAnswer; } } }; DeepThought.tellUsTheAnswer();
  10. Module Communication • Events (pub / sub via mediator) ◦

    Passive! ◦ Past tense! ◦ Verb + target (“found:theAnswer”, “added:bookmark”) • Public APIs (accessible via dependency) ◦ imperative actions (tellUsTheAnswer)
  11. AMD (Asynchronous Module Definition) “The Asynchronous Module Definition (AMD) API

    specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded."
  12. AMD - define() • Global function. • Only one required

    parameter (factory). define([id], [dependencies], factory);
  13. AMD - define() - [dependencies] • Array literal of the

    required modules. • Are passed to the factory function as parameters (in same order). define(‘ironMan’ , [‘stark.tony’, ‘ego.massive’, ‘suit’] , function(Tony, Ego, Suit) {});
  14. AMD - define() - factory • Function that should be

    executed to instantiate the module or object. • Only executed once. define(‘ironMan’ , [‘stark.tony’, ‘ego.massive’, ‘suit’] , function(Tony, Ego, Suit) { return Tony.apply(Ego).don(Suit); });
  15. AMD - require() • Global function. • dependencies: array literal

    of modules to instantiate require([‘ironMan’, ‘blackWidow’] , function(Tony, Natasha) { // CENSORED });
  16. Basic JS App • modules • data objects • display

    / user interaction
  17. What is MV* • Separation of concerns. • Most modules

    implementations include: ◦ Rendering / updating user interfaces. ◦ Handling user input. ◦ Server communication. • MV* is too simplistic when applied to large- scale JS architecture, however, when applied to a module….
  18. None
  19. Backbone • “Magic library” for structuring web applications. • Not

    a full-stack framework, more “convention than code”. • Data is represented as a model. • Views react to changes in models and user interaction.
  20. AMD + Backbone • Can use AMD to define MV*

    components (or just define views in module) • The factory function should return the extended prototype of Backbone.* • Instances are created with new keyword.
  21. AMD + Backbone: Code define(“lovelyView”, function() { return Backbone.View.extend({ events:

    {...} , onClick: function() {...} }); }); new (require(“lovelyView”));
  22. Basic JS App • modules • data objects • display

    / user interaction
  23. Improvements • Sandboxing: use one central dependency with message bus

    for module communication. • Standardized module definition: all modules contain references to the app instance and other shared resources.
  24. ?’s @janvanthoor @milchjieper