Page 1
26 de Abril, 2016 R. Jardim Botânico 518 2º andar Rio de Janeiro/ 55 21 35540 3540 / hugeinc.com
Page 2
Desenvolvimento Client-Side 2016
Huge Brazil
26 de Abril, 2016
Page 3
1. Introdução
2. Paradigmas 3. APIs4. Frameworks 5. Desafios
6. Conclusões
Agenda
Page 23
Caio Vaccaro
Technology Lead [email protected]
Page 34
I just wanna do some cool shit stuff.
Page 35
Nosso trabalho é muito difícil.
Não se culpe se você não tem feito coisas legais.
Page 36
Tools.
Typescript.
Babel.
Framework.
HTML, CSS, JS.
Devices*.
Browser/V8.
Linguagem de prog.
Sist. Operacional
Kernel.
Ling. Máquina.
Hardware.
Computador.
Page 37
Tools.
Typescript.
Babel.
Framework.
HTML, CSS, JS.
Devices*.
Browser/V8.
Linguagem de prog.
Sist. Operacional
Kernel.
Ling. Máquina.
Hardware.
Computador.
Page 38
Tools.
Typescript.
Babel.
Framework.
HTML, CSS, JS.
Devices*.
Browser/V8.
Linguagem de prog.
Sist. Operacional
Kernel.
Ling. Máquina.
Hardware.
Computador.
Page 39
Tools.
Typescript.
Babel.
Framework.
HTML, CSS, JS.
Devices*.
Browser/V8.
Linguagem de prog.
Sist. Operacional
Kernel.
Ling. Máquina.
Hardware.
Computador.
Page 40
Tools.
Typescript.
Babel.
Framework.
HTML, CSS, JS.
Devices*.
Browser/V8.
Linguagem de prog.
Sist. Operacional
Kernel.
Ling. Máquina.
Hardware.
Computador.
Page 43
Tools.
Typescript.
Babel.
Framework.
HTML, CSS, JS.
Devices*.
Browser/V8.
Linguagem de prog.
Sist. Operacional
Kernel.
Ling. Máquina.
Hardware.
Computador.
Page 44
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.
Page 45
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.
Page 46
I just wanna do some cool shit stuff.
Page 48
Que faça a diferença.
Page 49
… e que as pessoas usem.
Page 50
… e no final traga:
Page 57
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.
Page 58
Usuários.Considere que existem dois tipos de usuário: “regular” e “altamente interativo”. No contexto desta palestra o foco é no interativo.
Page 59
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.
Page 65
Tools. Typescript. Babel.
Framework. HTML, CSS, JS.
Facilidade.
Desenvolvedores. Mudanças.
Page 66
Tools. Typescript. Babel.
Framework. HTML, CSS, JS.
Facilidade.
Desenvolvedores. Mudanças.
Page 68
Framework.
HTML, CSS, JS.
Facilidade.
Desenvolvedores. Mudanças.
Page 69
Framework.
HTML, CSS, JS.
Facilidade.
Desenvolvedores. Mudanças.
Page 70
Framework. Formatos de API.
Paradig. de Programação. HTML, CSS, JS.
Facilidade.
Desenvolvedores. Mudanças.
Page 71
Temos que escolher entre. 1. Frameworks de Front-End.2. Paradig. de programação.
3. Formatos de API.
4. Tools.
Page 72
Temos que escolher entre. 1. Frameworks Interface lógica.2. Paradigmas Modelo mental.3. API Dados, fatos.
Page 73
O que combina melhor com você, sua equipe, os desafios
do seu projeto e o seutempo de vida?
Page 76
react, redux, flux, flow, typescript, babel, vue.js, om, meteor, aurelia, angular, firebase, riot, bacon.js,
cycle.js, relay, immutable,web assembly.
Page 77
Você já leu por aí. 1. State.2. Stateless.3. Passivo.4. Reativo.
Page 80
Imperativo.1. Stateful.2. Passivo.
Page 81
Funcional.1. Stateless.2. Reativo.
Page 82
Obs: Não são excludentes, mas você pode pensar
dessa forma.
Page 83
Imperativo.Conceitos.
Page 84
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.
Page 86
Passivo.Imperativo.
Page 87
A mesma coisa, mas do ponto de vista do pau
mandado.
Ele é passivo de receber ordem e está exposto
aos outros.
Page 89
State.Imperativo.
Page 90
Você está feliz agora,esse é seu estado.
Estado é um snapshot da memória de uma partedo seu programa em
determinado momento.
Page 91
Funcional.Conceitos.
Page 92
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).
Page 96
Reativo.Funcional.
Page 97
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.
Page 100
Stateless.Funcional.
Page 101
Também vai junto como funcional.
Advoga que a melhor forma de evitar efeitos colaterais é
não armazenar estado, simplesmente transformar
e retornar.
Page 103
reactivex.io/learnrx
Page 104
Imperativo.1. Stateful.2. Passivo.
Page 105
Funcional.1. Stateless.2. Reativo.
Page 109
APIs.1. RPC.2. REST.3. GRAPH.
Page 111
example.com/list?offset=0&size=5
Page 112
Mais de um recursoou entidade por chamada.
Page 113
RPC, Bad. 1. Ruim para cache/infra.2. Acoplado.
Page 114
RPC, Good.1. Uma chamada por view.
2. Respostas pequenas.
Page 116
example.com/list/1234 example.com/user/3
Page 117
Cada endpoint === uma entidade.
Page 118
REST, Bad. 1. Muitas chamadas por view.
2. Respostas grandes.
Page 119
REST, Good.1. Bom para cache.2. Desacoplado.
Page 125
Cara.. pensa emJSON 360 graus.
Page 126
Graph, Bad.1. Query language complexa.
2. Pode haver débito técnico.
Page 127
Graph, Good.1. Bom para cache.
2. Rápido.
3. Respostas pequenas.
4. Desacoplado.
Page 128
Olha depois aí.1. Netflix Falcor.2. Facebook Relay/GraphQL.
Page 135
Frameworks.1. MV* (Angular, Ember...).2. Components (React, Vue.js, Flux). 2.1. Web Components (Polymer…).3. Functional/Reactive (Cycle…).
Page 136
O que é uma aplicação?
Page 137
No que consiste uma aplicação.1.
2.
3.
4. Usuário.
Page 138
No que consiste uma aplicação.1.
2.
3. Interface.
4. Usuário.
Page 139
No que consiste uma aplicação.1.
2. Lógica.
3. Interface.
4. Usuário.
Page 140
No que consiste uma aplicação.1. Dados persistentes.
2. Lógica.
3. Interface.
4. Usuário.
Page 141
No que consiste uma aplicação.1. Dados persistentes.
2. Lógica.
3. Interface.
4. Usuário.
Page 142
No que consiste uma aplicação.1. Dados persistentes. Model.
2. Lógica. Controller.
3. Interface. View.
Page 143
No que consiste uma aplicação.1. Dados persistentes. Store.
2. Lógica. Reducer.
3. Interface. Components.
Page 144
No que consiste uma aplicação.1. Dados persistentes. Stream, State.
2. Lógica. Pure Functions.
3. Interface. Components.
Page 146
Premissas.Desafios.
Page 147
Não ter que aprender algo demasiadamente específico.
Page 148
Partes reutilizáveis e modulares.
Page 149
Sem muita necessidade de refatoração.
Page 150
Boa experiência para o usuário (rápido, transições,
feedback, fácil de usar).
Page 151
Premisas.1. Fácil de aprender.2. Reutilizável e modular.3. Intuitivo de manter.4. Bom de usar.
Page 153
Não só quanto tempo você tem para fazer, mas quanto tempo
sua aplicaçãovai viver.
Page 154
Tempo.1. Curto prazo.2. Longo prazo.
Page 155
Desafios de 2016*.Premisas.
Page 158
Desafios de 2016*.Premisas.
Page 159
Sincronia de dados entreservidor e cliente/cache.
Page 161
Fácil de desenvolver e dar manutenção.
Page 162
Concorrência e Paralelismo.
Page 164
Desafios. 1. Sincronia servidor/cliente/cache.2. Performance.3. Fácil de desenvolver/manter.4. Concorrência e Paralelismo.5. Offline.
Page 167
Se você é bom em seguir “passo a passo”, você está bem perto…
Page 170
Toda empresa chega em um “padrão” para evoluir — frameworks
são isso.
Page 171
É bom estudar, saber e fazer uso deles.
Page 172
Mas em grandes projetos na vida real,
o “passo a passo” não é suficiente.
Page 173
Você precisa saber como as coisas
funcionam,e porque elas
funcionam daquela forma.
Page 174
Saiba responder:
Page 175
O que você quer fazer?
Page 176
O que você quer fazer?Em/por quanto tempo?
Page 177
O que você quer fazer?Em/por quanto tempo?
Para qual usuário?
Page 178
O que você quer fazer?Em/por quanto tempo?
Para qual usuário?Qual seu principal desafio?
Page 179
O que você quer fazer?Em/por quanto tempo?
Para qual usuário?Qual seu principal desafio?
Como o BE/dados estão estruturados?
Page 180
O que você quer fazer?Em/por quanto tempo?
Para qual usuário?Qual seu principal desafio?
Como o BE/dados estão estruturados?
Qual modelo mental da equipe?
Page 181
O que você quer fazer?Em/por quanto tempo?
Para qual usuário?Qual seu principal desafio?
Como o BE/dados estão estruturados?
Qual modelo mental da equipe?
Vocês tem tempo para aprender?
Page 183
Zhou-yi.Conclusões.
Page 188
github.com/caiovaccaro/zhou-yi
Page 189
Nossa aplicação pode ser independente de frameworks?
Page 190
Lunar.Conclusões.
Page 192
Separar framework-code de application-code.
Page 193
Deixar sua lógica de negócio ser independente de
ferramentas.
Page 195
github.com/hugeinc/lunar
Page 196
Você pode ajudar.Conclusões.
Page 197
Você pode ajudar. 1. Soluções para paralelismo.2. Propor como trabalhar offline.3. Como transitar entre frameworks.4. Melhorar data models no cliente.
Page 199
Nós não temos o “luxo” de só escolher uma
fórmula da prateleira.
Page 200
Isso é uma oportunidade.
Page 201
Faça as perguntas
certas.
Page 204
We are hiring, talk to us.
Page 205
And we have more bags,
come get them.
Page 206
26 de Abril, 2016. R. Jardim Botânico 518 2º andar Rio de Janeiro/ 55 21 35540 3540 / hugeinc.com