Download - Vanilla JS*
Vanilla JS*
Théodore 'nod_' BiadalaJS Maintainer for Drupal core
DrupalCon, Amsterdam 2014
Vanilla JS*
Context
D8 Vanilla JS
active-link.jsannounce.js
drupal.js
jQueryAddicted to sugar
Duty to the web
Browsers improved
Use it or lose it
Help make the web better
Drawing the lineDrawing the line
Browser support
Code cleaninessTeam knowledge
Performance–Maintainability–Time
D8 Polyfills
classList
matchMedia
pictureFill
*Falling short
Event handling still sucks
AJAX handling too
Micro librariesMicro libraries
D8 micro libraries
domready
Micro libraries
One featureA little bit of sugar
Smallest size possible
Micro libraries
Events — bean, microevent, zoe… Ajax — Reqwest, http.js, ajax…
Many more at microjs.com
Problems
DuplicationBugs are spread outInconsistent quality
Hybrid approach
Size of micro libraries with quality of jQuery
Hybrid approach
core
Event
Sizzle
AJAX
Custom Builds !(kb, minified + gziped)
All — 29.1Sizzle — 8.6 Core — 2.2 Event — 6.9 Ajax — 7.0
Manipulation — 6.8 Traversing — 4.1
Custom Builds !(kb, minified + gziped)
All — 29.1Sizzle — 8.6 Core — 2.2 Event — 6.9 Ajax — 7.0
Manipulation — 6.8 Traversing — 4.1
Custom Builds !(kb, minified + gziped)
All — 29.1Sizzle — 8.6 Core — 2.2 Event — 6.9 Ajax — 7.0
Event+Ajax — 10.4 Manipulation — 6.8
Traversing — 4.1
Static builds
“franken-jQuery”#1541860-62
Vanilla JS*
Examples
ES5kangax.github.io/compat-table/es5/
Array
[1, 2, 3, 4].forEach(doSomething);[1, 2, 3, 4].map(doSomething);[1, 2, 3, 4].filter(doSomething);
DOM + Array
var lis = document.querySelectorAll('li') ;Array.prototype.forEach.call(lis, doSomething) ;
Object
Object.keys({ index1 : 1, index2 : 2}) .forEach(doSomething) ;
Function
doSomething.bind(thisObject) ;
querySelector(All)
document.querySelectorAll('.active') ;document.querySelector('#edit-username') ;
classList
div.classList.remove('active');div.classList.add('active');
div.classList.toggle('element-hidden');
div.classList.contains('active');
DOM DOM DOM DOM
p1.insertAdjacentHTML(position, html) ;
<!-- beforebegin --><p><!-- afterbegin -->Foo<!-- beforeend --></p><!-- afterend -->
Mobile-first is Vanilla-first
Help make « Franken-jQuery »
Discussion
Got code ?Where do you draw the line ?
What can Drupal do to help you ?
