The document discusses the use of vanilla JavaScript in Drupal development, highlighting its benefits over jQuery, particularly in terms of performance and maintainability. It emphasizes the importance of clean code, browser support, and the effectiveness of micro libraries for specific tasks. The presentation also addresses common issues with AJAX handling and event management in JavaScript, proposing a hybrid approach that combines the strengths of both vanilla JS and jQuery.

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