DEV Community: Imran Hossen Bappy

Build Mobile Apps Faster: Why React Native is Still a Dominant Force in 2025 🚀

Imran Hossen Bappy — Sun, 31 Aug 2025 18:44:30 +0000

In today's digital-first world, the question isn't if you need a mobile app, but how quickly you can deliver a high-quality experience to users on both iOS and Android. For years, this meant a difficult choice: build two separate, expensive native apps or compromise on performance with a web-based solution. This is the precise challenge that React Native continues to solve with remarkable elegance.

But as the mobile landscape evolves, is it still the right choice? Let's take a deeper look.

What is React Native, Really? Not Just a Web Page in an App
Created and backed by Meta, React Native is an open-source JavaScript framework for building genuinely native applications from a single codebase. It's crucial to understand what "native" means here. Unlike older cross-platform tools that wrap a web application in a native shell (a "WebView"), React Native uses a "bridge" to communicate with native platform APIs.

When you write a component like , React Native translates that into a native UIView on iOS and an android.view on Android. The result? Your app uses the exact same fundamental UI building blocks as an app built in Swift or Kotlin. The user gets the fluid performance and familiar feel of a native application because, for all intents and purposes, it is one.

The Unbeatable Advantages Driving Adoption
The framework's sustained popularity isn't just hype; it's built on tangible benefits for both developers and businesses.

Massive Cost & Time Savings: This remains the number one reason companies choose React Native. By sharing upwards of 90% of your code across platforms, you're not just halving your development effort; you're streamlining updates, bug fixes, and feature rollouts. Business logic, state management, and API calls are typically 100% shared, meaning your core application only needs to be written once.

A World-Class Developer Experience: Productivity is paramount. Features like Fast Refresh are game-changing, allowing developers to inject new code directly into a running app, instantly showing changes without a full recompile. This tight feedback loop, combined with the vast ecosystem of libraries and tools available via npm, means developers can build, iterate, and solve problems faster than ever.

Leverage Existing Talent: The phrase "Learn Once, Write Anywhere" is key. If your organization has a team of web developers skilled in JavaScript and React, they can transition to mobile development almost seamlessly. This breaks down silos between web and mobile teams, creating more versatile engineering units and simplifying hiring.

The New Architecture: The Future of Performance: Historically, the "bridge" could sometimes be a bottleneck. Meta has been re-architecting React Native from the ground up to address this. The New Architecture, featuring components like Fabric (a new rendering system) and TurboModules (more efficient native module integration), enables more direct, synchronous communication between JavaScript and the native side. This translates to faster startup times, smoother animations, and a more responsive UI, putting React Native's performance on par with fully native apps for almost all use cases.

A Balanced Perspective: When to Pause and Consider
React Native is incredibly powerful, but it's not a universal solution. For applications requiring the absolute peak of performance and platform-specific capabilities—such as high-fidelity 3D games, AR/VR experiences, or complex video processing tools—building directly in the native language might be more suitable. While you can always write custom native modules to bridge any gaps, relying heavily on them can diminish the cross-platform benefits.

The Verdict for 2025
React Native has matured from a promising alternative into a robust, enterprise-ready solution for mobile application development. Its ability to deliver high-quality, native experiences while dramatically improving efficiency makes it an incredibly compelling business and technology choice. With the performance boosts from its new architecture and the unwavering support of Meta and a massive community, its future looks brighter than ever.

It effectively democratizes mobile development, empowering more teams to build amazing things, faster.

What's your take on the evolution of cross-platform frameworks? Have you seen the benefits of React Native firsthand? Share your thoughts below! 👇

ReactNative #MobileDevelopment #JavaScript #AppDevelopment #CrossPlatform #Tech #Programming #Innovation #React #DeveloperTools

Next.js-এ React Query ব্যবহার করে প্রকল্পে ক্যাশিং কীভাবে বাস্তবায়ন করবেন

Imran Hossen Bappy — Sat, 27 Apr 2024 18:44:13 +0000

ভূমিকা

এই আর্টিকেলে, আমরা Next.js-এ React Query লাইব্রেরী ব্যবহার করে ক্যাশিং বাস্তবায়ন করার ইমপ্লিমেন্ট দেখব। ক্যাশিং ওয়েবসাইটের কর্মক্ষমতা উন্নত করার একটি কার্যকর কৌশল যা ওয়েবসাইটের লোড টাইম কমায়, নেটওয়ার্ক অনুরোধ কমায়, এবং দ্রুত নেভিগেশনকে করতে সাহায্য করে করে। React Query একটি জনপ্রিয় জাভাস্ক্রিপ্ট লাইব্রেরী যা ডেটা ফেচিং, ক্যাশিং এবং স্টেট ম্যানেজমেন্ট সহজ করে তোলে।

প্রয়োজনীয়তা

এই টিউটোরিয়াল শুরু করার আগে, আপনার নিম্নলিখিতগুলি ইনস্টল করা থাকা প্রয়োজন:

Node.js
VS Code

শুরু করা যাক

1. Next.js প্রকল্প তৈরি করুন

আমাদের প্রথমে একটি নতুন Next.js প্রকল্প তৈরি করতে হবে। নিম্নলিখিত কমান্ডটি ব্যবহার করে এটি করা যেতে পারে:

npx create-next-app todo-app

এটি todo-app নামে একটি নতুন ডিরেক্টরি তৈরি করবে এবং প্রয়োজনীয় ইন্ডিপেন্ডেন্স ইনস্টল করবে।

2. React Query ইনস্টল করুন

আমাদের প্রকল্পে React Query লাইব্রেরী ইনস্টল করতে হবে। নিম্নলিখিত কমান্ডটি ব্যবহার করে এটি করা যেতে পারে:

npm install @tanstack/react-query

এটি @tanstack/react-query প্যাকেজ এবং এর ইন্ডিপেন্ডেন্স ইনস্টল করবে।

3. React Query প্রদানকারী তৈরি করুন

আমাদের একটি React Query ক্লায়েন্ট এবং প্রোভাইডার তৈরি করতে হবে। আমরা একটি ReactQueryProvider.js নামে একটি নতুন ফাইলে করতে পারি:

import { useState } from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

export default function Providers({ children }) {
  const [queryClient] = useState(new QueryClient());

  return (
    <QueryClientProvider client={queryClient}>
      {children}
    </QueryClientProvider>
  );
}

এই কোডটি একটি QueryClient ইনস্ট্যান্স তৈরি করে এবং এটি একটি QueryClientProvider কম্পোনেন্টে পাস বিতর করে। এই প্রোভাইডার আমাদের অ্যাপ্লিকেশনের অন্যান্য অংশে React Query অ্যাক্সেস করতে দেবে।

প্রদানকারী রুট লেআউটে ইমপোর্ট করুন

আমাদের রুট লেআউট ফাইলে (src/app/layout.js) প্রোভাইডার ইমপোর্ট করতে হবে এবং এটি আমাদের অ্যাপ্লিকেশনের চিলড্রেন (children) গুলোকে র‍্যাপ করতে হবে:

import "./globals.css";
import Providers from "./ReactQueryProvider";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

এই কোডটি আমাদের অ্যাপ্লিকেশনের সমস্ত পেজ-এ React Query অ্যাক্সেস করতে দেবে।

5. useQuery হুক ব্যবহার করুন

এখন আমরা useQuery হুক ব্যবহার করে ডেটা ফেচ করতে এবং ক্যাশ করতে পারি। আসুন একটি todos পেজ তৈরি করা যাক যেখানে আমরা JSONPlaceholder API থেকে টোডোগুলো ফেচ করব এবং ক্যাশিং ব্যবহার করব।

import { useQuery } from "@tanstack/react-query";
import Link from "next/link";

const getTodos = async () => {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos");
  const data = await response.json();
  return data;
};

const TodosPage = () => {
  const { isLoading, data } = useQuery({
    queryKey: ["todos"],
    queryFn: getTodos,
    staleTime: 1000 * 30, // 30 সেকেন্ড
  });

  if (isLoading) return <div className="text-4xl text-center py-5">লোড হচ্ছে...</div>;

  return (
    <div className="p-5">
      <div className="flex gap-4 items-center">
        <Link href="/">হোম</Link>
        <Link href="/todos">টোডো</Link>
      </div>
      <h1 className="text-4xl font-bold text-center py-5">টোডোগুলো</h1>

      <div>
        {data?.map((todo) => (
          <div key={todo.id} className="border p-2 my-2">
            <h2 className="text-xl font-bold">{todo.title}</h2>
            <p>{todo.completed ? "সম্পন্ন" : "অসম্পন্ন"}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default TodosPage;

উপরের কোডটি নিম্নলিখিত কাজ করে:

getTodos ফাংশনটি JSONPlaceholder API থেকে টোডোগুলো ফেচ করে।
useQuery হুক ব্যবহার করে ডেটা ফেচ এবং ক্যাশ করে।
queryKey প্রপার্টির ভেলু হবে এই কোয়ালিটির নাম যেটা অ্যারে অফ স্ক্রিন হিসাবে দিতে হবে যেমনঃ ["todos"]।
queryFn প্রোপার্টিটির ভেলু একটি async function, যা ডেটা ফেচ করার জন্য ব্যবহৃত হয়।
staleTime প্রোপার্টিটিতে 1000 * 30 (30 সেকেন্ড) এ সেট করা আছে। এটি নির্দেশ করে যে ক্যাশে থাকা ডেটা 30 সেকেন্ডের জন্য ভ্যালিড থাকবে। 30 সেকেন্ডের পরে।
isLoading অবস্থাটি নির্দেশ করে ডেটা লোড হচ্ছে কিনা।
data প্রপার্টিটি আমাদের ডেটা প্রদান করে।

এখন যদি আমরা হোমপেজে গিয়ে আবার টুডু পেইজে ৫ সেকেন্ডের ভিতরে আসি তাইলে এই API-টি আবার রিকোয়েস্ট করবে না।

6. সুবিধাগুলি

React Query ব্যবহার করে ক্যাশিং এর সুবিধাগুলি হল:

পেজ লোডের সময় হ্রাস: ক্যাশে থাকা ডেটা ব্যবহার করে, আমরা পেজ লোডের সময় উল্লেখযোগ্যভাবে হ্রাস করতে পারি।
নেটওয়ার্ক অনুরোধ হ্রাস: আমরা কেবলমাত্র প্রয়োজনীয়

6. সুবিধাগুলি

React Query ব্যবহার করে ক্যাশিং এর সুবিধাগুলি হল:

পেজ লোডের সময় হ্রাস: ক্যাশে থাকা ডেটা ব্যবহার করে, আমরা পেজ লোডের সময় উল্লেখযোগ্যভাবে হ্রাস করতে পারি।
নেটওয়ার্ক অনুরোধ হ্রাস: আমরা কেবলমাত্র প্রয়োজনীয় হলেই নেটওয়ার্কে অনুরোধ করি, যা সার্ভারের উপর চাপ কমায় এবং ব্যবহারকারী অভিজ্ঞতা উন্নত করে।
অফলাইন কার্যকারিতা: যদি ব্যবহারকারী অফলাইনে থাকে, তবে আমরা এখনও ক্যাশে থাকা ডেটা প্রদর্শন করতে পারি।

7. সিদ্ধান্ত

React Query একটি জনপ্রিয় লাইব্রেরী যা ক্যাশিং সহ ডেটা ফেচিং এবং স্টেট ম্যানেজমেন্ট সহজ করে তোলে। এই আর্টিকেলে, আমরা Next.js অ্যাপ্লিকেশনে React Query ব্যবহার করে ক্যাশিং বাস্তবায়ন দেখিয়েছি। ক্যাশিং ব্যবহার করে, আমরা আমাদের অ্যাপ্লিকেশনের কর্মক্ষমতা উন্নত করতে পারি এবং ব্যবহারকারী অভিজ্ঞতা উন্নত করতে পারি।

অতিরিক্তঃ

আপনি আরও জটিল ক্যাশিং কৌশল, যেমন কোন ডেটা ক্যাশ করা উচিত সে সম্পর্কে আরও জানতে React Query ডকুমেন্টেশন দেখতে পারেন।
আপনি ডেটা মিউটেশান এবং ক্যাশ অকার্যকরকরণ সম্পর্কেও জানতে পারেন, যা আপনার অ্যাপ্লিকেশনের ডেটা সর্বদা সাম্প্রতিক থাকা নিশ্চিত করে।
আশা করি এই নিবন্ধটি আপনাকে Next.js-এ React Query ব্যবহার করে ক্যাশিং বাস্তবায়ন করতে সাহায্য করবে!

Video Link : https://youtu.be/8H06IfnHpMo
Full Code: https://github.com/imranBappy/paly-with-react-query

What is Lorem Ipsum?

Imran Hossen Bappy — Sat, 29 Jul 2023 05:49:39 +0000

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?

Imran Hossen Bappy — Sat, 29 Jul 2023 05:49:27 +0000

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

What is Lorem Ipsum?

Imran Hossen Bappy — Sat, 29 Jul 2023 05:48:51 +0000

What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Lorem Ipsum

Imran Hossen Bappy — Sat, 29 Jul 2023 05:48:36 +0000

Pros and Cons in React JS

Imran Hossen Bappy — Sat, 29 Jul 2023 05:47:59 +0000

React.js is a popular JavaScript library for building user interfaces, and like any technology, it has its own set of advantages and disadvantages. Let's explore the pros and cons of React.js:

Pros:

Component-Based Architecture: React follows a component-based architecture, which allows developers to break down the UI into reusable and independent components. This modular approach makes the code more organized, maintainable, and encourages reusability.

Virtual DOM: React uses a Virtual DOM to efficiently update the actual DOM. When there are changes in the data, React creates a virtual representation of the DOM and compares it with the previous version. Then, it updates only the necessary changes to the real DOM, reducing the overall DOM manipulation and improving performance.

Declarative Syntax: React uses a declarative syntax, which means developers describe what the UI should look like based on the data, rather than writing imperative code to manipulate the DOM directly. This makes the code more predictable, easier to understand, and less error-prone.

Active Community and Ecosystem: React has a large and active community of developers, which results in a vast ecosystem of libraries, tools, and resources. This community support makes it easier to find solutions to common problems and stay up-to-date with best practices.

React Native: React's component-based architecture also powers React Native, a framework for building cross-platform mobile applications. By using React.js for web and React Native for mobile, developers can share a significant amount of code between web and mobile applications.

One-Way Data Binding: React follows one-way data binding, which means data flows in a single direction. This simplifies the data flow and makes it easier to reason about how changes affect the application state.

Cons:

Learning Curve: React's learning curve can be steep for developers new to component-based architectures and concepts like JSX. It might take some time for beginners to become proficient in React development.

Tooling Complexity: While React itself is straightforward, setting up a complete development environment with build tools like webpack and Babel can be challenging for beginners.

JSX Complexity: JSX, React's syntax extension for JavaScript, allows developers to write HTML-like code within JavaScript. Some developers might find it unusual at first, especially if they are more accustomed to working with traditional HTML and JavaScript separately.

Frequent Updates: React has a rapid release cycle, which can result in frequent updates. While this is generally a good thing as it brings improvements and bug fixes, it might also lead to some compatibility issues with existing codebases during major updates.

React Native Limitations: While React Native is a powerful framework, it might not cover all the platform-specific features required for complex mobile applications. In some cases, developers might need to write custom native code to achieve certain functionalities.

Boilerplate Code: While React's component-based architecture promotes reusability, it can sometimes lead to boilerplate code, especially for small or simple projects. Managing state across multiple components can also become complex in larger applications.

In conclusion, React.js is a powerful and widely-used library for building user interfaces, and its pros often outweigh the cons. However, like any technology, it's essential to consider your specific project requirements and team expertise before deciding to use React.js.

JavaScript VS TypeScript

Imran Hossen Bappy — Sat, 29 Jul 2023 05:44:17 +0000

JavaScript and TypeScript are both programming languages used for web development, but they have some key differences. Let's compare them in various aspects:

Type System:

JavaScript: It is a dynamically typed language, meaning variable types are determined at runtime. There is no need to explicitly specify types for variables.
TypeScript: It is a statically typed superset of JavaScript. It introduces a type system that allows developers to specify the types of variables, function parameters, and return values. These types are checked at compile-time, providing enhanced code reliability and better tooling support.
Type Checking:

JavaScript: It does not have built-in type checking, so potential type-related errors might only be discovered during runtime, leading to possible unexpected behavior.
TypeScript: The TypeScript compiler performs static type checking, catching type-related errors during development. This helps in finding and fixing bugs earlier in the development process.
IDE Support and Tooling:

JavaScript: IDE support and tooling are generally not as powerful for JavaScript compared to TypeScript. The lack of explicit type information can limit code autocompletion and intelligent suggestions.
TypeScript: TypeScript offers excellent IDE support and tooling. Modern code editors and IDEs can leverage TypeScript's type information to provide advanced autocompletion, refactoring, and error checking, leading to a more productive development experience.
Compatibility:

JavaScript: Being the foundation of web development, JavaScript code can run on virtually any web browser that supports ECMAScript standards.
TypeScript: Since TypeScript is a superset of JavaScript, all valid JavaScript code is also valid TypeScript code. TypeScript code needs to be transpiled to JavaScript before being executed, which means it can also run in any browser.
Language Features:

TypeScript: In addition to all the features of JavaScript, TypeScript introduces features like static typing, interfaces, enums, generics, and more. These features facilitate writing scalable and maintainable code.
Learning Curve:

JavaScript: Being a simpler and more loosely typed language, JavaScript generally has a lower entry barrier for beginners.
TypeScript: The added complexity of types and type annotations can make TypeScript a bit more challenging for beginners, especially those who are new to statically typed languages.
Community and Adoption:

JavaScript: JavaScript has been around for a long time and is widely adopted, with an extensive ecosystem of libraries and frameworks.
TypeScript: TypeScript's popularity has been steadily growing, and many major projects and frameworks, including Angular, use TypeScript.
Which one should you choose?

The choice between JavaScript and TypeScript depends on several factors. If you're starting a small project or want a quick script, JavaScript might be sufficient. However, for larger, more complex projects, TypeScript can bring significant benefits in terms of code maintainability and bug prevention, especially when working in teams.

Ultimately, both languages have their strengths, and the decision depends on your project requirements, team expertise, and personal preference. Some developers even use both, as TypeScript allows gradual adoption by allowing you to include JavaScript files in a TypeScript project without immediate type checking.

A full setup of Next JS with Redux, Tailwind, Material UI, PWA, and Docker

Imran Hossen Bappy — Sun, 02 Apr 2023 18:11:12 +0000

The final code for this guide can be found here.

Next JS Banner
Pre-requisites before going forward:
You have a basic understanding of React.
You have Node (Version 10 or newer) and NPM installed.
Let’s get started
We will refer to our project directory as my_project.

First, we will set up Tailwind CSS as it comes directly with Next JS. Open your terminal and type the following:

npx create-next-app -e with-tailwindcss my-project
cd my-project
This will automatically configure your Tailwind setup based on the official Next.js example.

Configure Tailwind with a theme and config:
Let’s talk about the theme we will be using. This is the theme object:

The paper is the background color we can use for the elements that are present off-focus. Like the body color.

primary and secondary are objects that define the focus elements of our page. For example, you would use primary maincolor for the background of a card and then secondary main for a call to action button on the card.

error and fg(foreground) are colors for the text that will be in contrast to our primary and secondary colors.

These objects have a dark property for different combinations.

The breakpoints are for media queries. It is good practice to define custom breakpoints.

The purge array contains paths to all those files which might be using our tailwind classes. This is important as tailwind only keeps the classes we used when we build the app for production.

We add an extra ha object in the screens object. This will add an extra breakpoint using which we can prevent :hover from applying to devices that do not support them. Thus, ha:hover:text-2xl this will not increase font size on mobile devices when you tap them.

Don’t change the keys for the default theme yet. This is because this theme object has been made keeping Material UI’s theme structure in mind as MUI is a bit strict when it comes to theming. We will discuss that later.

Now you can configure tailwind to use this theme. Got to tailwind.config.js and replace everything with the code below:

You can find more about the theming here.

Next, we create a fileglobal.css in /styles/global.css . You will have to create the styles folder as well.

This will apply all the tailwind classes to your project. You can add more default styles here.

Finally, we need to import this CSS file into our project. Go to /pages/_app.js Remove the default tailwind import and Import the CSS at the top:

import "../styles/global.css";
...rest of _app.js
With this, our tailwind is set up in Next JS. You can find more information here.

Setting up Redux
Installing the libraries:

npm install next-redux-wrapper react-redux redux
To make redux work with async actions I will install redux-thunk:

npm install redux-thunk
Create a file named store.js in the root. Import the following things:

import { createStore, applyMiddleware } from "redux";
import { createWrapper } from "next-redux-wrapper";
import thunk from "redux-thunk";
The redux-thunk middleware helps us to use redux even with promises by providing with a dispatch function.

We need to create an action to dispatch. First, let’s create a helper file which will have a list of all ACTION_TYPES.

Create a folder helpers and a file utils.js in it. This will have utilities and some configs. Put this in it:

export const ACTION_TYPES = Object.freeze({
AUTH: "auth",
});
Let’s create a sample action for our redux. Create a folder actions in root and a file in it user_actions.js :

Notice how we get dispatch from redux-thunk . We can use it as many times we want in this function. Here we dispatch an action of type: AUTH and payload: some data . This will be directly passed to the reducer.

Next we need to create a reducer for our store. Create a folder reducers in the root and a file named default.js . Put this into it:

default.js
This will hold initialize and control the state of our store. A default state = {} has been passed initialized.

You can read about HYDRATE but in simple terms, it populates our state during app load and is automatically called by next-redux-wrapper .

Now create a index.js file in the reducers folder. Put this code:

We can make multiple reducers such as a user_reducer.js to store user data. Then we pass it to the combine reducers function which stores a union of all states.

Now we just need to pass this combined reducer to the store. Open store.js

Import your default reducer:

import reducers from "./reducers";
Create the store and apply the middlewares:

const createStoreWithMiddleware = applyMiddleware(
thunk
)(createStore);
Now we create the store and wrap it with next-redux-wrapper

const makeStore = (context) => createStoreWithMiddleware(reducers);
export const wrapper = createWrapper(makeStore, { debug: true });
This is how your store.js should look like:

Your redux is now set up.

You can refer to this guide for more configurations and advanced use cases.

Setting up Material UI for React in Next JS
Install the Material UI library:

npm install @material-ui/core
Next, we define the theme for Material UI. Create a file theme.js under the helpersfolder.

We define a similar theme with differences in breakpoints definition. This is because Material-UI uses a rigid theme. Read more here.

Now, we will create a Wrapper and use a layout with a header and footer.

You can create /Components/Header/Header.js and /Components/Footer/Footer.js files and export your header and footer components.

After this, create a folder hoc that will hold our custom wrappers. Create a file Layout.js in hoc :

Now, create a Wrapper.js in the hoc folder:

We define a function to accept a Component and return the wrapped component. This format is good if you want to do things like user validation for a particular page.

Here we provide our theme to the MUI’s ThemeProvider. We also call an action to the redux store using useDispatch hook and read the state through useSelector hook.