desenvolvimento client-side 2016 (braziljs)

26 de Abril, 2016 R. Jardim Botânico 518 2º andar Rio de Janeiro/ 55 21 35540 3540 / hugeinc.com

Desenvolvimento Client-Side 2016

Huge Brazil

26 de Abril, 2016

1. Introdução

2. Paradigmas 3. APIs4. Frameworks 5. Desafios

6. Conclusões

Agenda

Introdução.

Caio Vaccaro

Technology Lead [email protected]

O que você quer?

Além de…

Huge Rio.

Sei lá…

I just wanna do some cool shit stuff.

Nosso trabalho é muito difícil.

Não se culpe se você não tem feito coisas legais.

Tools.

Typescript.

Babel.

Framework.

HTML, CSS, JS.

Devices*.

Browser/V8.

Linguagem de prog.

Sist. Operacional

Kernel.

Ling. Máquina.

Hardware.

Computador.

Tools. Typescript.

Babel. Framework.

HTML, CSS, JS. Devices*. Browser/V8.

Linguagem de prog. Sist. Operacional

Kernel. Ling. Máquina. Hardware.

Computador.

Facilidade.

Desenvolvedores. Mudanças.

I just wanna do some cool shit stuff.

Inteligente.

Que faça a diferença.

… e que as pessoas usem.

… e no final traga:

Huge Rio.

Eu quero desenvolver aplicações sem me preocupar demais em aprender algo além da tecnologia, com partes reutilizáveis, de fácil manutenção e que traga uma boa experiência para os usuários.

Usuários.Considere que existem dois tipos de usuário: “regular” e “altamente interativo”. No contexto desta palestra o foco é no interativo.

Tools. Typescript.

Babel. Framework.

HTML, CSS, JS. Devices*. Browser/V8.

Linguagem de prog. Sist. Operacional

Kernel. Ling. Máquina. Hardware.

Computador.

Facilidade.


Tools. Typescript. Babel.

Framework. HTML, CSS, JS.

Facilidade.


Framework.

HTML, CSS, JS.

Facilidade.


Framework. Formatos de API.

Paradig. de Programação. HTML, CSS, JS.

Facilidade.


Temos que escolher entre. 1. Frameworks de Front-End.2. Paradig. de programação.

3. Formatos de API.

4. Tools.

Temos que escolher entre. 1. Frameworks Interface lógica.2. Paradigmas Modelo mental.3. API Dados, fatos.

O que combina melhor com você, sua equipe, os desafios

do seu projeto e o seutempo de vida?

Paradigmas.

Buzz words 😪

react, redux, flux, flow, typescript, babel, vue.js, om, meteor, aurelia, angular, firebase, riot, bacon.js,

cycle.js, relay, immutable,web assembly.

Você já leu por aí. 1. State.2. Stateless.3. Passivo.4. Reativo.

Imperativo.

Funcional.

Imperativo.1. Stateful.2. Passivo.

Funcional.1. Stateless.2. Reativo.

Obs: Não são excludentes, mas você pode pensar

dessa forma.

Imperativo.Conceitos.

Esse é o estilo mandão.Eu sei quem você é, eu quero

que você faça aquilo pra mim. Eu mudo o seu estado e

eu sei disso.

Passivo.Imperativo.

A mesma coisa, mas do ponto de vista do pau

mandado.

Ele é passivo de receber ordem e está exposto

aos outros.

State.Imperativo.

Você está feliz agora,esse é seu estado.

Estado é um snapshot da memória de uma partedo seu programa em

determinado momento.

Funcional.Conceitos.

Esse é o estilo matemático.Eu defino funções previsíveis,que apenas alteram o estado

do seu escopo e nunca causam efeitos colaterais

(nunca mudam estados fora de si mesmas).

fn(x) => x * 2

Reativo.Funcional.

O contrário do imperativo e passivo, vai junto com

o funcional.

Ele diz explicitamente que vai reagir quando acontecer

tal coisa nos outros.

Ninguém manda nele diretamente, ele manda em

si mesmo e se controla.

Stateless.Funcional.

Também vai junto como funcional.

Advoga que a melhor forma de evitar efeitos colaterais é

não armazenar estado, simplesmente transformar

e retornar.

reactivex.io/learnrx

http://reactivex.io/learnrx

Imperativo.1. Stateful.2. Passivo.

Funcional.1. Stateless.2. Reativo.

Bags time!

APIs.1. RPC.2. REST.3. GRAPH.

RPC.APIs.

example.com/list?offset=0&size=5

Mais de um recursoou entidade por chamada.

RPC, Bad. 1. Ruim para cache/infra.2. Acoplado.

RPC, Good.1. Uma chamada por view.

2. Respostas pequenas.

REST.APIs.

example.com/list/1234 example.com/user/3

Cada endpoint === uma entidade.

REST, Bad. 1. Muitas chamadas por view.

2. Respostas grandes.

REST, Good.1. Bom para cache.2. Desacoplado.

Graph.APIs.

Cara.. pensa emJSON 360 graus.

Graph, Bad.1. Query language complexa.

2. Pode haver débito técnico.

Graph, Good.1. Bom para cache.

2. Rápido.

3. Respostas pequenas.

4. Desacoplado.

Olha depois aí.1. Netflix Falcor.2. Facebook Relay/GraphQL.

Frameworks.

Frameworks.1. MV* (Angular, Ember...).2. Components (React, Vue.js, Flux). 2.1. Web Components (Polymer…).3. Functional/Reactive (Cycle…).

O que é uma aplicação?

No que consiste uma aplicação.1.

2.

3.

4. Usuário.


2.

3. Interface.

4. Usuário.


2. Lógica.

3. Interface.

4. Usuário.

No que consiste uma aplicação.1. Dados persistentes.

2. Lógica.

3. Interface.

4. Usuário.

No que consiste uma aplicação.1. Dados persistentes. Model.

2. Lógica. Controller.

3. Interface. View.

No que consiste uma aplicação.1. Dados persistentes. Store.

2. Lógica. Reducer.

3. Interface. Components.

No que consiste uma aplicação.1. Dados persistentes. Stream, State.

2. Lógica. Pure Functions.

3. Interface. Components.

Desafios.

Premissas.Desafios.

Não ter que aprender algo demasiadamente específico.

Partes reutilizáveis e modulares.

Sem muita necessidade de refatoração.

Boa experiência para o usuário (rápido, transições,

feedback, fácil de usar).

Premisas.1. Fácil de aprender.2. Reutilizável e modular.3. Intuitivo de manter.4. Bom de usar.

Tempo.Premisas.

Não só quanto tempo você tem para fazer, mas quanto tempo

sua aplicaçãovai viver.

Tempo.1. Curto prazo.2. Longo prazo.

Desafios de 2016*.Premisas.

Wait…

One more bag.

Desafios de 2016*.Premisas.

Sincronia de dados entreservidor e cliente/cache.

Performance.

Fácil de desenvolver e dar manutenção.

Concorrência e Paralelismo.

Offline.

Desafios. 1. Sincronia servidor/cliente/cache.2. Performance.3. Fácil de desenvolver/manter.4. Concorrência e Paralelismo.5. Offline.

Conclusões.

O que eu faço?

Se você é bom em seguir “passo a passo”, você está bem perto…

De ser normal.

Toda empresa chega em um “padrão” para evoluir — frameworks

são isso.

É bom estudar, saber e fazer uso deles.

Mas em grandes projetos na vida real,

o “passo a passo” não é suficiente.

Você precisa saber como as coisas

funcionam,e porque elas

funcionam daquela forma.

Saiba responder:

O que você quer fazer?

O que você quer fazer?Em/por quanto tempo?


Para qual usuário?


Para qual usuário?Qual seu principal desafio?



Como o BE/dados estão estruturados?




Qual modelo mental da equipe?




Qual modelo mental da equipe?

Vocês tem tempo para aprender?

Zhou-yi.Conclusões.

github.com/caiovaccaro/zhou-yi

http://github.com/caiovaccaro/zhou-yi

Nossa aplicação pode ser independente de frameworks?

Lunar.Conclusões.

Separar framework-code de application-code.

Deixar sua lógica de negócio ser independente de

ferramentas.

github.com/hugeinc/lunar

http://github.com/hugeinc/lunar

Você pode ajudar.Conclusões.

Você pode ajudar. 1. Soluções para paralelismo.2. Propor como trabalhar offline.3. Como transitar entre frameworks.4. Melhorar data models no cliente.

Nós não temos o “luxo” de só escolher uma

fórmula da prateleira.

Isso é uma oportunidade.

Faça as perguntas

certas.

caiovaccaro.com

http://caiovaccaro.com

We are hiring, talk to us.

And we have more bags,

come get them.

26 de Abril, 2016. R. Jardim Botânico 518 2º andar Rio de Janeiro/ 55 21 35540 3540 / hugeinc.com