building a maintainable reactiflux application
TRANSCRIPT
BUILDING A MAINTAINABLEREACTIFLUX APPLICATIONREFLECTIONS AFTER A YEAR IN PRODUCTION
1. FOLLOW THE "FUNCTIONAL CORE, IMPERATIVE SHELL" MANTRA
1. FOLLOW THE "FUNCTIONAL CORE, IMPERATIVE SHELL" MANTRA
1. FOLLOW THE "FUNCTIONAL CORE, IMPERATIVE SHELL" MANTRA
1. FOLLOW THE "FUNCTIONAL CORE, IMPERATIVE SHELL" MANTRA
1. FOLLOW THE "FUNCTIONAL CORE, IMPERATIVE SHELL" MANTRA
Simple! ...but not always easy
1. FOLLOW THE "FUNCTIONAL CORE, IMPERATIVE SHELL" MANTRA
foo(x) → bar(x) → baz(x)
1. FOLLOW THE "FUNCTIONAL CORE, IMPERATIVE SHELL" MANTRA
foo(x) → bar(x) → baz(x,y)
2. USE DEPENDENCY INJECTION, BUT KISS
2. USE DEPENDENCY INJECTION, BUT KISS
3. USE AN EXPLICITAPP INSTANCE
3. USE AN EXPLICIT APP INSTANCE
3. USE AN EXPLICIT APP INSTANCE
3. USE AN EXPLICIT APP INSTANCE
3. USE AN EXPLICIT APP INSTANCE
3. USE AN EXPLICIT APP INSTANCE
Beware God Objects, though
4. WRAP ARCHITECTURALLY SIGNIFICANT API'S
4. WRAP ARCHITECTURALLY SIGNIFICANT API'S
4. WRAP ARCHITECTURALLY SIGNIFICANT API'S
4. WRAP ARCHITECTURALLY SIGNIFICANT API'S
4. WRAP ARCHITECTURALLY SIGNIFICANT API'S
5. TAKE STYLE ENCAPSULATION SERIOUSLY
5. TAKE STYLE ENCAPSULATION SERIOUSLY
5. TAKE STYLE ENCAPSULATION SERIOUSLY
5. TAKE STYLE ENCAPSULATION SERIOUSLY
⇐ TimelinePanel.js
5. TAKE STYLE ENCAPSULATION SERIOUSLY
⇐ TimelinePanel.js
5. TAKE STYLE ENCAPSULATION SERIOUSLY
⇐ TimelinePanel.js
5. TAKE STYLE ENCAPSULATION SERIOUSLY
⇐ TimelinePanel.js
⇒ "fiba-TimelinePanel-list"
5. TAKE STYLE ENCAPSULATION SERIOUSLY
http://imgur.com/gallery/Q3cUg29
5. TAKE STYLE ENCAPSULATION SERIOUSLY
http://imgur.com/gallery/Q3cUg29
6. STORE AS LITTLE DATA AS POSSIBLE, DERIVE THE REST
6. STORE AS LITTLE DATA AS POSSIBLE, DERIVE THE REST
6. STORE AS LITTLE DATA AS POSSIBLE, DERIVE THE REST
6. STORE AS LITTLE DATA AS POSSIBLE, DERIVE THE REST
6. STORE AS LITTLE DATA AS POSSIBLE, DERIVE THE REST
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
6. STORE AS LITTLE DATA AS POSSIBLE, DERIVE THE REST
You'll need memoize()
Also, beware memoize()
7. KEEP THINGS JSON-SERIALIZABLE
7. KEEP THINGS JSON-SERIALIZABLE
7. KEEP THINGS JSON-SERIALIZABLE
7. KEEP THINGS JSON-SERIALIZABLE
▸ Tests need maintenance
▸ Snapshots need maintenance
▸ Doesn't test the imperative shell
8. SURPRISING THINGS FIT INTO THE FLUX MODEL
8. SURPRISING THINGS FIT INTO THE FLUX MODEL
8. SURPRISING THINGS FIT INTO THE FLUX MODEL
8. SURPRISING THINGS FIT INTO THE FLUX MODEL
8. SURPRISING THINGS FIT INTO THE FLUX MODEL
...but watch out forperformance issues
9. SHARE THE PAIN OF YOUR USERS
9. SHARE THE PAIN OF YOUR USERS
9. SHARE THE PAIN OF YOUR USERS
9. SHARE THE PAIN OF YOUR USERS
http://www.reactiongifs.com/magic-3/
9. SHARE THE PAIN OF YOUR USERS
http://www.reactiongifs.com/magic-3/
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
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