If you are an active social media user, you will know the famous Instagram app. Instagram is an American photo and video sharing social networking service owned by Facebook, created by Kevin Systrom and Mike Krieger, and originally launched on iOS in October 2010. Do you know Instagram is using React Native for delivering the most seamless user experience to its users?. In this blog, you will get to understand how React Native was helping Instagram.
React Native is one of the top technology frameworks for developing applications for mobile devices. Being launched and maintained by Facebook, React native is open-source and contributed by a massive community of developers across the globe. It is being by big companies and rapidly adopted by many businesses from start-ups to giant corporations.
“Instagram Engineering complements React Native that Developer velocity is one of the defining value of Instagram’s mobile engineering.”
And they mention that they chose React Native to ship features faster through code sharing and higher iteration speeds, using tools like Live Reload and Hot Reloading that eliminate compile-install cycles.
Here we list the benefits that Instagram got from migrating to React Native.
1. Start-Up Performance
React Native has a start-up overhead primarily due to the need to upload the JavaScript package into JavaScriptCore (the VM used by React Native both on iOS and Android) and instantiate native modules and view managers. The benefits of React Native has come a long way to boost the efficiency of the application. Instagram tried to quantify this difference to check if the tradeoffs are beneficial.
To do this, they ported the original Edit Profile view to React Native. They developed a product infrastructure that began to be used parallel to product teams that incorporate navigation, translations, and core components. The React Native team developed ideas and built Random Access Module Bundling, Inline Needs, Native Parallel Fetching, and many more already implemented into the system.
2. Quick Feature Shipping
The Core Client Team of Instagram implemented Push Notification Settings and Edit Profile Views to React Native. Once seeing the above features’ enhanced performance, it also ported the Photos of View to React Native. Following these examples, most of their product teams shipped features to React Native.
3. Lightweight Interface
Instagram has a lightweight post promotion interface called Post Promote. This functionality was previously introduced as a WebView because it helped the team to iterate faster than with a native code. The problem is that the UX didn’t sound native and had a sluggish start. The Promo team ported this functionality to React Native and made significant changes to start-up times and user interface. It is worth noting that despite this being a rather complicated creation flow, only six methods have been employed to AnroidDEX.
4. Easy Implementation in iOS apps
Over 600M users come to Instagram every month to explore a wealth of fresh interest-based inspiration when engaging with their communities. At the moment of realization, if they are not ready to act on the inspiration right now, they can save it and explore it later when they’re ready. To do that, the Save Team has introduced a feature that helps save and replay posts anytime they wish by using a new private tab on their profile that is only available to them.
The Save team implemented the iOS version of the list of saved posts to React Native.
5. UX feels Native
Checkpoints are the channels triggered by the server in response to suspicious behavior. Traditionally, checkpoints were rendered using WebViews. As described earlier, WebViews are useful for code sharing and fast iteration speeds, but UX didn’t feel native, and startup times can be long-drawn. The Protect and Care team began to focus on the renovation of some of these flows. They opted to use React Native to exploit code sharing while retaining a better user interface and low startup times.
6. Highly Customizable
Instagram wants its app to be a safe space that anyone can catch and post their most meaningful moments. As the Instagram community expands and people from every corner of the world share more content, Instagram tirelessly works to keep Instagram healthy and positive, particularly concerning comments on the images and videos. With this in mind, the Feed team has introduced a feature that helps users moderate comments they get on their pictures or videos.
Lead Gen Ads is a CTA that allows users to share information with advertisers. Advertisers can customize the shapes on this surface. This was also efficiently built with the help of the customizability of React Native.
React Native has allowed product teams to ship features faster to both iOS and Android apps. The list below shows the percentage of code shared between apps for some of the products that could be used as a proxy to measure how Instagram managed to improve the developer’s speed.
- Post Promote: 99%
- SMS Captcha Checkpoint: 97%
- Comment Moderation: 85%
- Lead Gen Ads: 87%
- Push Notification Settings: 92%
Now, you know how React Native is helpful for Instagram, don’t you want to know how React Native is useful for your business?
Our experts provide excellent mobile applications development that are feature-rich and user-friendly to the core with life and feel to express your idea.
