What I learnt from ReactFoo 2018

Lusan Das
4 min readAug 21, 2018
Photo by rawpixel on Unsplash

I recently attended a tech conference ReactFoo in Delhi. So I wanted to share with everyone what I learnt from the talks. There were numerous talks given, however I am just sharing the ones I connected to most.

Below are the sessions with brief explanations

React Internals — How understanding React implementation can help us make better apps

The talk was given by @ankit-muchhala . I loved how he explained about the internals of react. I learnt in depth how components are rendered and what are the steps that it goes through during the whole process, including understanding in details about the component lifecycle. I also learnt about the complexity of diffing algorithm during the rendering phase and how react uses heuristic diffing algorithm to optimise rendering performance.

Some helpful links related to the talk

  1. https://github.com/acdlite/react-fiber-architecture
  2. https://reactjs.org/docs/reconciliation.html
  3. https://medium.com/@baphemot/understanding-reactjs-component-life-cycle-823a640b3e8d

Hidden performance gems in chrome dev tools used at Microsoft

The talk was given by Rachit Gulati (@squiroid). I learnt how to use chrome dev tool to debug memory leaks using profiling, tracing and various techniques. He also explained how they use these data to maintain performance at Microsoft which was really cool!

Some helpful links related to the talk

  1. Slides for his talk https://drive.google.com/file/d/1D9qqNJizjKPdDtBOWE-g_dTI3J65yJ6C/view
  2. https://github.com/rachitGulati/reactfoo-2018
  3. https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference

Create your own Custom Async Renderer with diffing in Web Worker

The talk was given by Aziz Khambati (@azizhk110). He created his own async library and discussed about what he learnt while making it. Some of the highlights were the benefits of async rendering and how it improves the speed and perception of render. He also mentioned react fibre and its benefits and the future of react.

Some helpful links related to the talk

  1. Slides for his talk https://drive.google.com/file/d/1AOGiEXloRxH5QB2TiN3tQpmXWuTxqhBU/view
  2. https://azizhk.github.io/rrrww/
  3. https://azizhk.github.io/rrrww/async/index.html (← Really cool ^.^)

Why we should use React Canvas

The talk was given by Arwa Lokhandwala (@Arwa Lokhandwala). She talked about how she improved performance for booking seats using React canvas in BookMyShow. I loved the drastic improvement that was evident after using canvas especially when she showed demo clearly showing the performance improvement.

Some helpful links related to the talk

  1. https://github.com/Flipboard/react-canvas

Cleartrip’s reactive journey from 3 to 0.2s using Apollo GraphQL

The talk was given by Eesh Tyagi. He talked how they migrated old legacy code to React. However they faced performance issues due to the huge data logic in the client side leading to increase in file size. So they introduced GraphQl in the server layer to handle the data transformation in the app. Basically the client is only talking to the GraphQl layer. All data from the API is maintained by it. I loved the idea behind it.

Some helpful links related to the talk

  1. Slides for his talk https://docs.google.com/presentation/d/1Pl0Yjs6hj2jqScW5f0WjErXtZjGzrNLXDKKAwLkEFKU/edit#slide=id.g3c84f4f9bb_0_428
  2. https://blog.apollographql.com/full-stack-react-graphql-tutorial-582ac8d24e3b

Piggybacking your WebVR/AR experiences with React

The talk was given by Shivang Shekhar (@Shivank Shekhar). He talked about the power of AR/VR in web and native. He has shown us a way on how we can utilise the technology to implement powerful prototypes using 3D scenes by using libraries like Aframe, React 360 and various other libraries. He also discussed the pros and cons of each which gave us a better insight on which library to choose depending on our requirement.

Some helpful links related to the talk

  1. https://aframe.io/
  2. https://facebook.github.io/react-360/
  3. https://developers.facebook.com/videos/f8-2017/react-vr-build-amazing-vr-experiences-using-react/

Deploying with confidence

The talk was given by Vaibhav Lokhande (@vaibhav7779). He talked about how they migrated their legacy code to React and the challenges they faced during the migration process and how they utilised the power of Test Driven Development to maintain their application. He also discussed the infra used to maintain the application which was really helpful.

  1. https://www.slideshare.net/vaibhavlokhande6/delhi-first-draft2
  2. https://medium.freecodecamp.org/quick-guide-to-tdd-in-react-81888be67c64
  3. https://jestjs.io/

Conclusion

All the talks definitely boosted my thrust for knowledge and helped me understand how people are solving different problems at different scale.

This reminds of a proverb I related to after googling it :P

In vain have you
acquired knowledge
if you have not
imparted it to others.

~~ Deuteronomy Rabbah

Follow me on twitter to get more updates regarding new articles and to stay updated in latest frontend developments. Also share this article on twitter to help others know about it. Sharing is caring ^_^.

Remember you can clap upto 50 times to show your love!

My previous articles

  1. https://medium.freecodecamp.org/the-best-way-to-architect-your-redux-app-ad9bd16c8e2d
  2. https://medium.freecodecamp.org/how-to-use-redux-persist-when-migrating-your-states-a5dee16b5ead
  3. https://codeburst.io/redux-observable-to-the-rescue-b27f07406cf2
  4. https://codeburst.io/building-webapp-for-the-future-68d69054cbbd
  5. https://codeburst.io/cors-story-of-requesting-twice-85219da7172d

More where this came from

This story is published in Noteworthy, where thousands come every day to learn about the people & ideas shaping the products we love.

Follow our publication to see more product & design stories featured by the Journal team.

--

--

Lusan Das

UI Engineer @Flipkart || Web || Scuba Lover || Travel || Food