ui/GoogleMap.js
var GoogleMap = (function() {
var exports = function GoogleMap(element) {
};
return exports;
}());
Slide 8
Slide 8 text
// init start
var elements = Array.from(
document.getElementsByClassName(‘google-map’)
);
elements.forEach(function(element) {
new GoogleMap(element);
});
// more init logic here
index.html
Slide 9
Slide 9 text
// 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
Slide 10
Slide 10 text
Our init logic was starting to show cracks.
Slide 11
Slide 11 text
1024px
Slide 12
Slide 12 text
1024px
320px 768px
Slide 13
Slide 13 text
no pixels lot’s of pixels
Slide 14
Slide 14 text
no pixels lot’s of pixels
touch
mouse
gesture
remote
keyboard
game
controller
Slide 15
Slide 15 text
no pixels lot’s of pixels
touch
mouse pen
gesture
remote
voice
keyboard
virtual
game
controller
Slide 16
Slide 16 text
The web is quite an intense environment.
Slide 17
Slide 17 text
HTML works everywhere.
“CSS and JavaScript are the changing factors.”
Slide 18
Slide 18 text
Not device types but features are of interest.
“User moves his mouse… and the viewport is pretty wide…”
Slide 19
Slide 19 text
Functionality might not stay relevant during the entire session.
“A rotation of the device can invalidate a Google Map”
Slide 20
Slide 20 text
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
Slide 21
Slide 21 text
We have to be aware of other context parameters.
“Can’t treat every user as if they’re sitting at a desk.”
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
Slide 35
Slide 35 text
Making modules environment agnostic
2. focus on functionality
Slide 36
Slide 36 text
Setup functionality that
monitors context.
Slide 37
Slide 37 text
window
element
media
pointer
width, height
visible, width, height
query, supported
near, fine
Slide 38
Slide 38 text
Supply context parameters to
Conditioner using data attributes.