The parallelism in the rising of microservices and web components is transforming the web from stateless to single pages. An example of this is Facebook's notification icon which utilizes microservices as well as Netflix which uses Spring Cloud as a Core Java framework. Why do we use Redux with Reactjs to manage states? Let’s have fun with a demo of microservices.
Ähnlich wie [DevDay2019] The Evolvolution of Microservices and Web Component - By Ngo Thien Dat, Senior Developer at mgm technology partners Vietnam (20)
[DevDay2019] The Evolvolution of Microservices and Web Component - By Ngo Thien Dat, Senior Developer at mgm technology partners Vietnam
1. München/HQ Aachen Bamberg Berlin Đà Nẵng Dresden Grenoble Hamburg Köln Leipzig Nürnberg Prag Stuttgart Washington Zug
The evolution of Microservices and Web
The case study of Netflix and Facebook
2. 2
About me
Dat Ngo
I completed Master degree in 2008
Worked in Software Industry for 11 years for
customers from America, Japan, Singapore, and
Europe.
Now I'm a member of mgm‘s A12 team.
Linkedin profile:
https://www.linkedin.com/in/dat-ngo-43985730/
3. 3
Agenda
Web story 1: from click and wait to ReactJS component
The Facebook notification icon
Web story 2: From webservices to microservices
The Netflix online movie
A demo with Spring Cloud
4. 4
Click. Wait. Click. Wait….Mostly….
Timeline of the web evolution
Today, …response is everything …
Tim
Berners-
Lee
NeXT
Cube
1989
6. 6
... One Post ...
... One Album ...
Cool stuff No.1
Inform user about
new connection
Cool stuff No. 2
Inform about
new content
Cool stuff No. 3
Tag on Image
Cool stuff No. 4
Video
Cool stuff No. 5
Live streaming
Evolution of Facebook notification icons
7. 7
Why ReactJS component? Problems of the traditional MVC pattern
https://www.youtube.com/watch?v=nYkdrAPrdcw
(From 10:10 to 10:40)
Problem with traditional web
development:
1. MVC does not scale
2. Explosion of complexity
3. Potential of infinite loop
4. Source code is over complex
5. Unmaintainable
Then, the arise of ReactJS
=> What is ReactJS component?
8. 8
Reactjs component vs Web element
Most commonly used web elements are :
Text box
Button
Dropdown list
Hyperlink
Check Box
Radio Button
What are Reactjs components?
React app = building blocks
Component = Javascript class or function
Input = properties (props)
Return = React element
9. 9
ReactJS
Browser
(JavaScript, HTML5)
å
The real DOM
<h1>Hello<h1>
Event
Virtual DOM
Component State
string: Hello string: Hello
World
The real
DOM
<h1>Hello
World<h1>
Example of how to organize
components
10. 10
The whole DOM
WITHOUT Redux
Synchronize state's
data for these 2
nodes would be
very cumbersome
Data has to travel up
then down the path
WITH Redux
A common store to all node
ReactJS –
Better with
Redux
11. 11
Agenda
Web story 1: from click and wait to ReactJS component
The Facebook notification icon
Web story 2: From webservices to microservices
The Netflix online movie
A demo with Spring Cloud
13. 13
From WebServices to Microservices
What is Web Service?
Web Service
= share functionalities to other
applications
= exposes an API over HTTP, no UI
What is Microservice ?
Microservice
= independently deployable
= break application into loosely
coupled modules
1 Microservice = 1 indivisable task of
a business domain.
14. 14
Micro service in action
https://www.youtube.com/watch?v=aWgtRKfrtMY
(From 24:38)