Author: Son Tang - Senior Engineer Manager Contact Email: sontang@kms-technology.com Git repo: https://github.com/hunterbmt/react_redux_seminar Working as a Front-end developer is more challenging than ever since the Front-end part of application is no longer simple tasks. Nowadays, with the increased popularity of Single Page Application (SPA), developing a Front-end application requires more tools, more frameworks and also more attention from software engineers to application architecture so as to make sure high performance and scalability. When the complexity of your SPA increases, more people have to work on the application at the same time and a larger number of components and UI elements are built. That results in the application scalability becoming a signification problem. Without a good approach, the more complicated our application becomes, the buggier, the more unproductive and low-performing it becomes. React and Redux are one of many technical stacks which provides a lot of support to developers to build a solid SPA in an easy and effective way. They are easy to pick up and to be productive with. This presention will discuss benefits of using React and Redux as well as how to architect application in order to scale effectively without sacrificing benefits we have from React and Redux.

1. SON TANG • SENIOR ENGINEERING MANAGER • KMS
React, Redux, how to scale

2. WHY DO WE USE REDUX
WHY DO WE USE REACT
ELM ARCHITECTURE
Q & A
Agenda
PROBLEM WITH SCALE

3. WHY DO WE USE REACT

4. 44
If you want to move a small distance, just
walk. If you want to move a great distance
you need some help
“
”

5. React is a JS library,
not a framework

6. React only supports
building User
Interfaces

7. We describe User
Interfaces with React
and React will take
care how to translate
those into actual UI

8. UI Definition Browser Render

9. JSX

10. Others put “JS” into
your HTML. React
puts “HTML” in your
JS

11. JS in HTML JSX

12. Virtual
representation

13. React manages and
able to optimize how
and when actual UI get
sync with virtual
representation

14. React will handle the
performance
optimization so we
could focus to our
own business

15. React force us to
write reusable and
composable
components

16. WHY DO WE USE
REDUX

17. In complicated SPA,
our code must
manage more state
than ever before

18. We easily lost control
over the when, why
and how of its state

19. Redux provide a
predictable state
container for JS apps
by taking away some
powers

20. The state of your
whole application in
stored in an object
tree within a single
store

21. The only way to
change the state is to
emit an action

22. Only set of pure
functions a.k.a
’reducer’ can
manipulate application
state

23. Redux just makes
managing state of
SPA becomes so
much easier

24. But simplicity comes
with trade-off

25. PROBLEM WITH
SCALE

27. The deeper our
component tree
becomes, the more
knowledge View
Provider has to keep

29. And then we allow
user to search movie
with
MovieSearchBox

31. Now we will need a
‘Movie’ view provider

33. Since only view
provider has access
to Redux world, it has
to pass a lot of
information to
children component

34. Then, we want to add
‘Clear’ button into
our SearchBox. How
difficult this can be ?

36. Oh wait, we need to
update our
MovieSearchBox as
well

38. Now we move to
Movie view provider

40. Our ’Clear’ button
now is ready to use.
Simple right ?

41. But our teammate
love SearchBox
component so much,
they already
implemented
BookSearchBox,
MediumSearchBox,
etc

42. We have to make
changes in ALL
components which are
direct or in-direct use
our SearchBox or
‘Clear’ button won’t
work

43. A month later, client
wants to have
another view
provider using
MovieSearchBox

44. Good luck with
copying all reducers/
actions creators and
remember to update
those in case we have
another ‘Clear’
button

45. We cannot scale with
that. In order to scale,
we need to resolve
problem of lacking
encapsulation

46. Each component
should only care
about their business,
not children and
grand-children
business

47. ELM ARCHITECTURE

49. Every component has
two parts: view and
updater

50. Elm consider all
component as UI
program, which can
be extract as stand-
alone module at
anytime

51. Elm architecture is a
quick win for the
problem of lacking
encapsulation we are
facing

52. Let’s re-implement
our SearchBox

54. Instead of only UI
function
(Component), we will
have a ‘pure’ update
which contain all the
default model related
logics

57. Now we are able to
move ‘query’
manipulate logic to
out-side of Movie
without losing the
ability to control it

58. Movie update now
only care about its
jobs, not
MovieSearchBox or
SearchBox

59. Now we move to ‘hard’
part, adding ‘Clear’
button

61. Since we no longer
require
MovieSearchBox or
Movie to care about
SearchBox business,
we don’t have to
update things

62. Changing children
implementation
doesn’t require
changes in its parent
or super parent

63. Now you can use
SearchBox and
MovieSearchBox
anywhere in your
application without
string attached

64. The best part is we
still have a global
state capture all of
those and parent are
fully control over his
children state

65. Let’s solve
encapsulation
problem and have
fun with adding new
feature

66. Thank you!
SON TANG • SENIOR ENGINEERING MANAGER • KMS