Tweet
Tweet

Slide 1

Slide 1 text

FRIZZ FREE JAVASCRIPT Building scalable web platforms using Conditioner.js

Slide 2

Slide 2 text

Rik Schennink @rikschennink Sr. Frontend Dev at Mirabeau

Slide 3

Slide 3 text

•  Bought house •  Renovating •  Living in a shed •  No workstation •  No connection

Slide 4

Slide 4 text

I FIND... •  I’m not writing code on my phone •  I need access to all sorts of information •  Presentation gets in the way of content •  Interaction is often very painful •  Dataplan http://www.webperformancetoday.com/2014/05/21/stop-presses-average-web-page-actually-gotten-smaller-bigger/

Slide 5

Slide 5 text

DISCLAIMER This talk is about websites

Slide 6

Slide 6 text

CONDITIONER Loads and unloads javascript modules based on environment conditions. http://conditionerjs.com

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

OBSERVATIONS IN WEB LAND Impressions that led to the development of Conditioner.js

Slide 9

Slide 9 text

•  Insane amount •  Diversity increases •  Fuzzy features DEVICES http://www.flickr.com/photos/74105777@N00/6153558098

Slide 10

Slide 10 text

CONTENT •  Information need is the same cross device •  Want to be able to share with others •  It’s presentation and interaction that differs

Slide 11

Slide 11 text

•  Fun •  Comfortable •  Stage Class FLASH

Slide 12

Slide 12 text

CORE PRINCIPLES 1. Single kickoff point 2. Content is elementary 3. Device type tells us nothing

Slide 13

Slide 13 text

FINDING SOLUTIONS Building on these three core principles

Slide 14

Slide 14 text

SINGLE KICKOFF •  Modules are bound using a single data attribute •  Easy to search for using .querySelectorAll •  Results in all nodes with bound modules

Slide 15

Slide 15 text

ELEMENTARY CONTENT •  Tidy and semantic HTML •  Don’t forget sectioning •  Presto! Mobile site done!

Slide 16

Slide 16 text

NO DEVICE DETECTION •  We need more granularity •  Feature detection is good start Modernizr Conditioner Connection API Connectivity

Slide 17

Slide 17 text

MEASURING CONTEXT •  Listen to various interaction events •  Don’t stop, context keeps changing

Slide 18

Slide 18 text

IN MODULE •  Module requires knowledge of outside world •  Can get difficult to maintain •  Can’t know if suitable before loaded

Slide 19

Slide 19 text

window.addEventListener('resize',function(e) {
 var width = window.innerWidth;
 if (width < 350) {
 // implement small ideas here
 }
 else {
 // implement big ideas here
 }
 });

Slide 20

Slide 20 text

window.addEventListener('resize',function(e) {
 var width = window.innerWidth;
 if (width < 350) {
 // implement small ideas here
 }
 else if (width < 750) {
 // implement big ideas here
 }
 else {
 // implement grand ideas here
 }
 });

Slide 21

Slide 21 text

window.addEventListener('resize',function(e) {
 var body = document.body;
 var width = window.innerWidth;
 if (width < 350) {
 // implement small ideas here
 }
 else if (width < 750 && !body.classList.contains('article')) {
 // implement big, non article page, ideas here
 }
 else {
 // implement grand ideas here
 }
 });

Slide 22

Slide 22 text

CENTRALIZED •  Conditions are easily mutable •  Modules can focus on core tasks •  Measurements can be optimized

Slide 23

Slide 23 text

THE PLAN 1. Bind behavior on data attributes 2. Enrich existing clean HTML tree 3. Central object monitors context

Slide 24

Slide 24 text

CONDITIONER Setting it all up and having fun with conditions

Slide 25

Slide 25 text

TECH •  Vanilla Javascript •  AMD and/or CommonJS •  Bring your own module loader •  Add shims for older browsers

Slide 26

Slide 26 text

BINDING A MODULE •  Add data-module attribute to node •  Setup module with JavaScript Class 
 View on GoogleMaps


Slide 27

Slide 27 text

define(function(){
 
 // constructor
 var exports = function(element) {
 // element is reference to bound node
 };
 
 // export class definition
 return exports;
 
 });

Slide 28

Slide 28 text

View on Google Maps

Slide 29

Slide 29 text

CONDITIONAL LOADING •  Catch expected activity values in statements •  Testing for media queries “:{}”   “media:{(min-­‐width:40em)}”  

Slide 30

Slide 30 text

SETTING CONDITIONS 
 View on GoogleMaps
 •  Add data-conditions attribute •  Add unload method

Slide 31

Slide 31 text

var exports = function (element) {
 // use element here
 };
 
 exports.prototype.unload = function () {
 // clean up here
 };

Slide 32

Slide 32 text

View on Google Maps “media:{(min-­‐width:350px)}”  

Slide 33

Slide 33 text

MORE POWER •  Use with ‘was’ operator to remember state •  Use parenthesis and basic logic operators “pointer:{was  near}”   “media:{…}  and  not  (element:{…}  or  window:{…})”  

Slide 34

Slide 34 text

CONFIGURING MODULES •  Inject options during load •  Flexibility •  Configuration stack

Slide 35

Slide 35 text

module    {        ‘zoom’:10,        ‘type’:‘map’,        ‘key’:null    }   page    {        ‘key’:’0123ABC’    }   node   “type:terrain”   >   >   {
 zoom: 10,
 type: 'terrain',
 key: '0123ABC'
 }

Slide 36

Slide 36 text

PASSING OPTIONS •  Add data-options attribute •  Add base options property 
 View on GoogleMaps


Slide 37

Slide 37 text

var exports = function(element,options) {
 // use element and options here
 };
 
 // set default module options here
 exports.options = {
 zoom: 10,
 type: 'map',
 key: null
 };

Slide 38

Slide 38 text

____ __ __ __ _ ______ __ ____ _ __ ____ __ __ __ _ ____ ____ __ ____ _ ______ __ ____ _ ______ __ ____ _ ____ __ ____ _ ____ ______ __ View on Google Maps “map:terrain”  

Slide 39

Slide 39 text

ALL ABOUT MONITORING CONTEXT Available monitors and how to extend

Slide 40

Slide 40 text

AVAILABLE MONITORS •  Window •  Element •  Media •  Pointer •  Connection

Slide 41

Slide 41 text

CREATE YOUR OWN! 1.  Define triggers and tests 2.  Setup as module 3.  Use in expression 4.  Done

Slide 42

Slide 42 text

{
 trigger:{
 'devicelight':window
 },
 test:{
 'min-lumen':function(data,event) {
 return data.expected <= event.value;
 }
 }
 } “light:{min-­‐lumen:200}”  

Slide 43

Slide 43 text

POSSIBILITIES? •  GPS… Near location, Velocity •  Page… Cookie support, Session duration •  External… Weather, Social •  Other?

Slide 44

Slide 44 text

•  Assumption… •  New API’s will improve precision CAREFUL!

Slide 45

Slide 45 text

PROS / CONS Not all is perfect

Slide 46

Slide 46 text

PROS •  Separate requests •  Low impact on CPU •  Quick module linking •  Portable modules

Slide 47

Slide 47 text

CONS •  Separate requests •  High impact on CPU •  Need to know what you’re doing

Slide 48

Slide 48 text

FUTURE PLANS In desparate need of your opinion

Slide 49

Slide 49 text

NEED FEEDBACK •  Why do you feel this won’t work •  Concept •  Quality •  Features •  Etc.

Slide 50

Slide 50 text

Questions? Rik Schennink @rikschennink