vanilla js*

Download Vanilla JS*

Post on 22-Jun-2015




9 download

Embed Size (px)


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*Thodore 'nod_' BiadalaJS Maintainer for Drupal coreDrupalCon, Amsterdam 2014

2. Vanilla JS*Context 3. D8 Vanilla JSactive-link.jsannounce.jsdrupal.js 4. jQueryAddicted to sugar 5. Duty to the webBrowsers improvedUse it or lose itHelp make the web better 6. DDrraawwiinngg tthhee lliinneeBrowser supportCode cleaninessTeam knowledgePerformanceMaintainabilityTime 7. D8 PolyfillsclassListmatchMediapictureFill 8. *Falling shortEvent handling still sucksAJAX handling too 9. MMiiccrroo lliibbrraarriieess 10. D8 micro librariesdomready 11. Micro librariesOne featureA little bit of sugarSmallest size possible 12. Micro librariesEvents bean, microevent, zoeAjax Reqwest, http.js, ajaxMany more at 13. ProblemsDuplicationBugs are spread outInconsistent quality 14. Hybrid approach 15. Size of micro librarieswith quality of jQuery 16. Hybrid approachcoreEventSizzleAJAX 17. Custom Builds !(kb, minified + gziped)All 29.1Sizzle 8.6Core 2.2Event 6.9Ajax 7.0Manipulation 6.8Traversing 4.1 18. Custom Builds !(kb, minified + gziped)All 29.1Sizzle 8.6Core 2.2Event 6.9Ajax 7.0Manipulation 6.8Traversing 4.1 19. Custom Builds !(kb, minified + gziped)All 29.1Sizzle 8.6Core 2.2Event 6.9Ajax 7.0Event+Ajax 10.4Manipulation 6.8Traversing 4.1 20. Static builds 21. franken-jQuery#1541860-62 22. Vanilla JS*Examples 23. 24. Array[1, 2, 3, 4].forEach(doSomething);[1, 2, 3, 4].map(doSomething);[1, 2, 3, 4].filter(doSomething); 25. DOM + Arrayvar lis = document.querySelectorAll('li') ;, doSomething) ; 26. ObjectObject.keys({ index1 : 1, index2 : 2}).forEach(doSomething) ; 27. FunctiondoSomething.bind(thisObject) ; 28. querySelector(All)document.querySelectorAll('.active') ;document.querySelector('#edit-username') ; 29. classListdiv.classList.remove('active');div.classList.add('active');div.classList.toggle('element-hidden');div.classList.contains('active'); 30. DOM DOM DOM DOMp1.insertAdjacentHTML(position, html) ;


31. Mobile-first is Vanilla-firstHelp make Franken-jQuery 32. DiscussionGot code ?Where do you draw the line ?What can Drupal do to help you ? 33. Thanks !Thodore