JAVASCRIPTÉ FÃ DO PYTHON
Por / Fabio M. Costa @fabiomiranda
QUEM?Fabio Miranda CostaNatal - RNEngenheiro de Front End do FacebookEx Globo.comEx YipitCore developer do Mootools desde 2009Co-criador do Thumbor
DESIGN DE COMUNICAÇÃOCOMMUNICATION DESIGN
ESTRUTURA1. Porque?2. História3. Novidades
PORQUE?
NODE.JSA comunidade node.js está mudando o Open-Source — Gregg Caines
Baterias não inclusasDesenvolvimento de bibliotecas pequenasDesenvolvimento acontece com ferramentas comuns, git egithub.com
GITHUB
TIOBE
HISTÓRIA
ECMA-262Especificação do ECMAScriptTC39Javascript é a implementação mais conhecida
ES3 (1999)Implementação do IE6 e 7O que a grande maioria de nós usamosswitch, RegExp, try/catch, throw ...
“Vamos aprender com o Python. JavaScript émuito similar ao Python”
“We're going to learn from Python. JavaScript ispretty close to Python”
— Brendan Eichhttp://www.infoworld.com/d/developer-world/update-javascript-take-cues-python-323
“Dados os anos de desenvolvimento do Python esimilaridades com o ECMAScript, deveríamosseguir seus passos. Assim, reaproveitamos o
conhecimento e experiência com design eimplementação. …”
“Given the years of development in Python andsimilarities to ECMAScript in application
domains and programmer communities, wewould rather follow than lead. By standing on
Python's shoulders we reuse developerknowledge as well as design and implementation
experience. …”
— Brendan Eichhttp://www.infoworld.com/d/developer-world/update-javascript-take-cues-python-323
ES4Abandonada
ES5 (2009)Firefox, Chrome, Safari, OperaUpgrade enxutoJSON, getters e setters, fn.bind() ...
ES6 (2013?)Previsto para dezembro de 2013Harmony ou ES.nextMuitas ideias vieram do ES4Firefox está na frente
NOVIDADES DOJAVASCRIPT
CONFIGURAÇÃOCódigo javascript executado no Chrome 30Empythoned - CPython 2.7 compilado para Javascript usandoEmscriptendef citacao(msg, autor): return '"' + msg + '" - ' + autor
print citacao( 'Eu descobri que o Javascript tem partes boas.', 'Douglas Crockford')
"Eu descobri que o Javascript tem partes boas." - Douglas Crockford
OPERADOR DE DISTRIBUIÇÃO (...)SPREAD OPERATOR
OPERADOR DE DISTRIBUIÇÃO - PYTHONprint max(14, 3, 77)print max(*[14, 3, 77])
7777
OPERADOR DE DISTRIBUIÇÃO - JAVASCRIPTEXEMPLO SIMPLES
// uso normalvar max = Math.max(14, 3, 77);// ES 5var max = Math.max.apply(null, [14, 3, 77]);// ES 6var max = Math.max(...[14, 3, 77]);
não suportado neste navegador
OPERADOR DE DISTRIBUIÇÃO - JAVASCRIPTvar cache = {palestrantes: []};// ES 5function salvar(nome) { var items = [].slice.call(arguments, 1); items.forEach(function (item) { cache[nome].push(item); });}// ES 6function salvar(nome, ...items) { items.forEach(function (item) { cache[nome].push(item); });}salvar('palestrantes', 'cabra', 'romulo', 'victor', 'andrews', 'chico');console.log(cache);
não suportado neste navegador
PARÂMETROS DEFAULTDEFAULT PARAMETERS
PARÂMETROS DEFAULT - PYTHONdef incremento(x, y=1): return x + y
print incremento(4)print incremento(4, 2)
56
PARÂMETROS DEFAULT - JAVASCRIPT// ES 5function incremento(x, y) { y = (arguments.length === 1) ? 1 : y; return x + y;}// ES 6function incremento(x, y = 1) { return x + y;}
console.log(incremento(4));console.log(incremento(4, 2));
não suportado neste navegador
PARÂMETROS DEFAULT - PYTHONdef adicionar_bacon(hamburguer=[]): hamburguer.append('bacon') return hamburguer
print 1, adicionar_bacon()print 2, adicionar_bacon()
1 ['bacon']2 ['bacon', 'bacon']
PARÂMETROS DEFAULT - JAVASCRIPTfunction adicionar_bacon(hamburguer = []) { hamburguer.push('bacon'); return hamburguer;}
console.log(1, adicionar_bacon());console.log(2, adicionar_bacon());
não suportado neste navegador
DESESTRUTURAÇÃODESTRUCTURING
DESESTRUTURAÇÃO - PYTHONum, dois = [1, 2]print um, dois
1 2
DESESTRUTURAÇÃO - JAVASCRIPTvar [um, dois] = [1, 2];console.log(um, dois);
não suportado neste navegador
DESESTRUTURAÇÃO E OPERADOR DE DISTRIBUIÇÃO -JAVASCRIPT
var [cabeca, ...corpo] = [1, 2, 3, 4];console.log(corpo); // [2, 3, 4]
não suportado neste navegador
DESESTRUTURAÇÃO - PYTHONQual o valor de 'b'? (Python 2.7)
a, *b = [1, 2, 3, 4]print a, b
File "<stdin>", line 1 a, *b = [1, 2, 3, 4] ̂SyntaxError: invalid syntax
Funciona no python 3.3
DESESTRUTURAÇÃO EM OBJETOS - JAVASCRIPTvar {globocom, r7} = { globocom: 'globo.com', r7: 'r7.com'};console.log(globocom, r7);
não suportado neste navegador
DESESTRUTURAÇÃO EM FUNÇÕES - JAVASCRIPTvar ajax = function(url, { async = true, cache = true // ...}) { console.log(url, async, cache);};ajax( 'http://python.org', {async: false}); // 'http://python.org' false true
não suportado neste navegador
GERADORESGENERATORS
GERADORES - PYTHONdef essenciais(): yield 'celular' yield 'chave' yield 'carteira'
for essencial in essenciais(): print essencial
celularchavecarteira
GERADORES - JAVASCRIPTfunction* essenciais() { yield 'celular'; yield 'chave'; yield 'carteira';}for (var essencial of essenciais()) { console.log(essencial);}
"celular""chave""carteira"
GERADORES - JAVASCRIPTfunction* essenciais() { yield 'celular'; yield 'chave'; yield 'carteira';}var essenciaisGen = 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 - PYTHONprint [i for i in [1,4,2,3,-8] if i < 3]
[1, 2, -8]
ARRAY COMPREHENSION - JAVASCRIPT// ES 5[1,4,2,3,-8].filter(function(i) { return i < 3 });
// ES 6[for (i of [1,4,2,3,-8]) if (i < 3) i];
não suportado neste navegador
MODULOSMODULES
MODULOS - PYTHON# calculadora/lib/calc.pydef quadrado(x): return x * x
# calculadora/main.pyfrom lib.calc import quadrado as qprint q(3)
MODULOS - JAVASCRIPT// calculadora/lib/calc.jslet naoExportado = 'abc';export function quadrado(x) { return x * x;}export const CONSTANTE = 123;
// calculadora/main.jsimport { quadrado as q, CONSTANTE } from 'lib/calc';console.log(q(3));
// exemplo de modulo inlinemodule 'lib/ios' { ...}
não suportado neste navegador
OUTRAS NOVIDADES// constantesconst PAIS = 'EUA';
// classesclass Presidente { constructor(nome) { this.nome = nome; }}class PresidenteAmericano extends Presidente { constructor(nome) { this.espiao = true; super(nome); } // definição concisa de métodos espionar(paises) { // funcao seta paises = paises.filter(pais => pais.emExpansao()); // escopo em bloco // 'pais' é 'undefined' fora do bloco do "for" for (let pais of paises) { // ... } return true; }}// Map, Set, WeakMap, Symbol, quasi-literals, Proxy, e muito mais!
OBRIGADOCOMUNIDADE PYTHON!
[email protected]@fabiomirandagithub.com/fabiomcostafacebook.com/fabiomirandacosta
LINKS E REFERÊNCIASPerguntas e respostas com o TC39 na Bocoup, 18/09/2913Histórico resumido do ESTabela que mostra as funcionalidades do ES6 implementadaspelos navegadoresPalestra excelente do Kit Cambridge sobre ES6Post muito bom sobre as novas funcionalidades do ES6Modulos em JavascriptRanking de popularidade de linguagens no GithubMatéria do Ajaxian sobre ES4 com frases do Brendan EichMatéria da Infoworld sobre ES4 com frases do Brendan EichTraceur - Compilador de ES6 para ES5Emscripten - Compilador de LLVM para JavascriptEmpythoned - CPython compilado para Javascript usandoEmscripten
Top Related