JSFoo 2019

On component architecture, front-end engineering and Developer Experience (DX)

Tickets

Breaking Down The Last Monolith

Submitted by Rahul Gaur (@iamaregee) on Sunday, 18 August 2019


Preview video

Section: Full talk (40 mins) Technical level: Intermediate

View proposal in schedule

Abstract

Case of migrating Largescale Angular1.x web application into Service Oriented Frontend Architecture (Aka MicroFrontends) which incorporates AppShell based Architecture.

  • What is Micro Frontends ?
  • Why it should matter to you ?
  • Innovaccer’s Case Study of migrating large angular 1.x application
  • Self Contained Systems

We will discuss some of the most popular ways to do the vertical decomposition for the frontend in order to achieve
following objectives while incorporating Service Oriented Frontend Architecture:

  • Team Ownership
  • Develop Independently
  • Run Independently
  • Technology Agnostic
  • Fast Loading
  • Native Support
  • Sharing Basics
  • Modular
  • Corporate Identity
  • Smooth User Interaction

Outline

With a monolithic frontend you never get the pliability to scale across groups as assured by microservices. Besides not being able to scale, there is also the classical overhead of a separate backend and frontend team. Each time there is a breaking change in the API of one of the services, the frontend has to be updated. Especially when a feature is added to a service, the frontend has to be updated to ensure your customers can even use the feature.

If you have a frontend small enough it can be maintained by a team which is also responsible for one or more services which are coupled to the frontend. This means that there is no overhead in cross team communication. But because the frontend and the backend can not be worked on independently, you are not really doing microservices.

This talk will describe our experiences, learnings and challenges that we encountered while breaking down our frontend monolith and running it in production since last 18 months.

Requirements

Need to have basic knowledge of SPA’s and possibly server side rendering.

Speaker bio

I am a fullstack engineer who has spent last two years reasearching and enginnering enterprise grade solution for developing resilient large scale application platform for one of the fastest growing Healthcare Platform in United States.
Currently Leading the Node.JS and UI/UX platform at Innovaccer.
5+ years of experience specializing in UI/UX, web application development, backend/infrastructure.
GSoC 2011, 2013

Links

Slides

https://docs.google.com/presentation/d/1TCU8eJSgDMJ3uDSSJVtl1FY8OEv5WjkbuZ3EEfe4rZc/edit?usp=sharing

Preview video

https://www.youtube.com/watch?v=gOxObpLochA

Comments

  • Rahul Gaur (@iamaregee) Proposer 2 months ago

    I have updated deck,it’s still work in progress, would really appriciate any feedback that I can furnish to strengthen the chances of presenting this talk.
    I am also working on the preview video, will updated as soon as possible.

  • Zainab Bawa (@zainabbawa) Reviewer a month ago

    Thanks for the rehearsal Rahul. We could not finish this today. Will reschedule on Sunday.

    The feedback from today’s partial rehearsal was:

    1. The title of the talk suggests that this talk is about breaking down the last monolith. However, the contents of the presentation didn’t make it clear whether the project is complete or is work-in-progress. You want to clarify this for the audience and also change the talk title to reflect the real situation.
    2. It wasn’t clear from the presentation as to why Angular was the choice in the first place. You may want to clarify this in the context setting slides.
    3. You also need to help participants understand how the teams adapted to the changes in tech stacks as the project proceeded. This part will be very useful for everyone to understand and learn from.
    4. The why of the technical choices made during this project have to explained. And where possible, also show how the approaches and tech choices were compared i.e., with what criteria, and why the final decision to go with the stack was made.
    5. The code snippets shown for the UI engine part was too dense. You need to simplify this for the audience.
    6. Most importantly, what does a participant learn from Innovaccer’s experience? What can you generalize for participants who don’t have Innovaccer’s use case or scale so that there are some clear takeaways irrespective of the organizational specificities.

    On the visual aspects of the slides, reduce the text on the slides. No more than 3 bullet points per slide. And bullet points have to be short phrases, not full sentences.

    Incorporate the above feedback in your slides before 22 September.

    • Rahul Gaur (@iamaregee) Proposer a month ago

      Thanks a lot for your valuable feedback.
      I have reorganized the deck and tried to clarify the state project that we are running this solution in production, earlier I addressed this part at the end of the deck.

      Noted the point and made the notes for clarifying circumstances that led to pick AngularJS.

      The title will be appropriately justified, I am working on it, i have added agenda to clearly define and structure the talk so that it justifies the title.

      I agree on ui engine part also the context around monolithic design and and how some of the critical concepts translate to micro frontend architecture are bit dense and might deviate audience from key takeaways that they can relate to or be benefited directly.

      I will try to incorporate a simplified example using open source single-spa.js instead of focusing too much on ui engine.I can also incorporate metrics on which we picked single-spa in our stack along with react.

      I will focus directly on our microfronted architecture strategy and how anyone can adopt similar architecture pattern to their single page application reap the benefits.
      followed by performance improvement.
      After this part, I will talk about the challenges and about popular open source solutions around which provide good solution and link to resources.

      I have rehearsed the talk again and recorded the video to streamline the content and have to incorporate point 3 and 4.

      I will try to share a recored video after incorporating 3&4 before the final rehearsal.

  • Zainab Bawa (@zainabbawa) Reviewer a month ago

    Thanks for the second rehearsal, Rahul. Here is the consolidated feedback from yesterday’s rehearsal:

    1. The takeaways slide has to be supported with metrics. Show numbers to make the takeaways concrete.
    2. The pace of speaking was fine. Personal examples were engaging.
    3. The middle part of the talk, about Nginx and SSR was diluted unlike the first and the last part of the talk. This part is important. Instead, explain what worked and what did not.
    4. The four approaches comparison can have separation of front-end and backend concerns.
    5. UI-engine: you have to explain how you worked your way out of the challenges. Stating the challenges is not enough.
    6. Instead of 4 takeaways, list 2 takeaways but go deep dive into them and make the takeaways concrete.
    7. Some content can be reduced. For example, why you chose Angular can be made a simple statement of fact.
    8. The key metrics were explained across all 4 approaches. Instead, do this just once for all four approaches.
    9. Run-time part was repetitive. Reduce this part.
    10. Reduce SPA-JS slide contents.
    11. List challenges as bullets.

    Based on the above feedback, submit your revised slides on 25 September for a final review.

Login with Twitter or Google to leave a comment