Context Based Progressive Enhancement using ConditionerJS

F3c93cbf28ac15eab9655246e5667965?s=47 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

F3c93cbf28ac15eab9655246e5667965?s=128

Rik Schennink

September 15, 2016
Tweet

Transcript

  1. context based PROGRESSIVE ENHANCEMENT

  2. Freelance Front-end Developer Rik Schennink @rikschennink

  3. None
  4. Origins Initialisation logic drama

  5. Writing maintainable JavaScript for big web platforms is though.

  6. index.html <a href=“http://maps.google.com/?ll=51.741,3.822" class="google-map">
 View Booking.com Headquarters on GoogleMaps
 </a>

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

    function GoogleMap(element) {
 
 };
 
 return exports;
 
 }());
  8. <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
  9. // 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
  10. Our init logic was starting to show cracks.

  11. 1024px

  12. 1024px 320px 768px

  13. no pixels lot’s of pixels

  14. no pixels lot’s of pixels touch mouse gesture remote keyboard

    game controller
  15. no pixels lot’s of pixels touch mouse pen gesture remote

    voice keyboard virtual game controller
  16. The web is quite an intense environment.

  17. HTML works everywhere. “CSS and JavaScript are the changing factors.”

  18. Not device types but features are of interest. “User moves

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

    rotation of the device can invalidate a Google Map”
  20. 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
  21. We have to be aware of other context parameters. “Can’t

    treat every user as if they’re sitting at a desk.”
  22. on context And how it relates to features

  23. Features are stable, context is always changing

  24. Detect features render view Done

  25. Detect features render view update Start monitoring context “allows cookies”

    “rotates viewport” update “button tapped” update “has scrolled down” update
  26. “The framework should measure the users’ context and fine-tune the

    interface so it fits perfectly.”
  27. let’s do a demo

  28. HOW Does it work Three principles

  29. 1. modules are isolated A strict separation between modules

  30. ui/GoogleMap.js define(function() {
 
 var exports = function GoogleMap(element) {


    
 };
 
 return exports;
 
 });
  31. ui/GoogleMap.js export default class GoogleMap { constructor(element) { } };

  32. Modules are bound to the DOM using data attributes instead

    of classes.
  33. index.html <a href="http://maps.google.com/?ll=51.741,3.822"
 data-module="ui/GoogleMap">
 View Booking.com Headquarters on GoogleMaps
 </a>

  34. 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
  35. Making modules environment agnostic 2. focus on functionality

  36. Setup functionality that monitors context.

  37. window element media pointer width, height visible, width, height query,

    supported near, fine
  38. Supply context parameters to Conditioner using data attributes.

  39. index.html <a href="http://maps.google.com/?ll=51.741,3.822"
 data-module="ui/GoogleMap"
 data-conditions="media:{(min-width:40em)}">
 View Booking.com Headquarters on GoogleMaps


    </a>
  40. media:{(min-width:40em)} <monitor>:{<expected-value>}

  41. Extend with your own monitors.

  42. monitor/light.js // some boilerplate here {
 trigger:{
 'devicelight':window
 },
 test:{


    ‘max-level’:function(data, event) {
 return event.level < data.expected;
 }
 }
 }
  43. index.html <a href="http://maps.google.com/?ll=51.741,3.822"
 data-module="ui/GoogleMap"
 data-conditions="light:{max-level:5}">
 View Booking.com Headquarters on GoogleMaps


    </a>
  44. media:{(min-width:40em)} and not session:{first}

  45. 3. configuration standard Uniform configuration of module properties

  46. Configuration is done through so called options.

  47. ui/GoogleMap.js define(function(){
 
 var exports = function GoogleMap(element, options) {


    
 }; 
 exports.options = { zoom:10, type:'map', key:null }; 
 return exports;
 
 });
  48. main.js conditioner.init({ modules:{ 'ui/GoogleMap':{ options:{ key:'123ABC' } } } }

  49. index.html <a href="http://maps.google.com/?ll=51.741,3.822"
 data-module="ui/GoogleMap"
 data-conditions="media:{(min-width:40em)}"
 data-options="type:terrain">
 View Booking.com Headquarters on

    GoogleMaps
 </a>
  50. Conditioner automatically merges these option objects.

  51. { zoom: 10, type: ‘map’, key: null }

  52. { zoom: 10, type: ‘map’, key: ’123ABC’ }

  53. { zoom: 10, type: ‘terrain’, key: ’123ABC’ }

  54. require(‘ui/GoogleMap', function(Module) { new Module(element, { zoom: 10, type: 'terrain',

    key: '123ABC' }); }); init.js
  55. what does this give me Closing statements

  56. development advantages

  57. voice keyboard virtua game controller LIGHT LEVEL SESSION duration LOCATION

    velocity TIME CO S Sounds of the Ocean
  58. Project B Project A Project C Without Conditioner

  59. Available Enhancements

  60. context super powers

  61. GET 30% OFF On your purchase available only 30 minutes.

    Enter your email address here GET MY FREE COUPON
  62. None
  63. Favorites Favorites 0 x 5 x 20 x interactions:

  64. “Conditioner helps you embrace all these different contexts instead of

    fight against them”
  65. Thanks!