Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Beyond the To-Do List

janvt
April 27, 2014

Beyond the To-Do List

version held at JSUNCONF 2014 in Hamburg

janvt

April 27, 2014
Tweet

More Decks by janvt

Other Decks in Technology

Transcript

  1. Beyond the To-Do List

    View full-size slide

  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

    View full-size slide

  3. What is trivago?
    ● Hotel metasearch site
    ● “High performance” Javascript
    ● LOTS of AB(C) testing
    ● Maintainability / code quality
    ● Browser support

    View full-size slide

  4. Back to the basics
    Let’s write some Javascript!
    No Hipsterschabernack...

    View full-size slide

  5. In case you didn’t know...
    ● Javascript is a programming language.
    ● It has it’s own paradigms.
    ● Respect that shit...

    View full-size slide

  6. Basic JS App
    ● modules (no, not controllers…)
    ● data objects (models)
    ● display / user interaction (views)

    View full-size slide

  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.

    View full-size slide

  8. Module Pattern
    ● Common JS coding pattern.
    ● Encapsulates “privacy” using closures.
    ● Returns an object literal as public API.

    View full-size slide

  9. var DeepThought = function()
    {
    var _theAnswer = 42;
    return {
    tellUsTheAnswer: function() {
    return _theAnswer;
    }
    }
    };
    DeepThought.tellUsTheAnswer();

    View full-size slide

  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)

    View full-size slide

  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."

    View full-size slide

  12. AMD - define()
    ● Global function.
    ● Only one required parameter (factory).
    define([id], [dependencies], factory);

    View full-size slide

  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) {});

    View full-size slide

  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);
    });

    View full-size slide

  15. AMD - require()
    ● Global function.
    ● dependencies: array literal of modules to
    instantiate
    require([‘ironMan’, ‘blackWidow’]
    , function(Tony, Natasha) {
    // CENSORED
    });

    View full-size slide

  16. Basic JS App
    ● modules
    ● data objects
    ● display / user interaction

    View full-size slide

  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….

    View full-size slide

  18. 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.

    View full-size slide

  19. 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.

    View full-size slide

  20. AMD + Backbone: Code
    define(“lovelyView”, function()
    {
    return Backbone.View.extend({
    events: {...}
    , onClick: function() {...}
    });
    });
    new (require(“lovelyView”));

    View full-size slide

  21. Basic JS App
    ● modules
    ● data objects
    ● display / user interaction

    View full-size slide

  22. 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.

    View full-size slide

  23. ?’s
    @janvanthoor
    @milchjieper

    View full-size slide