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

Rethinking Components

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Vinicius Dacal Vinicius Dacal
June 02, 2016
Programming
0
97

Rethinking Components

Repensando sua aplicação com componentes e React.

Avatar for Vinicius Dacal

Vinicius Dacal

June 02, 2016
Tweet

More Decks by Vinicius Dacal

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

Other Decks in Programming

See All in Programming
Vibe Coding - AI 驅動的軟體開發
Avatar for Micky Li mickyp100
0
170
Unicodeどうしてる？ PHPから見たUnicode対応と他言語での対応についてのお伺い
Avatar for てきめん tekimen youkidearitai
PRO
1
2.5k
Rust 製のコードエディタ “Zed” を使ってみた
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
160
AtCoder Conference 2025
Avatar for shindannin shindannin
0
1.1k
Fragmented Architectures
Avatar for Denys Poltorak denyspoltorak
0
150
生成AIを使ったコードレビューで定性的に品質カバー
Avatar for Chiaki Okamoto chiilog
1
260
Package Management Learnings from Homebrew
Avatar for Mike McQuaid mikemcquaid
0
210
Fluid Templating in TYPO3 14
Avatar for Simon Praetorius s2b
0
130
SourceGeneratorのススメ
Avatar for tkym htkym
0
190
AI時代のキャリアプラン「技術の引力」からの脱出と「問い」へのいざない / tech-gravity
Avatar for MinoDriven minodriven
21
7.1k
それ、本当に安全？ ファイルアップロードで見落としがちなセキュリティリスクと対策
Avatar for ikechi penpeen
7
3.8k
【卒業研究】会話ログ分析によるユーザーごとの関心に応じた話題提案手法
Avatar for MomokoShirakawa momok47
0
190

Featured

See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
0
350
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
200
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
160
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
190
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
0
79
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
0
130
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
100

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!