Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Repensando Melhores Práticas

Repensando Melhores Práticas

As tecnologias mudam e as idéias também mudam. Novas ferramentas e paradigmas surgem para questionar a *melhor* maneira de escrever código para browsers e servidores. O melhor não é uma constante.

Carlos Souza

November 21, 2015
Tweet

More Decks by Carlos Souza

Other Decks in Technology

Transcript

  1. 2000's - CSS 2015 - CSS + Sass / Less

    / Stylus + BEM / OOCSS / SMACSS + CSS Modules
  2. Server-Side Rendering Server <!DOCTYPE html> <body> <h1>Ta Safo Conf 2015</h1>

    <h2>Palestrante: Paulo Igor</h2> ... </body> GET /speakers/1 Client
  3. 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
  4. Client-Side Rendering - HTML gerado no client - Servidor retorna

    apenas dados - Cliente "inteligente" - Requests via JavaScript (AJAX)
  5. 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
  6. 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
  7. 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
  8. Turbolinks <!DOCTYPE html> <body> <h1>Ta Safo Conf 2015</h1> ... <script

    src="app.js"></script> </body> Server Client GET /index
  9. 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>