JSFoo 2019

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

Tickets

Building a High Performance Mobile-First Web App | A case study of Jabong PWA

Submitted by Upendra Dev Singh (@uds) on Saturday, 1 June 2019

Duration: 40 mins full talk Section: Full talk (40 mins) Technical level: Advanced

View proposal in schedule

Abstract

Modern web applications are JavaScript heavy. JavaScript ecosystem is such that you get a lot of tools, libraries, and the framework for free. The cost of using a framework could be very high. During this talk, I will take the audience through the Jabong PWA implementation using preact. I will talk about how we applied the domain-driven design approach to make some important architecture decisions upfront to choose our technology stack e.g preact, preact-router, in-house state management container (similar to redux). I will also talk about performance optimizations techniques we have used to achieve a perfect Lighthouse Score “100”. WPT report is available here https://webpagetest.org/lighthouse.php?test=190527_5T_a65fb33950a68ca88897b4ea3ceb66a5

Outline

This talk will cover how we have reduced the JavaScript footprint drastically using preact and related libraries. Also, we will talk about the code-splitting in preact app that allowed us to render a fully interactive page with just 18kb of JavaScript less than react size.

These are some of the latest web and browser technologies we have implemented.

ZERO render blocking requests
Intersection Observer
Lazy load images using Intersection Observer
Replace onScroll with Intersection Observer
Preload critical requests
Hybrid rendering
RequestAnimationFrame for visual changes
Passive Listeners
Precache future routes with serviceworker
Route-based & Component-based Code Splitting
HTTP/2 - Server push and multiplexing
Preconnect third party domains
Maximize GPU usage
Using the latest image formats for different browsers Progressive jpeg and WebP
Network API & dpr-based Image delivery
Web Font optimization

Speaker bio

Director of Engineering at Myntra Jabong
“Using technology to build product that helps customers to make better buying decisions”

Links

Slides

https://docs.google.com/presentation/d/1COVwZyc9VZdezI05xCUh-kP8qRtvR-VXKR33siZ49hU/

Comments

  • Zainab Bawa (@zainabbawa) Reviewer 3 months ago

    Thanks for the proposal, Upendra. Since ReactFoo is only about React, I am moving your proposal to JSFoo Bangalore for consideration, as it doesn’t fit the theme for ReactFoo.

    • Zainab Bawa (@zainabbawa) Reviewer 3 months ago

      I have moved your proposal here, Upendra.

      • Upendra Dev Singh (@uds) Proposer 3 months ago

        Sure, noted. Thank you for your time.

  • Zainab Bawa (@zainabbawa) Reviewer 2 months ago

    Thanks for the submission, Upendra. I have confirmed your talk, based on the reviews. One of the things we have to work towards is reducing the content since too much is being covered here. More, during the rehearsals.

  • Zainab Bawa (@zainabbawa) Reviewer a month ago

    Thanks for yesterday’s rehearsal, Upendra. Here is the feedback:

    1. Explain why you used Preact. Mention the statement explaining why you made the choice.
    2. Share resources of all you have done, not just the images.
    3. Explain the challenges you faced in making these changes.
    4. Were the changes incremental or were they all pushed out in one go?
    5. 45 days sounds very optimistic to undertake all these changes. How did you achieve this? Can anyone do this?
    6. How did the team adapt to/adjust to these changes?

    On the visual aspect of the slides, reduce to 3 bullet points per slide. Anything more than 3 bullet points on the slides will lead to participants reading the slides instead of listening to the speaker.

    Submit revised slides by 25 September so that we can go over the changes and do a final review.

    • Upendra Dev Singh (@uds) Proposer a month ago

      Thanks a lot for your valuable feedbacks. Please find my response below

      1. Explain why you used Preact. Mention the statement explaining why you made the choice. [Upendra] I have added bullet points in slides #6,7. I will be explaining this during my talk.
      2. Share resources of all you have done, not just the images. [Upendra] I have updated/added slides with code snnipets or action we have taken. #11,13,16,18,19,22,25. To accomodate these changes, I have also removed some of the ealier slides.
      3. Explain the challenges you faced in making these changes. [Upendra] Slide #34 covers the same.
      4. Were the changes incremental or were they all pushed out in one go? [Upendra] This feature in slide #5 that we broken systems into Micro-frontends and shipped first app within 45 days, and rest incrementally in another 2 months. Perf optimization also took another 8-12 weeks that I will cover in slide #34.
      5. 45 days sounds very optimistic to undertake all these changes. How did you achieve this? Can anyone do this? [Upendra] Taken care in above
      6. How did the team adapt to/adjust to these changes? [Upendra] We integrated perf culture by adding right tools and the processes during development phase. I will cover this in slide #32, I will talk about initially time to market was impacted due to new processes but once team adjusted to these new changes and it becomes a habit, time to market was not an issue.

      Please review the slides and let me know if there is any further changes required.

Login with Twitter or Google to leave a comment