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

Rethinking Components

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
64
Evoluindo aplicações legadas
Avatar for Vinicius Dacal viniciusdacal
0
60

Other Decks in Programming

See All in Programming
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
Avatar for Shintani Teppei euglena1215
1
170
Deep Dive into ~/.claude/projects
Avatar for Yuya Hirayama hiragram
14
2.6k
Google Agent Development Kit でLINE Botを作ってみた
Avatar for Kento.Yamada ymd65536
2
250
すべてのコンテキストを、 ユーザー価値に変える
Avatar for Michiru Kato applism118
3
1.3k
Rubyでやりたい駆動開発 / Ruby driven development
Avatar for chobishiba chobishiba
1
730
5つのアンチパターンから学ぶLT設計
Avatar for Narihara narihara
1
170
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
Avatar for 岡本秀明 h_okkah
0
160
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
Avatar for panda_program panda_program
6
2.1k
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
Avatar for Hayato OKUMOTO falcon8823
5
1.1k
RailsGirls IZUMO スポンサーLT
Avatar for 16bit_idol 16bitidol
0
190
ISUCON研修おかわり会 講義スライド
Avatar for Yuki Yata arfes0e2b3c
1
450
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
Avatar for MIKIO KUBO mickey_kubo
1
130

Featured

See All Featured
Scaling GitHub
Avatar for Zach Holman holman
460
140k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
690
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.6k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.9k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
3.9k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
126
53k

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!