Intro to React
& Redux 

Visit our website

https://www.javascriptla.net

Presented by Vijay & Chadd

Enter Our Raffle!

http://vijayxtreme.com/randomdrawing/​

React & Redux?

• React, great way to build UI fast (e.g. lists, tables, divs)
• Redux, (aka Flux pattern with Reducers) is a way to contain all your 'state' in one place (as opposed to all over your components)
• Together = Solid & Easy to Manage App

Redux is a design pattern, just like MVC

Traditional MVC

• Models hold data
• Views for presentation
• Controllers that liaison between views and models to update information and present new views
   
• Advantages & Disadvantages:
  • + Industry standard, has worked for 30+ years
  • - Scaling tends to be a challenge (especially writing new controllers and avoiding code bloat)

How is Redux similar to traditional MVC?

• Views are created with React
• Central "store" for data aka "application state" (like a model)
• The Store communicates indirectly with React Views via "Actions", that create new states (with the help of "Reducers")  which trigger re-rendering of Views
• The key difference between MVC & Flux/Redux is the concept of unidirectional data flow
• By the way, Redux is NOT Redux Framework :)

What's Unidirectional Data Flow?

A Diagram to Explain

* from the Flux website @ https://facebook.github.io/flux/docs/overview.html

• Essentially data flows one way only.
• Views emit actions (through events) which are translated by dispatchers that update the store (central state).
• Top level views "listen" for changes to store, re-render all concerned views
• All modules are independent.  State is not directly mutated by a controller
• Compare this to MVC, where data is usually manipulated directly by controllers, as project scales so do controllers (could this be buggy)?

Explanation from Flux Website

• Views can continue to emit actions which are handled by dispatchers and sent to stores before updating the view again (with new data)

Need more info?

Here's a video from Facebook

Find out about the scaling issues they had with their chat app on MVC

What's Redux's part in Flux?

• Uses "reducer functions" to manipulate the state of your application, state should be "immutable"
• As your application grows in scale, you can abstract your reducer complexity into smaller reducers (which later are combined by your app into one place)
• One central store for your application (whereas Flux can support many stores)

Let's do an Exercise

(A simple demo)

 More Great Demos At:

• http://redux.js.org/

What is MobX?

An alternative to Redux / Flux

MobX - Core Ideas:

• You don't need to make state "immutable"
• The real issue is state being inconsistent -- so:
  • Let MobX handle this problem for you!
• Key benefits: 
  • You get to work with arrays, objects, primitives directly again
  • MobX handles the derivations & reactions (changes to your UI & I/O) through "observables"
  • It's kind of magic

MobX Design Pattern

• Actions are your plain functions, event handlers
• You mutate the state, then let MobX handle the updates

Let's check out their website demo

Flux vs Redux vs MobX vs MVC

What Should I Use?

MVC / MobX

• You want to continue to work with JavaScript the way you are used to (object oriented programming)
• You prefer managing models / data / state directly (as opposed to indirect)
• You love magic

Flux / Redux

• You desire greater separation of concern and have a strong need to track down every last thing in your app
• Scaling has been a pain point for you in past applications
• You are ready to move on past traditional MVC
• You dislike magicians

Wrap Up

• Flux / Redux = just a new idea for designing an application -- try it out
• Not every project needs Flux/Redux -- e.g. if you're making a simple website where data isn't changing often -- you probably can just use vanilla JS
• Use MobX -- it's also a great new idea for designing an application -- which one do you like better? MobX or Redux?  Or are you still privy to MVC?

Thanks for coming!

Let's do the raffle!

Credits:

Thank you to the following:

Disney, GA, Chadd, and YOU!

Over 150 RSVPS! You guys are amazing!

See you all next time, and help us spread the word!

Subscribe to Us on Youtube

(especially if you want to watch this on video again and want to see other trainings/videos):

http://youtube.com/javascriptla