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

Transcript

1. context based
   PROGRESSIVE ENHANCEMENT
   

   View Slide

2. Freelance Front-end Developer
   Rik Schennink
   @rikschennink
   

   View Slide

3. View Slide

4. Origins
   Initialisation logic drama
   

   View Slide

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

   View Slide

6. index.html
   class="google-map">

   View Booking.com Headquarters on GoogleMaps

   
   

   View Slide

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

   

   var exports = function GoogleMap(element) {

   

   };

   

   return exports;

   

   }());
   

   View Slide

8. 
   <br/>// init start<br/>var elements = Array.from(<br/>document.getElementsByClassName(‘google-map’)<br/>);<br/>elements.forEach(function(element) {<br/>new GoogleMap(element);<br/>});<br/>// more init logic here<br/>index.html<br/>

   View Slide

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
   

   View Slide

10. Our init logic was starting to show cracks.
    

    View Slide

11. 1024px
    

    View Slide

12. 1024px
    320px 768px
    

    View Slide

13. no pixels lot’s of pixels
    

    View Slide

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

    View Slide

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

    View Slide

16. The web is quite an intense environment.
    

    View Slide

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

    View Slide

18. Not device types but features are of interest.
    “User moves his mouse… and the viewport is pretty wide…”
    

    View Slide

19. Functionality might not stay relevant during the entire session.
    “A rotation of the device can invalidate a Google Map”
    

    View Slide

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
    

    View Slide

21. We have to be aware of other context parameters.
    “Can’t treat every user as if they’re sitting at a desk.”
    

    View Slide

22. on context
    And how it relates to features
    

    View Slide

23. Features are stable, context is always changing
    

    View Slide

24. Detect features render
    view
    Done
    

    View Slide

25. Detect features render
    view
    update
    Start monitoring context
    “allows cookies”
    “rotates viewport”
    update
    “button tapped”
    update
    “has scrolled down”
    update
    

    View Slide

26. “The framework should measure the users’ context
    and fine-tune the interface so it fits perfectly.”
    

    View Slide

27. let’s do a demo
    

    View Slide

28. HOW Does it work
    Three principles
    

    View Slide

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

    View Slide

30. ui/GoogleMap.js
    define(function() {

    

    var exports = function GoogleMap(element) {

    

    };

    

    return exports;

    

    });
    

    View Slide

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

    View Slide

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

    View Slide

33. index.html
    data-module="ui/GoogleMap">

    View Booking.com Headquarters on GoogleMaps

    
    

    View Slide

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
    

    View Slide

35. Making modules environment agnostic
    2. focus on functionality
    

    View Slide

36. Setup functionality that
    monitors context.
    

    View Slide

37. window
    element
    media
    pointer
    width, height
    visible, width, height
    query, supported
    near, fine
    

    View Slide

38. Supply context parameters to
    Conditioner using data attributes.
    

    View Slide

39. index.html
    data-module="ui/GoogleMap"

    data-conditions="media:{(min-width:40em)}">

    View Booking.com Headquarters on GoogleMaps

    
    

    View Slide

40. media:{(min-width:40em)}
    :{}
    

    View Slide

41. Extend with your own monitors.
    

    View Slide

42. monitor/light.js
    // some boilerplate here
    {

    trigger:{

    'devicelight':window

    },

    test:{

    ‘max-level’:function(data, event) {

    return event.level < data.expected;

    }

    }

    }
    

    View Slide

43. index.html
    data-module="ui/GoogleMap"

    data-conditions="light:{max-level:5}">

    View Booking.com Headquarters on GoogleMaps

    
    

    View Slide

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

    View Slide

45. 3. configuration standard
    Uniform configuration of module properties
    

    View Slide

46. Configuration is done through so called options.
    

    View Slide

47. ui/GoogleMap.js
    define(function(){

    

    var exports = function GoogleMap(element, options) {

    

    };
    

    exports.options = {
    zoom:10,
    type:'map',
    key:null
    };
    

    return exports;

    

    });
    

    View Slide

48. main.js
    conditioner.init({
    modules:{
    'ui/GoogleMap':{
    options:{
    key:'123ABC'
    }
    }
    }
    }
    

    View Slide

49. index.html
    data-module="ui/GoogleMap"

    data-conditions="media:{(min-width:40em)}"

    data-options="type:terrain">

    View Booking.com Headquarters on GoogleMaps

    
    

    View Slide

50. Conditioner automatically merges
    these option objects.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

54. require(‘ui/GoogleMap', function(Module) {
    new Module(element, {
    zoom: 10,
    type: 'terrain',
    key: '123ABC'
    });
    });
    init.js
    

    View Slide

55. what does this give me
    Closing statements
    

    View Slide

56. development advantages
    

    View Slide

57. voice
    keyboard
    virtua
    game
    controller
    LIGHT
    LEVEL
    SESSION
    duration
    LOCATION
    velocity
    TIME
    CO
    S
    Sounds of the Ocean
    

    View Slide

58. Project B
    Project A Project C
    Without Conditioner
    

    View Slide

59. Available Enhancements
    

    View Slide

60. context super powers
    

    View Slide

61. GET 30% OFF
    On your purchase available
    only 30 minutes.
    Enter your email address here
    GET MY FREE COUPON
    

    View Slide

62. View Slide

63. Favorites Favorites
    0 x 5 x 20 x
    interactions:
    

    View Slide

64. “Conditioner helps you embrace all these different
    contexts instead of fight against them”
    

    View Slide

65. Thanks!
    

    View Slide