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.

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