vanilla js*
DESCRIPTION
Browsers APIs grew up, developers need to acknowledge it and make use of them — when appropriate. If we don't, browsers will stop caring and we're all going to have a bad time. This session will review common Drupal JS patterns found in core, contrib and projects and how they can be simplified (for some definition of simplified), pointing out frequent library abuse on the way. The topic of micro libraries will come up and I'll bring up the topic of hybrid approaches for all of us lazy programmers. We'll talk about where and how to draw the line for using a particular solution (this is a cue for the IE8 talk). Drupal 8 code will be taken as an example. The key concerns throughout the session are performance and maintainability. Unlike fanatics, I want you to be able to use what you learned knowing all the pros and cons. When you decide it's the right thing for you to use, you can trust your choice is the right one in your situation. The future is now! (for some definition of now)TRANSCRIPT
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 ?
