Successfully reported this slideshow.
JAVASCRIPT
É FÃ DO PYTHON
Por /FabioM.Costa @fabiomiranda
QUEM?
Fabio MirandaCosta
Natal-RN
Engenheiro de FrontEnd do Facebook
Ex Globo.com
Ex Yipit
Core developer do Mootools desd...
DESIGN DE COMUNICAÇÃO
COMMUNICATION DESIGN
ESTRUTURA
1. Porque?
2. História
3. Novidades
PORQUE?
NODE.JS
Acomunidadenode.jsestámudandooOpen-Source—GreggCaines
Baterias não inclusas
Desenvolvimento de bibliotecas pequena...
GITHUB
TIOBE
HISTÓRIA
ECMA-262
Especificação do ECMAScript
TC39
Javascripté aimplementação mais conhecida
ES3 (1999)
Implementação do IE6 e 7
O que agrande maioriade nós usamos
switch, RegExp, try/catch, throw ...
“Vamos aprender como Python. JavaScripté
muito similar ao Python”
“We're going to learn fromPython. JavaScriptis
pretty cl...
“Dados os anos de desenvolvimento do Python e
similaridades como ECMAScript, deveríamos
seguir seus passos. Assim, reaprov...
ES4
Abandonada
ES5 (2009)
Firefox, Chrome, Safari, Opera
Upgrade enxuto
JSON, getters e setters, fn.bind() ...
ES6 (2013?)
Previsto paradezembro de 2013
Harmonyou ES.next
Muitas ideias vieram do ES4
Firefox estánafrente
NOVIDADES DO
JAVASCRIPT
CONFIGURAÇÃO
Código javascriptexecutado no Chrome 30
Empythoned -CPython 2.7 compilado paraJavascriptusando
Emscripten
def...
OPERADOR DE DISTRIBUIÇÃO (...)
SPREAD OPERATOR
OPERADOR DE DISTRIBUIÇÃO - PYTHON
printmax(14,3,77)
printmax(*[14,3,77])
77
77
OPERADOR DE DISTRIBUIÇÃO - JAVASCRIPT
EXEMPLO SIMPLES
//usonormal
varmax=Math.max(14,3,77);
//ES5
varmax=Math.max.apply(nu...
OPERADOR DE DISTRIBUIÇÃO - JAVASCRIPT
varcache={palestrantes:[]};
//ES5
functionsalvar(nome){
varitems=[].slice.call(argum...
PARÂMETROS DEFAULT
DEFAULT PARAMETERS
PARÂMETROS DEFAULT - PYTHON
defincremento(x,y=1):
returnx+y
printincremento(4)
printincremento(4,2)
5
6
PARÂMETROS DEFAULT - JAVASCRIPT
//ES5
functionincremento(x,y){
y=(arguments.length===1)?1:y;
returnx+y;
}
//ES6
functionin...
PARÂMETROS DEFAULT - PYTHON
defadicionar_bacon(hamburguer=[]):
hamburguer.append('bacon')
returnhamburguer
print1,adiciona...
PARÂMETROS DEFAULT - JAVASCRIPT
functionadicionar_bacon(hamburguer=[]){
hamburguer.push('bacon');
returnhamburguer;
}
cons...
DESESTRUTURAÇÃO
DESTRUCTURING
DESESTRUTURAÇÃO - PYTHON
um,dois=[1,2]
printum,dois
1 2
DESESTRUTURAÇÃO - JAVASCRIPT
var[um,dois]=[1,2];
console.log(um,dois);
nãosuportadonestenavegador
DESESTRUTURAÇÃO E OPERADOR DE DISTRIBUIÇÃO -
JAVASCRIPT
var[cabeca,...corpo]=[1,2,3,4];
console.log(corpo);//[2,3,4]
nãosu...
DESESTRUTURAÇÃO - PYTHON
Qualo valor de 'b'?(Python 2.7)
a,*b=[1,2,3,4]
printa,b
File "<stdin>", line 1
a, *b = [1, 2, 3, ...
DESESTRUTURAÇÃO EM OBJETOS - JAVASCRIPT
var{globocom,r7}={
globocom:'globo.com',
r7:'r7.com'
};
console.log(globocom,r7);
...
DESESTRUTURAÇÃO EM FUNÇÕES - JAVASCRIPT
varajax=function(url,{
async=true,
cache=true
//...
}){
console.log(url,async,cach...
GERADORES
GENERATORS
GERADORES - PYTHON
defessenciais():
yield'celular'
yield'chave'
yield'carteira'
foressencialinessenciais():
printessencial...
GERADORES - JAVASCRIPT
function*essenciais(){
yield'celular';
yield'chave';
yield'carteira';
}
for(varessencialofessenciai...
GERADORES - JAVASCRIPT
function*essenciais(){
yield'celular';
yield'chave';
yield'carteira';
}
varessenciaisGen=essenciais...
ARRAY COMPREHENSION
ARRAY COMPREHENSION - PYTHON
print[iforiin[1,4,2,3,-8]ifi<3]
[1, 2, -8]
ARRAY COMPREHENSION - JAVASCRIPT
//ES5
[1,4,2,3,-8].filter(function(i){returni<3});
//ES6
[for(iof[1,4,2,3,-8])if(i<3)i];
...
MODULOS
MODULES
MODULOS - PYTHON
#calculadora/lib/calc.py
defquadrado(x):
returnx*x
#calculadora/main.py
fromlib.calcimportquadradoasq
pri...
MODULOS - JAVASCRIPT
//calculadora/lib/calc.js
letnaoExportado='abc';
exportfunctionquadrado(x){
returnx*x;
}
exportconstC...
OUTRAS NOVIDADES
//constantes
constPAIS='EUA';
//classes
classPresidente{
constructor(nome){
this.nome=nome;
}
}
classPres...
OBRIGADO
COMUNIDADE PYTHON!
PERGUNTAS?
fabiomcosta@gmail.com
@fabiomiranda
github.com/fabiomcosta
facebook.com/fabiomirandacosta
LINKS E REFERÊNCIAS
Perguntas erespostas comoTC39 na Bocoup, 18/09/2913
HistóricoresumidodoES
Tabela quemostra as funciona...
Javascript é fã do Python
Javascript é fã do Python
Javascript é fã do Python
Upcoming SlideShare
Loading in …5
×

Javascript é fã do Python

1,318 views

Published on

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.

Published in: Technology
  • Be the first to comment

Javascript é fã do Python

  1. 1. JAVASCRIPT É FÃ DO PYTHON Por /FabioM.Costa @fabiomiranda
  2. 2. QUEM? Fabio MirandaCosta Natal-RN Engenheiro de FrontEnd do Facebook Ex Globo.com Ex Yipit Core developer do Mootools desde 2009 Co-criador do Thumbor
  3. 3. DESIGN DE COMUNICAÇÃO COMMUNICATION DESIGN
  4. 4. ESTRUTURA 1. Porque? 2. História 3. Novidades
  5. 5. PORQUE?
  6. 6. NODE.JS Acomunidadenode.jsestámudandooOpen-Source—GreggCaines Baterias não inclusas Desenvolvimento de bibliotecas pequenas Desenvolvimento acontece com ferramentas comuns, gite github.com
  7. 7. GITHUB
  8. 8. TIOBE
  9. 9. HISTÓRIA
  10. 10. ECMA-262 Especificação do ECMAScript TC39 Javascripté aimplementação mais conhecida
  11. 11. ES3 (1999) Implementação do IE6 e 7 O que agrande maioriade nós usamos switch, RegExp, try/catch, throw ...
  12. 12. “Vamos aprender como Python. JavaScripté muito similar ao Python” “We're going to learn fromPython. JavaScriptis pretty close to Python” — Brendan Eich http://www.infoworld.com/d/developer-world/update-javascript-take-cues-python-323
  13. 13. “Dados os anos de desenvolvimento do Python e similaridades como ECMAScript, deveríamos seguir seus passos. Assim, reaproveitamos o conhecimento e experiênciacomdesign e implementação. …” “Given the years of developmentin Python and similarities to ECMAScriptin 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
  14. 14. ES4 Abandonada
  15. 15. ES5 (2009) Firefox, Chrome, Safari, Opera Upgrade enxuto JSON, getters e setters, fn.bind() ...
  16. 16. ES6 (2013?) Previsto paradezembro de 2013 Harmonyou ES.next Muitas ideias vieram do ES4 Firefox estánafrente
  17. 17. NOVIDADES DO JAVASCRIPT
  18. 18. CONFIGURAÇÃO Código javascriptexecutado no Chrome 30 Empythoned -CPython 2.7 compilado paraJavascriptusando Emscripten defcitacao(msg,autor): return'"'+msg+'"-'+autor printcitacao( 'EudescobriqueoJavascripttempartesboas.', 'DouglasCrockford' ) "Eu descobri que o Javascript tem partes boas." - Douglas Crockford
  19. 19. OPERADOR DE DISTRIBUIÇÃO (...) SPREAD OPERATOR
  20. 20. OPERADOR DE DISTRIBUIÇÃO - PYTHON printmax(14,3,77) printmax(*[14,3,77]) 77 77
  21. 21. OPERADOR DE DISTRIBUIÇÃO - JAVASCRIPT EXEMPLO SIMPLES //usonormal varmax=Math.max(14,3,77); //ES5 varmax=Math.max.apply(null,[14,3,77]); //ES6 varmax=Math.max(...[14,3,77]); nãosuportadonestenavegador
  22. 22. OPERADOR DE DISTRIBUIÇÃO - JAVASCRIPT varcache={palestrantes:[]}; //ES5 functionsalvar(nome){ varitems=[].slice.call(arguments,1); items.forEach(function(item){ cache[nome].push(item); }); } //ES6 functionsalvar(nome,...items){ items.forEach(function(item){ cache[nome].push(item); }); } salvar('palestrantes','cabra','romulo','victor','andrews','chico'); console.log(cache); nãosuportadonestenavegador
  23. 23. PARÂMETROS DEFAULT DEFAULT PARAMETERS
  24. 24. PARÂMETROS DEFAULT - PYTHON defincremento(x,y=1): returnx+y printincremento(4) printincremento(4,2) 5 6
  25. 25. PARÂMETROS DEFAULT - JAVASCRIPT //ES5 functionincremento(x,y){ y=(arguments.length===1)?1:y; returnx+y; } //ES6 functionincremento(x,y=1){ returnx+y; } console.log(incremento(4)); console.log(incremento(4,2)); nãosuportadonestenavegador
  26. 26. PARÂMETROS DEFAULT - PYTHON defadicionar_bacon(hamburguer=[]): hamburguer.append('bacon') returnhamburguer print1,adicionar_bacon() print2,adicionar_bacon() 1 ['bacon'] 2 ['bacon', 'bacon']
  27. 27. PARÂMETROS DEFAULT - JAVASCRIPT functionadicionar_bacon(hamburguer=[]){ hamburguer.push('bacon'); returnhamburguer; } console.log(1,adicionar_bacon()); console.log(2,adicionar_bacon()); nãosuportadonestenavegador
  28. 28. DESESTRUTURAÇÃO DESTRUCTURING
  29. 29. DESESTRUTURAÇÃO - PYTHON um,dois=[1,2] printum,dois 1 2
  30. 30. DESESTRUTURAÇÃO - JAVASCRIPT var[um,dois]=[1,2]; console.log(um,dois); nãosuportadonestenavegador
  31. 31. DESESTRUTURAÇÃO E OPERADOR DE DISTRIBUIÇÃO - JAVASCRIPT var[cabeca,...corpo]=[1,2,3,4]; console.log(corpo);//[2,3,4] nãosuportadonestenavegador
  32. 32. DESESTRUTURAÇÃO - PYTHON Qualo valor de 'b'?(Python 2.7) a,*b=[1,2,3,4] printa,b File "<stdin>", line 1 a, *b = [1, 2, 3, 4] ^ SyntaxError: invalid syntax Funcionano python 3.3
  33. 33. DESESTRUTURAÇÃO EM OBJETOS - JAVASCRIPT var{globocom,r7}={ globocom:'globo.com', r7:'r7.com' }; console.log(globocom,r7); nãosuportadonestenavegador
  34. 34. DESESTRUTURAÇÃO EM FUNÇÕES - JAVASCRIPT varajax=function(url,{ async=true, cache=true //... }){ console.log(url,async,cache); }; ajax( 'http://python.org', {async:false} );//'http://python.org'falsetrue nãosuportadonestenavegador
  35. 35. GERADORES GENERATORS
  36. 36. GERADORES - PYTHON defessenciais(): yield'celular' yield'chave' yield'carteira' foressencialinessenciais(): printessencial celular chave carteira
  37. 37. GERADORES - JAVASCRIPT function*essenciais(){ yield'celular'; yield'chave'; yield'carteira'; } for(varessencialofessenciais()){ console.log(essencial); } "celular" "chave" "carteira"
  38. 38. GERADORES - JAVASCRIPT function*essenciais(){ yield'celular'; yield'chave'; yield'carteira'; } varessenciaisGen=essenciais(); console.log(essenciaisGen.next());//{done:false,value:'celular'} console.log(essenciaisGen.next());//{done:false,value:'chave'} console.log(essenciaisGen.next());//{done:false,value:'carteira'} console.log(essenciaisGen.next());//{done:true} //console.log(essenciaisGen.next());//Exceção {"value":"celular","done":false} {"value":"chave","done":false} {"value":"carteira","done":false} {"done":true}
  39. 39. ARRAY COMPREHENSION
  40. 40. ARRAY COMPREHENSION - PYTHON print[iforiin[1,4,2,3,-8]ifi<3] [1, 2, -8]
  41. 41. ARRAY COMPREHENSION - JAVASCRIPT //ES5 [1,4,2,3,-8].filter(function(i){returni<3}); //ES6 [for(iof[1,4,2,3,-8])if(i<3)i]; nãosuportadonestenavegador
  42. 42. MODULOS MODULES
  43. 43. MODULOS - PYTHON #calculadora/lib/calc.py defquadrado(x): returnx*x #calculadora/main.py fromlib.calcimportquadradoasq printq(3)
  44. 44. MODULOS - JAVASCRIPT //calculadora/lib/calc.js letnaoExportado='abc'; exportfunctionquadrado(x){ returnx*x; } exportconstCONSTANTE=123; //calculadora/main.js import{quadradoasq,CONSTANTE}from'lib/calc'; console.log(q(3)); //exemplodemoduloinline module'lib/ios'{ ... } nãosuportadonestenavegador
  45. 45. OUTRAS NOVIDADES //constantes constPAIS='EUA'; //classes classPresidente{ constructor(nome){ this.nome=nome; } } classPresidenteAmericanoextendsPresidente{ constructor(nome){ this.espiao=true; super(nome); } //definiçãoconcisademétodos espionar(paises){ //funcaoseta paises=paises.filter(pais=>pais.emExpansao()); //escopoembloco //'pais'é'undefined'foradoblocodo"for" for(letpaisofpaises){ //... } returntrue; } } //Map,Set,WeakMap,Symbol,quasi-literals,Proxy,emuitomais!
  46. 46. OBRIGADO COMUNIDADE PYTHON!
  47. 47. PERGUNTAS? fabiomcosta@gmail.com @fabiomiranda github.com/fabiomcosta facebook.com/fabiomirandacosta
  48. 48. LINKS E REFERÊNCIAS Perguntas erespostas comoTC39 na Bocoup, 18/09/2913 HistóricoresumidodoES Tabela quemostra as funcionalidades doES6 implementadas pelos navegadores Palestra excelentedoKit CambridgesobreES6 Post muitobomsobreas novas funcionalidades doES6 Modulos emJavascript Ranking depopularidadedelinguagens noGithub Matéria doAjaxiansobreES4 comfrases doBrendanEich Matéria da Infoworld sobreES4 comfrases doBrendanEich Traceur - Compilador deES6 para ES5 Emscripten- Compilador deLLVMpara Javascript Empythoned - CPythoncompiladopara Javascript usando Emscripten

×