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

Context Based Progressive Enhancement using ConditionerJS

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. 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