Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Todd Motto

April 09, 2014
Tweet

More Decks by Todd Motto

Other Decks in Programming

Transcript

  1. Who? @toddmotto Lead front-end engineer @appsbroker Developer Expert at Google

    Open source on github.com/toddmotto Partnered with Intel in 2013 · · · · · 2/55
  2. 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
  3. 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
  4. Misconceptions: JavaScript... is too difficult to learn isn't cross-browser without

    writing loads of code isn't necessary because jQuery exists · · · 7/55
  5. 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
  6. JavaScript is the only language people feel like they don't

    need to learn to use “ ” Douglas Crockford PayPal
  7. 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
  8. 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
  9. Cross-browser inconsistencies won't be around forever We're not going to

    need huge libraries to abstract JavaScript problems
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. At the very least, make sure you know what jQuery

    is doing for you, and what it's not. “ ” youmightnotneedjquery.com HubSpot
  22. 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
  23. 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
  24. 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
  25. 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. “ ”
  26. 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
  27. 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
  28. 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
  29. 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
  30. 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
  31. 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
  32. 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
  33. 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
  34. 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
  35. 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
  36. 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
  37. 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