building a maintainable reactiflux application
TRANSCRIPT
![Page 1: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/1.jpg)
BUILDING A MAINTAINABLEREACTIFLUX APPLICATIONREFLECTIONS AFTER A YEAR IN PRODUCTION
![Page 2: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/2.jpg)
![Page 3: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/3.jpg)
![Page 4: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/4.jpg)
1. FOLLOW THE "FUNCTIONAL CORE, IMPERATIVE SHELL" MANTRA
![Page 5: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/5.jpg)
1. FOLLOW THE "FUNCTIONAL CORE, IMPERATIVE SHELL" MANTRA
![Page 6: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/6.jpg)
1. FOLLOW THE "FUNCTIONAL CORE, IMPERATIVE SHELL" MANTRA
![Page 7: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/7.jpg)
1. FOLLOW THE "FUNCTIONAL CORE, IMPERATIVE SHELL" MANTRA
![Page 8: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/8.jpg)
1. FOLLOW THE "FUNCTIONAL CORE, IMPERATIVE SHELL" MANTRA
Simple! ...but not always easy
![Page 9: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/9.jpg)
1. FOLLOW THE "FUNCTIONAL CORE, IMPERATIVE SHELL" MANTRA
foo(x) → bar(x) → baz(x)
![Page 10: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/10.jpg)
1. FOLLOW THE "FUNCTIONAL CORE, IMPERATIVE SHELL" MANTRA
foo(x) → bar(x) → baz(x,y)
![Page 11: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/11.jpg)
2. USE DEPENDENCY INJECTION, BUT KISS
![Page 12: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/12.jpg)
2. USE DEPENDENCY INJECTION, BUT KISS
![Page 13: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/13.jpg)
3. USE AN EXPLICITAPP INSTANCE
![Page 14: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/14.jpg)
3. USE AN EXPLICIT APP INSTANCE
![Page 15: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/15.jpg)
3. USE AN EXPLICIT APP INSTANCE
![Page 16: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/16.jpg)
3. USE AN EXPLICIT APP INSTANCE
![Page 17: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/17.jpg)
3. USE AN EXPLICIT APP INSTANCE
![Page 18: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/18.jpg)
3. USE AN EXPLICIT APP INSTANCE
Beware God Objects, though
![Page 19: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/19.jpg)
4. WRAP ARCHITECTURALLY SIGNIFICANT API'S
![Page 20: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/20.jpg)
4. WRAP ARCHITECTURALLY SIGNIFICANT API'S
![Page 21: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/21.jpg)
4. WRAP ARCHITECTURALLY SIGNIFICANT API'S
![Page 22: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/22.jpg)
4. WRAP ARCHITECTURALLY SIGNIFICANT API'S
![Page 23: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/23.jpg)
4. WRAP ARCHITECTURALLY SIGNIFICANT API'S
![Page 24: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/24.jpg)
5. TAKE STYLE ENCAPSULATION SERIOUSLY
![Page 25: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/25.jpg)
5. TAKE STYLE ENCAPSULATION SERIOUSLY
![Page 26: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/26.jpg)
5. TAKE STYLE ENCAPSULATION SERIOUSLY
![Page 27: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/27.jpg)
5. TAKE STYLE ENCAPSULATION SERIOUSLY
⇐ TimelinePanel.js
![Page 28: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/28.jpg)
5. TAKE STYLE ENCAPSULATION SERIOUSLY
⇐ TimelinePanel.js
![Page 29: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/29.jpg)
5. TAKE STYLE ENCAPSULATION SERIOUSLY
⇐ TimelinePanel.js
![Page 30: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/30.jpg)
5. TAKE STYLE ENCAPSULATION SERIOUSLY
⇐ TimelinePanel.js
⇒ "fiba-TimelinePanel-list"
![Page 31: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/31.jpg)
5. TAKE STYLE ENCAPSULATION SERIOUSLY
http://imgur.com/gallery/Q3cUg29
![Page 32: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/32.jpg)
5. TAKE STYLE ENCAPSULATION SERIOUSLY
http://imgur.com/gallery/Q3cUg29
![Page 33: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/33.jpg)
6. STORE AS LITTLE DATA AS POSSIBLE, DERIVE THE REST
![Page 34: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/34.jpg)
6. STORE AS LITTLE DATA AS POSSIBLE, DERIVE THE REST
![Page 35: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/35.jpg)
6. STORE AS LITTLE DATA AS POSSIBLE, DERIVE THE REST
![Page 36: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/36.jpg)
6. STORE AS LITTLE DATA AS POSSIBLE, DERIVE THE REST
![Page 37: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/37.jpg)
6. STORE AS LITTLE DATA AS POSSIBLE, DERIVE THE REST
![Page 38: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/38.jpg)
SHOW ME YOUR [CODE] AND CONCEAL YOUR [DATA STRUCTURES], AND I SHALL CONTINUE TO BE MYSTIFIED. SHOW ME YOUR [DATA STRUCTURES], AND I WON'T USUALLY NEED YOUR [CODE]; IT'LL BE OBVIOUS.
Fred Brooks, The Mythical Man-Month
6. STORE AS LITTLE DATA AS POSSIBLE, DERIVE THE REST
![Page 39: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/39.jpg)
6. STORE AS LITTLE DATA AS POSSIBLE, DERIVE THE REST
You'll need memoize()
Also, beware memoize()
![Page 40: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/40.jpg)
7. KEEP THINGS JSON-SERIALIZABLE
![Page 41: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/41.jpg)
7. KEEP THINGS JSON-SERIALIZABLE
![Page 42: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/42.jpg)
7. KEEP THINGS JSON-SERIALIZABLE
![Page 43: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/43.jpg)
7. KEEP THINGS JSON-SERIALIZABLE
▸ Tests need maintenance
▸ Snapshots need maintenance
▸ Doesn't test the imperative shell
![Page 44: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/44.jpg)
8. SURPRISING THINGS FIT INTO THE FLUX MODEL
![Page 45: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/45.jpg)
8. SURPRISING THINGS FIT INTO THE FLUX MODEL
![Page 46: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/46.jpg)
8. SURPRISING THINGS FIT INTO THE FLUX MODEL
![Page 47: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/47.jpg)
8. SURPRISING THINGS FIT INTO THE FLUX MODEL
![Page 48: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/48.jpg)
8. SURPRISING THINGS FIT INTO THE FLUX MODEL
...but watch out forperformance issues
![Page 49: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/49.jpg)
9. SHARE THE PAIN OF YOUR USERS
![Page 50: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/50.jpg)
9. SHARE THE PAIN OF YOUR USERS
![Page 51: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/51.jpg)
9. SHARE THE PAIN OF YOUR USERS
![Page 52: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/52.jpg)
9. SHARE THE PAIN OF YOUR USERS
http://www.reactiongifs.com/magic-3/
![Page 53: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/53.jpg)
9. SHARE THE PAIN OF YOUR USERS
http://www.reactiongifs.com/magic-3/
![Page 54: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/54.jpg)
BUILDING A MAINTAINABLE REACTIFLUX APPLICATION
SUMMARY
1. Follow the "functional core, imperative shell" mantra
2. Use dependency injection, but KISS
3. Use an explicit app instance
4. Wrap architecturally significant API's
5. Take style encapsulation seriously
6. Store as little data as possible, derive the rest
7. Keep things JSON-serializable
8. Surprising things fit into the Flux model
9. Share the pain of your users
![Page 55: Building a maintainable Reactiflux application](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cef8c41a28abab738b53f3/html5/thumbnails/55.jpg)
BUILDING A MAINTAINABLE REACTIFLUX APPLICATION
THANKS FOR LISTENING!
▸ Come say hi@Jareware
▸ Debugging is in Flux - Stockholm Beer & Tech ‘16https://vimeo.com/166342150
▸ CSS namespacing utilityhttps://github.com/jareware/css-ns
▸ Robust, scalable CSS architecture https://github.com/jareware/css-architecture