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
2. Freelance Front-end Developer Rik Schennink @rikschennink
4. Origins Initialisation logic drama
5. Writing maintainable JavaScript for big web platforms is though.
6. index.html <a href=“http://maps.google.com/?ll=51.741,3.822" class="google-map">
 View Booking.com Headquarters on GoogleMaps
 </a>
7. ui/GoogleMap.js var GoogleMap = (function() {
 
 var exports = function GoogleMap(element) {
 
 };
 
 return exports;
 
 }());
8. <script href=“ui/GoogleMap.js”></script> <script> // init start var elements = Array.from( document.getElementsByClassName(‘google-map’) ); elements.forEach(function(element) { new GoogleMap(element); }); // more init logic here index.html
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
10. Our init logic was starting to show cracks.
11. 1024px
12. 1024px 320px 768px
13. no pixels lot’s of pixels
14. no pixels lot’s of pixels touch mouse gesture remote keyboard game controller
15. no pixels lot’s of pixels touch mouse pen gesture remote voice keyboard virtual game controller
16. The web is quite an intense environment.
17. HTML works everywhere. “CSS and JavaScript are the changing factors.”
18. Not device types but features are of interest. “User moves his mouse… and the viewport is pretty wide…”
19. Functionality might not stay relevant during the entire session. “A rotation of the device can invalidate a Google Map”
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
21. We have to be aware of other context parameters. “Can’t treat every user as if they’re sitting at a desk.”
22. on context And how it relates to features
23. Features are stable, context is always changing
24. Detect features render view Done
25. Detect features render view update Start monitoring context “allows cookies” “rotates viewport” update “button tapped” update “has scrolled down” update
26. “The framework should measure the users’ context and fine-tune the interface so it fits perfectly.”
27. let’s do a demo
28. HOW Does it work Three principles
29. 1. modules are isolated A strict separation between modules
30. ui/GoogleMap.js define(function() {
 
 var exports = function GoogleMap(element) {
 
 };
 
 return exports;
 
 });
31. ui/GoogleMap.js export default class GoogleMap { constructor(element) { } };
32. Modules are bound to the DOM using data attributes instead of classes.
33. index.html <a href="http://maps.google.com/?ll=51.741,3.822"
 data-module="ui/GoogleMap">
 View Booking.com Headquarters on GoogleMaps
 </a>
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
35. Making modules environment agnostic 2. focus on functionality
36. Setup functionality that monitors context.
37. window element media pointer width, height visible, width, height query, supported near, fine
38. Supply context parameters to Conditioner using data attributes.
39. index.html <a href="http://maps.google.com/?ll=51.741,3.822"
 data-module="ui/GoogleMap"
 data-conditions="media:{(min-width:40em)}">
 View Booking.com Headquarters on GoogleMaps
 </a>
40. media:{(min-width:40em)} <monitor>:{<expected-value>}
41. Extend with your own monitors.
42. monitor/light.js // some boilerplate here {
 trigger:{
 'devicelight':window
 },
 test:{
 ‘max-level’:function(data, event) {
 return event.level < data.expected;
 }
 }
 }
43. index.html <a href="http://maps.google.com/?ll=51.741,3.822"
 data-module="ui/GoogleMap"
 data-conditions="light:{max-level:5}">
 View Booking.com Headquarters on GoogleMaps
 </a>
44. media:{(min-width:40em)} and not session:{first}
45. 3. configuration standard Uniform configuration of module properties
46. Configuration is done through so called options.
47. ui/GoogleMap.js define(function(){
 
 var exports = function GoogleMap(element, options) {
 
 }; 
 exports.options = { zoom:10, type:'map', key:null }; 
 return exports;
 
 });
48. main.js conditioner.init({ modules:{ 'ui/GoogleMap':{ options:{ key:'123ABC' } } } }
49. index.html <a href="http://maps.google.com/?ll=51.741,3.822"
 data-module="ui/GoogleMap"
 data-conditions="media:{(min-width:40em)}"
 data-options="type:terrain">
 View Booking.com Headquarters on GoogleMaps
 </a>
50. Conditioner automatically merges these option objects.
51. { zoom: 10, type: ‘map’, key: null }
52. { zoom: 10, type: ‘map’, key: ’123ABC’ }
53. { zoom: 10, type: ‘terrain’, key: ’123ABC’ }
54. require(‘ui/GoogleMap', function(Module) { new Module(element, { zoom: 10, type: 'terrain', key: '123ABC' }); }); init.js
55. what does this give me Closing statements
56. development advantages
57. voice keyboard virtua game controller LIGHT LEVEL SESSION duration LOCATION velocity TIME CO S Sounds of the Ocean
58. Project B Project A Project C Without Conditioner
59. Available Enhancements
60. context super powers
61. GET 30% OFF On your purchase available only 30 minutes. Enter your email address here GET MY FREE COUPON
63. Favorites Favorites 0 x 5 x 20 x interactions:
64. “Conditioner helps you embrace all these different contexts instead of fight against them”
65. Thanks!