The document introduces flux, an architecture pattern for building user interfaces. It provides a step-by-step overview of implementing a simple flux sample to learn the core concepts. The key aspects covered are registering action creators, using a dispatcher and store to manage data flow, and subscribing components to updates. Some ways to improve upon the basic implementation are also discussed, such as removing boilerplate code and ensuring state immutability.

1. Let’s Learn
and
Implement flux
Adgorithmics LLC
小倉 大樹

2. Theme
• Implement a small and simple flux sample
• Learn Zen
• You’ll be able to learn any framework fast
whatever grow in next popularity
• (๑˃ ̵ᴗ˂̵)‫و‬

3. The image we’ve often seen

4. Complicated?

5. Take a step by step
• Register ActionCreator for Component
• just like addEventListener
• Store subscribes Dispatcher
• Dispatcher is EventEmitter
• Component subscribes Store changed
• Store is EventEmitter with state
• Component waiting user interaction
• Ready to fire

6. Umm, sounds like just
Observer pattern?
Improved MVC?

7. try

8. Workflow
• ActionCreator sends Action to Dispatcher
• Store is changed if subscribing event occurred
• Component is changed if subscribing store
changed
• View is changed by Component (React do this)

9. try

10. run

11. How can I improve that?
• Remove boilerplate code
• Dispatcher instance handling
• Validation
• State immutability
• Recent knowledge about architecture
• (reducer, Container…)

12. See Amamori
• https://github.com/hachibeeDI/Amamori
• Based on this sample
• Simple & Easy
• Immutable Store
• Easy to understand (almost 500 lines)

13. Other frameworks (popular)
• flux-utils (just some parts)
• Redux
• alt