javascript é fã do python

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!

PERGUNTAS?fabiomcosta@gmail.com@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