Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Let’s Learn
and
Implement flux
Adgorithmics LLC

小倉 大樹
Theme
• Implement a small and simple flux sample
• Learn Zen
• You’ll be able to learn any framework fast
whatever grow in ...
The image we’ve often seen
Complicated?
Take a step by step
• Register ActionCreator for Component
• just like addEventListener
• Store subscribes Dispatcher
• Di...
Umm, sounds like just
Observer pattern?
Improved MVC?
try
Workflow
• ActionCreator sends Action to Dispatcher
• Store is changed if subscribing event occurred
• Component is changed...
try
run
How can I improve that?
• Remove boilerplate code
• Dispatcher instance handling
• Validation
• State immutability
• Recen...
See Amamori
• https://github.com/hachibeeDI/Amamori
• Based on this sample
• Simple & Easy
• Immutable Store
• Easy to und...
Other frameworks (popular)
• flux-utils (just some parts)
• Redux
• alt
Upcoming SlideShare
Loading in …5
×

Let's Lean and Implement flux

6,150 views

Published on

2016年 6月 23日 TokyoJS Revival

Source code sample which is I used on presentation is here https://gist.github.com/hachibeeDI/b765a9e99c0450a9d0900928aed3087b

Published in: Engineering
  • Follow the link, new dating source: ❤❤❤ http://bit.ly/2F4cEJi ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ❤❤❤ http://bit.ly/2F4cEJi ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Let's Lean and Implement flux

  1. 1. Let’s Learn and Implement flux Adgorithmics LLC
 小倉 大樹
  2. 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. 3. The image we’ve often seen
  4. 4. Complicated?
  5. 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. 6. Umm, sounds like just Observer pattern? Improved MVC?
  7. 7. try
  8. 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. 9. try
  10. 10. run
  11. 11. How can I improve that? • Remove boilerplate code • Dispatcher instance handling • Validation • State immutability • Recent knowledge about architecture • (reducer, Container…)
  12. 12. See Amamori • https://github.com/hachibeeDI/Amamori • Based on this sample • Simple & Easy • Immutable Store • Easy to understand (almost 500 lines)
  13. 13. Other frameworks (popular) • flux-utils (just some parts) • Redux • alt

×