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)

Transcript

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

   View Slide

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

   View Slide

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

   View 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 Slide

5. DISCLAIMER
   This talk is about websites
   

   View Slide

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

   View Slide

7. View Slide

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

   View Slide

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

   View Slide

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

    View Slide

11. •  Fun
    •  Comfortable
    •  Stage Class
    FLASH
    

    View Slide

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

    View Slide

13. FINDING
    SOLUTIONS
    Building on these three core principles
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    var width = window.innerWidth;

    if (width < 350) {

    // implement small ideas here

    }

    else {

    // implement big ideas here

    }

    });
    

    View Slide

20. 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 Slide

21. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View on GoogleMaps

    
    

    View Slide

27. define(function(){

    

    // constructor

    var exports = function(element) {

    // element is reference to bound node

    };

    

    // export class definition

    return exports;

    

    });
    

    View Slide

28. View on
    Google Maps
    

    View Slide

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

    View Slide

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

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

    View on GoogleMaps

    
    •  Add data-conditions attribute
    •  Add unload method
    

    View Slide

31. var exports = function (element) {

    // use element here

    };

    

    exports.prototype.unload = function () {

    // clean up here

    };
    

    View Slide

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

    View Slide

33. 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 Slide

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

    View Slide

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

    zoom: 10,

    type: 'terrain',

    key: '0123ABC'

    }
    

    View Slide

36. 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 Slide

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

    // use element and options here

    };

    

    // set default module options here

    exports.options = {

    zoom: 10,

    type: 'map',

    key: null

    };
    

    View Slide

38. ____ __ __ __ _
    ______ __ ____ _ __
    ____ __ __ __ _ ____
    ____ __ ____ _ ______
    __ ____ _ ______ __
    ____ _ ____
    __ ____ _ ____
    ______ __
    
    View on Google Maps
    “map:terrain”  
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

42. {

    trigger:{

    'devicelight':window

    },

    test:{

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

    return data.expected <= event.value;

    }

    }

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

    View Slide

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

    View Slide

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

    View Slide

45. PROS / CONS
    Not all is perfect
    

    View Slide

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

    View Slide

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

    View Slide

48. FUTURE PLANS
    In desparate need of your opinion
    

    View Slide

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

    View Slide

50. Questions?
    Rik Schennink
    @rikschennink
    

    View Slide