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

Introduction to ConditionerJS at Kabisa

Introduction to ConditionerJS at Kabisa

An introduction to ConditionerJS and the problems it tries to tackle, a presentation given at a Fronteers meetup hosted by Kabisa.

Rik Schennink

April 08, 2015
Tweet

More Decks by Rik Schennink

Other Decks in Programming

Transcript

  1. Conditioner
    Frizz Free, Environment-aware,
    JavaScript Modules

    View Slide

  2. Freelance Front-end Developer
    Rik Schennink
    @rikschennink

    View Slide

  3. origins
    Another day another framework

    View Slide

  4. Writing maintainable JavaScript
    for big web platforms is though.
    Now do it for the multi device web,
    k-thanks-bye!

    View Slide

  5. no pixels lot’s of pixels

    View Slide

  6. no pixels lot’s of pixels

    View Slide

  7. touch
    mouse pen
    gesture
    remote
    voice
    keyboard
    virtual
    gyro
    no pixels lot’s of pixels

    View Slide

  8. It’s all a bit overwhelming.

    View Slide

  9. Let’s take a step back.

    View Slide

  10. Can’t make decisions based on device type.
    “Phone or tablet… fablet… god dammit.”

    View Slide

  11. Features are way more interesting.
    “User moves his mouse… and the viewport is pretty wide…”

    View Slide

  12. HTML works everywhere.

    View Slide

  13. Features are stable while context is volatile.

    View Slide

  14. Screensize
    “User resizes the window or rotates his device…”
    Input type
    “User interacts with touch then moves to his mouse…”
    Cookie support
    “User decides to not allow cookies…”

    View Slide

  15. These changes give us valuable info
    about the context the user is in.

    View Slide

  16. “We want to measure the users’ context
    and respond appropriately.”

    View Slide

  17. touch
    mouse pen
    gesture
    remote
    voice
    keyboard
    virtual
    gyro
    CURRENT
    TIME
    LIGHT
    LEVEL
    SESSION
    LENGTH
    NAVIGATION
    HISTORY
    SCROLL
    POSITION
    proximity
    LOCATION
    VELOCITY
    WEATHER
    CONNECTION
    STABILITY
    HISTORICAL
    BEHAVIOR
    MOTION

    View Slide

  18. demo

    View Slide

  19. HOW DO I USE IT
    Programming principles
    https://www.flickr.com/photos/j_regan/6454408915/in/photostream/

    View Slide

  20. game development
    A quick side track

    View Slide

  21. Game development turned out to be
    more difficult than expected.

    View Slide

  22. How to make these systems play nice together…
    Particle engine
    Achievement dispenser
    Game loop
    Render engine
    Collision detection

    View Slide

  23. How to make these systems play nice together…
    I had no clue…

    View Slide

  24. My developer skills were lacking, I
    needed engineering skills.

    View Slide

  25. View Slide

  26. View Slide

  27. View Slide

  28. The most important take-away…

    View Slide

  29. Single Responsibility Principle

    View Slide

  30. Using this principle while examining the
    responsive web I found why my code
    spiralled out of control each time.

    View Slide

  31. A typical piece of code was…
    Feature testing
    Waiting for
    DOMContentLoaded
    Monitoring events
    Expecting other
    code

    View Slide

  32. So in the next project, I separated all
    code using modules based on AMD.

    View Slide

  33. I needed to build an entity that could
    load those modules without taking too
    much responsibility.

    View Slide

  34. That entity is Conditioner.
    And it’s build on the following
    3 principles.

    View Slide

  35. 1. module isolation
    A strict separation between modules

    View Slide

  36. Modules are separated for maintainability.

    View Slide

  37. You bind modules in the HTML itself.

    View Slide

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

    View on GoogleMaps


    View Slide

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


    var exports = function GoogleMap(element) {


    };


    return exports;


    });

    View Slide

  40. document.querySelectorAll("[data-module]");

    View Slide

  41. Conditioner measures context and will load
    all relevant modules without knowing
    anything about them.
    Just that they’re bound with data-module.

    View Slide

  42. 2. module decoupling
    Making modules environment agnostic

    View Slide

  43. Setup context parameters using the
    “data-conditions” attribute.

    View Slide

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

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

    View on GoogleMaps


    View Slide

  45. A condition consists of a monitor and
    an expected value for said monitor.

    View Slide

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

    View Slide

  47. window
    element
    media
    pointer
    connection
    available monitors
    width, height
    visible, width, height
    query, supported
    near, fine
    any

    View Slide

  48. Build your own custom monitors.

    View Slide

  49. monitor/light.js
    {

    trigger:{

    'devicelight':window

    },

    test:{

    'min-lumen':function(data,event) {

    return data.expected <= event.value;

    }

    }

    }

    View Slide

  50. light:{min-lumen:200}

    View Slide

  51. Combine monitors in expressions.
    media:{…} and not (element:{…} or pointer:{…})
    Use the was operator to remember state.
    pointer:{was near}

    View Slide

  52. .is('media:{(min-width:40em)}').then(…);
    .on('media:{(min-width:40em)}',function(){…});
    API

    View Slide

  53. 3. module reusability
    Uniform configuration of module properties

    View Slide

  54. Configuration is done through so called options.

    View Slide

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


    var exports = function GoogleMap(element,options) {


    };

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

    return exports;


    });

    View Slide

  56. main.js
    conditioner.setOptions({
    modules:{
    'ui/GoogleMap':{
    options:{
    key: '123ABC'
    }
    }
    }
    };

    View Slide

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

    data-conditions="media:{(min-width:350px)}"

    data-options="type:terrain">

    View on GoogleMaps


    View Slide

  58. Conditioner automatically merges
    these option objects.

    View Slide

  59. {
    zoom: 10,
    type: ‘map’,
    key: null
    }
    {
    key: ’123ABC’
    }
    ‘type:terrain’
    module website element

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  63. new GoogleMap(element,{
    zoom: 10,
    type: 'terrain',
    key: '123ABC'
    });

    View Slide

  64. loose ends
    Pro’s, con’s and future developments

    View Slide

  65. Fast development;
    Separate requests;
    Save CPU cycles;
    Pros

    View Slide

  66. Separate requests;
    CPU cycles;
    It’s a framework;
    CONS

    View Slide

  67. Currently working on
    various improvements.
    “Always looking for
    feedback on the idea and
    execution.”

    View Slide

  68. Mr. Miyagi
    “Every piece of code
    should only have one
    responsibility.”

    View Slide