Forem: Raaj

Dynamic Module Imports in javascript

Raaj — Mon, 13 Jun 2022 17:39:49 +0000

If you are reading this article then you are most likely aware of static module imports.

The above code allows you to split up your JavaScript across multiple files and import them only when needed. The issue, though, is this code is always downloaded immediately by the browser leading to potentially slow page loads. This is where dynamic module imports come in.

How To Use Dynamic Module Import?

Dynamic module imports are very similar to static module imports, but the code is loaded only when it is needed instead of being loaded right away. This means your page load speed will be much quicker and the user will only ever load JavaScript code that they are actually going to use.

Here is a simple example of how to download the above module using dynamic module imports.

As you can see this code is pretty similar to using a normal import but instead, this import is a function that returns a promise. This promise contains all the details of the module.

You will notice, though, that the default export of the module must actually be destructured from the promise return value. This is why we have the code default: User which is mapping the default export to the User variable.

You can also use async/await to clean this up even more.

This code works the same as the promise-based version, but in my opinion, is a bit cleaner and easier to work with.

How to Solve Cors Error in Frontend

Raaj — Mon, 13 Jun 2022 17:31:18 +0000

CORS, also known as Cross-Origin Resource Sharing, is something every web developer has to deal with at some point. Chances are if you are reading this article then you are probably dealing with a CORS error right now. In this article I will tell you what CORS is and how you can fix CORS errors.

Solution
1. Install CORS plugin

2.Install Above plugin And Enable CORS plugin

3.plugin interface will be like below image

Make your React Native app 3x smaller with one simple command

Raaj — Mon, 13 Jun 2022 17:25:36 +0000

Ways to Reduce React Native APK Size

- Migrating to React Native from Expo
- Make Changes in android/app/build.gradle
- 2.1 Set def enableProguardInReleaseBuilds = true
- 2.2 Set def enableSeparateBuildPerCPUArchitecture = true

1.Migrating to React Native from Expo

I Love everything about Expo except the size of the binaries. Each binary weighs around 25 MB regardless of your app.

So the first thing to do is migrate the existing Expo app to React Native. This is the simplest and coolest method to reduce your APK

To migrate the expo app 1st step to follow is

open your root directory and execute the following the command

This will download the required dependencies and build native projects under the ios and android directories.

2.Make Changes in android/app/build.gradle
This is what you have been waiting for, I know.

Open up android/app/build.gradle
Set def enableProguardInReleaseBuilds = true

this would enable Progaurd to compress the Java Bytecode. This reduces the app size by a tad bit

Set def enableSeparateBuildPerCPUArchitecture = true.

Android devices support two major device architectures armebi and x86. By default, RN builds the native libraries for both these architectures into the same apk.

Setting the last function creates two distinct apk in the build folder. You have to upload both of these apk to Play Store and Google would take care of distributing the app to the correct architectures

Using this split generates version numbers for both apk's in the order of 104856 and such. This is auto-generated by the build to avoid version conflicts, so dont freak out (i did).

This split reduced the apk size from around 7mb to 3.5mb for arm and 5mb for x86 respectively.

yeah
so thats how you lose weight. Reducing the size of your app has many added benefits, the best being more users will be willing to download your app. And the app won't consume more space in the user device

How to Delete the node modules Folder on Windows

Raaj — Tue, 07 Jun 2022 18:22:16 +0000

If you attempt to delete the node_modules folder on Windows, you may have trouble for a variety of reasons. In some cases, for example, the folder nesting within the directory creates folder names that are too long. You might also get the annoying Folder Access Denied message stating, "You'll need to provide administrator permission to delete this folder".

The solution I use is to install RimRaf globally with npm and then use it to delete the folder. RimRaf is an implementation of the UNIX/LINUX command rm -rf for Node, which removes directories and their contents recursively. First, enter this command to install RimRaf from npm:

Once it is installed, you can use the following command from within the project directory that contains the node_modules folder.

That's it! It works and it's easy to remember and execute.

create-react-app not working

Raaj — Sun, 13 Mar 2022 15:18:38 +0000

If you are facing this version issue follow the below steps
In your new folder

1.npm init

2.npm install create-react-app

3.npx create-react-app myapp

Conclusion :
There are many ways to solve this error, Above mentioned steps are one of the method that help you to solve this error

React.js tips for better performance. Part 1

Raaj — Wed, 09 Mar 2022 18:42:30 +0000

1) Avoid using the index as a key for the map
2) Analyzing and optimizing Webpack Bundle Bloat
3) Using Immutable Data Structures
4) Use React.Fragments

1) Avoid using the index as a key for the map
We often see index being used as a key when rendering a list. But using the key as the index may show your app incorrect data as it is being used to identify DOM elements. Whenever you push or remove an item from the list if the key is the same as before, React assumes that the DOM element represents the same component, it is always advisable to use a unique property like id as a key.

2) Analyzing and optimizing Webpack Bundle Bloat
If you use are using Webpack, you should check and analyze your application bundle to remove the plugins or modules that aren’t needed. You can consider using Webpack Bundle Analyzer, which helps you to visualize the size of webpack output files with an interactive zoomable treemap, I love it

3) Using Immutable Data Structures
There is a lot to learn about Immutable Data Structures, Data immutability comes from the functional programming world. I will strongly recommend you to read about "Data immutability" as there is a lot to talk about.

4) Use React.Fragments
I asked myself why use React Fragment when I could just use div, bcos I'm curious and passionate about web performance, made some research, and I discover div created additional HTML element wrappers, so div is slightly lower in performance.

How to optimize React Native App

Raaj — Thu, 06 May 2021 07:16:48 +0000

A great user experience should be the core objective of any app development. Although React Native tries to provide everything you need to develop a performant application, there are occasions where you have to manually optimize your app. To do this, developers need to have a performance optimization mindset from the start of their projects.

Ways to Optimize the React Native App

1. Use FlatList
2. Remove all console statements
3. Memoize expensive computations
4. Use Relevant sized images
5. Remove unnecessary libraries and features
6. Use Hermes

1. Use FlatList to render large lists in React Native

If you have a large list, rendering all the items at once can cause a performance issue, but lazy loading with FlatList will improve performance

import React from 'react'
import {FlatList} from 'react-native'

const data = [
  {
    id: 1,
    text: 'First'
  },
  {
    id: 2,
    text: 'Second'
  },
  ...
]

const App = () =>{
    const renderItem = ({item}) =>(
        <View>
          <Text>{item.text}</Text>
        </View>
    )
    return (
        <FlatList
          data={data}
          renderItem={renderItem}
          keyExtractor={item => item.id}
        />
    )
}

2. Remove all console statements

While you could install some plugins such as babel-plugin-transform-remove-console to remove these statements from production

3. Memoize expensive computations

React introduced the memo HOC (Higher Order Component) for preventing unnecessary re-rendering and the useMemo hook for optimizing expensive computations.

4. Adjust (resize and scale down) image sizes

Images can contribute significantly to performance issues in React Native applications. So use relevant sized Images to increase the loading performance of your App

5. Remove unnecessary libraries and features

Each library in a React or React Native application leaves some footprint on the application. This is why you should only add libraries and features you need in your app and remove irrelevant dependencies and libraries. Animations, navigations, tabs, and other features can contribute to the screen load time and so the more they are on the screen, the worse the performance.

6. Use Hermes

Hermes is a JavaScript Engine developed by Facebook in 2019. It is one of the must-have features for improving app performance, reducing memory usage, decreasing app size, and improving the app start-up time.
Hermes is not currently enabled by default in React Native but you can easily enable it in your app.
To enable Hermes on Android, edit your android/app/build.gradle file and add the following rules.

project.ext.react = [
      entryFile: "index.js",
      enableHermes: true
  ]