$30 off During Our Annual Pro Sale. View Details »



Randy Vianda Putra

February 11, 2019

More Decks by Randy Vianda Putra

Other Decks in Programming


  1. Introduction To Micro Frontends

  2. It’s brought to you by : Randy Vianda Putra Hello!

  3. Let’s Start

  4. What are Micro Frontends ?

  5. Micro Frontends Techniques, strategies and recipes for building a modern

    web app with multiple teams using different JavaScript frameworks. 5
  6. What are Micro Frontends ? The term Micro Frontends first

    came up in ThoughtWorks Technology Radar at the end of 2016. The idea behind Micro Frontends is to think about a website or web app as a composition of features which are owned by independent teams. Each team has a distinct area of business or mission it cares about and specialises in. A team is cross functional and develops its features end-to-end, from database to user interface.
  7. “ “Extending the microservice to frontend development.” 7

  8. Core ideas behind micro frontends - Be technology agnostic -

    Isolate team code - Establish team prefixes - Favor Native Browser Features over Custom APIs - Build a Resilient Site
  9. The concept of micro frontend ?

  10. None
  11. Advantages of a monolith - Easy and quick setup -

    Single CI/CD operation - Single codebase
  12. Problem with monolith - Long development cycles - Long build

    time - Risk refactoring and cleanup (this works - don’t touch)
  13. When they say “Micro Frontends” what do they mean? ?

  14. Micro frontends aka micro apps - Breaking a web application

    to it’s page and / or feature - Each feature owned by a single team - Allow each feature to be developed, tested and deployed independently
  15. Micro apps cons - Proprietary solution - Load time -

    Redudancy risk - UX consistency
  16. None
  17. Implementation Approaches - Iframes - Component based architecture

  18. Iframes implementation

  19. Iframes summary - Easy A/B testing for features - Native

    support on most browsers - Enables high scale delivery (similar to micro services)
  20. Component based architecture implementation

  21. Component based architecture summary - Each micro app is a

    component - Orchestrator app - Shared component are extracted and reusable
  22. The Native Solution : Web Components

  23. Web Components Create custom reusable HTML tags - Custom Elements

    - Shadow DOM - HTML Imports - HTML Templates
  24. Web Components Libraries - SlimJS - Polymer - SkateJS -

    X-Tag - Stencil
  25. Runtime components with React / Angular / Vue etc, everything

    is a component
  26. Study Case ?

  27. None
  28. None
  29. None
  30. Custom element ?

  31. this is the reference to the root DOM node of

    the custom element. All properties and methods of a standard DOM element like innerHTML or getAttribute() can be used.
  32. None
  33. Parent - child communication / DOM modification ?

  34. None
  35. None
  36. Conclusion Micro Frontends can help big time, but they come

    at a cost
  37. 37 Thanks Any questions? You can find me on github

    : @randyviandaputra