Reflections after a year in production. Originally presented in https://www.meetup.com/Munchen-Beer-Tech-Meetup/events/235776051/

1. BUILDING A MAINTAINABLE
REACTIFLUX APPLICATION
REFLECTIONS AFTER A YEAR IN PRODUCTION

4. 1. FOLLOW THE "FUNCTIONAL CORE,
IMPERATIVE SHELL" MANTRA

5. 1. FOLLOW THE "FUNCTIONAL CORE, IMPERATIVE SHELL" MANTRA

6. 1. FOLLOW THE "FUNCTIONAL CORE, IMPERATIVE SHELL" MANTRA

7. 1. FOLLOW THE "FUNCTIONAL CORE, IMPERATIVE SHELL" MANTRA

8. 1. FOLLOW THE "FUNCTIONAL CORE, IMPERATIVE SHELL" MANTRA
Simple!
...but not always easy

9. 1. FOLLOW THE "FUNCTIONAL CORE, IMPERATIVE SHELL" MANTRA
foo(x) → bar(x) → baz(x)

10. 1. FOLLOW THE "FUNCTIONAL CORE, IMPERATIVE SHELL" MANTRA
foo(x) → bar(x) → baz(x,y)

11. 2. USE DEPENDENCY
INJECTION, BUT KISS

12. 2. USE DEPENDENCY INJECTION, BUT KISS

13. 3. USE AN EXPLICIT
APP INSTANCE

14. 3. USE AN EXPLICIT APP INSTANCE

15. 3. USE AN EXPLICIT APP INSTANCE

16. 3. USE AN EXPLICIT APP INSTANCE

17. 3. USE AN EXPLICIT APP INSTANCE

18. 3. USE AN EXPLICIT APP INSTANCE
Beware God Objects, though

19. 4. WRAP ARCHITECTURALLY
SIGNIFICANT API'S

20. 4. WRAP ARCHITECTURALLY SIGNIFICANT API'S

21. 4. WRAP ARCHITECTURALLY SIGNIFICANT API'S

22. 4. WRAP ARCHITECTURALLY SIGNIFICANT API'S

23. 4. WRAP ARCHITECTURALLY SIGNIFICANT API'S

24. 5. TAKE STYLE
ENCAPSULATION SERIOUSLY

25. 5. TAKE STYLE ENCAPSULATION SERIOUSLY

26. 5. TAKE STYLE ENCAPSULATION SERIOUSLY

27. 5. TAKE STYLE ENCAPSULATION SERIOUSLY
⇐ TimelinePanel.js

28. 5. TAKE STYLE ENCAPSULATION SERIOUSLY
⇐ TimelinePanel.js

29. 5. TAKE STYLE ENCAPSULATION SERIOUSLY
⇐ TimelinePanel.js

30. 5. TAKE STYLE ENCAPSULATION SERIOUSLY
⇐ TimelinePanel.js
"fiba-TimelinePanel-list"

31. 5. TAKE STYLE ENCAPSULATION SERIOUSLY
http://imgur.com/gallery/Q3cUg29

32. 5. TAKE STYLE ENCAPSULATION SERIOUSLY
http://imgur.com/gallery/Q3cUg29

33. 6. STORE AS LITTLE DATA AS
POSSIBLE, DERIVE THE REST

34. 6. STORE AS LITTLE DATA AS POSSIBLE, DERIVE THE REST

35. 6. STORE AS LITTLE DATA AS POSSIBLE, DERIVE THE REST

36. 6. STORE AS LITTLE DATA AS POSSIBLE, DERIVE THE REST

37. 6. STORE AS LITTLE DATA AS POSSIBLE, DERIVE THE REST

38. 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

39. 6. STORE AS LITTLE DATA AS POSSIBLE, DERIVE THE REST
You'll need memoize()
Also, beware memoize()

40. 7. KEEP THINGS
JSON-SERIALIZABLE

41. 7. KEEP THINGS JSON-SERIALIZABLE

42. 7. KEEP THINGS JSON-SERIALIZABLE

43. 7. KEEP THINGS JSON-SERIALIZABLE
▸ Tests need maintenance
▸ Snapshots need maintenance
▸ Doesn't test the imperative shell

44. 8. SURPRISING THINGS
FIT INTO THE FLUX MODEL

45. 8. SURPRISING THINGS FIT INTO THE FLUX MODEL

46. 8. SURPRISING THINGS FIT INTO THE FLUX MODEL

47. 8. SURPRISING THINGS FIT INTO THE FLUX MODEL

48. 8. SURPRISING THINGS FIT INTO THE FLUX MODEL
...but watch out for
performance issues

49. 9. SHARE THE PAIN OF
YOUR USERS

50. 9. SHARE THE PAIN OF YOUR USERS

51. 9. SHARE THE PAIN OF YOUR USERS

52. 9. SHARE THE PAIN OF YOUR USERS
http://www.reactiongifs.com/magic-3/

53. 9. SHARE THE PAIN OF YOUR USERS
http://www.reactiongifs.com/magic-3/

54. 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

55. BUILDING A MAINTAINABLE REACTIFLUX APPLICATION
THANKS FOR LISTENING!
▸ Come say hi
@Jareware
▸ Debugging is in Flux - Stockholm Beer & Tech ‘16
https://vimeo.com/166342150
▸ CSS namespacing utility
https://github.com/jareware/css-ns
▸ Robust, scalable CSS architecture
https://github.com/jareware/css-architecture