Javascript é fã do Python

Nessa palestra falo sobre a nova versão da especificação do Javascript, o Ecmascript 6, e mostro as novas funcionalidades que são baseadas em funcionalidades do Python.

Transcript

1. JAVASCRIPT É FÃ DO PYTHON Por / Fabio M. Costa @fabiomiranda
3. QUEM? Fabio Miranda Costa Natal - RN Engenheiro de Front End do Facebook Ex Globo.com Ex Yipit Core developer do Mootools desde 2009 Co-criador do Thumbor
4. DESIGN DE COMUNICAÇÃO COMMUNICATION DESIGN
5. ESTRUTURA 1. Porque? 2. História 3. Novidades
6. PORQUE?
7. NODE.JS A comunidade node.js está mudando o Open-Source — Gregg Caines Baterias não inclusas Desenvolvimento de bibliotecas pequenas Desenvolvimento acontece com ferramentas comuns, git e github.com
8. GITHUB
9. TIOBE
10. HISTÓRIA
11. ECMA-262 Especificação do ECMAScript TC39 Javascript é a implementação mais conhecida
12. ES3 (1999) Implementação do IE6 e 7 O que a grande maioria de nós usamos switch, RegExp, try/catch, throw ...
13. “Vamos aprender com o Python. JavaScript é muito similar ao Python” “We're going to learn from Python. JavaScript is pretty close to Python” — Brendan Eich http://www.infoworld.com/d/developer-world/update-javascript-take-cues-python-323
14. “Dados os anos de desenvolvimento do Python e similaridades com o ECMAScript, deveríamos seguir seus passos. Assim, reaproveitamos o conhecimento e experiência com design e implementação. …” “Given the years of development in Python and similarities to ECMAScript in application domains and programmer communities, we would rather follow than lead. By standing on Python's shoulders we reuse developer knowledge as well as design and implementation experience. …” — Brendan Eich http://www.infoworld.com/d/developer-world/update-javascript-take-cues-python-323
16. ES4 Abandonada
17. ES5 (2009) Firefox, Chrome, Safari, Opera Upgrade enxuto JSON, getters e setters, fn.bind() ...
18. ES6 (2013?) Previsto para dezembro de 2013 Harmony ou ES.next Muitas ideias vieram do ES4 Firefox está na frente
20. NOVIDADES DO JAVASCRIPT
21. CONFIGURAÇÃO Código javascript executado no Chrome 30 Empythoned - CPython 2.7 compilado para Javascript usando Emscripten d e f c i t a c a o ( m s g , a u t o r ) : r e t u r n ' " ' + m s g + ' " - ' + a u t o r p r i n t c i t a c a o ( ' E u d e s c o b r i q u e o J a v a s c r i p t t e m p a r t e s b o a s . ' , ' D o u g l a s C r o c k f o r d ' ) " E u d e s c o b r i q u e o J a v a s c r i p t t e m p a r t e s b o a s . " - D o u g l a s C r o c k f o r d
22. OPERADOR DE DISTRIBUIÇÃO (...) SPREAD OPERATOR
23. OPERADOR DE DISTRIBUIÇÃO - PYTHON p r i n t m a x ( 1 4 , 3 , 7 7 ) p r i n t m a x ( * [ 1 4 , 3 , 7 7 ] ) 7 7 7 7
24. OPERADOR DE DISTRIBUIÇÃO - JAVASCRIPT EXEMPLO SIMPLES / / u s o n o r m a l v a r m a x = M a t h . m a x ( 1 4 , 3 , 7 7 ) ; / / E S 5 v a r m a x = M a t h . m a x . a p p l y ( n u l l , [ 1 4 , 3 , 7 7 ] ) ; / / E S 6 v a r m a x = M a t h . m a x ( . . . [ 1 4 , 3 , 7 7 ] ) ; n ã o s u p o r t a d o n e s t e n a v e g a d o r
25. OPERADOR DE DISTRIBUIÇÃO - JAVASCRIPT v a r c a c h e = { p a l e s t r a n t e s : [ ] } ; / / E S 5 f u n c t i o n s a l v a r ( n o m e ) { v a r i t e m s = [ ] . s l i c e . c a l l ( a r g u m e n t s , 1 ) ; i t e m s . f o r E a c h ( f u n c t i o n ( i t e m ) { c a c h e [ n o m e ] . p u s h ( i t e m ) ; } ) ; } / / E S 6 f u n c t i o n s a l v a r ( n o m e , . . . i t e m s ) { i t e m s . f o r E a c h ( f u n c t i o n ( i t e m ) { c a c h e [ n o m e ] . p u s h ( i t e m ) ; } ) ; } s a l v a r ( ' p a l e s t r a n t e s ' , ' c a b r a ' , ' r o m u l o ' , ' v i c t o r ' , ' a n d r e w s ' , ' c h i c o ' ) ; c o n s o l e . l o g ( c a c h e ) ; n ã o s u p o r t a d o n e s t e n a v e g a d o r
26. PARÂMETROS DEFAULT DEFAULT PARAMETERS
27. PARÂMETROS DEFAULT - PYTHON d e f i n c r e m e n t o ( x , y = 1 ) : r e t u r n x + y p r i n t i n c r e m e n t o ( 4 ) p r i n t i n c r e m e n t o ( 4 , 2 ) 5 6
28. PARÂMETROS DEFAULT - JAVASCRIPT / / E S 5 f u n c t i o n i n c r e m e n t o ( x , y ) { y = ( a r g u m e n t s . l e n g t h = = = 1 ) ? 1 : y ; r e t u r n x + y ; } / / E S 6 f u n c t i o n i n c r e m e n t o ( x , y = 1 ) { r e t u r n x + y ; } c o n s o l e . l o g ( i n c r e m e n t o ( 4 ) ) ; c o n s o l e . l o g ( i n c r e m e n t o ( 4 , 2 ) ) ; n ã o s u p o r t a d o n e s t e n a v e g a d o r
29. PARÂMETROS DEFAULT - PYTHON d e f a d i c i o n a r _ b a c o n ( h a m b u r g u e r = [ ] ) : h a m b u r g u e r . a p p e n d ( ' b a c o n ' ) r e t u r n h a m b u r g u e r p r i n t 1 , a d i c i o n a r _ b a c o n ( ) p r i n t 2 , a d i c i o n a r _ b a c o n ( ) 1 [ ' b a c o n ' ] 2 [ ' b a c o n ' , ' b a c o n ' ]
30. PARÂMETROS DEFAULT - JAVASCRIPT f u n c t i o n a d i c i o n a r _ b a c o n ( h a m b u r g u e r = [ ] ) { h a m b u r g u e r . p u s h ( ' b a c o n ' ) ; r e t u r n h a m b u r g u e r ; } c o n s o l e . l o g ( 1 , a d i c i o n a r _ b a c o n ( ) ) ; c o n s o l e . l o g ( 2 , a d i c i o n a r _ b a c o n ( ) ) ; n ã o s u p o r t a d o n e s t e n a v e g a d o r
31. DESESTRUTURAÇÃO DESTRUCTURING
32. DESESTRUTURAÇÃO - PYTHON u m , d o i s = [ 1 , 2 ] p r i n t u m , d o i s 1 2
33. DESESTRUTURAÇÃO - JAVASCRIPT v a r [ u m , d o i s ] = [ 1 , 2 ] ; c o n s o l e . l o g ( u m , d o i s ) ; n ã o s u p o r t a d o n e s t e n a v e g a d o r
34. DESESTRUTURAÇÃO E OPERADOR DE DISTRIBUIÇÃO - JAVASCRIPT v a r [ c a b e c a , . . . c o r p o ] = [ 1 , 2 , 3 , 4 ] ; c o n s o l e . l o g ( c o r p o ) ; / / [ 2 , 3 , 4 ] n ã o s u p o r t a d o n e s t e n a v e g a d o r
35. DESESTRUTURAÇÃO - PYTHON Qual o valor de 'b'? (Python 2.7) a , * b = [ 1 , 2 , 3 , 4 ] p r i n t a , b F i l e " < s t d i n > " , l i n e 1 a , * b = [ 1 , 2 , 3 , 4 ] ^ S y n t a x E r r o r : i n v a l i d s y n t a x Funciona no python 3.3
36. DESESTRUTURAÇÃO EM OBJETOS - JAVASCRIPT v a r { g l o b o c o m , r 7 } = { g l o b o c o m : ' g l o b o . c o m ' , r 7 : ' r 7 . c o m ' } ; c o n s o l e . l o g ( g l o b o c o m , r 7 ) ; n ã o s u p o r t a d o n e s t e n a v e g a d o r
37. DESESTRUTURAÇÃO EM FUNÇÕES - JAVASCRIPT v a r a j a x = f u n c t i o n ( u r l , { a s y n c = t r u e , c a c h e = t r u e / / . . . } ) { c o n s o l e . l o g ( u r l , a s y n c , c a c h e ) ; } ; a j a x ( ' h t t p : / / p y t h o n . o r g ' , { a s y n c : f a l s e } ) ; / / ' h t t p : / / p y t h o n . o r g ' f a l s e t r u e n ã o s u p o r t a d o n e s t e n a v e g a d o r
38. GERADORES GENERATORS
39. GERADORES - PYTHON d e f e s s e n c i a i s ( ) : y i e l d ' c e l u l a r ' y i e l d ' c h a v e ' y i e l d ' c a r t e i r a ' f o r e s s e n c i a l i n e s s e n c i a i s ( ) : p r i n t e s s e n c i a l c e l u l a r c h a v e c a r t e i r a
40. GERADORES - JAVASCRIPT f u n c t i o n * e s s e n c i a i s ( ) { y i e l d ' c e l u l a r ' ; y i e l d ' c h a v e ' ; y i e l d ' c a r t e i r a ' ; } f o r ( v a r e s s e n c i a l o f e s s e n c i a i s ( ) ) { c o n s o l e . l o g ( e s s e n c i a l ) ; } " c e l u l a r " " c h a v e " " c a r t e i r a "
41. GERADORES - JAVASCRIPT f u n c t i o n * e s s e n c i a i s ( ) { y i e l d ' c e l u l a r ' ; y i e l d ' c h a v e ' ; y i e l d ' c a r t e i r a ' ; } v a r e s s e n c i a i s G e n = e s s e n c i a i s ( ) ; c o n s o l e . l o g ( e s s e n c i a i s G e n . n e x t ( ) ) ; / / { d o n e : f a l s e , v a l u e : ' c e l u l a r ' } c o n s o l e . l o g ( e s s e n c i a i s G e n . n e x t ( ) ) ; / / { d o n e : f a l s e , v a l u e : ' c h a v e ' } c o n s o l e . l o g ( e s s e n c i a i s G e n . n e x t ( ) ) ; / / { d o n e : f a l s e , v a l u e : ' c a r t e i r a ' } c o n s o l e . l o g ( e s s e n c i a i s G e n . n e x t ( ) ) ; / / { d o n e : t r u e } / / c o n s o l e . l o g ( e s s e n c i a i s G e n . n e x t ( ) ) ; / / E x c e ç ã o { " v a l u e " : " c e l u l a r " , " d o n e " : f a l s e } { " v a l u e " : " c h a v e " , " d o n e " : f a l s e } { " v a l u e " : " c a r t e i r a " , " d o n e " : f a l s e } { " d o n e " : t r u e }
42. ARRAY COMPREHENSION
43. ARRAY COMPREHENSION - PYTHON p r i n t [ i f o r i i n [ 1 , 4 , 2 , 3 , - 8 ] i f i < 3 ] [ 1 , 2 , - 8 ]
44. ARRAY COMPREHENSION - JAVASCRIPT / / E S 5 [ 1 , 4 , 2 , 3 , - 8 ] . f i l t e r ( f u n c t i o n ( i ) { r e t u r n i < 3 } ) ; / / E S 6 [ f o r ( i o f [ 1 , 4 , 2 , 3 , - 8 ] ) i f ( i < 3 ) i ] ; n ã o s u p o r t a d o n e s t e n a v e g a d o r
45. MODULOS MODULES
46. MODULOS - PYTHON # c a l c u l a d o r a / l i b / c a l c . p y d e f q u a d r a d o ( x ) : r e t u r n x * x # c a l c u l a d o r a / m a i n . p y f r o m l i b . c a l c i m p o r t q u a d r a d o a s q p r i n t q ( 3 )
47. MODULOS - JAVASCRIPT / / c a l c u l a d o r a / l i b / c a l c . j s l e t n a o E x p o r t a d o = ' a b c ' ; e x p o r t f u n c t i o n q u a d r a d o ( x ) { r e t u r n x * x ; } e x p o r t c o n s t C O N S T A N T E = 1 2 3 ; / / c a l c u l a d o r a / m a i n . j s i m p o r t { q u a d r a d o a s q , C O N S T A N T E } f r o m ' l i b / c a l c ' ; c o n s o l e . l o g ( q ( 3 ) ) ; / / e x e m p l o d e m o d u l o i n l i n e m o d u l e ' l i b / i o s ' { . . . } n ã o s u p o r t a d o n e s t e n a v e g a d o r
48. OUTRAS NOVIDADES / / c o n s t a n t e s c o n s t P A I S = ' E U A ' ; / / c l a s s e s c l a s s P r e s i d e n t e { c o n s t r u c t o r ( n o m e ) { t h i s . n o m e = n o m e ; } } c l a s s P r e s i d e n t e A m e r i c a n o e x t e n d s P r e s i d e n t e { c o n s t r u c t o r ( n o m e ) { t h i s . e s p i a o = t r u e ; s u p e r ( n o m e ) ; } / / d e f i n i ç ã o c o n c i s a d e m é t o d o s e s p i o n a r ( p a i s e s ) { / / f u n c a o s e t a p a i s e s = p a i s e s . f i l t e r ( p a i s = > p a i s . e m E x p a n s a o ( ) ) ; / / e s c o p o e m b l o c o / / ' p a i s ' é ' u n d e f i n e d ' f o r a d o b l o c o d o " f o r " f o r ( l e t p a i s o f p a i s e s ) { / / . . . } r e t u r n t r u e ; } } / / M a p , S e t , W e a k M a p , S y m b o l , q u a s i - l i t e r a l s , P r o x y , e m u i t o m a i s !
49. OBRIGADO COMUNIDADE PYTHON!
50. PERGUNTAS? fabiomcosta@gmail.com @fabiomiranda github.com/fabiomcosta facebook.com/fabiomirandacosta
51. LINKS E REFERÊNCIAS Perguntas e respostas com o TC39 na Bocoup, 18/09/2913 Histórico resumido do ES Tabela que mostra as funcionalidades do ES6 implementadas pelos navegadores Palestra excelente do Kit Cambridge sobre ES6 Post muito bom sobre as novas funcionalidades do ES6 Modulos em Javascript Ranking de popularidade de linguagens no Github Matéria do Ajaxian sobre ES4 com frases do Brendan Eich Matéria da Infoworld sobre ES4 com frases do Brendan Eich Traceur - Compilador de ES6 para ES5 Emscripten - Compilador de LLVM para Javascript Empythoned - CPython compilado para Javascript usando Emscripten