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.

F3c93cbf28ac15eab9655246e5667965?s=128

Rik Schennink

April 08, 2015
Tweet

Transcript

  1. 4.

    Writing maintainable JavaScript for big web platforms is though. Now

    do it for the multi device web, k-thanks-bye!
  2. 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…”
  3. 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
  4. 18.
  5. 22.

    How to make these systems play nice together… Particle engine

    Achievement dispenser Game loop Render engine Collision detection
  6. 25.
  7. 26.
  8. 27.
  9. 30.

    Using this principle while examining the responsive web I found

    why my code spiralled out of control each time.
  10. 31.

    A typical piece of code was… Feature testing Waiting for

    DOMContentLoaded Monitoring events Expecting other code
  11. 33.

    I needed to build an entity that could load those

    modules without taking too much responsibility.
  12. 41.

    Conditioner measures context and will load all relevant modules without

    knowing anything about them. Just that they’re bound with data-module.
  13. 51.

    Combine monitors in expressions. media:{…} and not (element:{…} or pointer:{…})

    Use the was operator to remember state. pointer:{was near}
  14. 55.

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


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

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

    ’123ABC’ } ‘type:terrain’ module website element