ReactFoo Delhi

On React, performance and front-end engineering

Tickets

Micro Frontend Architecture - A Case Study of the Fitment Widget on Walmart.com

Submitted by Nidhi Sadanand (@nidhisadanand) on Wednesday, 26 June 2019

Duration: 20 mins crisp talk

View proposal in schedule

Abstract

This talk outlines an approach and usecase for development of Embedded Components using Micro Front end architecture. The Key takeway is the design goals and constraints when developing components that have to live another hosted page and choices that have worked in Walmart.com.

Outline

The session will consist of
1. What Micro Frontends architecture is in brief
2. Problem that we are trying to solve with this Architecture
3. What are the constraints that need to be adhered to
4. Deep dive into the Fitment widget and the design it uses
5. Design Elements and Details of this implementation
6. Q&A at the end of the sssion

Requirements

Should have some exposure to Frontend development.

Speaker bio

Nidhi Sadanand is a Distinguished Engineer working on various Customer facing applications on Walmart.com including the Search Experience and the Omnichannel experiences. She has 18 years of experience working as full stack developer in various domains including eCommerce, Gaming and Financial Services.

Links

Slides

https://drive.google.com/open?id=1_qr-U2JwF6LP0aom7CKaOD3BlOFWK5aP

Comments

  • Zainab Bawa (@zainabbawa) Reviewer 3 months ago

    Hello Nidhi,

    Thanks for the proposal. For ReactFoo, we are only looking for talks on React and performance engineering with React. The proposal has no mention of React, nor do the slides have any mention of React being used for this project. What did I miss?

    • Nidhi Sadanand (@nidhisadanand) Proposer 3 months ago

      This project is entirely on React. It will talk about some of the problems that can happen with microsites when building with frameworks like React. It will also talk aobut techniques of lazy loading such with React Loadables and Wepack DLL. Its primary goals is not specific to React but more on the architecture and constraints of Microfrontends and will touch on SOME of the performance aspects while developing in React.

      • Zainab Bawa (@zainabbawa) Reviewer 3 months ago

        Thanks for the clarification, Nidhi. Getting your proposal reviewed.

  • Zainab Bawa (@zainabbawa) Reviewer 3 months ago

    Hello Nidhi,

    I got your proposal evaluated with reviewers from the ReactFoo community. Here is the feedback:

    1. The proposal is relevant for ReactFoo. The proposer should add specific code details.
    2. Insights are decently clear. Proposer should add challenges experienced re-using the components mentioned in the presentation.
    3. Structure and flow of the content is ok.
    4. Overall, there is a lot of explanation but no code. Having actual code snippets of the key ideas proposed will make the proposal more relevant.

    Please incorporate the above feedback and submit revised slides by 10 August, latest, so that we can close the decision on your proposal.

  • Zainab Bawa (@zainabbawa) Reviewer 18 days ago

    Thanks for the rehearsal, Nidhi. Here are the feedback points from today’s rehearsal:

    1. Slides are verbose because bullet points have paragraphs of text. Instead, present shorter phrases for the bullet points. Move balance text to speaker notes if have to refer to the text.
    2. How do you manage compatibility issues with 20 libraries? How is the coordination among large teams (with as many as 70 engineers)?
    3. Clarify/qualify the statement about 6,000 lines of code - is this on every page?
    4. Micro front-ends is an organizational decision. What are the tradeoffs that organizations have to watch out for?

    Incorporate these changes in your slides and submit link to revised slides by 30 October.

  • Zainab Bawa (@zainabbawa) Reviewer 7 days ago

    Thanks for the revised slides, Nidhi. The content is superb in the latest iteration. The slides need modifciation for visual ease. Here are the suggestions:

    1. Too much text on every slide. Have no more than 3 bullet points per slide. Bullet points should be 3-5 word phrases, at most. Move rest of the text to speaker notes.
    2. Slides need proof reading. Suggest you have someone from your team look at the slides to fix the one-off extra spaces between punctuation marks and other issues which otherwise affect the visual appeal of slides.
    3. Font sizes, especially on the code slides, need increase to 30 point. Also, font sizes and types across slides are not consistent. Edit this.
    4. Similarly, the diagram on slide 20 needs to be zoomed in further. Currently, it’s not wide enough and the fonts are too small. Audiences sitting behind won’t be able to read.
    5. The takeaway slide needs to be broken down into two so that we don’t have so much text on a single slide.
    6. Add contact information slide towards the end so that participants know how to reach you after the event.
    7. Lastly, if there are additional references, then add a reference slide.

    Look forward to the revised version.

  • Raghavendra Satish Peri (@artofvision) 6 days ago

    Hello,
    At hasgeek events we are trying to make our events accessible for people with disabilities. To achieve our goal is to first get the content of presentations accessible. Here is some guidance to make the presentations accessible. Please use these fonts & size so that even able body people can see the content in the auditorium during presentation.

    Fonts and Font Size
    Because they are the easiest to read, only use Sans Serif fonts, such as Arial and Verdana. Since a PowerPoint presentation will most likely be projected onto a large screen consider how far the audience will be from the screen and choose a font size accordingly. The minimum font size for a PowerPoint presentation should be 24 points.

    For more accessibility info on making presentations accessible use the following link
    https://www.framingham.edu/Assets/uploads/about-fsu/accessibility/_documents/7-steps-accessible-ppt.pdf

Login with Twitter or Google to leave a comment