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
AI によるインシデント初動調査の自動化を行う AI インシデントコマンダーを作った話
Avatar for azukiazusa azukiazusa1
1
710
Unicodeどうしてる？ PHPから見たUnicode対応と他言語での対応についてのお伺い
Avatar for てきめん tekimen youkidearitai
PRO
1
2.5k
AIエージェントのキホンから学ぶ「エージェンティックコーディング」実践入門
Avatar for Masahiro Nishimi masahiro_nishimi
5
380
Implementation Patterns
Avatar for Denys Poltorak denyspoltorak
0
280
メルカリのリーダビリティチームが取り組む、AI時代のスケーラブルな品質文化
Avatar for osari.k cloverrose
2
510
AI時代の認知負荷との向き合い方
Avatar for OptFit Corp. optfit
0
150
例外処理とどう使い分ける？Result型を使ったエラー設計 #burikaigi
Avatar for Takuma Kajikawa kajitack
16
6k
AIフル活用時代だからこそ学んでおきたい働き方の心得
Avatar for shinoyu shinoyu
0
130
humanlayerのブログから学ぶ、良いCLAUDE.mdの書き方
Avatar for Yuto tsukamoto1783
0
190
HTTPプロトコル正しく理解していますか？ 〜かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ﾆｬ〜
Avatar for ♛Heitor Hirose hekuchan
2
680
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
Avatar for izumin5210 izumin5210
7
2.3k
OCaml 5でモダンな並列プログラミングを Enjoyしよう!
Avatar for Haochen Kotoi-Xie haochenx
0
140

Featured

See All Featured
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.1k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
71k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.3k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
1
440
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
0
350
Docker and Python
Avatar for Tania Allard trallard
47
3.7k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
140k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
160
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2k

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!