Demystifying JavaScript: You don't need jQuery

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.

B56bb22b3a4b83c6b534b4c114671380?s=128

Todd Motto

April 09, 2014
Tweet

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