O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
SON TANG • SENIOR ENGINEERING MANAGER • KMS
React, Redux, how to scale
WHY DO WE USE REDUX
WHY DO WE USE REACT
ELM ARCHITECTURE
Q & A
Agenda
PROBLEM WITH SCALE
WHY DO WE USE REACT
44
If you want to move a small distance, just
walk. If you want to move a great distance
you need some help
“
”
React is a JS library,
not a framework
React only supports
building User
Interfaces
We describe User
Interfaces with React
and React will take
care how to translate
those into actual UI
UI Definition Browser Render
JSX
Others put “JS” into
your HTML. React
puts “HTML” in your
JS
JS in HTML JSX
Virtual
representation
React manages and
able to optimize how
and when actual UI get
sync with virtual
representation
React will handle the
performance
optimization so we
could focus to our
own business
React force us to
write reusable and
composable
components
WHY DO WE USE
REDUX
In complicated SPA,
our code must
manage more state
than ever before
We easily lost control
over the when, why
and how of its state
Redux provide a
predictable state
container for JS apps
by taking away some
powers
The state of your
whole application in
stored in an object
tree within a single
store
The only way to
change the state is to
emit an action
Only set of pure
functions a.k.a
’reducer’ can
manipulate application
state
Redux just makes
managing state of
SPA becomes so
much easier
But simplicity comes
with trade-off
PROBLEM WITH
SCALE
The deeper our
component tree
becomes, the more
knowledge View
Provider has to keep
And then we allow
user to search movie
with
MovieSearchBox
Now we will need a
‘Movie’ view provider
Since only view
provider has access
to Redux world, it has
to pass a lot of
information to
children component
Then, we want to add
‘Clear’ button into
our SearchBox. How
difficult this can be ?
Oh wait, we need to
update our
MovieSearchBox as
well
Now we move to
Movie view provider
Our ’Clear’ button
now is ready to use.
Simple right ?
But our teammate
love SearchBox
component so much,
they already
implemented
BookSearchBox,
MediumSearchBox,
etc
We have to make
changes in ALL
components which are
direct or in-direct use
our SearchBox or
‘Clear’ button won’t
work
A month later, client
wants to have
another view
provider using
MovieSearchBox
Good luck with
copying all reducers/
actions creators and
remember to update
those in case we have
another ‘Clear’
button
We cannot scale with
that. In order to scale,
we need to resolve
problem of lacking
encapsulation
Each component
should only care
about their business,
not children and
grand-children
business
ELM ARCHITECTURE
Every component has
two parts: view and
updater
Elm consider all
component as UI
program, which can
be extract as stand-
alone module at
anytime
Elm architecture is a
quick win for the
problem of lacking
encapsulation we are
facing
Let’s re-implement
our SearchBox
Instead of only UI
function
(Component), we will
have a ‘pure’ update
which contain all the
default model related
logics
Now we are able to
move ‘query’
manipulate logic to
out-side of Movie
without losing the
ability to control it
Movie update now
only care about its
jobs, not
MovieSearchBox or
SearchBox
Now we move to ‘hard’
part, adding ‘Clear’
button
Since we no longer
require
MovieSearchBox or
Movie to care about
SearchBox business,
we don’t have to
update things
Changing children
implementation
doesn’t require
changes in its parent
or super parent
Now you can use
SearchBox and
MovieSearchBox
anywhere in your
application without
string attached
The best part is we
still have a global
state capture all of
those and parent are
fully control over his
children state
Let’s solve
encapsulation
problem and have
fun with adding new
feature
Thank you!
SON TANG • SENIOR ENGINEERING MANAGER • KMS
React & Redux, how to scale?
React & Redux, how to scale?
React & Redux, how to scale?
React & Redux, how to scale?
React & Redux, how to scale?
React & Redux, how to scale?
React & Redux, how to scale?
React & Redux, how to scale?
React & Redux, how to scale?
React & Redux, how to scale?
React & Redux, how to scale?
React & Redux, how to scale?
Terminou este documento.
Transfira e leia offline.
Próximos SlideShares
What to Upload to SlideShare
Avançar
Próximos SlideShares
What to Upload to SlideShare
Avançar
Transfira para ler offline e ver em ecrã inteiro.

Compartilhar

React & Redux, how to scale?

Baixar para ler offline

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.

React & Redux, how to scale?

  1. 1. SON TANG • SENIOR ENGINEERING MANAGER • KMS React, Redux, how to scale
  2. 2. WHY DO WE USE REDUX WHY DO WE USE REACT ELM ARCHITECTURE Q & A Agenda PROBLEM WITH SCALE
  3. 3. WHY DO WE USE REACT
  4. 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. 5. React is a JS library, not a framework
  6. 6. React only supports building User Interfaces
  7. 7. We describe User Interfaces with React and React will take care how to translate those into actual UI
  8. 8. UI Definition Browser Render
  9. 9. JSX
  10. 10. Others put “JS” into your HTML. React puts “HTML” in your JS
  11. 11. JS in HTML JSX
  12. 12. Virtual representation
  13. 13. React manages and able to optimize how and when actual UI get sync with virtual representation
  14. 14. React will handle the performance optimization so we could focus to our own business
  15. 15. React force us to write reusable and composable components
  16. 16. WHY DO WE USE REDUX
  17. 17. In complicated SPA, our code must manage more state than ever before
  18. 18. We easily lost control over the when, why and how of its state
  19. 19. Redux provide a predictable state container for JS apps by taking away some powers
  20. 20. The state of your whole application in stored in an object tree within a single store
  21. 21. The only way to change the state is to emit an action
  22. 22. Only set of pure functions a.k.a ’reducer’ can manipulate application state
  23. 23. Redux just makes managing state of SPA becomes so much easier
  24. 24. But simplicity comes with trade-off
  25. 25. PROBLEM WITH SCALE
  26. 26. The deeper our component tree becomes, the more knowledge View Provider has to keep
  27. 27. And then we allow user to search movie with MovieSearchBox
  28. 28. Now we will need a ‘Movie’ view provider
  29. 29. Since only view provider has access to Redux world, it has to pass a lot of information to children component
  30. 30. Then, we want to add ‘Clear’ button into our SearchBox. How difficult this can be ?
  31. 31. Oh wait, we need to update our MovieSearchBox as well
  32. 32. Now we move to Movie view provider
  33. 33. Our ’Clear’ button now is ready to use. Simple right ?
  34. 34. But our teammate love SearchBox component so much, they already implemented BookSearchBox, MediumSearchBox, etc
  35. 35. We have to make changes in ALL components which are direct or in-direct use our SearchBox or ‘Clear’ button won’t work
  36. 36. A month later, client wants to have another view provider using MovieSearchBox
  37. 37. Good luck with copying all reducers/ actions creators and remember to update those in case we have another ‘Clear’ button
  38. 38. We cannot scale with that. In order to scale, we need to resolve problem of lacking encapsulation
  39. 39. Each component should only care about their business, not children and grand-children business
  40. 40. ELM ARCHITECTURE
  41. 41. Every component has two parts: view and updater
  42. 42. Elm consider all component as UI program, which can be extract as stand- alone module at anytime
  43. 43. Elm architecture is a quick win for the problem of lacking encapsulation we are facing
  44. 44. Let’s re-implement our SearchBox
  45. 45. Instead of only UI function (Component), we will have a ‘pure’ update which contain all the default model related logics
  46. 46. Now we are able to move ‘query’ manipulate logic to out-side of Movie without losing the ability to control it
  47. 47. Movie update now only care about its jobs, not MovieSearchBox or SearchBox
  48. 48. Now we move to ‘hard’ part, adding ‘Clear’ button
  49. 49. Since we no longer require MovieSearchBox or Movie to care about SearchBox business, we don’t have to update things
  50. 50. Changing children implementation doesn’t require changes in its parent or super parent
  51. 51. Now you can use SearchBox and MovieSearchBox anywhere in your application without string attached
  52. 52. The best part is we still have a global state capture all of those and parent are fully control over his children state
  53. 53. Let’s solve encapsulation problem and have fun with adding new feature
  54. 54. Thank you! SON TANG • SENIOR ENGINEERING MANAGER • KMS
  • joobn

    Oct. 18, 2017
  • HungPham3

    Oct. 16, 2017

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.

Vistos

Vistos totais

714

No Slideshare

0

De incorporações

0

Número de incorporações

1

Ações

Baixados

32

Compartilhados

0

Comentários

0

Curtir

2

×