Repensando Melhores Práticas

Repensando Carlos Souza @caike Alex Pucci Tá Safo Conf 2015
Melhores Práticas

twitter.com/CodeSchool

Moro aqui Nasci aqui Cresci aqui

¯\_(ϑ)_/¯

Em 2007 eu me formei tá, mas e aí ?

Eﬁcaz Fazer funcionar.

não é suﬁciente. Apenas fazer funcionar

Eﬁcaz Fazer funcionar.

Eﬁcaz Fazer direito. Fazer funcionar. + Eﬁciente

Eﬁcaz Fazer as coisas da melhor forma possível. Fazer as
coisas certas. + Eﬁciente

MELHORES PRÁTICAS e da melhor forma possível! Fazer as coisas
certas

2000's - Fox locadora

2000's - Fox locadora 2015 - Fox locadora + Netﬂix
+ On Demand + HBO Now

2000's - CSS

2000's - CSS 2015 - CSS + Sass / Less
/ Stylus + BEM / OOCSS / SMACSS + CSS Modules

Client-Side Rendering Server-Side Rendering

2000's 2015 - Server-Side Rendering (The Rise of JavaScript Frameworks)
- Client-Side Rendering

Server-Side Rendering - HTML inteiramente gerado no servidor - Cliente
"burro"

Server-Side Rendering Server Client GET /index <!DOCTYPE html> <body> <h1>Ta
Safo Conf 2015</h1> ... </body>

Server-Side Rendering Server <!DOCTYPE html> <body> <h1>Ta Safo Conf 2015</h1>
<h2>Palestrante: Paulo Igor</h2> ... </body> GET /speakers/1 Client

Server-Side Rendering • Full page refresh / UX • Processamento
extra no servidor • Grande volume de dados na rede • Fácil indexação por motores de busca (Google) • Rápida renderização pelos browsers • Mais simples

Client-Side Rendering - HTML gerado no client - Servidor retorna
apenas dados - Cliente "inteligente" - Requests via JavaScript (AJAX)

Client-Side Rendering Server Client GET /index <!DOCTYPE html> <h1>Ta Safo
Conf 2015</h1> <script src="app.js"></script>

Client-Side Rendering Server GET /speakers Content-Type: application/json { speakers: [
{ name: "Paulo Igor", avatar: "pigor.jpg" }, { name: "Thomaz Leite", avatar: "thmz.jpg" }, { name: "Henrique Bastos", avatar: "he-b.jpg" } ] } Server Client

Client-Side Rendering Server GET /speakers/1 Content-Type: application/json { name: "Paulo
Igor" title: "Kanban - Muito Além de um Simples   Quadro na parede!" } Server

Client-Side Rendering GET /index HTML JSON JSON JSON a.k.a. Single
Page Applications (SPA)

Client-Side Rendering / SPA • Sem page refresh • Menor
processamento no servidor • Menor volume de dados na rede • Difícil indexação por motores de busca (Google) • Renderização lenta pelo browser • Mais complexo

Server-Side Rendering ...sem page refresh!

• Isomorphic JavaScript • Turbolinks (Ruby on Rails)

Isomorphic JavaScript "Aplicações JavaScript que rodam, ao mesmo tempo, no
client e no server"

Isomorphic JavaScript • Ember.js (fast boot) • React

Turbolinks <!DOCTYPE html> <body> <h1>Ta Safo Conf 2015</h1> ... <script
src="app.js"></script> </body> Server Client GET /index

Turbolinks Server Client GET /speakers/1 <!DOCTYPE html> <body> <h1>Ta Safo
Conf 2015</h1> <h2>Palestrante: Paulo Igor</h2> ... <script src="app.js"></script> </body>

Sem Turbolinks

Com Turbolinks

Qual opção usar ? - Server-Side ? - Client-Side ?
- Isomorphic ? - Turbolinks ?

Qual opção usar ?

Qual a melhor prática ? Qual opção usar ?

DEPENDE Qual a melhor prática ? Qual opção usar ?

Faz funcionar Faz direito Eﬁcaz Eﬁciente

Qual opção aprender ?

Qual opção aprender ? TODAS

CodeSchool.com

Repensando   Melhores Práticas Carlos Souza @caike Alex Puccio Obrigado!

Repensando Melhores Práticas

Repensando Melhores Práticas

More Decks by Carlos Souza

Other Decks in Technology

Featured

Transcript