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)

F3c93cbf28ac15eab9655246e5667965?s=128

Rik Schennink

June 25, 2014
Tweet

Transcript

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

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

  3. •  Bought house •  Renovating •  Living in a shed

    •  No workstation •  No connection
  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/
  5. DISCLAIMER This talk is about websites

  6. CONDITIONER Loads and unloads javascript modules based on environment conditions.

    http://conditionerjs.com
  7. None
  8. OBSERVATIONS IN WEB LAND Impressions that led to the development

    of Conditioner.js
  9. •  Insane amount •  Diversity increases •  Fuzzy features DEVICES

    http://www.flickr.com/photos/74105777@N00/6153558098
  10. CONTENT •  Information need is the same cross device • 

    Want to be able to share with others •  It’s presentation and interaction that differs
  11. •  Fun •  Comfortable •  Stage Class FLASH

  12. CORE PRINCIPLES 1. Single kickoff point 2. Content is elementary

    3. Device type tells us nothing
  13. FINDING SOLUTIONS Building on these three core principles

  14. SINGLE KICKOFF •  Modules are bound using a single data

    attribute •  Easy to search for using .querySelectorAll •  Results in all nodes with bound modules
  15. ELEMENTARY CONTENT •  Tidy and semantic HTML •  Don’t forget

    sectioning •  Presto! Mobile site done!
  16. NO DEVICE DETECTION •  We need more granularity •  Feature

    detection is good start Modernizr Conditioner Connection API Connectivity
  17. MEASURING CONTEXT •  Listen to various interaction events •  Don’t

    stop, context keeps changing
  18. IN MODULE •  Module requires knowledge of outside world • 

    Can get difficult to maintain •  Can’t know if suitable before loaded
  19. window.addEventListener('resize',function(e) {
 var width = window.innerWidth;
 if (width < 350)

    {
 // implement small ideas here
 }
 else {
 // implement big ideas here
 }
 });
  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
 }
 });
  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
 }
 });
  22. CENTRALIZED •  Conditions are easily mutable •  Modules can focus

    on core tasks •  Measurements can be optimized
  23. THE PLAN 1. Bind behavior on data attributes 2. Enrich

    existing clean HTML tree 3. Central object monitors context
  24. CONDITIONER Setting it all up and having fun with conditions

  25. TECH •  Vanilla Javascript •  AMD and/or CommonJS •  Bring

    your own module loader •  Add shims for older browsers
  26. BINDING A MODULE •  Add data-module attribute to node • 

    Setup module with JavaScript Class <a href="http://maps.google.com/?ll=51.741,3.822"
 data-module="ui/GoogleMap">
 View on GoogleMaps
 </a>
  27. define(function(){
 
 // constructor
 var exports = function(element) {
 //

    element is reference to bound node
 };
 
 // export class definition
 return exports;
 
 });
  28. View on Google Maps

  29. CONDITIONAL LOADING •  Catch expected activity values in statements • 

    Testing for media queries “<name>:{<test(s)>}”   “media:{(min-­‐width:40em)}”  
  30. SETTING CONDITIONS <a href="http://maps.google.com/?ll=51.741,3.822"
 data-module="ui/GoogleMap"
 data-conditions="media:{(min-width:350px)}">
 View on GoogleMaps
 </a>

    •  Add data-conditions attribute •  Add unload method
  31. var exports = function (element) {
 // use element here


    };
 
 exports.prototype.unload = function () {
 // clean up here
 };
  32. View on Google Maps “media:{(min-­‐width:350px)}”  

  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:{…})”  
  34. CONFIGURING MODULES •  Inject options during load •  Flexibility • 

    Configuration stack
  35. module    {        ‘zoom’:10,      

     ‘type’:‘map’,        ‘key’:null    }   page    {        ‘key’:’0123ABC’    }   node   “type:terrain”   >   >   {
 zoom: 10,
 type: 'terrain',
 key: '0123ABC'
 }
  36. PASSING OPTIONS •  Add data-options attribute •  Add base options

    property <a href="http://maps.google.com/?ll=51.741,3.822"
 data-module="ui/GoogleMap"
 data-conditions="media:{(min-width:350px)}"
 data-options="zoom:10, type:terrain">
 View on GoogleMaps
 </a>
  37. var exports = function(element,options) {
 // use element and options

    here
 };
 
 // set default module options here
 exports.options = {
 zoom: 10,
 type: 'map',
 key: null
 };
  38. ____ __ __ __ _ ______ __ ____ _ __

    ____ __ __ __ _ ____ ____ __ ____ _ ______ __ ____ _ ______ __ ____ _ ____ __ ____ _ ____ ______ __ View on Google Maps “map:terrain”  
  39. ALL ABOUT MONITORING CONTEXT Available monitors and how to extend

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

    •  Connection
  41. CREATE YOUR OWN! 1.  Define triggers and tests 2.  Setup

    as module 3.  Use in expression 4.  Done
  42. {
 trigger:{
 'devicelight':window
 },
 test:{
 'min-lumen':function(data,event) {
 return data.expected <=

    event.value;
 }
 }
 } “light:{min-­‐lumen:200}”  
  43. POSSIBILITIES? •  GPS… Near location, Velocity •  Page… Cookie support,

    Session duration •  External… Weather, Social •  Other?
  44. •  Assumption… •  New API’s will improve precision CAREFUL!

  45. PROS / CONS Not all is perfect

  46. PROS •  Separate requests •  Low impact on CPU • 

    Quick module linking •  Portable modules
  47. CONS •  Separate requests •  High impact on CPU • 

    Need to know what you’re doing
  48. FUTURE PLANS In desparate need of your opinion

  49. NEED FEEDBACK •  Why do you feel this won’t work

    •  Concept •  Quality •  Features •  Etc.
  50. Questions? Rik Schennink @rikschennink