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

Rethinking Components

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Vinicius Dacal Vinicius Dacal
June 02, 2016
Programming
97
0

Rethinking Components

Repensando sua aplicação com componentes e React.

Avatar for Vinicius Dacal

Vinicius Dacal

June 02, 2016

More Decks by Vinicius Dacal

See All by Vinicius Dacal
Reducing boilerplate with Redux Arc
Avatar for Vinicius Dacal viniciusdacal
0
66
Evoluindo aplicações legadas
Avatar for Vinicius Dacal viniciusdacal
0
61

Other Decks in Programming

See All in Programming
[PHPerKaigi 2026]PHPerKaigi2025の企画CodeGolfが最高すぎて社内で内製して半年運営して得た内製と運営の知見
Avatar for Z.O.E. ikezoemakoto
0
340
Laravel Nightwatchの裏側 - Laravel公式Observabilityツールを支える設計と実装
Avatar for Ryuta Hamasaki avosalmon
1
330
Getting more out of Maven
Avatar for Marit van Dijk mlvandijk
0
110
「速くなった気がする」をデータで疑う
Avatar for Leaf senleaf24
0
170
Claude Codeをカスタムして自分だけのClaude Codeを作ろう
Avatar for Terisuke terisuke
0
120
Mastering Event Sourcing: Your Parents Holidayed in Yugoslavia
Avatar for Marek Matulka super_marek
0
150
今年もTECHSCOREブログを書き続けます！
Avatar for 平奥真一（ひらおくしんいち） hiraoku101
0
250
レガシーPHP転生 〜父がドメインエキスパートだったのでDDD+Claude Codeでチート開発します〜
Avatar for panda_program panda_program
0
710
車輪の再発明をしよう！PHP で実装して学ぶ、Web サーバーの仕組みと HTTP の正体
Avatar for H1R0 h1r0
3
520
LM Linkで(非力な！)ノートPCでローカルLLM
Avatar for 瀬尾佳隆 seosoft
0
460
YJITとZJITにはイカなる違いがあるのか？
Avatar for yamanao nakiym
0
200
CursorとClaudeCodeとCodexとOpenCodeを実際に比較してみた
Avatar for Terisuke terisuke
1
420

Featured

See All Featured
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
520
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
52k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
6.6k
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
370
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.1k
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
160
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
160
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Designing for Performance
Avatar for Lara Hogan lara
611
70k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
0
190
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k

Transcript

  1. COMPONENTS RETHINKING

  2. VINICIUS DACAL @vinicius_dacal viniciusdacal

  3. Desenvolvedor Front-end

  4. None

  5. RETHINK APPLICATION

  6. None

  7. RETHINK COMPONENTS

  8. CONTAINER & PRESENTATIONAL

  9. CONTAINER COMPONENTS How things work Subscribe to state Dispatch actions

    Aware of behavior

  10. PRESENTATIONAL COMPONENTS How things look Read data from props Invoke

    callbacks from props Unaware of behavior
  11. None
  12. None

  13. CRIANDO COMPONENTES DE FORMA ISOLADA

  14. REACT STORYBOOK

  15. None
  16. None

  17. CSS!

  18. OLD WAY

  19. None
  20. None

  21. NÃO ESCALA

  22. Namespace Global (Isolamento) Eliminação de código morto Dependência da ordem

    do carregamento Dificuldade de configuração

  23. OOCSS, SMACSS, BEM

  24. CSS PROCESSORS Less Sass Stylus PostCSS cssnext

  25. REACT WAYS

  26. None

  27. INLINE STYLES

  28. None

  29. VANTAGENS Estilo isolado sem seletores Seu estilo fica independente de

    ordem Eliminação de código morto Extremamente expressivo

  30. PROBLEMAS DESSA ABORDAGEM Pseudo Elements Pseudo States Media Queries

  31. LIBS Radium React Style

  32. Radium

  33. React Styles

  34. OUTRA ABORDAGEM JSS Aphrodite

  35. JSS

  36. Aphrodite

  37. VANTAGENS EM COMPARAÇÃO AO INLINE Rules Caching Rules Sharing All

    css features included Performance

  38. CSS MODULES RULES ARE LOCAL BY DEFAULT

  39. None
  40. None

  41. QUAL A MELHOR ABORDAGEM?

  42. NO ONE KNOWS YET

  43. OBRIGADO!