Slide 1

Slide 1 text

Demystifying JavaScript You don't need jQuery Todd Motto - Lead front-end engineer Appsbroker

Slide 2

Slide 2 text

Who? @toddmotto Lead front-end engineer @appsbroker Developer Expert at Google Open source on github.com/toddmotto Partnered with Intel in 2013 · · · · · 2/55

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Misconceptions of jQuery

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Misconceptions of JavaScript

Slide 7

Slide 7 text

Misconceptions: JavaScript... is too difficult to learn isn't cross-browser without writing loads of code isn't necessary because jQuery exists · · · 7/55

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

JavaScript is the only language people feel like they don't need to learn to use “ ” Douglas Crockford PayPal

Slide 10

Slide 10 text

Power of jQuery What jQuery has done for us

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

JavaScript has listened What's in store for the future of JavaScript

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Cross-browser inconsistencies won't be around forever We're not going to need huge libraries to abstract JavaScript problems

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

What now? Can we use existing knowledge to transition?

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Selectors: performance jsperf.com/selectors-fowd 18/55

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Class manipulation: performance jsperf.com/addclass-versus-classlist-api 20/55

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Get/set attributes: performance jsperf.com/get-set-attrs-jquery-versus-javascript-fowd 22/55

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Event listeners: performance jsperf.com/jquery-on-versus-ael-fowd 24/55

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

DOM Ready: performance jsperf.com/js-jquery-ready-fowd 26/55

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

CSS manipulation: performance jsperf.com/jquery-js-css-fowd 28/55

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Ajax requests: performance jsperf.com/jquery-ajax-xhr-fowd 31/55

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Array looping: performance jsperf.com/jquery-each-vs-js-foreach-for 33/55

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Object looping: performance jsperf.com/jquery-each-versus-for-in-js-fowd 35/55

Slide 36

Slide 36 text

At the very least, make sure you know what jQuery is doing for you, and what it's not. “ ” youmightnotneedjquery.com HubSpot

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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. “ ”

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

HTML5 needs JavaScript, not jQuery. “ ”

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

The future is rapidly approaching, and it's a lot of JavaScript. “ ”

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

Thank you! speakerdeck.com/toddmotto twitter @toddmotto www toddmotto.com github github.com/toddmotto