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

Using Facade pattern with JSX

Olena Sovyn
June 20, 2017
Programming
4
250

Using Facade pattern with JSX

Even though the JSX resemble HTML at the first glance it is only the description of the expected UI and is not the UI by itself. What if we can use this fact and play a little with the JSX tags to make the HOC that will allow us to create similar repetitive components in our apps? I will present a small pattern that I found quite useful in one project for creating different users list.

Olena Sovyn

June 20, 2017
Tweet

More Decks by Olena Sovyn

See All by Olena Sovyn
Hidden Gems in Code Reviews
kiwka
0
33
Testing, tEstIng, TeStInG or how to test React apps with generated input data
kiwka
1
470
Empowering your React application with Flow type system
kiwka
0
28
Building Webflow Ecommerce in 3 stories
kiwka
0
51
Building a Chrome Extension with React
kiwka
0
390
Understanding Recompose through examples
kiwka
0
170
On the way to making React components more reusable
kiwka
2
200

Other Decks in Programming

See All in Programming
JRuby: Looking Forward
headius
1
100
新人PHPer向け 圧倒的に差をつける仕事の進め方 #phpstudy
77web
2
560
デザイナーと協業しているNuxtプロジェクトを、ChromaticによるVRTでさらに改善した話
mozu1206
0
260
Developing Chrome Extension with ruby.wasm
logiteca7
1
930
enjoy_conferences
maimux2x
0
5k
Attributes in PHP 8
beberlei
1
430
230517chatGPT
skume
0
170
Architecting For Scale
squer
0
210
Go1.19から始めるGCのチューニング方法
hagatake
0
100
Mackerel のアクセシビリティ改善事例
azukiazusa1
0
120
その Swift コード、
こう書き換えてみないか / Polishing your Swift code with me!
treastrain
1
3.4k
Firebase A/B TestingとRemote Config
を最大限に活用する方法
mukky620
1
370

Featured

See All Featured
Build your cross-platform service in a week with App Engine
jlugia
222
17k
BBQ
matthewcrist
75
8.2k
jQuery: Nuts, Bolts and Bling
dougneiner
57
6.7k
Statistics for Hackers
jakevdp
787
210k
Why Our Code Smells
bkeepers
PRO
327
55k
How to Ace a Technical Interview
jacobian
271
22k
GraphQLの誤解/rethinking-graphql
sonatard
41
8.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
16
1.3k
Being A Developer After 40
akosma
50
580k
[RailsConf 2023] Rails as a piece of cake
palkan
7
1.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
183
15k
Fantastic passwords and where to find them - at NoRuKo
philnash
33
2k

Transcript

  1. Using Facade pattern
    with JSX
    Olena Sovyn

    (@frontendgirl)

    View Slide

  2. Avatar Name
    Email
    Phone EditUser

    View Slide

  3. View Slide

  4. components.jsx

    View Slide

  5. App.js

    View Slide

  6. user-list.jsx

    View Slide

  7. user-list.jsx

    View Slide

  8. View Slide

  9. App.js

    View Slide

  10. App.js

    View Slide

  11. Facade pattern
    Source: https://www.sitepoint.com/manage-complexity-with-the-facade-pattern/

    View Slide

  12. user-list.jsx

    View Slide

  13. View Slide

  14. extendable textarea react component:

    https://github.com/andreypopp/react-textarea-autosize

    View Slide

  15. Compound Components
    … or the

    View Slide

  16. user-list.jsx

    View Slide

  17. View Slide

  18. 100% correct solution

    View Slide

  19. Why?
    • Business requirements are different between the projects

    • Size of the project are different

    • Our React ecosystem can be different between the
    projects

    • We do not know the future

    View Slide

  20. JSX

    View Slide

  21. JSX

    View Slide