intro&to&flux% - spark solutions · whatis& flux&implementaon&use?& 1....
TRANSCRIPT
![Page 1: Intro&to&Flux% - Spark Solutions · Whatis& Flux&implementaon&use?& 1. Startwith&official&Facebook&one& 2. Choose&between&more&conven9onal& ones&(Reflux,&Alt)&or&bleeding&edge& Redux&](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7b68ded7518079a083622/html5/thumbnails/1.jpg)
Intro to Flux
Damian Legawiec CEO of Spark Solu9ons
@damianlegawiec
![Page 2: Intro&to&Flux% - Spark Solutions · Whatis& Flux&implementaon&use?& 1. Startwith&official&Facebook&one& 2. Choose&between&more&conven9onal& ones&(Reflux,&Alt)&or&bleeding&edge& Redux&](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7b68ded7518079a083622/html5/thumbnails/2.jpg)
What is Flux?
Framework?
![Page 3: Intro&to&Flux% - Spark Solutions · Whatis& Flux&implementaon&use?& 1. Startwith&official&Facebook&one& 2. Choose&between&more&conven9onal& ones&(Reflux,&Alt)&or&bleeding&edge& Redux&](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7b68ded7518079a083622/html5/thumbnails/3.jpg)
What is Flux?
Framework?
Library?
![Page 4: Intro&to&Flux% - Spark Solutions · Whatis& Flux&implementaon&use?& 1. Startwith&official&Facebook&one& 2. Choose&between&more&conven9onal& ones&(Reflux,&Alt)&or&bleeding&edge& Redux&](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7b68ded7518079a083622/html5/thumbnails/4.jpg)
What is Flux?
Framework?
Library? Kinda :)
![Page 5: Intro&to&Flux% - Spark Solutions · Whatis& Flux&implementaon&use?& 1. Startwith&official&Facebook&one& 2. Choose&between&more&conven9onal& ones&(Reflux,&Alt)&or&bleeding&edge& Redux&](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7b68ded7518079a083622/html5/thumbnails/5.jpg)
What is Flux?
Architecture PaGern
![Page 6: Intro&to&Flux% - Spark Solutions · Whatis& Flux&implementaon&use?& 1. Startwith&official&Facebook&one& 2. Choose&between&more&conven9onal& ones&(Reflux,&Alt)&or&bleeding&edge& Redux&](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7b68ded7518079a083622/html5/thumbnails/6.jpg)
What is Flux?
Architecture PaGern One Way Data Binding
![Page 7: Intro&to&Flux% - Spark Solutions · Whatis& Flux&implementaon&use?& 1. Startwith&official&Facebook&one& 2. Choose&between&more&conven9onal& ones&(Reflux,&Alt)&or&bleeding&edge& Redux&](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7b68ded7518079a083622/html5/thumbnails/7.jpg)
What is Flux?
Architecture PaGern One Way Data Binding Framework Agnos9c
![Page 8: Intro&to&Flux% - Spark Solutions · Whatis& Flux&implementaon&use?& 1. Startwith&official&Facebook&one& 2. Choose&between&more&conven9onal& ones&(Reflux,&Alt)&or&bleeding&edge& Redux&](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7b68ded7518079a083622/html5/thumbnails/8.jpg)
What is Flux?
Architecture PaGern One Way Data Binding Framework Agnos9c
Not MVC :)
![Page 9: Intro&to&Flux% - Spark Solutions · Whatis& Flux&implementaon&use?& 1. Startwith&official&Facebook&one& 2. Choose&between&more&conven9onal& ones&(Reflux,&Alt)&or&bleeding&edge& Redux&](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7b68ded7518079a083622/html5/thumbnails/9.jpg)
What is Flux?
![Page 10: Intro&to&Flux% - Spark Solutions · Whatis& Flux&implementaon&use?& 1. Startwith&official&Facebook&one& 2. Choose&between&more&conven9onal& ones&(Reflux,&Alt)&or&bleeding&edge& Redux&](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7b68ded7518079a083622/html5/thumbnails/10.jpg)
Store
Model?
![Page 11: Intro&to&Flux% - Spark Solutions · Whatis& Flux&implementaon&use?& 1. Startwith&official&Facebook&one& 2. Choose&between&more&conven9onal& ones&(Reflux,&Alt)&or&bleeding&edge& Redux&](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7b68ded7518079a083622/html5/thumbnails/11.jpg)
Store
Model?
![Page 12: Intro&to&Flux% - Spark Solutions · Whatis& Flux&implementaon&use?& 1. Startwith&official&Facebook&one& 2. Choose&between&more&conven9onal& ones&(Reflux,&Alt)&or&bleeding&edge& Redux&](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7b68ded7518079a083622/html5/thumbnails/12.jpg)
Store
Model? Collec9on?
![Page 13: Intro&to&Flux% - Spark Solutions · Whatis& Flux&implementaon&use?& 1. Startwith&official&Facebook&one& 2. Choose&between&more&conven9onal& ones&(Reflux,&Alt)&or&bleeding&edge& Redux&](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7b68ded7518079a083622/html5/thumbnails/13.jpg)
Store
Model? Collec9on?
![Page 14: Intro&to&Flux% - Spark Solutions · Whatis& Flux&implementaon&use?& 1. Startwith&official&Facebook&one& 2. Choose&between&more&conven9onal& ones&(Reflux,&Alt)&or&bleeding&edge& Redux&](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7b68ded7518079a083622/html5/thumbnails/14.jpg)
Store
Applica9on State Container
![Page 15: Intro&to&Flux% - Spark Solutions · Whatis& Flux&implementaon&use?& 1. Startwith&official&Facebook&one& 2. Choose&between&more&conven9onal& ones&(Reflux,&Alt)&or&bleeding&edge& Redux&](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7b68ded7518079a083622/html5/thumbnails/15.jpg)
Store
Applica9on State Container Can be used with ORM
![Page 16: Intro&to&Flux% - Spark Solutions · Whatis& Flux&implementaon&use?& 1. Startwith&official&Facebook&one& 2. Choose&between&more&conven9onal& ones&(Reflux,&Alt)&or&bleeding&edge& Redux&](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7b68ded7518079a083622/html5/thumbnails/16.jpg)
Store
Applica9on State Container Can be used with ORM
Simple JavaScript object enhanced by EventEmi2er or MicroEvent
![Page 17: Intro&to&Flux% - Spark Solutions · Whatis& Flux&implementaon&use?& 1. Startwith&official&Facebook&one& 2. Choose&between&more&conven9onal& ones&(Reflux,&Alt)&or&bleeding&edge& Redux&](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7b68ded7518079a083622/html5/thumbnails/17.jpg)
Ac9ons
Used to invoke Change of state
![Page 18: Intro&to&Flux% - Spark Solutions · Whatis& Flux&implementaon&use?& 1. Startwith&official&Facebook&one& 2. Choose&between&more&conven9onal& ones&(Reflux,&Alt)&or&bleeding&edge& Redux&](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7b68ded7518079a083622/html5/thumbnails/18.jpg)
Ac9ons
Used to invoke Change of state Invoked from Views (Components in React)
Ac9ons
![Page 19: Intro&to&Flux% - Spark Solutions · Whatis& Flux&implementaon&use?& 1. Startwith&official&Facebook&one& 2. Choose&between&more&conven9onal& ones&(Reflux,&Alt)&or&bleeding&edge& Redux&](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7b68ded7518079a083622/html5/thumbnails/19.jpg)
Ac9ons
Used to invoke Change of state Invoked from Views (Components in React) They pass arguments (payload) to Dispatcher
Ac9ons
![Page 20: Intro&to&Flux% - Spark Solutions · Whatis& Flux&implementaon&use?& 1. Startwith&official&Facebook&one& 2. Choose&between&more&conven9onal& ones&(Reflux,&Alt)&or&bleeding&edge& Redux&](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7b68ded7518079a083622/html5/thumbnails/20.jpg)
Dispatcher
There can be only one!
Ac9ons
![Page 21: Intro&to&Flux% - Spark Solutions · Whatis& Flux&implementaon&use?& 1. Startwith&official&Facebook&one& 2. Choose&between&more&conven9onal& ones&(Reflux,&Alt)&or&bleeding&edge& Redux&](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7b68ded7518079a083622/html5/thumbnails/21.jpg)
Dispatcher
There can be only one! Dispatches Ac?ons to the Store
Dispatcher Ac9ons
![Page 22: Intro&to&Flux% - Spark Solutions · Whatis& Flux&implementaon&use?& 1. Startwith&official&Facebook&one& 2. Choose&between&more&conven9onal& ones&(Reflux,&Alt)&or&bleeding&edge& Redux&](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7b68ded7518079a083622/html5/thumbnails/22.jpg)
Smart Components
Aware of Store
![Page 23: Intro&to&Flux% - Spark Solutions · Whatis& Flux&implementaon&use?& 1. Startwith&official&Facebook&one& 2. Choose&between&more&conven9onal& ones&(Reflux,&Alt)&or&bleeding&edge& Redux&](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7b68ded7518079a083622/html5/thumbnails/23.jpg)
Smart Components
Aware of Store Listen for Store change
![Page 24: Intro&to&Flux% - Spark Solutions · Whatis& Flux&implementaon&use?& 1. Startwith&official&Facebook&one& 2. Choose&between&more&conven9onal& ones&(Reflux,&Alt)&or&bleeding&edge& Redux&](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7b68ded7518079a083622/html5/thumbnails/24.jpg)
Smart Components
Aware of Store Listen for Store change
Data is in State
![Page 25: Intro&to&Flux% - Spark Solutions · Whatis& Flux&implementaon&use?& 1. Startwith&official&Facebook&one& 2. Choose&between&more&conven9onal& ones&(Reflux,&Alt)&or&bleeding&edge& Redux&](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7b68ded7518079a083622/html5/thumbnails/25.jpg)
Smart Components Aware of Store
Listen for Store change Data is in State
Pass data via props to Dumb Components
![Page 26: Intro&to&Flux% - Spark Solutions · Whatis& Flux&implementaon&use?& 1. Startwith&official&Facebook&one& 2. Choose&between&more&conven9onal& ones&(Reflux,&Alt)&or&bleeding&edge& Redux&](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7b68ded7518079a083622/html5/thumbnails/26.jpg)
Dumb Components
Only display data passed in props
![Page 27: Intro&to&Flux% - Spark Solutions · Whatis& Flux&implementaon&use?& 1. Startwith&official&Facebook&one& 2. Choose&between&more&conven9onal& ones&(Reflux,&Alt)&or&bleeding&edge& Redux&](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7b68ded7518079a083622/html5/thumbnails/27.jpg)
Single Page App Example
https://greetabl.com/builder
![Page 28: Intro&to&Flux% - Spark Solutions · Whatis& Flux&implementaon&use?& 1. Startwith&official&Facebook&one& 2. Choose&between&more&conven9onal& ones&(Reflux,&Alt)&or&bleeding&edge& Redux&](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7b68ded7518079a083622/html5/thumbnails/28.jpg)
Web App Example
https://milanstyle.com
![Page 29: Intro&to&Flux% - Spark Solutions · Whatis& Flux&implementaon&use?& 1. Startwith&official&Facebook&one& 2. Choose&between&more&conven9onal& ones&(Reflux,&Alt)&or&bleeding&edge& Redux&](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7b68ded7518079a083622/html5/thumbnails/29.jpg)
When to use Flux?
Single Page App Complex UI
Real World apps :)
![Page 30: Intro&to&Flux% - Spark Solutions · Whatis& Flux&implementaon&use?& 1. Startwith&official&Facebook&one& 2. Choose&between&more&conven9onal& ones&(Reflux,&Alt)&or&bleeding&edge& Redux&](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7b68ded7518079a083622/html5/thumbnails/30.jpg)
When not to use Flux?
Learning React :) Simple components enhancing sta9c site
![Page 31: Intro&to&Flux% - Spark Solutions · Whatis& Flux&implementaon&use?& 1. Startwith&official&Facebook&one& 2. Choose&between&more&conven9onal& ones&(Reflux,&Alt)&or&bleeding&edge& Redux&](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7b68ded7518079a083622/html5/thumbnails/31.jpg)
What is Flux implementa9on use?
Short Answer REDUX
![Page 32: Intro&to&Flux% - Spark Solutions · Whatis& Flux&implementaon&use?& 1. Startwith&official&Facebook&one& 2. Choose&between&more&conven9onal& ones&(Reflux,&Alt)&or&bleeding&edge& Redux&](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7b68ded7518079a083622/html5/thumbnails/32.jpg)
What is Flux implementa9on use?
Long Answer
![Page 33: Intro&to&Flux% - Spark Solutions · Whatis& Flux&implementaon&use?& 1. Startwith&official&Facebook&one& 2. Choose&between&more&conven9onal& ones&(Reflux,&Alt)&or&bleeding&edge& Redux&](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7b68ded7518079a083622/html5/thumbnails/33.jpg)
What is Flux implementa9on use?
1. Start with official Facebook one 2. Choose between more conven9onal
ones (Reflux, Alt) or bleeding edge Redux
![Page 34: Intro&to&Flux% - Spark Solutions · Whatis& Flux&implementaon&use?& 1. Startwith&official&Facebook&one& 2. Choose&between&more&conven9onal& ones&(Reflux,&Alt)&or&bleeding&edge& Redux&](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7b68ded7518079a083622/html5/thumbnails/34.jpg)
Future reading List
1. hGps://facebook.github.io/flux/docs/overview.html#content
2. hGp://blog.andrewray.me/flux-‐for-‐stupid-‐people/
![Page 35: Intro&to&Flux% - Spark Solutions · Whatis& Flux&implementaon&use?& 1. Startwith&official&Facebook&one& 2. Choose&between&more&conven9onal& ones&(Reflux,&Alt)&or&bleeding&edge& Redux&](https://reader033.vdocuments.site/reader033/viewer/2022042310/5ed7b68ded7518079a083622/html5/thumbnails/35.jpg)
Thanks for your aGen9on!