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.

1. Repensando Carlos Souza @caike Alex Pucci Tá Safo Conf 2015 Melhores Práticas
2. twitter.com/CodeSchool
4. Moro aqui Nasci aqui Cresci aqui
6. ¯\_(ϑ)_/¯
7. Em 2007 eu me formei tá, mas e aí ?
8. Eficaz Fazer funcionar.
10. não é suficiente. Apenas fazer funcionar
11. Eficaz Fazer funcionar.
12. Eficaz Fazer direito. Fazer funcionar. + Eficiente
13. Eficaz Fazer as coisas da melhor forma possível. Fazer as coisas certas. + Eficiente
14. MELHORES PRÁTICAS e da melhor forma possível! Fazer as coisas certas
15. 2000's - Fox locadora
16. 2000's - Fox locadora 2015 - Fox locadora + Netflix + On Demand + HBO Now
17. 2000's - CSS
18. 2000's - CSS 2015 - CSS + Sass / Less / Stylus + BEM / OOCSS / SMACSS + CSS Modules
19. Client-Side Rendering Server-Side Rendering
20. 2000's 2015 - Server-Side Rendering (The Rise of JavaScript Frameworks) - Client-Side Rendering
21. Server-Side Rendering - HTML inteiramente gerado no servidor - Cliente "burro"
23. Server-Side Rendering Server Client GET /index <!DOCTYPE html> <body> <h1>Ta Safo Conf 2015</h1> ... </body>
24. Server-Side Rendering Server <!DOCTYPE html> <body> <h1>Ta Safo Conf 2015</h1> <h2>Palestrante: Paulo Igor</h2> ... </body> GET /speakers/1 Client
25. 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
26. Client-Side Rendering - HTML gerado no client - Servidor retorna apenas dados - Cliente "inteligente" - Requests via JavaScript (AJAX)
29. Client-Side Rendering Server Client GET /index <!DOCTYPE html> <h1>Ta Safo Conf 2015</h1> <script src="app.js"></script>
30. 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
31. 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
32. Client-Side Rendering GET /index HTML JSON JSON JSON a.k.a. Single Page Applications (SPA)
33. 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
35. Server-Side Rendering ...sem page refresh!
36. • Isomorphic JavaScript • Turbolinks (Ruby on Rails)
37. Isomorphic JavaScript "Aplicações JavaScript que rodam, ao mesmo tempo, no client e no server"
38. Isomorphic JavaScript • Ember.js (fast boot) • React
39. Turbolinks <!DOCTYPE html> <body> <h1>Ta Safo Conf 2015</h1> ... <script src="app.js"></script> </body> Server Client GET /index
40. 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>
41. Sem Turbolinks
42. Com Turbolinks
43. Qual opção usar ? - Server-Side ? - Client-Side ? - Isomorphic ? - Turbolinks ?
44. Qual opção usar ?
45. Qual a melhor prática ? Qual opção usar ?
46. DEPENDE Qual a melhor prática ? Qual opção usar ?
47. Faz funcionar Faz direito Eficaz Eficiente
48. Qual opção aprender ?
49. Qual opção aprender ? TODAS
50. CodeSchool.com
51. CodeSchool.com
52. Repensando 
 Melhores Práticas Carlos Souza @caike Alex Puccio Obrigado!