Demystifying JavaScript: You don't need jQuery

Future of Web Design: 2014, 45 minute talk on how jQuery developers can break into learning JavaScript through new and standardised APIs. Demystifies how simple JavaScript can really be alongside jQuery examples.

Transcript

1. Demystifying JavaScript You don't need jQuery Todd Motto - Lead front-end engineer Appsbroker
2. Who? @toddmotto Lead front-end engineer @appsbroker Developer Expert at Google Open source on github.com/toddmotto Partnered with Intel in 2013 · · · · · 2/55
3. Today's session Misconceptions of jQuery and JavaScript Evaluate why we use jQuery, is it necessary? Why JavaScript skills are important Take existing knowledge of jQuery to learn JavaScript Advantages/performance measures of JS/jQuery · · · · · 3/55
4. Misconceptions of jQuery
5. Misconceptions: jQuery... helps me write less code will always have me covered is the only way to develop front-end code is a must for cross-browser code is a must for complex selections · · · · · 5/55
6. Misconceptions of JavaScript
7. Misconceptions: JavaScript... is too difficult to learn isn't cross-browser without writing loads of code isn't necessary because jQuery exists · · · 7/55
8. What have misconceptions done to JavaScript? Fear of JavaScript Reliance on jQuery New developers learning only jQuery Hard to find JavaScript resources/answers Obscured what JavaScript really is "Just use jQuery"... · · · · · · 8/55
9. JavaScript is the only language people feel like they don't need to learn to use “ ” Douglas Crockford PayPal
10. Power of jQuery What jQuery has done for us
11. What jQuery has done for us Came at the right time Cross-browser consistencies Easy and consistent API Short learning curve Selectors (Sizzle.js) Class manipulation Great event methods Makes difficult stuff a breeze (Ajax/XHR, animation) · · · · · · · · 11/55
12. JavaScript has listened What's in store for the future of JavaScript
13. The time is now Cross-browser consistencies (ECMAScript-262 standards) Easy and consistent APIs (Prototype methods) Shorter learning curve Selectors (querySelector/querySelectorAll) Class manipulation (classList API) Event standards (addEventListener) Allows developers to build micro libs (Ajax/XHR, animation) · · · · · · · 13/55
14. Cross-browser inconsistencies won't be around forever We're not going to need huge libraries to abstract JavaScript problems
15. Why do I need to learn this stuff? Learning JavaScript is a one-time investment JavaScript performance far outweighs jQuery's Reliance on jQuery isn't sustainable Total control and understanding over what you write jQuery is heavily DOM focused (JS is on the server now too!) JavaScript and HTML5 are the future! · · · · · · 15/55
16. What now? Can we use existing knowledge to transition?
17. Selectors: syntax jsfiddle.net/toddmotto/g5t2K / / ' . c l a s s e s ' , ' [ a t t r i b u t e s ] ' , ' # i d s ' $ ( e l e m ) ; J Q U E R Y / / ' . c l a s s e s ' , ' [ a t t r i b u t e s ] ' , ' # i d s ' d o c u m e n t . q u e r y S e l e c t o r ( e l e m ) ; d o c u m e n t . q u e r y S e l e c t o r A l l ( e l e m s ) ; J A V A S C R I P T 17/55
18. Selectors: performance jsperf.com/selectors-fowd 18/55
19. Class manipulation: syntax jsfiddle.net/toddmotto/Cst3L / / j Q u e r y w r a p s y o u r c o d e i n i t s o w n O b j e c t / / w h i c h c o n t a i n s t h e a d d C l a s s ( ) m e t h o d $ ( e l e m ) . a d d C l a s s ( ' f o w d ' ) ; J Q U E R Y / / J a v a S c r i p t u s e s a D O M T o k e n L i s t t o c o n t a i n / / t h e c l a s s n a m e s , r e t u r n e d v i a t h e c l a s s L i s t O b j e c t e l e m . c l a s s L i s t . a d d ( ' f o w d ' ) ; J A V A S C R I P T 19/55
20. Class manipulation: performance jsperf.com/addclass-versus-classlist-api 20/55
21. Get/set attributes: syntax jsfiddle.net/toddmotto/ScrXm $ ( e l e m ) . a t t r ( ' d a t a - j q u e r y ' , ' t e s t ' ) ; / / s e t $ ( e l e m ) . a t t r ( ' d a t a - j q u e r y ' ) ; / / g e t J Q U E R Y e l e m . s e t A t t r i b u t e ( ' d a t a - j q u e r y ' , ' t e s t ' ) ; / / s e t e l e m . g e t A t t r i b u t e ( ' d a t a - j q u e r y ' ) ; / / g e t J A V A S C R I P T 21/55
22. Get/set attributes: performance jsperf.com/get-set-attrs-jquery-versus-javascript-fowd 22/55
23. Event listeners: syntax jsfiddle.net/toddmotto/2jNhL $ ( e l e m ) . o n ( ' c l i c k ' , f u n c t i o n ( ) { } ) ; J Q U E R Y e l e m . a d d E v e n t L i s t e n e r ( ' c l i c k ' , f u n c t i o n ( ) { } ) ; J A V A S C R I P T 23/55
24. Event listeners: performance jsperf.com/jquery-on-versus-ael-fowd 24/55
25. DOM Ready: syntax $ ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) { } ) ; J Q U E R Y d o c u m e n t . a d d E v e n t L i s t e n e r ( ' D O M C o n t e n t L o a d e d ' , f u n c t i o n ( ) { } ) ; J A V A S C R I P T 25/55
26. DOM Ready: performance jsperf.com/js-jquery-ready-fowd 26/55
27. CSS manipulation: syntax jsfiddle.net/toddmotto/fjDm5 / / c r e a t e s a n O b j e c t , w i l l l o o p i n t e r n a l l y $ ( e l e m ) . c s s ( { " b a c k g r o u n d " : " # 0 0 0 " , " c o l o r " : " # f f f " } ) ; J Q U E R Y / / e x t e n d t h e S t y l e O b j e c t , p u r e w r i t e , n o l o o p s v a r e l e m = d o c u m e n t . q u e r y S e l e c t o r ( e l e m ) ; e l e m . s t y l e . b a c k g r o u n d = ' # 0 0 0 ' ; e l e m . s t y l e . c o l o r = ' # f f f ' ; J A V A S C R I P T 27/55
28. CSS manipulation: performance jsperf.com/jquery-js-css-fowd 28/55
29. Ajax requests: syntax (1/2) jsfiddle.net/toddmotto/WU24r v a r u r l = ' / / m a p s . g o o g l e a p i s . c o m / m a p s / a p i / g e o c o d e / j s o n ? a d d r e s s = L o n d o n + U K & s e n s o r = f a l s e ' ; $ . a j a x ( u r l ) . d o n e ( f u n c t i o n ( d a t a ) { c o n s o l e . l o g ( ' $ . a j a x ' , d a t a ) ; / / d o n e } ) . f a i l ( f u n c t i o n ( ) { / / f a i l } ) . a l w a y s ( f u n c t i o n ( ) { / / c o m p l e t e } ) ; J Q U E R Y 29/55
30. Ajax requests: syntax (2/2) jsfiddle.net/toddmotto/WU24r v a r u r l = ' / / m a p s . g o o g l e a p i s . c o m / m a p s / a p i / g e o c o d e / j s o n ? a d d r e s s = L o n d o n + U K & s e n s o r = f a l s e ' ; v a r x h r = n e w X M L H t t p R e q u e s t ( ) ; x h r . o p e n ( ' G E T ' , u r l , t r u e ) ; x h r . o n r e a d y s t a t e c h a n g e = f u n c t i o n ( ) { i f ( x h r . r e a d y S t a t e = = = 4 ) { i f ( x h r . s t a t u s = = = 2 0 0 ) { c o n s o l e . l o g ( ' X M L H t t p R e q u e s t ( ) ' , x h r . r e s p o n s e T e x t ) ; / / d o n e } e l s e { / / f a i l } } } ; x h r . s e n d ( ) ; J A V A S C R I P T 30/55
31. Ajax requests: performance jsperf.com/jquery-ajax-xhr-fowd 31/55
32. Array looping: syntax jsfiddle.net/toddmotto/2QLwV v a r o n e = [ 5 2 , 9 7 , 3 3 , 2 1 , 7 ] ; $ . e a c h ( o n e , f u n c t i o n ( i n d e x , v a l u e ) { c o n s o l e . l o g ( ' o n e : ' , i n d e x , v a l u e ) ; } ) ; J Q U E R Y v a r t w o = [ 5 2 , 9 7 , 3 3 , 2 1 , 7 ] ; t w o . f o r E a c h ( f u n c t i o n ( v a l u e , i n d e x ) { c o n s o l e . l o g ( ' t w o : ' , i n d e x , v a l u e ) ; } ) ; J A V A S C R I P T 32/55
33. Array looping: performance jsperf.com/jquery-each-vs-js-foreach-for 33/55
34. Object looping: syntax jsfiddle.net/toddmotto/QGyMR v a r o n e = { n a m e : ' T o d d ' , l o c a t i o n : ' U K ' } ; $ . e a c h ( o n e , f u n c t i o n ( i n d e x , v a l u e ) { c o n s o l e . l o g ( ' o n e : ' , i n d e x , v a l u e ) ; } ) ; J Q U E R Y v a r t w o = { n a m e : ' T o d d ' , l o c a t i o n : ' U K ' } ; f o r ( v a r p r o p i n t w o ) { c o n s o l e . l o g ( ' t w o : ' , p r o p , t w o [ p r o p ] ) ; } J A V A S C R I P T 34/55
35. Object looping: performance jsperf.com/jquery-each-versus-for-in-js-fowd 35/55
36. At the very least, make sure you know what jQuery is doing for you, and what it's not. “ ” youmightnotneedjquery.com HubSpot
37. Browser support of JS APIs querySelector/querySelectorAll: IE8+ (CSS2 selectors for IE8) setAttribute/getAttribute: IE6+ classList: IE10+, Chrome etc. Array forEach: IE9+ Object for-in: IE6+ addEventListener: IE9+ DOMContentLoaded: IE9+ Style Object (elem.style.color = '#fff'): IE6+ XMLHttpRequest: IE7+ (ActiveXObject for <IE7) · · · · · · · · · 37/55
38. What if I want to use the above, but need legacy support? Polyfill when appropriate (github.com/modernizr) Try a micro-library or write a wrapper to provide fallbacks Use jQuery if it makes sense! · · · 38/55
39. When to use jQuery IE6-8... probably For complex things When it makes sense to, don't rewrite existing functionality When you're saving time! When you're saving a lot of code When you're relying on advanced features that aren't polyfilled · · · · · · 39/55
40. You don't need to be an expert, but JavaScript skills will help you better understand the language as well as any libraries you decide to choose. “ ”
41. Refactor: Selectors/classes (1/2) / / c a c h e t h e j Q u e r y O b j e c t + s e l e c t o r v a r $ n a v = $ ( ' . n a v ' ) ; / / f u n c t i o n t o t o g g l e t h e n a v v a r t o g g l e N a v = f u n c t i o n ( ) { i f ( $ ( t h i s ) . h a s C l a s s ( ' a c t i v e ' ) ) { $ ( t h i s ) . r e m o v e C l a s s ( ' a c t i v e ' ) ; } e l s e { $ ( t h i s ) . a d d C l a s s ( ' a c t i v e ' ) ; } } ; / / b i n d e v e n h a n d l e r ( s ) n a v . o n ( ' c l i c k ' , t o g g l e N a v ) ; J Q U E R Y 41/55
42. Refactor: Selectors/classes (2/2) / / d r o p t h e n e w j Q u e r y O b j e c t , r e v e r t t o q u e r y S e l e c t o r v a r n a v = d o c u m e n t . q u e r y S e l e c t o r ( ' . n a v ' ) ; / / f u n c t i o n d e c l a r a t i o n r e m a i n s , b u t t h e ` t h i s ` v a l u e i s n ' t / / p a s s e d i n t o j Q u e r y - w e r i d e o f f t h e e l e m e n t ' s c l a s s L i s t O b j e c t v a r t o g g l e N a v = f u n c t i o n ( ) { i f ( t h i s . c l a s s L i s t . c o n t a i n s ( ' a c t i v e ' ) ) { t h i s . c l a s s L i s t . r e m o v e ( ' a c t i v e ' ) ; } e l s e { t h i s . c l a s s L i s t . a d d ( ' a c t i v e ' ) ; } } ; / / u s e t h e s t a n d a r d i s e d A E L n a v . a d d E v e n t L i s t e n e r ( ' c l i c k ' , t o g g l e N a v , f a l s e ) ; J A V A S C R I P T 42/55
43. Refactor: Element loops (1/2) / / j Q u e r y s t o r e s e l e m e n t s i n a n A r r a y $ ( ' . i t e m s ' ) . e a c h ( f u n c t i o n ( i n d e x , v a l u e ) { v a r i t e m = v a l u e ; } ) ; J A V A S C R I P T 43/55
44. Refactor: Element loops (2/2) / / J a v a S c r i p t u s e s N o d e L i s t s w i t h q u e r y S e l e c t o r / q u e r y S e l e c t o r A l l / / u s i n g f o r E a c h h e r e w o u l d n ' t w o r k , N o d e L i s t s a r e d i f f e r e n t t o A r r a y s / / a s t h e i r P r o t o t y p e O b j e c t s d o n o t c o n t a i n t h e f o r E a c h p r o p e r t y v a r i t e m s = d o c u m e n t . q u e r y S e l e c t o r A l l ( ' . i t e m s ' ) ; f o r ( v a r i = 0 ; i < i t e m s . l e n g t h ; i + + ) { v a r i t e m = i t e m s [ i ] ; } J A V A S C R I P T 44/55
45. HTML5 needs JavaScript, not jQuery. “ ”
46. HTML5 + JS: localStorage v a r u s e r n a m e = ' T o d d ' ; l o c a l S t o r a g e . s e t I t e m ( ' n a m e ' , u s e r n a m e ) ; / / { n a m e : ' T o d d ' } J A V A S C R I P T 46/55
47. HTML5 + JS: Video < v i d e o s r c = " m y a w e s o m e v i d . m p 4 " c l a s s = " v i d e o - e l e m " > < / v i d e o > < a h r e f = " # " c l a s s = " v i d e o - p l a y " > P l a y < / a > < a h r e f = " # " c l a s s = " v i d e o - p a u s e " > P l a y < / a > J A V A S C R I P T v a r v i d e o = d o c u m e n t . q u e r y S e l e c t o r ( ' . v i d e o - e l e m ' ) ; v a r p l a y = d o c u m e n t . q u e r y S e l e c t o r ( ' . v i d e o - p l a y ' ) ; v a r p l a y V i d e o = f u n c t i o n ( ) { v i d e o . p l a y ( ) ; } ; p l a y . a d d E v e n t L i s t e n e r ( ' c l i c k ' , p l a y V i d e o , f a l s e ) ; J A V A S C R I P T 47/55
48. HTML5 + JS: Fullscreen v a r g o F u l l S c r e e n = f u n c t i o n ( e l e m ) { i f ( e l e m . r e q u e s t F u l l s c r e e n ) { e l e m . r e q u e s t F u l l s c r e e n ( ) ; } e l s e i f ( e l e m . m o z R e q u e s t F u l l S c r e e n ) { e l e m . m o z R e q u e s t F u l l S c r e e n ( ) ; } e l s e i f ( e l e m . w e b k i t R e q u e s t F u l l s c r e e n ) { e l e m . w e b k i t R e q u e s t F u l l s c r e e n ( ) ; } e l s e i f ( e l e m . m s R e q u e s t F u l l s c r e e n ) { e l e m . m s R e q u e s t F u l l s c r e e n ( ) ; } } g o F u l l S c r e e n ( d o c u m e n t . d o c u m e n t E l e m e n t ) ; J A V A S C R I P T 48/55
49. HTML5 + JS: Geolocation i f ( n a v i g a t o r . g e o l o c a t i o n ) { n a v i g a t o r . g e o l o c a t i o n . g e t C u r r e n t P o s i t i o n ( f u n c t i o n ( p o s ) { / / p o s . c o o r d s . l a t i t u d e / / p o s . c o o r d s . l o n g t i t u d e } ) ; } e l s e { / / n o G e o s u p p o r t } J A V A S C R I P T 49/55
50. HTML5 + JS: Canvas < c a n v a s > < / c a n v a s > J A V A S C R I P T v a r c a n v a s = d o c u m e n t . q u e r y S e l e c t o r ( ' c a n v a s ' ) ; v a r c t x = c a n v a s . g e t C o n t e x t ( ' 2 d ' ) ; c t x . f i l l S t y l e = ' # f f 0 0 0 ' ; c t x . f i l l R e c t ( 0 , 0 , 1 5 0 , 7 5 ) ; J A V A S C R I P T 50/55
51. HTML5 + JS: History API / / g o b a c k w a r d w i n d o w . h i s t o r y . b a c k ( ) ; / / g o f o r w a r d w i n d o w . h i s t o r y . f o r w a r d ( ) ; / / s p e c i f i c p o i n t s , b a c k 2 w i n d o w . h i s t o r y . g o ( - 2 ) ; / / s p e c i f i c p o i n t s , f o r w a r d 2 w i n d o w . h i s t o r y . g o ( 2 ) ; J A V A S C R I P T 51/55
52. HTML5 + JS: Web RTC i f ( n a v i g a t o r . g e t U s e r M e d i a ) { n a v i g a t o r . g e t U s e r M e d i a ( { v i d e o : t r u e , a u d i o : t r u e } , f u n c t i o n ( m e d i a S t r e a m ) { / / d o s o m e t h i n g w i t h m e d i a S t r e a m } , e r r o r C a l l b a c k ) ; } J A V A S C R I P T 52/55
53. The future is rapidly approaching, and it's a lot of JavaScript. “ ”
54. Summing up Learn the language, not the library Use jQuery when appropriate, not as an alternative JavaScript APIs are somewhat easier when compared Backwards compatibility won't always be needed Browser quirks may need wrapper fixes, not libraries New APIs aren't perfect, but they won't require huge abstractions Understand what's happening "under the hood" of libraries you use Don't just take the easy route, challenge yourself to understand JavaScript · · · · · · · · 54/55
55. Thank you! speakerdeck.com/toddmotto twitter @toddmotto www toddmotto.com github github.com/toddmotto