SlideShare ist ein Scribd-Unternehmen logo
1 von 20
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
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
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
Click. Wait. Click. Wait….Mostly….
Timeline of the web evolution
Today, …response is everything …
Tim
Berners-
Lee
NeXT
Cube
1989
5
Google doodle on Mar 12th, 2019
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
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
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
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
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
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
12
Why micro services?
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
Micro service in action
https://www.youtube.com/watch?v=aWgtRKfrtMY
(From 24:38)
15
Spring cloud
Service Registry
or
Service
Orchestration
Load Balancer
16
What is spring? What is spring cloud?
Spring MVC
2006
Spring boot
2014
Spring Cloud
2015
17
Demo
API
Google Account
RESTFUL
DATABASE
CONNECTION
SERVICE REGISTRY SERVICE ADAPTER
API
Facebook Account
API
User-Database
18
The road ahead…
As a ReactJS developer
As a Microservice developer
As an architect
19
~100 employees in
Đà Nẵng
since January 2016
20
Q&A
Presentation’s Resources:
https://bit.ly/2OPZILc

Weitere ähnliche Inhalte

Was ist angesagt?

Why you should consider a microframework for your next web project
Why you should consider a microframework for your next web projectWhy you should consider a microframework for your next web project
Why you should consider a microframework for your next web projectJoaquín Muñoz M.
 
APIdays Paris 2018 - The AsyncAPI specification, Fran Mendez, Founder, AsyncAPI
APIdays Paris 2018 - The AsyncAPI specification, Fran Mendez, Founder, AsyncAPIAPIdays Paris 2018 - The AsyncAPI specification, Fran Mendez, Founder, AsyncAPI
APIdays Paris 2018 - The AsyncAPI specification, Fran Mendez, Founder, AsyncAPIapidays
 
Intro to Meteor [Deprecated]
Intro to Meteor [Deprecated]Intro to Meteor [Deprecated]
Intro to Meteor [Deprecated]MeteorJS
 
Lviv MD Day 2015 Іван Лаврів "Mobile development with React Native"
Lviv MD Day 2015 Іван Лаврів "Mobile development with React Native"Lviv MD Day 2015 Іван Лаврів "Mobile development with React Native"
Lviv MD Day 2015 Іван Лаврів "Mobile development with React Native"Lviv Startup Club
 
Meteor-nepal introduction to meteor
Meteor-nepal introduction to meteorMeteor-nepal introduction to meteor
Meteor-nepal introduction to meteorpiyush thapa
 
The Ugly Truths about HTML5 for Mobile Apps by Robert Virkus, Michael Koch
The Ugly Truths about HTML5 for Mobile Apps by Robert Virkus, Michael Koch The Ugly Truths about HTML5 for Mobile Apps by Robert Virkus, Michael Koch
The Ugly Truths about HTML5 for Mobile Apps by Robert Virkus, Michael Koch Codemotion
 
Am\I\Doing\It\Right? Struktura plików w PHP
Am\I\Doing\It\Right? Struktura plików w PHPAm\I\Doing\It\Right? Struktura plików w PHP
Am\I\Doing\It\Right? Struktura plików w PHPThe Software House
 
Vue3: nuove funzionalità, differenze e come migrare
Vue3: nuove funzionalità, differenze e come migrareVue3: nuove funzionalità, differenze e come migrare
Vue3: nuove funzionalità, differenze e come migrareAndrea Campaci
 
CloudBooks Expense Management Tool For Freelancers for invoicing
CloudBooks Expense Management Tool For Freelancers for invoicingCloudBooks Expense Management Tool For Freelancers for invoicing
CloudBooks Expense Management Tool For Freelancers for invoicingCloudBooksapp
 

Was ist angesagt? (13)

Meteor Introduction - Ashish
Meteor Introduction - AshishMeteor Introduction - Ashish
Meteor Introduction - Ashish
 
Techdays 2011 - Things I will remember
Techdays 2011 - Things I will rememberTechdays 2011 - Things I will remember
Techdays 2011 - Things I will remember
 
Why you should consider a microframework for your next web project
Why you should consider a microframework for your next web projectWhy you should consider a microframework for your next web project
Why you should consider a microframework for your next web project
 
APIdays Paris 2018 - The AsyncAPI specification, Fran Mendez, Founder, AsyncAPI
APIdays Paris 2018 - The AsyncAPI specification, Fran Mendez, Founder, AsyncAPIAPIdays Paris 2018 - The AsyncAPI specification, Fran Mendez, Founder, AsyncAPI
APIdays Paris 2018 - The AsyncAPI specification, Fran Mendez, Founder, AsyncAPI
 
Intro to Meteor [Deprecated]
Intro to Meteor [Deprecated]Intro to Meteor [Deprecated]
Intro to Meteor [Deprecated]
 
Lviv MD Day 2015 Іван Лаврів "Mobile development with React Native"
Lviv MD Day 2015 Іван Лаврів "Mobile development with React Native"Lviv MD Day 2015 Іван Лаврів "Mobile development with React Native"
Lviv MD Day 2015 Іван Лаврів "Mobile development with React Native"
 
Meteor-nepal introduction to meteor
Meteor-nepal introduction to meteorMeteor-nepal introduction to meteor
Meteor-nepal introduction to meteor
 
The Ugly Truths about HTML5 for Mobile Apps by Robert Virkus, Michael Koch
The Ugly Truths about HTML5 for Mobile Apps by Robert Virkus, Michael Koch The Ugly Truths about HTML5 for Mobile Apps by Robert Virkus, Michael Koch
The Ugly Truths about HTML5 for Mobile Apps by Robert Virkus, Michael Koch
 
Dvr Summary
Dvr SummaryDvr Summary
Dvr Summary
 
Am\I\Doing\It\Right? Struktura plików w PHP
Am\I\Doing\It\Right? Struktura plików w PHPAm\I\Doing\It\Right? Struktura plików w PHP
Am\I\Doing\It\Right? Struktura plików w PHP
 
Vue3: nuove funzionalità, differenze e come migrare
Vue3: nuove funzionalità, differenze e come migrareVue3: nuove funzionalità, differenze e come migrare
Vue3: nuove funzionalità, differenze e come migrare
 
Meteor js
Meteor jsMeteor js
Meteor js
 
CloudBooks Expense Management Tool For Freelancers for invoicing
CloudBooks Expense Management Tool For Freelancers for invoicingCloudBooks Expense Management Tool For Freelancers for invoicing
CloudBooks Expense Management Tool For Freelancers for invoicing
 

Ähnlich wie [DevDay2019] The Evolvolution of Microservices and Web Component - By Ngo Thien Dat, Senior Developer at mgm technology partners Vietnam

Better web apps with React and Redux
Better web apps with React and ReduxBetter web apps with React and Redux
Better web apps with React and ReduxAli Sa'o
 
Overview of React.JS - Internship Presentation - Week 5
Overview of React.JS - Internship Presentation - Week 5Overview of React.JS - Internship Presentation - Week 5
Overview of React.JS - Internship Presentation - Week 5Devang Garach
 
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15GreeceJS
 
Welcome to React & Flux !
Welcome to React & Flux !Welcome to React & Flux !
Welcome to React & Flux !Ritesh Kumar
 
Tipping the scale - Eyal Eizenberg - Wix
Tipping the scale - Eyal Eizenberg - WixTipping the scale - Eyal Eizenberg - Wix
Tipping the scale - Eyal Eizenberg - WixEyal Eizenberg
 
Reactive web
Reactive webReactive web
Reactive webdega1999
 
Designing Powerful Web Applications - Monterey
Designing Powerful Web Applications - MontereyDesigning Powerful Web Applications - Monterey
Designing Powerful Web Applications - MontereyDave Malouf
 
Rethinking Best Practices
Rethinking Best PracticesRethinking Best Practices
Rethinking Best Practicesfloydophone
 
React js - The Core Concepts
React js - The Core ConceptsReact js - The Core Concepts
React js - The Core ConceptsDivyang Bhambhani
 
Tipping the Scale - Eyal Eizenberg
Tipping the Scale - Eyal EizenbergTipping the Scale - Eyal Eizenberg
Tipping the Scale - Eyal EizenbergWix Engineering
 
Designing Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAsDesigning Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAsDave Malouf
 
JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale
JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the ScaleJS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale
JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the ScaleJSFestUA
 
Engineering Concurrent and Event-driven Web Apps: an Agent-Oriented Approach ...
Engineering Concurrent and Event-driven Web Apps: an Agent-Oriented Approach ...Engineering Concurrent and Event-driven Web Apps: an Agent-Oriented Approach ...
Engineering Concurrent and Event-driven Web Apps: an Agent-Oriented Approach ...Francesco Fabbri
 
Reactjs A javascript Library
Reactjs A javascript LibraryReactjs A javascript Library
Reactjs A javascript LibraryMohit Jain
 
Build once deploy everywhere using the telerik platform
Build once deploy everywhere using the telerik platformBuild once deploy everywhere using the telerik platform
Build once deploy everywhere using the telerik platformAspenware
 
Getting Started With React Native Presntation
Getting Started With React Native PresntationGetting Started With React Native Presntation
Getting Started With React Native PresntationKnoldus Inc.
 
React for non techies
React for non techiesReact for non techies
React for non techiesAmy Crimmens
 

Ähnlich wie [DevDay2019] The Evolvolution of Microservices and Web Component - By Ngo Thien Dat, Senior Developer at mgm technology partners Vietnam (20)

Better web apps with React and Redux
Better web apps with React and ReduxBetter web apps with React and Redux
Better web apps with React and Redux
 
JOSA TechTalks - Better Web Apps with React and Redux
JOSA TechTalks - Better Web Apps with React and ReduxJOSA TechTalks - Better Web Apps with React and Redux
JOSA TechTalks - Better Web Apps with React and Redux
 
Overview of React.JS - Internship Presentation - Week 5
Overview of React.JS - Internship Presentation - Week 5Overview of React.JS - Internship Presentation - Week 5
Overview of React.JS - Internship Presentation - Week 5
 
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
 
Welcome to React & Flux !
Welcome to React & Flux !Welcome to React & Flux !
Welcome to React & Flux !
 
Tipping the scale - Eyal Eizenberg - Wix
Tipping the scale - Eyal Eizenberg - WixTipping the scale - Eyal Eizenberg - Wix
Tipping the scale - Eyal Eizenberg - Wix
 
Reactive web
Reactive webReactive web
Reactive web
 
React native
React nativeReact native
React native
 
Tech Talk on ReactJS
Tech Talk on ReactJSTech Talk on ReactJS
Tech Talk on ReactJS
 
Designing Powerful Web Applications - Monterey
Designing Powerful Web Applications - MontereyDesigning Powerful Web Applications - Monterey
Designing Powerful Web Applications - Monterey
 
Rethinking Best Practices
Rethinking Best PracticesRethinking Best Practices
Rethinking Best Practices
 
React js - The Core Concepts
React js - The Core ConceptsReact js - The Core Concepts
React js - The Core Concepts
 
Tipping the Scale - Eyal Eizenberg
Tipping the Scale - Eyal EizenbergTipping the Scale - Eyal Eizenberg
Tipping the Scale - Eyal Eizenberg
 
Designing Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAsDesigning Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAs
 
JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale
JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the ScaleJS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale
JS Fest 2019/Autumn. Eyal Eizenberg. Tipping the Scale
 
Engineering Concurrent and Event-driven Web Apps: an Agent-Oriented Approach ...
Engineering Concurrent and Event-driven Web Apps: an Agent-Oriented Approach ...Engineering Concurrent and Event-driven Web Apps: an Agent-Oriented Approach ...
Engineering Concurrent and Event-driven Web Apps: an Agent-Oriented Approach ...
 
Reactjs A javascript Library
Reactjs A javascript LibraryReactjs A javascript Library
Reactjs A javascript Library
 
Build once deploy everywhere using the telerik platform
Build once deploy everywhere using the telerik platformBuild once deploy everywhere using the telerik platform
Build once deploy everywhere using the telerik platform
 
Getting Started With React Native Presntation
Getting Started With React Native PresntationGetting Started With React Native Presntation
Getting Started With React Native Presntation
 
React for non techies
React for non techiesReact for non techies
React for non techies
 

Mehr von DevDay.org

[DevDay2019] Lean UX - By Bryant Castro, Bryant Castro at Wizeline
[DevDay2019] Lean UX - By  Bryant Castro,  Bryant Castro at Wizeline[DevDay2019] Lean UX - By  Bryant Castro,  Bryant Castro at Wizeline
[DevDay2019] Lean UX - By Bryant Castro, Bryant Castro at WizelineDevDay.org
 
[DevDay2019] Why you'll lose without UX Design - By Szilard Toth, CTO at e·pi...
[DevDay2019] Why you'll lose without UX Design - By Szilard Toth, CTO at e·pi...[DevDay2019] Why you'll lose without UX Design - By Szilard Toth, CTO at e·pi...
[DevDay2019] Why you'll lose without UX Design - By Szilard Toth, CTO at e·pi...DevDay.org
 
[DevDay2019] Things i wish I knew when I was a 23-year-old Developer - By Chr...
[DevDay2019] Things i wish I knew when I was a 23-year-old Developer - By Chr...[DevDay2019] Things i wish I knew when I was a 23-year-old Developer - By Chr...
[DevDay2019] Things i wish I knew when I was a 23-year-old Developer - By Chr...DevDay.org
 
[DevDay2019] Designing design teams - Christopher Nguyen, UX Manager at Wizeline
[DevDay2019] Designing design teams - Christopher Nguyen, UX Manager at Wizeline[DevDay2019] Designing design teams - Christopher Nguyen, UX Manager at Wizeline
[DevDay2019] Designing design teams - Christopher Nguyen, UX Manager at WizelineDevDay.org
 
[DevDay2019] Growth Hacking - How to double the benefits of your startup with...
[DevDay2019] Growth Hacking - How to double the benefits of your startup with...[DevDay2019] Growth Hacking - How to double the benefits of your startup with...
[DevDay2019] Growth Hacking - How to double the benefits of your startup with...DevDay.org
 
[DevDay2019] Collaborate or die: The designers’ guide to working with develop...
[DevDay2019] Collaborate or die: The designers’ guide to working with develop...[DevDay2019] Collaborate or die: The designers’ guide to working with develop...
[DevDay2019] Collaborate or die: The designers’ guide to working with develop...DevDay.org
 
[DevDay2019] How AI is changing the future of Software Testing? - By Vui Nguy...
[DevDay2019] How AI is changing the future of Software Testing? - By Vui Nguy...[DevDay2019] How AI is changing the future of Software Testing? - By Vui Nguy...
[DevDay2019] How AI is changing the future of Software Testing? - By Vui Nguy...DevDay.org
 
[DevDay2019] Hands-on Machine Learning on Google Cloud Platform - By Thanh Le...
[DevDay2019] Hands-on Machine Learning on Google Cloud Platform - By Thanh Le...[DevDay2019] Hands-on Machine Learning on Google Cloud Platform - By Thanh Le...
[DevDay2019] Hands-on Machine Learning on Google Cloud Platform - By Thanh Le...DevDay.org
 
[DevDay2019] Micro Frontends Architecture - By Thang Pham, Senior Software En...
[DevDay2019] Micro Frontends Architecture - By Thang Pham, Senior Software En...[DevDay2019] Micro Frontends Architecture - By Thang Pham, Senior Software En...
[DevDay2019] Micro Frontends Architecture - By Thang Pham, Senior Software En...DevDay.org
 
[DevDay2019] Power of Test Automation and DevOps combination - One click savi...
[DevDay2019] Power of Test Automation and DevOps combination - One click savi...[DevDay2019] Power of Test Automation and DevOps combination - One click savi...
[DevDay2019] Power of Test Automation and DevOps combination - One click savi...DevDay.org
 
[DevDay2019] How do I test AI models? - By Minh Hoang, Senior QA Engineer at KMS
[DevDay2019] How do I test AI models? - By Minh Hoang, Senior QA Engineer at KMS[DevDay2019] How do I test AI models? - By Minh Hoang, Senior QA Engineer at KMS
[DevDay2019] How do I test AI models? - By Minh Hoang, Senior QA Engineer at KMSDevDay.org
 
[DevDay2019] How to quickly become a Senior Engineer - By Tran Anh Minh, CEO ...
[DevDay2019] How to quickly become a Senior Engineer - By Tran Anh Minh, CEO ...[DevDay2019] How to quickly become a Senior Engineer - By Tran Anh Minh, CEO ...
[DevDay2019] How to quickly become a Senior Engineer - By Tran Anh Minh, CEO ...DevDay.org
 
[Devday2019] Dev start-up - By Le Trung, Founder & CEO at Hifiveplus and Edu...
[Devday2019]  Dev start-up - By Le Trung, Founder & CEO at Hifiveplus and Edu...[Devday2019]  Dev start-up - By Le Trung, Founder & CEO at Hifiveplus and Edu...
[Devday2019] Dev start-up - By Le Trung, Founder & CEO at Hifiveplus and Edu...DevDay.org
 
[DevDay2019] Web Development In 2019 - A Practical Guide - By Hoang Nhu Vinh,...
[DevDay2019] Web Development In 2019 - A Practical Guide - By Hoang Nhu Vinh,...[DevDay2019] Web Development In 2019 - A Practical Guide - By Hoang Nhu Vinh,...
[DevDay2019] Web Development In 2019 - A Practical Guide - By Hoang Nhu Vinh,...DevDay.org
 
[DevDay2019] Opportunities and challenges for human resources during the digi...
[DevDay2019] Opportunities and challenges for human resources during the digi...[DevDay2019] Opportunities and challenges for human resources during the digi...
[DevDay2019] Opportunities and challenges for human resources during the digi...DevDay.org
 
[DevDay2019] Python Machine Learning with Jupyter Notebook - By Nguyen Huu Th...
[DevDay2019] Python Machine Learning with Jupyter Notebook - By Nguyen Huu Th...[DevDay2019] Python Machine Learning with Jupyter Notebook - By Nguyen Huu Th...
[DevDay2019] Python Machine Learning with Jupyter Notebook - By Nguyen Huu Th...DevDay.org
 
[DevDay2019] Do you dockerize? Are your containers safe? - By Pham Hong Khanh...
[DevDay2019] Do you dockerize? Are your containers safe? - By Pham Hong Khanh...[DevDay2019] Do you dockerize? Are your containers safe? - By Pham Hong Khanh...
[DevDay2019] Do you dockerize? Are your containers safe? - By Pham Hong Khanh...DevDay.org
 
[DevDay2019] Develop a web application with Kubernetes - By Nguyen Xuan Phong...
[DevDay2019] Develop a web application with Kubernetes - By Nguyen Xuan Phong...[DevDay2019] Develop a web application with Kubernetes - By Nguyen Xuan Phong...
[DevDay2019] Develop a web application with Kubernetes - By Nguyen Xuan Phong...DevDay.org
 
[DevDay2019] Paradigm shift towards effective Scrum - By Tam Doan, Agile Coac...
[DevDay2019] Paradigm shift towards effective Scrum - By Tam Doan, Agile Coac...[DevDay2019] Paradigm shift towards effective Scrum - By Tam Doan, Agile Coac...
[DevDay2019] Paradigm shift towards effective Scrum - By Tam Doan, Agile Coac...DevDay.org
 
[DevDay2019] JAM Stack - By Ngo Thi Ni, Web Developer at Agility IO
[DevDay2019] JAM Stack - By Ngo Thi Ni, Web Developer at Agility IO[DevDay2019] JAM Stack - By Ngo Thi Ni, Web Developer at Agility IO
[DevDay2019] JAM Stack - By Ngo Thi Ni, Web Developer at Agility IODevDay.org
 

Mehr von DevDay.org (20)

[DevDay2019] Lean UX - By Bryant Castro, Bryant Castro at Wizeline
[DevDay2019] Lean UX - By  Bryant Castro,  Bryant Castro at Wizeline[DevDay2019] Lean UX - By  Bryant Castro,  Bryant Castro at Wizeline
[DevDay2019] Lean UX - By Bryant Castro, Bryant Castro at Wizeline
 
[DevDay2019] Why you'll lose without UX Design - By Szilard Toth, CTO at e·pi...
[DevDay2019] Why you'll lose without UX Design - By Szilard Toth, CTO at e·pi...[DevDay2019] Why you'll lose without UX Design - By Szilard Toth, CTO at e·pi...
[DevDay2019] Why you'll lose without UX Design - By Szilard Toth, CTO at e·pi...
 
[DevDay2019] Things i wish I knew when I was a 23-year-old Developer - By Chr...
[DevDay2019] Things i wish I knew when I was a 23-year-old Developer - By Chr...[DevDay2019] Things i wish I knew when I was a 23-year-old Developer - By Chr...
[DevDay2019] Things i wish I knew when I was a 23-year-old Developer - By Chr...
 
[DevDay2019] Designing design teams - Christopher Nguyen, UX Manager at Wizeline
[DevDay2019] Designing design teams - Christopher Nguyen, UX Manager at Wizeline[DevDay2019] Designing design teams - Christopher Nguyen, UX Manager at Wizeline
[DevDay2019] Designing design teams - Christopher Nguyen, UX Manager at Wizeline
 
[DevDay2019] Growth Hacking - How to double the benefits of your startup with...
[DevDay2019] Growth Hacking - How to double the benefits of your startup with...[DevDay2019] Growth Hacking - How to double the benefits of your startup with...
[DevDay2019] Growth Hacking - How to double the benefits of your startup with...
 
[DevDay2019] Collaborate or die: The designers’ guide to working with develop...
[DevDay2019] Collaborate or die: The designers’ guide to working with develop...[DevDay2019] Collaborate or die: The designers’ guide to working with develop...
[DevDay2019] Collaborate or die: The designers’ guide to working with develop...
 
[DevDay2019] How AI is changing the future of Software Testing? - By Vui Nguy...
[DevDay2019] How AI is changing the future of Software Testing? - By Vui Nguy...[DevDay2019] How AI is changing the future of Software Testing? - By Vui Nguy...
[DevDay2019] How AI is changing the future of Software Testing? - By Vui Nguy...
 
[DevDay2019] Hands-on Machine Learning on Google Cloud Platform - By Thanh Le...
[DevDay2019] Hands-on Machine Learning on Google Cloud Platform - By Thanh Le...[DevDay2019] Hands-on Machine Learning on Google Cloud Platform - By Thanh Le...
[DevDay2019] Hands-on Machine Learning on Google Cloud Platform - By Thanh Le...
 
[DevDay2019] Micro Frontends Architecture - By Thang Pham, Senior Software En...
[DevDay2019] Micro Frontends Architecture - By Thang Pham, Senior Software En...[DevDay2019] Micro Frontends Architecture - By Thang Pham, Senior Software En...
[DevDay2019] Micro Frontends Architecture - By Thang Pham, Senior Software En...
 
[DevDay2019] Power of Test Automation and DevOps combination - One click savi...
[DevDay2019] Power of Test Automation and DevOps combination - One click savi...[DevDay2019] Power of Test Automation and DevOps combination - One click savi...
[DevDay2019] Power of Test Automation and DevOps combination - One click savi...
 
[DevDay2019] How do I test AI models? - By Minh Hoang, Senior QA Engineer at KMS
[DevDay2019] How do I test AI models? - By Minh Hoang, Senior QA Engineer at KMS[DevDay2019] How do I test AI models? - By Minh Hoang, Senior QA Engineer at KMS
[DevDay2019] How do I test AI models? - By Minh Hoang, Senior QA Engineer at KMS
 
[DevDay2019] How to quickly become a Senior Engineer - By Tran Anh Minh, CEO ...
[DevDay2019] How to quickly become a Senior Engineer - By Tran Anh Minh, CEO ...[DevDay2019] How to quickly become a Senior Engineer - By Tran Anh Minh, CEO ...
[DevDay2019] How to quickly become a Senior Engineer - By Tran Anh Minh, CEO ...
 
[Devday2019] Dev start-up - By Le Trung, Founder & CEO at Hifiveplus and Edu...
[Devday2019]  Dev start-up - By Le Trung, Founder & CEO at Hifiveplus and Edu...[Devday2019]  Dev start-up - By Le Trung, Founder & CEO at Hifiveplus and Edu...
[Devday2019] Dev start-up - By Le Trung, Founder & CEO at Hifiveplus and Edu...
 
[DevDay2019] Web Development In 2019 - A Practical Guide - By Hoang Nhu Vinh,...
[DevDay2019] Web Development In 2019 - A Practical Guide - By Hoang Nhu Vinh,...[DevDay2019] Web Development In 2019 - A Practical Guide - By Hoang Nhu Vinh,...
[DevDay2019] Web Development In 2019 - A Practical Guide - By Hoang Nhu Vinh,...
 
[DevDay2019] Opportunities and challenges for human resources during the digi...
[DevDay2019] Opportunities and challenges for human resources during the digi...[DevDay2019] Opportunities and challenges for human resources during the digi...
[DevDay2019] Opportunities and challenges for human resources during the digi...
 
[DevDay2019] Python Machine Learning with Jupyter Notebook - By Nguyen Huu Th...
[DevDay2019] Python Machine Learning with Jupyter Notebook - By Nguyen Huu Th...[DevDay2019] Python Machine Learning with Jupyter Notebook - By Nguyen Huu Th...
[DevDay2019] Python Machine Learning with Jupyter Notebook - By Nguyen Huu Th...
 
[DevDay2019] Do you dockerize? Are your containers safe? - By Pham Hong Khanh...
[DevDay2019] Do you dockerize? Are your containers safe? - By Pham Hong Khanh...[DevDay2019] Do you dockerize? Are your containers safe? - By Pham Hong Khanh...
[DevDay2019] Do you dockerize? Are your containers safe? - By Pham Hong Khanh...
 
[DevDay2019] Develop a web application with Kubernetes - By Nguyen Xuan Phong...
[DevDay2019] Develop a web application with Kubernetes - By Nguyen Xuan Phong...[DevDay2019] Develop a web application with Kubernetes - By Nguyen Xuan Phong...
[DevDay2019] Develop a web application with Kubernetes - By Nguyen Xuan Phong...
 
[DevDay2019] Paradigm shift towards effective Scrum - By Tam Doan, Agile Coac...
[DevDay2019] Paradigm shift towards effective Scrum - By Tam Doan, Agile Coac...[DevDay2019] Paradigm shift towards effective Scrum - By Tam Doan, Agile Coac...
[DevDay2019] Paradigm shift towards effective Scrum - By Tam Doan, Agile Coac...
 
[DevDay2019] JAM Stack - By Ngo Thi Ni, Web Developer at Agility IO
[DevDay2019] JAM Stack - By Ngo Thi Ni, Web Developer at Agility IO[DevDay2019] JAM Stack - By Ngo Thi Ni, Web Developer at Agility IO
[DevDay2019] JAM Stack - By Ngo Thi Ni, Web Developer at Agility IO
 

Kürzlich hochgeladen

COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 

Kürzlich hochgeladen (20)

20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 

[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
  • 5. 5 Google doodle on Mar 12th, 2019
  • 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)
  • 16. 16 What is spring? What is spring cloud? Spring MVC 2006 Spring boot 2014 Spring Cloud 2015
  • 17. 17 Demo API Google Account RESTFUL DATABASE CONNECTION SERVICE REGISTRY SERVICE ADAPTER API Facebook Account API User-Database
  • 18. 18 The road ahead… As a ReactJS developer As a Microservice developer As an architect
  • 19. 19 ~100 employees in Đà Nẵng since January 2016