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 desde 2009
Co-criador do Thumbor
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 pequenas
Desenvolvimento acontece com ferramentas comuns, gite
github.com
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 close to Python”
— Brendan Eich
http://www.infoworld.com/d/developer-world/update-javascript-take-cues-python-323
“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
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
defcitacao(msg,autor):
return'"'+msg+'"-'+autor
printcitacao(
'EudescobriqueoJavascripttempartesboas.',
'DouglasCrockford'
)
"Eu descobri que o Javascript tem partes boas." - Douglas Crockford
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(null,[14,3,77]);
//ES6
varmax=Math.max(...[14,3,77]);
nãosuportadonestenavegador
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
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
functionincremento(x,y=1){
returnx+y;
}
console.log(incremento(4));
console.log(incremento(4,2));
nãosuportadonestenavegador
PARÂMETROS DEFAULT - PYTHON
defadicionar_bacon(hamburguer=[]):
hamburguer.append('bacon')
returnhamburguer
print1,adicionar_bacon()
print2,adicionar_bacon()
1 ['bacon']
2 ['bacon', 'bacon']
PARÂMETROS DEFAULT - JAVASCRIPT
functionadicionar_bacon(hamburguer=[]){
hamburguer.push('bacon');
returnhamburguer;
}
console.log(1,adicionar_bacon());
console.log(2,adicionar_bacon());
nãosuportadonestenavegador
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ãosuportadonestenavegador
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
DESESTRUTURAÇÃO EM OBJETOS - JAVASCRIPT
var{globocom,r7}={
globocom:'globo.com',
r7:'r7.com'
};
console.log(globocom,r7);
nãosuportadonestenavegador
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
GERADORES
GENERATORS
GERADORES - PYTHON
defessenciais():
yield'celular'
yield'chave'
yield'carteira'
foressencialinessenciais():
printessencial
celular
chave
carteira
GERADORES - JAVASCRIPT
function*essenciais(){
yield'celular';
yield'chave';
yield'carteira';
}
for(varessencialofessenciais()){
console.log(essencial);
}
"celular"
"chave"
"carteira"
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}
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];
nãosuportadonestenavegador
MODULOS
MODULES
MODULOS - PYTHON
#calculadora/lib/calc.py
defquadrado(x):
returnx*x
#calculadora/main.py
fromlib.calcimportquadradoasq
printq(3)
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
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!
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 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

Javascript é fã do Python