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
HTTPプロトコル正しく理解していますか？ 〜かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ﾆｬ〜
Avatar for ♛Heitor Hirose hekuchan
2
680
Basic Architectures
Avatar for Denys Poltorak denyspoltorak
0
670
Patterns of Patterns
Avatar for Denys Poltorak denyspoltorak
0
1.4k
AIと一緒にレガシーに向き合ってみた
Avatar for nyafunta9858 nyafunta9858
0
190
それ、本当に安全？ ファイルアップロードで見落としがちなセキュリティリスクと対策
Avatar for ikechi penpeen
7
3.8k
QAフローを最適化し、品質水準を満たしながらリリースまでの期間を最短化する #RSGT2026
Avatar for shibayu36 shibayu36
2
4.3k
Data-Centric Kaggle
Avatar for ねぼすけAI isax1015
2
770
インターン生でもAuth0で 認証基盤刷新が出来るのか
Avatar for takumi taku271
0
190
Implementation Patterns
Avatar for Denys Poltorak denyspoltorak
0
280
CSC307 Lecture 09
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
830
CSC307 Lecture 03
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
490
AI前提で考えるiOSアプリのモダナイズ設計
Avatar for 野瀬田　裕樹 yuukiw00w
0
220

Featured

See All Featured
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.3k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
92
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.7k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
46k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
57
50k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
450
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
0
2.3k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
9.9k

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!