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)

1. Vanilla JS*
Théodore 'nod_' Biadala
JS Maintainer for Drupal core
DrupalCon, Amsterdam 2014

2. Vanilla JS*
Context

3. D8 Vanilla JS
active-link.js
announce.js
drupal.js

4. jQuery
Addicted to sugar

5. Duty to the web
Browsers improved
Use it or lose it
Help make the web better

6. DDrraawwiinngg tthhee lliinnee
Browser support
Code cleaniness
Team knowledge
Performance–Maintainability–Time

7. D8 Polyfills
classList
matchMedia
pictureFill

8. *Falling short
Event handling still sucks
AJAX handling too

9. MMiiccrroo lliibbrraarriieess

10. D8 micro libraries
domready

11. Micro libraries
One feature
A little bit of sugar
Smallest size possible

12. Micro libraries
Events — bean, microevent, zoe…
Ajax — Reqwest, http.js, ajax…
Many more at microjs.com

13. Problems
Duplication
Bugs are spread out
Inconsistent quality

14. Hybrid approach

15. Size of micro libraries
with quality of jQuery

16. Hybrid approach
core
Event
Sizzle
AJAX

17. Custom Builds !
(kb, minified + gziped)
All — 29.1
Sizzle — 8.6
Core — 2.2
Event — 6.9
Ajax — 7.0
Manipulation — 6.8
Traversing — 4.1

18. Custom Builds !
(kb, minified + gziped)
All — 29.1
Sizzle — 8.6
Core — 2.2
Event — 6.9
Ajax — 7.0
Manipulation — 6.8
Traversing — 4.1

19. Custom Builds !
(kb, minified + gziped)
All — 29.1
Sizzle — 8.6
Core — 2.2
Event — 6.9
Ajax — 7.0
Event+Ajax — 10.4
Manipulation — 6.8
Traversing — 4.1

20. Static builds

21. “franken-jQuery”
#1541860-62

22. Vanilla JS*
Examples

23. ES5
kangax.github.io/compat-table/es5/

24. Array
[1, 2, 3, 4].forEach(doSomething);
[1, 2, 3, 4].map(doSomething);
[1, 2, 3, 4].filter(doSomething);

25. DOM + Array
var lis = document.querySelectorAll('li') ;
Array.prototype.forEach.call(lis, doSomething) ;

26. Object
Object.keys({ index1 : 1, index2 : 2})
.forEach(doSomething) ;

27. Function
doSomething.bind(thisObject) ;

28. querySelector(All)
document.querySelectorAll('.active') ;
document.querySelector('#edit-username') ;

29. classList
div.classList.remove('active');
div.classList.add('active');
div.classList.toggle('element-hidden');
div.classList.contains('active');

30. DOM DOM DOM DOM
p1.insertAdjacentHTML(position, html) ;
<!-- beforebegin --><p><!-- afterbegin -->
Foo
<!-- beforeend --></p><!-- afterend -->

32. Mobile-first is Vanilla-first
Help make « Franken-jQuery »

33. Discussion
Got code ?
Where do you draw the line ?
What can Drupal do to help you ?

34. Thanks !
Théodore BIADALA
@nod_
theodore@biadala.net