ReactFoo Delhi

On React, performance and front-end engineering

Tickets

New React Child in Daddy’s Code – A Microsoft Journey

Submitted by Rajat Aggarwal (@rajataggarwal) on Tuesday, 1 October 2019

Duration: 20 mins crisp talk

View proposal in schedule

Abstract

This talk is about how we at Microsoft using react to create sharable component at office 365 products.
Idea behind this talk is to demonstrate how companies who have monolithic code working on different technologies can leverage react and introduce new world of react possibilities without affecting the old ecosystem.
Microsoft Word, Powerpoint etc product those are running on win32 platform and technology like c, c++, c# and script# now clubbing with typescript and react to give rich features on web.
Tools and architecture by which we make this possible - used by approx. 200 Million users in a day.

Outline

How we introduced React in monolithic architecture
1.Performance
2.Integration
3.Collaboration
4.Handshake
5.Flighting

How we create sharable architecture
1.Webpack
2.Appchrome with nugget cache
3.Typescript and script sharp similarity
4.Reduced js size.

Telmetry and performance logging
1.Logging que implementation
2.Component level logging.

React with Tensorflow
1.A glimpse towards Machine learning under the hood of react.

Requirements

Good listner :)

Speaker bio

I am currently part of Microsoft India R&D and taking care of the Microsoft Word online web interaction. Prior to this I was handling workplace analytics in microsoft which was react based application dashboard for b2b organization to analyze and calculate their custom metrices.
I am having experience of working with Hotstar, Dominos, Yatra.com.
I have worked on many products revamping from others tech to react and helped few startups to create their initial pilots.

Links

Slides

https://1drv.ms/p/s!AvLHyS0KZ3lpgSCl_GtXo0fiHLM_?e=ZCcVGg

Comments

  • Zainab Bawa (@zainabbawa) Reviewer 20 days ago

    Thanks for today’s rehearsal, Rajat. Here is the feedback from the rehearsal:

    1. The overall context – of the specific application or product – is missing and why the choice was made to move from legacy code to React. Both these aspects have to be clarified in the presentation. When React was chosen for migration, what other options were considered? Why was the decision to move to React only?
    2. The Action Manager flowchart is unclear. Instead, show a real-world application explaining the Action Manager pattern.
    3. The flow of the final graphic was also unclear and how the flow went from form build to blog, etc.
    4. More code snippets are required to show how the build process has changed. Code snippets have to be integrated as screenshots in the slides. Stick to one language (Maven or C-sharp) when showing code snippets.
    5. You also need to show the metrics, explaining what was the time taken for the build process when there was legacy code to what was the time taken for the build process after React was introduced.
    6. Take the example of a specific app and show before-after scenario.
    7. Some slides contain lots of terms. Introduce one terminology per slide.
    8. Mention some of the challenges faced during migration.
    9. How will the development process continue in future? Will it be on the legacy code or will it be on the React code?

    Submit your revised slides by 29 October, latest. We will do a review and second rehearsal thereafter.

  • Zainab Bawa (@zainabbawa) Reviewer 7 days ago (edited 7 days ago)

    Thanks for the revised slides, Rajat. Overall, the story and narrative are much more detailed in this iteration. Kudos!

    Here is the feedback on the revised presentation:

    Visual feedback:

    1. Sentence casing across all slides has to be fixed. Get your slides proof checked.
    2. The transitions on the slides are too slow. This will lead to odd gaps as you change one slide to another.
    3. There are different fonts on different slides and even on the same slides. For example, slide 11. Make font type and size uniform across slides.

    Content feedback is as follows:

    1. What is the relationship or the context between slides 6 and 7? This is unclear.
    2. Slide 11 on “Why (choose) React?” is very generic. What led to your team’s decision to pick React? Why was some other framework not considered?
    3. Instead, slide 13 seems to explain the context better. Remove slide 11 and 12 and move straight to slide 13.
    4. Slide 35 with metrics and comparisons is very cluttered. Either modify the slide visually, or break it down into two slides.
    5. The image attribution slide has to be distinct and separate.
    6. The contact information slide needs full URLs. If you don’t have a Twitter handle, don’t state it. Instead, add an email address where people can contact you (besides LinkedIn).
    7. Overall, the purpose and intention of slides 1-12 is unclear. The presentation become a lot more interesting from slide 13 onwards. You may want to reduce the first 12 slides to literally one or two slides and move quickly into the migration story. Else, the audience will be lost.

    Revise your slides before the second rehearsal to incorporate the feedback.

  • 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

  • Raghavendra Satish Peri (@artofvision) 4 days ago

    Hello Rajat,
    As discussed,
    You need to cut down on the demo which will give you 4-5mins.
    Explain at least the 2advantages of why you chose web pack.
    Try to finish the talk within 20mins & leave 5mins for Q & A. it took 29mins today.

    • Rajat Aggarwal (@rajataggarwal) Proposer 3 days ago

Login with Twitter or Google to leave a comment