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.

1. JAVASCRIPT
É FÃ DO PYTHON
Por /FabioM.Costa @fabiomiranda

3. 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

4. DESIGN DE COMUNICAÇÃO
COMMUNICATION DESIGN

5. ESTRUTURA
1. Porque?
2. História
3. Novidades

6. PORQUE?

7. NODE.JS
Acomunidadenode.jsestámudandooOpen-Source—GreggCaines
Baterias não inclusas
Desenvolvimento de bibliotecas pequenas
Desenvolvimento acontece com ferramentas comuns, gite
github.com

8. GITHUB

9. TIOBE

10. HISTÓRIA

11. ECMA-262
Especificação do ECMAScript
TC39
Javascripté aimplementação mais conhecida

12. ES3 (1999)
Implementação do IE6 e 7
O que agrande maioriade nós usamos
switch, RegExp, try/catch, throw ...

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

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

16. ES4
Abandonada

17. ES5 (2009)
Firefox, Chrome, Safari, Opera
Upgrade enxuto
JSON, getters e setters, fn.bind() ...

18. ES6 (2013?)
Previsto paradezembro de 2013
Harmonyou ES.next
Muitas ideias vieram do ES4
Firefox estánafrente

20. NOVIDADES DO
JAVASCRIPT

21. 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

22. OPERADOR DE DISTRIBUIÇÃO (...)
SPREAD OPERATOR

23. OPERADOR DE DISTRIBUIÇÃO - PYTHON
printmax(14,3,77)
printmax(*[14,3,77])
77
77

24. 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

25. 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

26. PARÂMETROS DEFAULT
DEFAULT PARAMETERS

27. PARÂMETROS DEFAULT - PYTHON
defincremento(x,y=1):
returnx+y
printincremento(4)
printincremento(4,2)
5
6

28. 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

29. PARÂMETROS DEFAULT - PYTHON
defadicionar_bacon(hamburguer=[]):
hamburguer.append('bacon')
returnhamburguer
print1,adicionar_bacon()
print2,adicionar_bacon()
1 ['bacon']
2 ['bacon', 'bacon']

30. PARÂMETROS DEFAULT - JAVASCRIPT
functionadicionar_bacon(hamburguer=[]){
hamburguer.push('bacon');
returnhamburguer;
}
console.log(1,adicionar_bacon());
console.log(2,adicionar_bacon());
nãosuportadonestenavegador

31. DESESTRUTURAÇÃO
DESTRUCTURING

32. DESESTRUTURAÇÃO - PYTHON
um,dois=[1,2]
printum,dois
1 2

33. DESESTRUTURAÇÃO - JAVASCRIPT
var[um,dois]=[1,2];
console.log(um,dois);
nãosuportadonestenavegador

34. DESESTRUTURAÇÃO E OPERADOR DE DISTRIBUIÇÃO -
JAVASCRIPT
var[cabeca,...corpo]=[1,2,3,4];
console.log(corpo);//[2,3,4]
nãosuportadonestenavegador

35. 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

36. DESESTRUTURAÇÃO EM OBJETOS - JAVASCRIPT
var{globocom,r7}={
globocom:'globo.com',
r7:'r7.com'
};
console.log(globocom,r7);
nãosuportadonestenavegador

37. 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

38. GERADORES
GENERATORS

39. GERADORES - PYTHON
defessenciais():
yield'celular'
yield'chave'
yield'carteira'
foressencialinessenciais():
printessencial
celular
chave
carteira

40. GERADORES - JAVASCRIPT
function*essenciais(){
yield'celular';
yield'chave';
yield'carteira';
}
for(varessencialofessenciais()){
console.log(essencial);
}
"celular"
"chave"
"carteira"

41. 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}

42. ARRAY COMPREHENSION

43. ARRAY COMPREHENSION - PYTHON
print[iforiin[1,4,2,3,-8]ifi<3]
[1, 2, -8]

44. 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

45. MODULOS
MODULES

46. MODULOS - PYTHON
#calculadora/lib/calc.py
defquadrado(x):
returnx*x
#calculadora/main.py
fromlib.calcimportquadradoasq
printq(3)

47. 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

48. 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!

49. OBRIGADO
COMUNIDADE PYTHON!

50. PERGUNTAS?
fabiomcosta@gmail.com
@fabiomiranda
github.com/fabiomcosta
facebook.com/fabiomirandacosta

51. 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