Breaking the frontend monolith - #frontendconnect17

While breaking the monolith into micro-services is a common approach for the backend, most frontends are still running as a monolithic application. Therefore building, deploying and consuming frontend components across a diversity of teams and web applications can be a daunting task, especially at scale. To address this issue, at OpenTable we enable fast-moving teams to easily build and deploy front-end components using OpenComponents, an open-source, battle tested, front-end microservice architecture for painless component delivery.
During this session I’ll explain how OpenComponents works, how do we use it at OpenTable and how we allows teams to build frontend components with different client-side technologies that seamless work together.

Transcript

1. Breaking the
   frontend monolith
   @nickbalestra
   

   View Slide

2. Breaking the
   frontend monolith
   @nickbalestra
   

   View Slide

3. Cześć!
   Software engineer @OpenTable, DX Team
   Co-author of create-cycle-app & redux-cycles
   Love OSS/JS/Node
   OpenComponents core team
   Follow me: @nickbalestra
   

   View Slide

4. Breaking the
   frontend monolith
   A story about refactoring,
   decentralized FE architectures,
   and fast moving teams.
   @nickbalestra
   A story about refactoring,
   decentralized FE architectures,
   and fast moving teams.
   

   View Slide

5. Firstly, a bit of background
   

   View Slide

6. Firstly, a bit of background
   • OpenTable, founded in 1998 - PCLN (NASDAQ)
   

   View Slide

7. Firstly, a bit of background
   • OpenTable, founded in 1998 - PCLN (NASDAQ)
   • We find a table for 23+ million diners/month
   

   View Slide

8. Firstly, a bit of background
   • OpenTable, founded in 1998 - PCLN (NASDAQ)
   • We find a table for 23+ million diners/month
   • 300+ engineers
   

   View Slide

9. Firstly, a bit of background
   • OpenTable, founded in 1998 - PCLN (NASDAQ)
   • We find a table for 23+ million diners/month
   • 300+ engineers
   • Europe, North and South America, Asia
   

   View Slide

10. Firstly, a bit of background
    • OpenTable, founded in 1998 - PCLN (NASDAQ)
    • We find a table for 23+ million diners/month
    • 300+ engineers
    • Europe, North and South America, Asia
    • Millions requests/minute
    

    View Slide

11. Firstly, a bit of background
    • OpenTable, founded in 1998 - PCLN (NASDAQ)
    • We find a table for 23+ million diners/month
    • 300+ engineers
    • Europe, North and South America, Asia
    • Millions requests/minute
    • Full-stack culture
    

    View Slide

12. Once upon a time...
    

    View Slide

13. Once upon a time...
    

    View Slide

14. Once upon a time...
    product consistency
    

    View Slide

15. Once upon a time...
    product consistency
    velocity at scale
    

    View Slide

16. 50 shades of FE monolith
    The monolith Front & Back Micro services
    

    View Slide

17. Once upon a time...
    

    View Slide

18. Once upon a time...
    < Start />
    < Restaurant />
    < Search />
    microsite
    microsite
    microsite
    

    View Slide

19. Restaurant Profile Search Results Start
    www.opentable.com/san-francisco-restaurants
    

    View Slide

20. Restaurant Profile Search Results Start
    Front-door routing microsite: "start"
    metro: "San Francisco"
    www.opentable.com/san-francisco-restaurants
    

    View Slide

21. Restaurant Profile Search Results Start
    https://start-123/?domain=com&metro=4
    Front-door routing microsite: "start"
    metro: "San Francisco"
    www.opentable.com/san-francisco-restaurants
    

    View Slide

22. Restaurant Profile Search Results Start
    https://start-123/?domain=com&metro=4
    Front-door routing microsite: "start"
    metro: "San Francisco"
    < Restaurant /> < Search />
    < Start />
    www.opentable.com/san-francisco-restaurants
    

    View Slide

23. Restaurant Profile Search Results Start
    https://start-123/?domain=com&metro=4
    Front-door routing microsite: "start"
    metro: "San Francisco"
    < Restaurant /> < Search />
    < Start />
    www.opentable.com/san-francisco-restaurants
    microsite
    

    View Slide

24. HTML Fragments μservice
    Restaurant Profile Search Results Start
    < Start /> < Restaurant /> < Search />
    

    View Slide

25. HTML Fragments μservice
    Restaurant Profile Search Results Start
    < Start /> < Restaurant /> < Search />
    

    View Slide

26. HTML Fragments μservice
    Restaurant Profile Search Results Start
    < Start /> < Restaurant /> < Search />
    

    View Slide

27. HTML Fragments μservice
    Restaurant Profile Search Results Start
    < Start /> < Restaurant /> < Search />
    

    View Slide

28. HTML Fragments μservice
    Restaurant Profile Search Results Start
    < Start /> < Restaurant /> < Search />
    

    View Slide

29. HTML Fragments μservice
    Restaurant Profile Search Results Start
    

    View Slide

30. v0 architecture
    Restaurant Profile Search Results Start
    www.opentable.com/san-francisco-restaurants
    

    View Slide

31. v0 architecture
    Restaurant Profile Search Results Start
    https://start-123/?domain=com&metro=4
    www.opentable.com/san-francisco-restaurants
    

    View Slide

32. v0 architecture
    Restaurant Profile Search Results Start
    https://start-123/?domain=com&metro=4
    www.opentable.com/san-francisco-restaurants
    

    View Slide

33. v0 architecture
    Restaurant Profile Search Results Start
    https://start-123/?domain=com&metro=4
    https://components-123/header
    {
    "html": "Hello World",
    "type":"html"
    }
    www.opentable.com/san-francisco-restaurants
    

    View Slide

34. v0 architecture
    Restaurant Profile Search Results Start
    https://start-123/?domain=com&metro=4
    https://components-123/header
    {
    "html": "Hello World",
    "type":"html"
    }
    https://components-123/header?userType=admin&...
    www.opentable.com/san-francisco-restaurants
    

    View Slide

35. v0 architecture
    Restaurant Profile Search Results Start
    < Page />
    https://start-123/?domain=com&metro=4
    https://components-123/header
    {
    "html": "Hello World",
    "type":"html"
    }
    https://components-123/header?userType=admin&...
    www.opentable.com/san-francisco-restaurants
    

    View Slide

36. HTML Fragments µservice
    

    View Slide

37. HTML Fragments µservice
    

    View Slide

38. HTML Fragments µservice
    

    View Slide

39. HTML Fragments µservice
    Restaurant Profile Search Results Start
    latest
    minor
    patch
    latest
    patch
    patch
    latest
    major
    minor
    

    View Slide

40. HTML Fragments µservice
    Restaurant Profile Search Results Start
    latest
    minor
    patch
    latest
    patch
    patch
    latest
    major
    minor
    

    View Slide

41. HTML Fragments µservice
    Restaurant Profile Search Results Start
    latest
    minor
    patch
    latest
    patch
    patch
    latest
    major
    minor
    

    View Slide

42. HTML Fragments µservice
    Restaurant Profile Search Results Start
    https://components-123/header/1.0.0
    latest
    minor
    patch
    latest
    patch
    patch
    latest
    major
    minor
    

    View Slide

43. HTML Fragments µservice
    Restaurant Profile Search Results Start
    https://components-123/header/1.0.0
    latest
    minor
    patch
    latest
    patch
    patch
    latest
    major
    minor
    

    View Slide

44. OpenComponents
    Restaurant Profile Search Results Start
    https://components-123/header/1.0.0
    latest
    minor
    patch
    latest
    patch
    patch
    latest
    major
    minor
    

    View Slide

45. v0 architecture
    Search Results Start
    OC Registry
    CDN
    OC
    Library
    CLI
    Templates
    Client libraries
    

    View Slide

46. TLDR;
    

    View Slide

47. TLDR;
    • #1 - Microsites architecture
    

    View Slide

48. TLDR;
    • #1 - Microsites architecture
    • #2 - Sharing the common parts
    

    View Slide

49. TLDR;
    • #1 - Microsites architecture
    • #2 - Sharing the common parts
    • #3 - Serverless architecture for micro frontends
    

    View Slide

50. TLDR;
    • #1 - Microsites architecture
    • #2 - Sharing the common parts
    • #3 - Serverless architecture for micro frontends
    • #4 - Component stack abstraction
    

    View Slide

51. TLDR;
    • #1 - Microsites architecture
    • #2 - Sharing the common parts
    • #3 - Serverless architecture for micro frontends
    • #4 - Component stack abstraction
    

    View Slide

52. Demo
    

    View Slide

53. Demo
    $ npm install oc
    

    View Slide

54. Client-side rendering
    

    View Slide

55. Client-side rendering
    
    
    ...
    
    
    ...
    
    
    
    

    View Slide

56. Server-side rendering
    

    View Slide

57. Server-side rendering
    const Client = require('oc-client');
    const client = new Client({
    registries: ['https://registry.com/'],
    components: ['header']
    });
    client.renderComponent('header', (err, componentHTML) => {

    console.log(componentHTML) // rendered html

    });
    

    View Slide

58. "There are only two hard things
    in Computer Science: cache
    invalidation and naming things"
    

    View Slide

59. Components
    

    View Slide

60. Components
    oc
    UI Lib
    

    View Slide

61. "When you have an hammer
    everything looks like a nail"
    

    View Slide

62. View Slide

63. View Slide

64. View Slide

65. View Slide

66. Tools
    

    View Slide

67. Tools
    

    View Slide

68. Who's using OC?
    

    View Slide

69. Who's using OC?
    

    View Slide

70. Who's using OC?
    OpenComponents are great!
    It has helped us break our monolithic architecture into smaller
    components and achieve improved speed of delivery,
    team autonomy and ownership of different parts of the website.
    Independent ownership and releases of components have
    sped up our feature delivery drastically.
    

    View Slide

71. Who's using OC?
    OpenComponents are great!
    It has helped us break our monolithic architecture into smaller
    components and achieve improved speed of delivery,
    team autonomy and ownership of different parts of the website.
    Independent ownership and releases of components have
    sped up our feature delivery drastically.
    We have been using OpenComponents for bringing in flexibility of
    having a common layouts for different front-end blocks.
    Whether it's Header, or different related content widgets.
    We are actually in process of adding new OCs/enhancements every
    month. Its comes with joy of independent deployments, continuous
    delivery and integration,
    and of-course all the added benefits of Node.Js!
    

    View Slide

72. Dziękuję!
    @nickbalestra
    github.com/opentable/oc
    

    View Slide