$30 off During Our Annual Pro Sale. View Details »

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. •  Bought house •  Renovating •  Living in a shed

    •  No workstation •  No connection
  2. 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/
  3. •  Insane amount •  Diversity increases •  Fuzzy features DEVICES

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

    Want to be able to share with others •  It’s presentation and interaction that differs
  5. SINGLE KICKOFF •  Modules are bound using a single data

    attribute •  Easy to search for using .querySelectorAll •  Results in all nodes with bound modules
  6. NO DEVICE DETECTION •  We need more granularity •  Feature

    detection is good start Modernizr Conditioner Connection API Connectivity
  7. IN MODULE •  Module requires knowledge of outside world • 

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

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

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

    existing clean HTML tree 3. Central object monitors context
  13. TECH •  Vanilla Javascript •  AMD and/or CommonJS •  Bring

    your own module loader •  Add shims for older browsers
  14. 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>
  15. define(function(){
 
 // constructor
 var exports = function(element) {
 //

    element is reference to bound node
 };
 
 // export class definition
 return exports;
 
 });
  16. CONDITIONAL LOADING •  Catch expected activity values in statements • 

    Testing for media queries “<name>:{<test(s)>}”   “media:{(min-­‐width:40em)}”  
  17. var exports = function (element) {
 // use element here


    };
 
 exports.prototype.unload = function () {
 // clean up here
 };
  18. MORE POWER •  Use with ‘was’ operator to remember state

    •  Use parenthesis and basic logic operators “pointer:{was  near}”   “media:{…}  and  not  (element:{…}  or  window:{…})”  
  19. module    {        ‘zoom’:10,      

     ‘type’:‘map’,        ‘key’:null    }   page    {        ‘key’:’0123ABC’    }   node   “type:terrain”   >   >   {
 zoom: 10,
 type: 'terrain',
 key: '0123ABC'
 }
  20. 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>
  21. var exports = function(element,options) {
 // use element and options

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

    ____ __ __ __ _ ____ ____ __ ____ _ ______ __ ____ _ ______ __ ____ _ ____ __ ____ _ ____ ______ __ View on Google Maps “map:terrain”  
  23. CREATE YOUR OWN! 1.  Define triggers and tests 2.  Setup

    as module 3.  Use in expression 4.  Done
  24. POSSIBILITIES? •  GPS… Near location, Velocity •  Page… Cookie support,

    Session duration •  External… Weather, Social •  Other?
  25. PROS •  Separate requests •  Low impact on CPU • 

    Quick module linking •  Portable modules
  26. NEED FEEDBACK •  Why do you feel this won’t work

    •  Concept •  Quality •  Features •  Etc.