Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Repensando Melhores Práticas

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Carlos Souza Carlos Souza
November 21, 2015
Technology
0
100

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.

Avatar for Carlos Souza

Carlos Souza

November 21, 2015
Tweet

More Decks by Carlos Souza

See All by Carlos Souza
Deploying Elixir
Avatar for Carlos Souza caike
0
110
Essential JavaScript for working with React
Avatar for Carlos Souza caike
0
450
Thinking Functionally with Elixir
Avatar for Carlos Souza caike
1
240
Estruturas de Dados na Prática
Avatar for Carlos Souza caike
0
100
Docker in Practice
Avatar for Carlos Souza caike
1
160
Data Structures in JavaScript (ES2015)
Avatar for Carlos Souza caike
1
360
Building Better Web APIs with Rails
Avatar for Carlos Souza caike
2
150
Building Better Web APIs with Rails
Avatar for Carlos Souza caike
4
380
Rock Solid Rails APIs
Avatar for Carlos Souza caike
13
650

Other Decks in Technology

See All in Technology
SREが向き合う大規模リアーキテクチャ 〜信頼性とアジリティの両立〜
Avatar for Kuniaki Moriya zepprix
0
450
Webhook best practices for rock solid and resilient deployments
Avatar for Guillaume Laforge glaforge
1
290
30万人の同時アクセスに耐えたい！新サービスの盤石なリリースを支える負荷試験 / SRE Kaigi 2026
Avatar for GENDA genda
4
1.3k
変化するコーディングエージェントとの現実的な付き合い方 〜Cursor安定択説と、ツールに依存しない「資産」〜
Avatar for empitsu empitsu
4
1.4k
SREじゃなかった僕らがenablingを通じて「SRE実践者」になるまでのリアル / SRE Kaigi 2026
Avatar for AEON aeonpeople
6
2.4k
[CV勉強会@関東 World Model 読み会] Orbis: Overcoming Challenges of Long-Horizon Prediction in Driving World Models (Mousakhan+, NeurIPS 2025)
Avatar for abemii_ abemii
0
140
Tebiki Engineering Team Deck
Avatar for Tebiki, Inc. tebiki
0
24k
AzureでのIaC - Bicep? Terraform? それ早く言ってよ会議
Avatar for Toru Makabe torumakabe
1
560
Claude_CodeでSEOを最適化する_AI_Ops_Community_Vol.2__マーケティングx_AIはここまで進化した.pdf
Avatar for 小笠原理久 riku_423
2
570
登壇駆動学習のすすめ — CfPのネタの見つけ方と書くときに意識していること
Avatar for おおいし bicstone
3
110
CDKで始めるTypeScript開発のススメ
Avatar for つくぼし tsukuboshi
1
440
Codex 5.3 と Opus 4.6 にコーポレートサイトを作らせてみた / Codex 5.3 vs Opus 4.6
Avatar for ama-ch ama_ch
0
150

Featured

See All Featured
KATA
Avatar for Megan Lloyd mclloyd
PRO
34
15k
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
3.6k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
359
30k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.2k
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
4.6k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
120
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.8k
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
120
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
320

Transcript

  1. Repensando Carlos Souza @caike Alex Pucci Tá Safo Conf 2015

    Melhores Práticas

  2. twitter.com/CodeSchool

  3. None

  4. Moro aqui Nasci aqui Cresci aqui

  5. None

  6. ¯\_(ϑ)_/¯

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

  8. Eficaz Fazer funcionar.

  9. None

  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"
  22. None

  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)
  27. None
  28. None

  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
  34. None

  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!