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 ?

Thanks !

Théodore BIADALA

@nod_

theodore@biadala.net