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

Frizz Free JavaScript With ConditionerJS

Frizz Free JavaScript With ConditionerJS

Setting up and playing with ConditionerJS, a presentation given during JS MVC Meetup #9 at DeVoorhoede.

Slide notes can be downloaded below.
https://www.dropbox.com/s/ul3dygc0zjibml9/frizz-free-javascript-notes.zip

Read more about the contents of this presentation on Smashing Magazine.
http://www.smashingmagazine.com/2014/04/03/frizz-free-javascript-with-conditionerjs/

Or on the ConditionerJS docs.
http://conditionerjs.com

// note: animations are not working, so some slides might look a bit odd (namely the ones with the abstract browser window)

Rik Schennink

June 25, 2014
Tweet

More Decks by Rik Schennink

Other Decks in Programming

Transcript

  1. FRIZZ FREE
    JAVASCRIPT
    Building scalable web platforms using Conditioner.js

    View full-size slide

  2. Rik Schennink
    @rikschennink
    Sr. Frontend Dev at Mirabeau

    View full-size slide

  3. •  Bought house
    •  Renovating
    •  Living in a shed
    •  No workstation
    •  No connection

    View full-size slide

  4. I FIND...
    •  I’m not writing code on my phone
    •  I need access to all sorts of information
    •  Presentation gets in the way of content
    •  Interaction is often very painful
    •  Dataplan
    http://www.webperformancetoday.com/2014/05/21/stop-presses-average-web-page-actually-gotten-smaller-bigger/

    View full-size slide

  5. DISCLAIMER
    This talk is about websites

    View full-size slide

  6. CONDITIONER
    Loads and unloads javascript
    modules based on environment
    conditions.
    http://conditionerjs.com

    View full-size slide

  7. OBSERVATIONS
    IN WEB LAND
    Impressions that led to the development of Conditioner.js

    View full-size slide

  8. •  Insane amount
    •  Diversity increases
    •  Fuzzy features
    DEVICES
    http://www.flickr.com/photos/74105777@N00/6153558098

    View full-size slide

  9. CONTENT
    •  Information need is the same cross device
    •  Want to be able to share with others
    •  It’s presentation and interaction that
    differs

    View full-size slide

  10. •  Fun
    •  Comfortable
    •  Stage Class
    FLASH

    View full-size slide

  11. CORE PRINCIPLES
    1. Single kickoff point
    2. Content is elementary
    3. Device type tells us nothing

    View full-size slide

  12. FINDING
    SOLUTIONS
    Building on these three core principles

    View full-size slide

  13. SINGLE KICKOFF
    •  Modules are bound using a single data
    attribute
    •  Easy to search for using .querySelectorAll
    •  Results in all nodes with bound modules

    View full-size slide

  14. ELEMENTARY CONTENT
    •  Tidy and semantic HTML
    •  Don’t forget sectioning
    •  Presto! Mobile site done!

    View full-size slide

  15. NO DEVICE DETECTION
    •  We need more granularity
    •  Feature detection is good start
    Modernizr Conditioner
    Connection API Connectivity

    View full-size slide

  16. MEASURING CONTEXT
    •  Listen to various interaction events
    •  Don’t stop, context keeps changing

    View full-size slide

  17. IN MODULE
    •  Module requires knowledge of outside world
    •  Can get difficult to maintain
    •  Can’t know if suitable before loaded

    View full-size slide

  18. window.addEventListener('resize',function(e) {

    var width = window.innerWidth;

    if (width < 350) {

    // implement small ideas here

    }

    else {

    // implement big ideas here

    }

    });

    View full-size slide

  19. window.addEventListener('resize',function(e) {

    var width = window.innerWidth;

    if (width < 350) {

    // implement small ideas here

    }

    else if (width < 750) {

    // implement big ideas here

    }

    else {

    // implement grand ideas here

    }

    });

    View full-size slide

  20. window.addEventListener('resize',function(e) {

    var body = document.body;

    var width = window.innerWidth;

    if (width < 350) {

    // implement small ideas here

    }

    else if (width < 750 &&
    !body.classList.contains('article')) {

    // implement big, non article page, ideas here

    }

    else {

    // implement grand ideas here

    }

    });

    View full-size slide

  21. CENTRALIZED
    •  Conditions are easily mutable
    •  Modules can focus on core tasks
    •  Measurements can be optimized

    View full-size slide

  22. THE PLAN
    1. Bind behavior on data attributes
    2. Enrich existing clean HTML tree
    3. Central object monitors context

    View full-size slide

  23. CONDITIONER
    Setting it all up and having fun with conditions

    View full-size slide

  24. TECH
    •  Vanilla Javascript
    •  AMD and/or CommonJS
    •  Bring your own module loader
    •  Add shims for older browsers

    View full-size slide

  25. BINDING A MODULE
    •  Add data-module attribute to node
    •  Setup module with JavaScript Class
    data-module="ui/GoogleMap">

    View on GoogleMaps


    View full-size slide

  26. define(function(){


    // constructor

    var exports = function(element) {

    // element is reference to bound node

    };


    // export class definition

    return exports;


    });

    View full-size slide

  27. View on
    Google Maps

    View full-size slide

  28. CONDITIONAL LOADING
    •  Catch expected activity values in statements
    •  Testing for media queries
    “:{}”  
    “media:{(min-­‐width:40em)}”  

    View full-size slide

  29. SETTING CONDITIONS
    data-module="ui/GoogleMap"

    data-conditions="media:{(min-width:350px)}">

    View on GoogleMaps


    •  Add data-conditions attribute
    •  Add unload method

    View full-size slide

  30. var exports = function (element) {

    // use element here

    };


    exports.prototype.unload = function () {

    // clean up here

    };

    View full-size slide

  31. View on
    Google Maps
    “media:{(min-­‐width:350px)}”  

    View full-size slide

  32. MORE POWER
    •  Use with ‘was’ operator to remember state
    •  Use parenthesis and basic logic operators
    “pointer:{was  near}”  
    “media:{…}  and  not  (element:{…}  or  window:{…})”  

    View full-size slide

  33. CONFIGURING MODULES
    •  Inject options during load
    •  Flexibility
    •  Configuration stack

    View full-size slide

  34. module  
     {  
         ‘zoom’:10,  
         ‘type’:‘map’,  
         ‘key’:null  
     }  
    page  
     {  
         ‘key’:’0123ABC’  
     }  
    node  
    “type:terrain”  
    >   >  
    {

    zoom: 10,

    type: 'terrain',

    key: '0123ABC'

    }

    View full-size slide

  35. PASSING OPTIONS
    •  Add data-options attribute
    •  Add base options property
    data-module="ui/GoogleMap"

    data-conditions="media:{(min-width:350px)}"

    data-options="zoom:10, type:terrain">

    View on GoogleMaps


    View full-size slide

  36. var exports = function(element,options) {

    // use element and options here

    };


    // set default module options here

    exports.options = {

    zoom: 10,

    type: 'map',

    key: null

    };

    View full-size slide

  37. ____ __ __ __ _
    ______ __ ____ _ __
    ____ __ __ __ _ ____
    ____ __ ____ _ ______
    __ ____ _ ______ __
    ____ _ ____
    __ ____ _ ____
    ______ __

    View on Google Maps
    “map:terrain”  

    View full-size slide

  38. ALL ABOUT
    MONITORING
    CONTEXT
    Available monitors and how to extend

    View full-size slide

  39. AVAILABLE MONITORS
    •  Window
    •  Element
    •  Media
    •  Pointer
    •  Connection

    View full-size slide

  40. CREATE YOUR OWN!
    1.  Define triggers and tests
    2.  Setup as module
    3.  Use in expression
    4.  Done

    View full-size slide

  41. {

    trigger:{

    'devicelight':window

    },

    test:{

    'min-lumen':function(data,event) {

    return data.expected <= event.value;

    }

    }

    }
    “light:{min-­‐lumen:200}”  

    View full-size slide

  42. POSSIBILITIES?
    •  GPS… Near location, Velocity
    •  Page… Cookie support, Session duration
    •  External… Weather, Social
    •  Other?

    View full-size slide

  43. •  Assumption…
    •  New API’s will
    improve precision
    CAREFUL!

    View full-size slide

  44. PROS / CONS
    Not all is perfect

    View full-size slide

  45. PROS
    •  Separate requests
    •  Low impact on CPU
    •  Quick module linking
    •  Portable modules

    View full-size slide

  46. CONS
    •  Separate requests
    •  High impact on CPU
    •  Need to know what you’re doing

    View full-size slide

  47. FUTURE PLANS
    In desparate need of your opinion

    View full-size slide

  48. NEED FEEDBACK
    •  Why do you feel this won’t work
    •  Concept
    •  Quality
    •  Features
    •  Etc.

    View full-size slide

  49. Questions?
    Rik Schennink
    @rikschennink

    View full-size slide