React + Reflux and how to boost your development workflow

React + Reflux
And how to boost your development workflow
Roy Yu
Silicon Valley Code Camp ‘15

View Slide

About Me

View Slide

About Me
If you are already comfortable with the technology in
today’s presentation, you can check this out and play around
with it as well. Don’t forget to give it a star \o/
React Reflux Workflow Boilerplate
https://github.com/iroy2000/react-reflux-boilerplate-with-
webpack

View Slide

React

View Slide

React
•  A JS library that pitches different idea on how to build
User Interface
•  Simplicity over familiarity
•  Unidirectional data flow
•  Virtual DOM concept

View Slide

React
•  It is not a MV* framework that you see in the market
today.
•  If you are coming from other Javascript framework,
React does NOT have :-
•  Controllers
•  Templates
•  Models
•  Global Event Listeners

View Slide

React
All React cares about is Component.
It is also usually consider a “View”. And since it doesn’t
have assumption of your current technology stack, it is
fairly easy to mix into your current project.

View Slide

React
•  React has a optional syntax component called JSX
•  And we will use JSX in our presentation today
•  And with JSX, you can bundle javascript and HTML to
make your component easy to understand.

View Slide

React
OK
Here now comes your first React component !!

View Slide

React
BUT
Let me explain in one slide of basic React Syntax ~

View Slide

React
•  Everything in React is a component and it is invoked with
React.createClass()
•  And when develop a component, you must have at least a
function called render()
•  This function means what to output ( print )

View Slide

React
Yes, so cool !
\o/

View Slide

React
O… HTML?
/O\

View Slide

React
•  The html mark up above is NOT a real html markup …
•  It is something called “JSX” ( a.k.a JavaScript XML )
that FB build as a React syntax extension.
•  JSX is a sugar syntax of pure javascript data structures.

View Slide

React
It will eventually
transformed into
native JS code
You can write your React component without JSX,
but it just makes your life much easier J

View Slide

React
•  Developing JSX is almost the same as writing HTML /
XML.

View Slide

React
{} is for evaluating a
javascript variables
or expressions.
Passing attributes to
other component.
You can pass in
callback as properties
to other component.
Custom tag
means a
component

View Slide

React
•  Before showing you some demo, there are a few concepts
you need to understand in React …

View Slide

React
•  life cycle methods means at some special moments in the
application, React gives developers some methods / hooks to
inject code before and after those moments.
•  Each React component has a few life cycle methods, the most
basic one are the followings :-
•  componentWillMount()
•  componentDidMount()
•  componentWillUnmount()
•  Mount means attach to a DOM, so the above functions mean
“What should a component do before / after attaching to a
DOM”
•  Unmount means unattach from a DOM, it means “What
should a component do when it unattach from a DOM”

View Slide

React
•  React component has concept of “States and Properties” :-
•  States are mutable data and usually changed because of
user inputs or interactions. You can consider “states” as
underlying model of a “View”. Because when states
changes, React will call “render” function. ( stateful
component )
•  Properties ( props ), on the other hand, are immutable data
and mostly for display purpose. ( stateless component )

View Slide

React
Why does React has States and Props ?
•  In React theory, we want to keep most of our component as
“stateless”, which will decrease the complexity of our
application.
•  A common pattern is have a component up in hierarchy to own
the states and pass those as properties to “child components”
•  And the parent component can also pass in a callback to
children and give it a option to notify the parent if the state
should change.

View Slide

React
Props
•  getDefaultProps() // plural
•  Inside your component, you can access it with
•  this.props.your_item_key
States
•  getInitialState() // singular
•  setState()
•  Inside your component, you can access it with
•  this.state.your_item_key
•  When you call setState(), it will render the corresponding
component.

View Slide

React
Mixins
It is not a concept of React, but it is more like a design
pattern in javascript. The purpose of mixin is enabling
different javascript components to share common
functionalities / behavior by abstracting those common code
into a Mixin.
And React makes it a standard pattern in its framework and
provides a “mixins” keyword for that. You will see that a
lot if you develop a more complicated React application.

View Slide

React
Last few tips before DEMO
•  React component communication is very close to our
DOM interaction nowadays --- Events flow up, Data
flows down.
This is the gist of unidirectional data flow, your data only
flows one way, but your event can bubble up.
Don’t worry if you don’t understand it today, just
remember the red text above and it is for reducing
complexity J

View Slide

React
•  Few of the benefits of using React is to make the
components :-
•  Reusable
•  Composable
•  Unit Testable
•  Easier to Maintain
•  Reducing Complexity
Making sure your component is self contained.
Well, while it’s all true,
developers can still create a
mess without a doubt if it is
not used correctly …

View Slide

React
•  React maintains a in memory representation of DOM
( They called it Virtual DOM ).
•  Whenever the function render() is called, it will return
that Virtual DOM “representations”.
•  And it will go through a diff algorithm to compute the
fastest way to update the real DOM.
•  And it is very fast based on benchmark, because your
component doesn’t interact with real DOM directly.

View Slide

React
•  Live Demo of React

View Slide

React
And when you start digging deeper into React, few
questions might help you along the way :-
•  How do I break out my component to be self contained ?
•  How to isolate my states in a few components, so that the
rest of the components can be as “stateless” as possible ?
•  Whom should own the states ?

View Slide

React
What we’ve covered today in React are pretty basic
concepts, you can do some research later on the following
topics :-
•  React Router ( a routing system for React )
•  React Addon ( some useful utilities to help very specific
use cases )

View Slide

React
•  While everything with ReactJS is good within a small
application, but once your project size getting larger,
you'll run into issues about handling data.
•  In fact, ReactJS doesn't really care how the data gets
passed in or how that data should be handled across the
web application.

View Slide

React
•  Some developers try to use React to replace the View of
their Backbone applications; while others try to inject
React into their own frontend stack.
•  And today I’m going to pitch another library that work
very well with React’s unidirectional dataflow concept.

View Slide

Reflux
•  Reflux – an Refactor of Flux

View Slide

Reflux
•  Before Reflux, let’s talk about Flux a little bit
•  What is Flux? An application architecture created by
Facebook to build client side web applications to have a
single data flow pattern.

View Slide

Reflux
•  What problem they are trying to solve ??

View Slide

Reflux
Javascript communication is async, how can you guarantee the View
will always be the same state everytime ?? In order words, how to
make our application more predictable.

View Slide

Reflux
What is Flux?

View Slide

Reflux
What the Flux?

View Slide

Reflux
•  All data flows through the dispatcher as a central hub.
•  Store usually holds the application's data and business
logic.

View Slide

Reflux
•  When a user interacts with a React view, the view sends
an action (usually represented as a JavaScript object with
some fields) through the dispatcher.
•  The dispatcher then invokes the callbacks that the stores
have registered with it.

View Slide

Reflux
•  When the store triggers an update, it emits a change event to
signal the view that a change to the data layer has occurred.
•  View listens for these Store events and retrieve data from the
store through an event handler. Then the views call their own
setState() method, causing a re-rendering of themselves.

View Slide

Reflux
Reflux – an Refactor of Flux
Actions is the only agent between View and Store.

View Slide

Reflux
•  The pattern is composed of actions and data stores, where
actions initiate data to flow through store before going
back to the view.
•  View can signal the store through actions.
•  The data flow is still unidirectional.
•  Dispatcher is removed and let actions to act as dispatcher
instead.

View Slide

Reflux
Let’s take a simple real world example ~
How about a shopping Cart Demo ?

View Slide

Reflux

View Slide

Reflux
Let’s say user
triggers an action
from View

View Slide

Reflux
Actions
Store
View

View Slide

Reflux
Let’s go to some Reflux basic syntax ~
But before that, let me show you some example code first.

View Slide

Reflux
Creating Action

View Slide

Reflux

View Slide

Reflux
Action Hooks
Reflux comes with two hooks for each of the actions
•  preEmit
•  Before an action emitting an event, what it should do
•  It receives the arguments from action when the action is invoked
•  shouldEmit
•  Should the event be emitting event at all, by default it returns true
•  And when it returns false, the event won’t be emitted

View Slide

View Slide

Reflux
Extending Reflux Actions
•  If you want to extend Reflux with a common set of
methods, you can use Reflux.ActionMethods. It means
all your actions will mix in with those methods.

View Slide

Creating Store

View Slide

View Slide

Reflux
•  Important: When Store trigger() function is called, it will
pass the flow / data to its listener(s), for example, your
React Component. By default, when the state change,
your View (React Component) will re-render.
•  Let’s look at that again J

View Slide

Store use
trigger() to
pass data to
its listeners.

View Slide

Reflux
•  Store can listen to Actions and perform some operations
•  Store has an init() function that you can bind listeners
•  For example, the above just says that
•  When greetingAction emits an event, the Store’s
getUserByEmail() function will get called

View Slide

Reflux
•  But since this way of init binding pattern is so frequent
that Reflux.Store actually has a “listenable” shorthand to
make our life easier.

View Slide

Reflux

View Slide

Reflux
•  You define and call your actions as usual
•  But your store will need to add a “listenables” with what
Action class you want to mix in. For example, we mix in
“ExampleActions” in our case.

View Slide

Reflux
•  And you need to name your Store methods accordingly
based on your action name, both of the following will the
the same :-
•  onGreet() or greet() ß see the first letter is capitalized ?!
•  But as personal best practice, it is better to do onAction to
indicate that the method is an event handler

View Slide

Reflux
•  Now we have Actions and Store, and the next question is
how my React Component listen to any changes to the
Store ?

View Slide

Reflux
•  Reflux provides a Reflux.ListenerMixin, which will give your
Component a few “listening” methods.
For example :-
•  listenTo
•  listenToMany
If you are curious of what listenTo is doing, it is essentially just
calling the call back of the listenable.
listenTo: function(listenable, callback, defaultCallback ) {
//…
}
Note: listenable could be an Action or a Store

View Slide

View Slide

Reflux
•  There are two more more Reflux convenient mixins that
make certain use case even easier
•  Reflux.connect
•  Reflux.connectFilter

View Slide

View Slide

Reflux
•  Reflux.connectFilter works the same as Reflux.connect, but
it only returns a filtered results before update the component
state.
•  If you are curious, you just need pass in a callback as the 3rd
parameter that do the filtering work.
•  Actually it is the same as you filter the data inside your
Store and send the data back to the listeners. I usually using
lodash or underscore to do the filtering.

View Slide

Reflux
•  Store can listen to another Store, syntax is the same as a
View listening to the Store.
•  This feature is helpful ONLY if you want to do some
transformations for your data. Don’t abuse it ~

View Slide

View Slide

Reflux
Lastly …
•  Just as Actions, Store also has storeMethods, where you
want all your Stores has the same set of methods
available.
•  Store supports “mixins” keyword, just as a React
component.

View Slide

That’s it about the basic React + Reflux
The next section is show you how to build on top

View Slide

That’s it about the basic React + Reflux
The next section is show you how to build on top
And become a Rock Star

View Slide

Gulp

View Slide

What is Gulp ?
•  Gulp is an automate task runner or a build system,
written in node.js
•  Gulp allows you to input your source file, pipe them
through plugins and get the final product at the end

View Slide

What is a build system ?

View Slide

It should take care of your repetitive tasks
•  Concatenating Javascript
•  Prefixing CSS

View Slide

It consumes utilities / plugins to fulfill its task
•  JSHint
•  Uglify Javascript
•  Compile JSX
•  … etc

View Slide

In Gulp, you can also define task to
•  Start a local server
•  Integrate Live Reload feature
•  Deploy your script into destination

View Slide

Looks like some of you are still very confused, try to
imagine a factory ~

View Slide


View Slide

It transforms assets or resources into consumable state.
Image a car factory’s process of transforming “glasses”,
“metal”, “plastic”, “leather”, “carbon fiber” … etc into a
car, and then going through testing process, anti crash test
before shipping to car dealers.
( The process of car factory will be more complicated, this
is a metaphor only )

View Slide

Why do I need it ?
If it used correctly, it could provide benefits on
•  Page performance in automated fashion
•  Image optimization
•  JS minification
•  Html minification
•  Font optimization
•  … all in automated fashion
How many of you still manually copy your JS code and minified
it in an online service and manually deploy / ftp to your server ??

View Slide

Why do I need it ?
If it used correctly, it could also provide benefits on
•  Developing seamless development workflow
•  Live update your in your browser when you make changes to your
code.
•  Run test automatically whenever your JS file changes
•  Give you fast feedback when your code doesn’t work
•  … etc
How many of you still manually reload your browser when you
make code changes ?

View Slide

Why do I need it ?
•  In short, it is recommended for large projects
•  Save Time, Save Money and Get Smarter ~

View Slide

Gulp Basics
•  Before we start, it will be relatively easy for you to
understand Gulp if you have basic knowledge of the
following technologies.
•  The only must have knowledge to use
Gulp is Javascript.

View Slide

Gulp Basics
In order to achieve all we’ve mentioned previously
•  Gulp is heavily relying on Plugins to extend its
functionality
•  You can easily combine different plugins to achieve
complicated task

View Slide

Gulp Basics
•  And this is important!! You should search for available
plugins in Gulp site plugin section ( the most
recommended way ).

View Slide

Gulp Basics

View Slide

Gulp Basics
•  Gulp use Streams to link plugins together. It turns out
that this way makes Gulp blazingly fast ( compare to its
competitor ) by minimizing I/O and temporary files.

View Slide

Gulp Basics
•  Gulp provides a programmable interface to define your
task. And tasks are how you control Gulp, we will cover
later with example.
•  Task can interact with both plugins and streams.

View Slide

Installation
•  You must have npm installed, and run the following
commands :-
•  $> npm install –g gulp
•  $> npm install –save-dev gulp
Yes, you have to install gulp globally and as a project
dependencies.

View Slide

Gulp Basics
•  Create a new working directory
•  Create a file called “gulpfile.js”
•  The “gulpfile.js” is where you define all your task, and you tell
Gulp when to run those tasks
// gulpfile.js
var gulp = require(‘gulp’);
gulp.task(‘minify-css’, function() {
// place your code of css task here
});

View Slide

Gulp Basics
•  gulpfile.js – it tells gulp what are the tasks and when to
run the task.

View Slide

Gulp Basics
Gulp provides several simple interfaces for you to write
tasks with.
•  task // define a task
•  src // where is the source file
•  pipe // how you want to transform your src files
•  dest // where to write your transformed files
•  watch // watch files and do something when file changes

View Slide

Gulp Example

View Slide

Gulp Note
•  Task can just be a list of task
•  Task can have dependencies

View Slide

Gulp Note
•  Remember that all the path are relative to your gulpfile.js
•  Remember that Gulp is using node.js, and you can do
whatever you can do in node.js inside gulpfile.js

View Slide

•  OK! Now you know the secret of Gulp …

View Slide

•  And at this point, you may have the following feeling ~

View Slide

View Slide

•  You think you can do anything now ~

View Slide

•  But wait …

View Slide

Problems Today
•  When we are building large application, especially the
case of Single Page Application ( SPA )
•  So many HTTP request because of various resources
•  Affecting our page rendering time
•  While our application get less and less page reload nowadays,
but that means more and more javascript code inside our page
( thick client ).

View Slide

Problems Today
•  Even with today’s best practice in the industry, we could
only make the problems less obvious, but we didn’t really
solve it.
•  And at some point, all of us will be facing the following
problems :-
•  Minimizing File Size v.s. Minimizing HTTP Request
•  How to package our application and resources and serve to
user as fast as possible
•  How to make our code more modularity and easier to
maintain

View Slide

Problems Today
•  We have introduced Gulp earlier, which helped us to use
industry best practices, for example, minify JS, minify
HTML, optimize images … etc.
But …
•  Still generating a giant JS script at the end
•  Images, CSS has still need to take extra http request
•  It doesn’t understand the dependencies of the resources
•  It doesn’t know how to do on demand ( async ) load ( out
of the box )
•  What about our css, scss, images, coffeescript … etc, why
only we have modularity in Javascript ?

View Slide

Webpack

View Slide

What is Webpack
•  Webpack is …
•  A module bundler
•  It treats all frontend assets as modules
•  Yes, including .coffee, sass, jsx, css, images, fonts .. etc
•  Thus, it understands all the dependencies of your
application ( Dependency Graph )
•  So in short, it takes all your dependencies and generates
static assets.

View Slide

What is Webpack

View Slide

What is Webpack
What does that graph mean ?
•  Everything is a module
•  Module could have dependencies
•  And webpack can turn all module with
dependencies and transform it into static
assets
•  Yes, transform means taking your assets
as input, do something for your assets
and return output assets.
Oh, wait !! We see the word “transform”
again … Is that sound familiar ??

View Slide

What is Webpack
•  How does Gulp different from Webpack ?

View Slide

What is Webpack
•  Webpack ecosystem is very similar to Gulp, it depends
heavily on its “loaders” ( Gulp called it “Plugins” ) to
transform resources
•  Webpack with loaders can do things that Gulp can do
•  Webpack can do more than Gulp ( will cover that )
•  Some people actually replaces Gulp and browsify all
together with Webpack.

View Slide

What is Webpack
Yes, Webpack can do more J
•  Supports code splitting
•  Supports generating artifacts for multiple entry point
application
•  While it has loaders for assets transformation, it also has
plugin to alter out of the box webpack behavior
•  It also comes with a DEV tool to make development life
easier

View Slide

What is Webpack
Code Splitting ( Just for reference of previous slide )
In the market, there are solutions to request each js modules
dynamically or compile all those resources as a giant js file. The
“request per module” approach involves too many http requests;
while the “all in one” approach will have you download all the code
you don’t need.
But webpack is trying to be more flexible by combining related
modules into logical page scope “Chunks”.
For example, in your SPA, when you hit /#/tutor/123 and /#/book/123
are different “logical page”, and when you visit a particular url route,
you should get only what you need for your logical page.

View Slide

What is Webpack
•  Some of you may say …
•  Oh man, why are you showing us Gulp then?
•  Well …
•  While Webpack has very neat feature, it is focusing on
module bundling and transformation
•  And Gulp is defining a workflow and what task to run at
what time
•  They could work pretty well together

View Slide

What is Webpack
Let me give you a quick demo, because it could get confusing if I
don’t do so …
And after that, we will go back to the concept of Webpack ~

View Slide

What is Webpack
Webpack
•  Understands both CommonJS / AMD style ( So it means
you can easily convert your current application to use
with Webpack )
•  We will be CommonJS syntax today ( If you don’t know
what that is, it is a module format for your JS file. )

View Slide

What is Webpack
Webpack
•  Relies heavily on plugins and loaders. Loaders are
mostly for pre-processing files / static assets. Plugins are
extending the webpack itself ( Many of webpack
internals are essentially plugins )
•  For example, webpack don’t understand how to transform
a coffee script unless we include a coffee script loader to
handle it.

View Slide

What is Webpack
Webpack
•  Read a file call “webpack.config.js” to configure your
webpack behavior.
•  The rough idea of what this file will include :-
•  Tell webpack where is your application JS entry point
•  Tell webpack where you want your final transformed file to
be output at
•  Tell webpack what loaders you need to take care of your
file
•  Tell webpack if you want webpack to have any extra
behavior by adding plugins.

View Slide

What is Webpack
Let’s look at a basic example of webpack.config.js

View Slide

View Slide

What is Webpack
Let’s strip it down …

View Slide

•  Tell webpack where is your application JS entry point
•  Tell webpack where you want the final artifacts to be output at
•  Tell webpack what loaders you need to take care of your file
•  Tell webpack what extra behavior it should have by adding plugins.

View Slide

What is Webpack
And in order to use Webpack, it means you need to learn
how to configure webpack.
Let’s go through some basic configuration ~

View Slide

What is Webpack
{
test // finding the file that match the regular expression
loader // how to handle that file type
exclude // exclude the search from this list ( optional )
}
•  Loader transforms your resources
•  Loader can be chained with ‘!’
•  Loader accept query parameter to pass configuration to the loader
•  Loader at the end will return javascript
•  Loader runs in Node.js and most of the loaders are available through npm

View Slide

What is Webpack
Unlike Loaders, Plugins work on entire bundle instead of individual files
Plugins usually can be installed via npm

View Slide

What is Webpack
•  We talk about Code Splitting feature in Webpack earlier,
to get a little deeper, code splitting is able to
1.  Extract common code into shared chunk
2.  Split code into on demand loaded chunk

View Slide

What is Webpack
Extract common code into shared chunk
•  Let’s say you have vendor code and application code.
In your entry section, tell Webpack what to split out
In plugins section, tell Webpack to take all the vendors related code out and make it as
its own package

View Slide

What is Webpack
Split code into on demand loaded chunk ( Lazy Loading )
•  If you have used requireJS before, it is almost the same syntax.
Basic Syntax
require.ensure([], function() {
var MyModule = require(‘./MyModule’);
/* … */
});

View Slide

What is Webpack
Note: You do not need to define anything in Webpack configuration,
Webpack knows your dependencies and understand lazy loading when
analyzing your code.

View Slide

What is Webpack
•  There are chances that you application will have two
different entry points, for example, you application can
contain user normal site and an admin user portal.
•  Or when your application has different user experience in
desktop and mobile and you want to serve different
“application” to different platform.
•  And Webpack is capable of creating multiple entry points
for this kind of purpose.

View Slide

Multiple Entry Points
Remember our webpack entry point config in the
webpack.config.js ??
In order to create another entry, you simply go to that entry
and add the entry point in order to create that.

View Slide

Multiple Entry Points
And from now on when you generate the assets, you will have 3 different files.
One is “main”, one is “admin” and one is “vendors”.

View Slide

What is Webpack
Make sure you don’t mix up the concept of “Lazy Loading”
and “Multiple Entry Points”. “Lazy Loading” are loading
modules, and “Entry Point” is the highest part of your
application.
Webpack will generate a run time for Entry Points, and
“Lazy Loading” are just barely modules and is for inclusion
only.

View Slide

What is Webpack
Webpack also comes with a live reload dev server, what it
means if when you change your frontend assets ( any point
from your application ), it will start a live reload without
any user reload the browser. It is a pretty neat feature.
I will show you in demo as well.
Also, the configuration is in the git repo I show you at the
beginning of this slides.

View Slide

What is Webpack
The first green line:
Make dev server available at
http://localhost:8080/webpack-dev-server/
The second green line:
Include hot reload functionality for your dev server

View Slide

What is Webpack
•  Webpack also has an analyzing tool J

View Slide

What is Webpack
•  Demo

View Slide

What is Webpack
•  Any Questions ?

View Slide

Thank You
You can reach me @
•  https://www.linkedin.com/in/iroy2000
React Reflux Workflow Boilerplate
https://github.com/iroy2000/react-reflux-boilerplate-with-
webpack

View Slide

React + Reflux and how to boost your development workflow

React + Reflux and how to boost your development workflow

Roy Yu

More Decks by Roy Yu

Other Decks in Programming

Featured

Transcript