Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

35 views

Published on

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.

Published in: Technology
  • Be the first to comment

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

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

×