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

Context Based Progressive Enhancement using Con...

Rik Schennink
September 15, 2016

Context Based Progressive Enhancement using ConditionerJS

An outline of web dev challenges plus an introduction to ConditionerJS which solves said challenges. A presentation given at an NLHTML5 Meetup hosted by Booking.com.

ConditionerJS: http://conditionerjs.com
Demo: http://slim.pqina.nl

Rik Schennink

September 15, 2016
Tweet

More Decks by Rik Schennink

Other Decks in Technology

Transcript

  1. ui/GoogleMap.js var GoogleMap = (function() {
 
 var exports =

    function GoogleMap(element) {
 
 };
 
 return exports;
 
 }());
  2. <script href=“ui/GoogleMap.js”></script> <script> // init start var elements = Array.from(

    document.getElementsByClassName(‘google-map’) ); elements.forEach(function(element) { new GoogleMap(element); }); // more init logic here index.html
  3. // init start if (window.innerWidth > 600) { var elements

    = Array.from( document.getElementsByClassName(‘google-map’) ); elements.forEach(function(element) { new GoogleMap(element); }); } // more init logic here index.html
  4. no pixels lot’s of pixels touch mouse pen gesture remote

    voice keyboard virtual game controller
  5. Not device types but features are of interest. “User moves

    his mouse… and the viewport is pretty wide…”
  6. Functionality might not stay relevant during the entire session. “A

    rotation of the device can invalidate a Google Map”
  7. touch mouse pen gesture remote voice keyboard virtual game controller

    no pixels lot’s of pixels LIGHT LEVEL SESSION duration SCROLL POSITION battery level LOCATION velocity TIME CONNECTION STABILITY HISTORICAL BEHAVIOR MOTION
  8. We have to be aware of other context parameters. “Can’t

    treat every user as if they’re sitting at a desk.”
  9. Detect features render view update Start monitoring context “allows cookies”

    “rotates viewport” update “button tapped” update “has scrolled down” update
  10. var elements = Array.from( document.querySelectorAll(‘[data-module]’); ); elements.forEach(function(element) { var name

    = element.getAttribute(‘data-module’); require(name, function(Module) { new Module(element); }); }); init.js
  11. monitor/light.js // some boilerplate here {
 trigger:{
 'devicelight':window
 },
 test:{


    ‘max-level’:function(data, event) {
 return event.level < data.expected;
 }
 }
 }
  12. ui/GoogleMap.js define(function(){
 
 var exports = function GoogleMap(element, options) {


    
 }; 
 exports.options = { zoom:10, type:'map', key:null }; 
 return exports;
 
 });
  13. GET 30% OFF On your purchase available only 30 minutes.

    Enter your email address here GET MY FREE COUPON