Vanilla Javascript

Small presentation i gave to my colleagues to convert them to use more native JavaScript instead of jQuery.

Transcript

1. Vanilla Javascript Faster code and more fun! / Anthony Ringoet @mylittletony
2. jQuery provides an intuitive and slick api ajax dom traversing …
3. Vanilla Closer to the metal = faster. Modern browsers = possibility to dump some jQuery Alternatives … Zepto Ender custom built jQuery (2.0) the tiny min.js
4. note: jQuery is not bad
5. Overview Show simple tasks with jQuery and vanilla alternatives. Selectors and CSS Events Attributes DOM manipulation
6. Selectors and CSS
7. Get all by 'css selector' / / j q u e r y $ ( " a " ) ; / / n a t i v e d o c u m e n t . g e t E l e m e n t B y T a g N a m e ( " a " ) ;
8. Get all class/id / / j q u e r y $ ( " . w h a t e v e r " ) ; / / n a t i v e d o c u m e n t . q u e r y S e l e c t o r A l l ( " . w h a t e v e r " ) ; d o c u m e n t . q u e r y S e l e c t o r ( " . w h a t e v e r " ) ; / / o n l y f i r s t r e s u l t / / f a s t e r f o r c l a s s e s d o c u m e n t . g e t E l e m e n t B y C l a s s N a m e ( " w h a t e v e r " ) ; / / f o r i d ' s d o c u m e n t . g e t E l e m e n t B y I d ( " s o m e - i d " ) ;
9. Change CSS / / j q u e r y $ ( e l ) . c s s ( ' w i d t h ' , ' 5 0 p x ' ) ; / / n a t i v e e l . s t y l e . w i d t h = ' 5 0 p x ' ;
10. Performance data jsperf - hide() alternative jsperf - css() alternative
11. Events
12. Registering events / / j q u e r y e l e m e n t . b i n d ( ' c l i c k ' , f n ) ; / / o r d e l e g a t e d o c u m e n t . b o d y . o n ( ' c l i c k ' , ' . e l e m e n t S e l e c t i o n ' , f n ) ; / / n a t i v e / / s u p p o r t f r o m i e 9 a n d u p e l e m e n t . a d d E v e n t L i s t e n e r ( ' c l i c k ' , f n ) ; / / f o r o l d I E e l e m e n t . a t t a c h E v e n t ( ' o n c l i c k ' , f n ) ;
13. Attributes
14. Attributes No support issues whatsoever. / / j q u e r y $ ( e l e m e n t ) . a t t r ( ' v a l u e ' , ' f o o ' ) ; / / n a t i v e e l e m e n t . s e t A t t r i b u t e ( ' v a l u e ' , ' f o o ' ) ; e l e m e n t . i d ; e l e m e n t . h r e f ; …
15. Classes (classList ftw!) but polyfill available for < IE10 support details / / j q u e r y e l e m . a d d C l a s s ( ' f o o ' ) ; e l e m . r e m o v e C l a s s ( ' f o o ' ) ; e l e m . h a s C l a s s ( ' f o o ' ) ; / / n a t i v e e l e m . c l a s s L i s t . a d d ( ' f o o ' ) ; e l e m . c l a s s L i s t . r e m o v e ( ' f o o ' ) ; e l e m . c l a s s L i s t . c o n t a i n s ( ' f o o ' ) ;
16. DOM manipulation
17. Insert nodes A bit more complicated. Depends on what you need. / / j q u e r y $ ( e l e m e n t ) . a p p e n d ( h t m l ) ; / / n a t i v e e l e m e n t . i n n e r H T M L = h t m l ;
18. Performance data jsperf - innerText vs fragment vs append()
19. Sources Weaning yourself off jquery To hell with jQuery Native equivalents of jQuery functions MDN JavaScript