Gowtham Subbarayan

Hi. I'm Gautam. I'm working as a senior's development engineer, s t e three in better place. Um, I've I have started my career as a flex developer in, uh, uh, Cybernet Technologies. With having more than 12 years of experience, I can, uh, you know, like, handle mobile application, web application, everything. And I have worked on multiple technologies like, like, Xamarin, um, Apache, and then XDJ as JavaScript. My, uh, recent work was on React and React Native, where I have worked almost 3 years on React and React Native platform. Um, I have been working in, uh, candidate b to c app and b to b app applications. So, uh, my proficiency is more on React and React media. Thank you so much.

In order to reduce react native memory usage, we need to make sure that each element, uh, each file is an, um, I'm sorry. Uh, each of the, uh, files are optimized well and. So, uh, in React, we have memory. We need to optimize each and every, um, components into, uh, memoized component, and, uh, memoization will have a catch there. So you need to optimize, uh, you need to optimize the memory usage by reducing, uh, number of controls and components into the page, And you need to use SVGs instead of PNG search effect so that will reduce the, um, react native app size. And in case of memory usage, you need to use a, uh, component that are optimized for rendering. So, um, you can optimize the rendering by, uh, using Flipper or, um, using, uh, React Native. In order to do that, uh, you need to connect the Flipper with your React Native application and start profiling. So, uh, you need to record for each and every interaction you are making the, uh, your component is rendering or not. That we need to check.

Yeah. Uh, TypeScript is, um, in React Native, we can use TypeScript. So TypeScript is a, um, advance of JavaScript. Uh, you can use TypeScript in order to, uh, declare your store models, uh, and it's it's, like, constrained as a, uh, view model, uh, where your, uh, view will have the, um, data type definition. So each of the view model will have a, uh, will be defined in the TypeScript. So TypeScript will make sure make sure you are react native applications or, um, you know, compiled without any without any issues. And dynamic instead of dynamic typing, uh, in TypeScript, we have static typing so that, uh, we can ensure all of our datas are, um, coming perfectly fine, and we don't have to worry about dynamic calculation. So, uh, in JavaScript, we might face issues like, uh, when we are, uh, you know, reading a string, uh, it could be a number, or when we are reading a number, it could be a string. But those case of, uh, those cases are can be optimized in the TypeScript, um, TypeScript based one. So prop types, uh, you can declare prop types, but prop types is, um, TypeScript is more advanced than prop types.

In order to, um, check the performance bottlenecks and react native app, we need to use flipper. So, and make sure that react memo is used on components, and, uh, make sure, uh, you are using, um, flat list, uh, instead of a scroll view. So flat list, uh, there are a lot of optimization where elements are, uh, list items are created on whenever when you scroll down the application, and, uh, it get recycled every time. So we need to ensure that all of your, uh, all of your components are optimized for performance.

K. INA core, like, a hybrid kind of form of mobile application. Core over application. So Core over and Core over and Core almost same. Core over and gives us React, uh, React desktop front end. So it has a container called web view. So in web view, uh, we need to render the components and controls, and there is a native interaction between, uh, native interaction uh, Android app and then, uh, the web view either via the code dynamic bridge or bridge. Uh, earlier, uh, used the same approach, but, uh, due to it's a web application. Right? So I think also same in sub web application, whereas React Native is completely different. Uh, React Native is, like, uh, whenever you are writing any HTML control, it is directly transpiled to the native component instead of the web component. Whereas in, even, uh, all the components are web components. So, uh, it will render on web view only, not on the native, uh, native versions. Whereas React native renders, uh, components in a React native, uh, version, low hardness

We can use ionic ionic UI component in React Native by, you know, like, adding a review on that and then, um, rendering the React, uh, iconic, uh, UAs on top of

Not all web components are, uh, directly connected to React Native component. Uh, whereas React Native component, you need to, uh, use, uh, you need to use views instead of.

You need to make sure you have the, uh, reducer in place, and then reducer will have the update user update, uh, update user that returns the, uh, new object of the user. Whereas, uh, here, the user is directly sent as a payload. You need to convert that user to a, uh, new object. I mean, you need to spread the user object

In Flutter and React Native, we need to make sure you are rendering a web view so that you are a cross platform compatibility with the Flutter app will also integrate with React Native

For micro animation, you can use for Lotte, uh, Lotte Lotte or any other external, um, uh, animation framework. So Lottie animation is one of the, uh, animation, uh, framework where you can use a micro animation, microinteraction like that. Uh, like, you know, like, whenever you are navigating from 1 page to another page or whenever you are clicking an icon, the icon should, you know, like, juggle between, uh, different states.

The approach we follow is just, um, just, uh, just based, uh, any testing. So, uh, in just based any testing, you need to assert the, uh, value that is expected to the value that is, uh, rendered.