Blog

Flutter vs. React Native: What You Need to Know Before Choosing Your Mobile App Framework
Flutter and React Native are two of the most popular cross-platform mobile app development frameworks available today. Both frameworks allow developers to build high-quality apps for iOS and Android using a single codebase, saving time and effort compared to building separate apps for each platform.

In this comparison, we will look at the critical differences between Flutter and React Native, including programming language, user interface, performance, community, and development time. Understanding these differences can help developers make informed decisions when choosing a framework for their next mobile app project.

React Native vs Flutter
1. Programming Language: React Native uses JavaScript, while Flutter uses Dart.
2. User Interface: React Native uses native components to provide a traditional look and feel. At the same time, Flutter has its own unique widgets and designs.
3. Performance: React Native can perform better with native modules, but Flutter has a faster development cycle and a hot reload feature.
4. Community: React Native has a larger community and a more extended history, while Flutter has a growing community and faster-growing popularity.
5. Development Time: React Native has a mature ecosystem and an extensive library of modules, which can make development faster for specific apps. At the same time, Flutter is known for more rapid app development due to its hot reload feature.
6. Debugging: React Native provides better debugging options, while Flutter has a more efficient reload feature.
7. Testing: Both React Native and Flutter have strong testing capabilities, but React Native has a larger pool of testing tools available.
8. Documentation and Support: React Native has more comprehensive documentation and support. In contrast, Flutter has growing documentation and support from its growing community.
9. App Size: Flutter tends to have larger app sizes than React Native.
10. Community Contributions: React Native has a larger pool of third-party libraries and packages. In contrast, Flutter has a growing collection of contributions from its growing community.
What are Flutter’s Advantages

Flutter has many advantages, making it a good choice for mobile app development. It allows for faster app development with its “hot reload” feature, which shows real-time changes. It also has unique designs and widgets, making the app look different from others. The framework runs quickly and smoothly, providing a good experience for users. It’s easy to learn, open-source, and can be used for multiple types of app development, including web and desktop. Additionally, it has an extensive collection of pre-designed widgets to help create beautiful and functional apps.

Why choose React Native over Flutter?

React Native is a well-established framework for developing mobile apps and has several advantages over other frameworks, including Flutter. Here are some reasons why one might choose React Native over Flutter:

First, React Native has a larger and more mature community of developers. This can provide a wealth of support and resources, including third-party modules and libraries that can be used in the app. This larger community can also offer a pool of developers to draw from when looking to hire or bring new talent on board.

Second, React Native uses JavaScript, a widely-used programming language that many developers are already familiar with. This can make it easier to find developers with the right skills and reduce the time and cost required to train new hires.

Third, React Native uses native components, the building blocks of native apps, to create a traditional look and feel. This can help to create a more familiar and intuitive experience for users. Additionally, using native components can also lead to better performance compared to using custom widgets.

Fourth, React Native provides better debugging options, making it easier for developers to find and fix bugs. This can save time and effort and can result in a higher-quality app.

Finally, React Native has a broader range of testing tools available, making testing the app easier and ensuring its quality. This can help catch bugs early in the development process and prevent the app from crashing or behaving unexpectedly for users.

So which framework is better?

Neither React Native nor Flutter is objectively “better,” as the choice of framework depends on the specific requirements and goals of the project. Both frameworks have unique strengths and weaknesses, and the best option depends on the particular needs of the project, the team’s expertise, and other factors.

For example, if a developer is familiar with JavaScript and wants to use a framework with a larger community, React Native may be a better choice. On the other hand, if a developer wants to create a highly customized and visually stunning app, Flutter may be the better option due to its extensive widget library and ability to create beautiful, fast animations.

Ultimately, the best framework choice will depend on the specific requirements and goals of the project. Therefore, it’s essential to carefully evaluate both frameworks and consider factors such as performance, scalability, development time, and cost before making a decision.

Bonus: Some of the best starter templates for both framework
1. React Native Starter Kit: A comprehensive starter kit that includes multiple features and screens, providing a good starting point for building a React Native app.
2. react-native-firebase-starter: A starter template that integrates with Firebase for authentication, real-time database, and storage.
3. React Native Redux Boilerplate: A starter kit that integrates Redux, a popular state management library, and provides a solid foundation for building scalable React Native apps.
For Flutter:
1. Flutter Starter Kit: A comprehensive starter kit with many features and screens, providing a good starting point for building a Flutter app.
2. Flutter Firebase Starter: A starter kit that integrates with Firebase for authentication, real-time database, and storage
February 1, 2023
React Hooks explained
What are react hooks?

Hooks are functions that allow developers to “hook into” React state and lifecycle features from functional components. They are called inside a function component to add React features to it.

React Hooks are a feature introduced in React 16.8 that allow developers to use state and other React features in functional components. Prior to the introduction of Hooks, it was necessary to use class-based components to use state and other React features in a React application.

Hooks are functions that allow developers to “hook into” React state and lifecycle features from functional components. They are called inside a function component to add React features to it. By using Hooks, developers can use state and other React features without writing a class component.

There are several built-in Hooks that are provided by React, such as useState and useEffect.

useState is a Hook that allows a functional component to have state. It takes an initial state as an argument and returns an array with two elements: the current state and a setter function that can be used to update the state. An example :
```
import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
```
useEffect is a Hook that allows a functional component to perform side effects. It takes a function as an argument and is called after the component renders. The function passed to useEffect will be called whenever the component is updated, similar to the componentDidUpdate lifecycle method in a class-based component. Here’s an example of how useEffect can be used to fetch data and update the state of a functional component:
```
import React, { useState, useEffect } from 'react';

function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://www.expiredqueues.com/api/endpoint')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data ? <p>{data.message}</p> : <p>Loading...</p>}
    </div>
  );
}
```
Hooks provide a way to add state and other React features to functional components and can help make code easier to understand and maintain by reducing the need to use class-based components.

So what are custom hooks?

Custom React Hooks are functions that allow developers to extract reusable logic from components and share it across multiple components. They are a way to share behavior that can be defined using React Hooks, such as useState and useEffect, between multiple components.

Custom React Hooks are created by defining a function that starts with the word “use” and performs some logic using one or more of the built-in Hooks provided by React. Let’s write an example of a simple custom hook that fetches data from an API and returns the data and a loading status:
```
import { useState, useEffect } from 'react'

function useFetchData(url) {
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    async function fetchData() {
      const response = await fetch(url)
      const data = await response.json()
      setData(data)
      setLoading(false)
    }
    fetchData()
  }, [url])

  return { data, loading }
}
```
This custom hook can be used in a component like this:
```
import { useFetchData } from './useFetchData'

function Example() {
  const { data, loading } = useFetchData('https://www.expiredqueues.com/api/data')

  if (loading) {
    return <p>Loading...</p>
  }

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  )
}
```
In this example, the useFetchData custom hook is called inside the Example component to fetch data from an API and store the data and loading status in state. The hook returns an object with two properties: data and loading, which are destructured and used in the component to display the data or a loader component while the data is being fetched.

Custom React Hooks can make it easier to reuse logic across multiple components and can help to make code more modular and maintainable. They can also make it easier to test and debug code, as the logic can be separated into individual functions that can be tested in isolation.
February 22, 2022
Awesome Free SVG Icons

If you think there are no free SVG Icons, – I was in the same position as you a few weeks ago. I have had a few struggles in the past to find the best free SVG Icons. We have our most beloved and well-advertised ones like Icons8, FlatIcons, The Noun Project which claim to give you the icons for free but then when you want to use them – you are presented with walls of Login/Create an account, pay or add attribution on the website.

I mean, are you f**king kidding me?

To use one icon, I have to clutter my webpage or app design with a bunch of links? What happened to FOSS and freedom of so-called Open Source.

Rather, here are some of the best and awesome Free SVG Icons from the FOSS community – all of these icons sources are available under MIT License and is hosted in Github.

Evil Icons

https://github.com/evil-icons/evil-icons

Bytesize Icons

https://github.com/danklammer/bytesize-icons

Remix Icons

https://github.com/Remix-Design/remixicon

Simple Icons

https://github.com/simple-icons/simple-icons/

Flag Icons

How about a few flags. Let SVG waive them. This repository has 5K stars and claims to have ALL countries flags. Yes – not a typo here, ALL countries. http://flag-icon-css.lip.is/
Using their own words:

A collection of all country flags in SVG — plus the CSS for easier integration.

Github Octicons

The name says it all, made by Github but not limited to Github Oct graphic. These are Github themed icons for any web projects. https://octicons.github.com/

Feather Icons

A dedicated website to allow you to download any icon with one single click – no questions asked. Search within many icons, or maybe use it as an npm package. Feather Icons team has your back.

A massive 16K stars, last I checked, a commit was made on June 11 and it still has 80 pull requests to be merged. Definitely worth bookmarking.
Checkout – https://github.com/feathericons/feather

SuperTiny Icons

These are super tiny in file size hence the name. Here you will find icons from major tech brands, websites logos and a lot more.
Github – https://github.com/edent/SuperTinyIcons

July 24, 2019
Top ReactJS Tools of Feb 2019

In this post, I have listed the tools for ReactJS that I found to be very useful. My selection criteria was the frequency of development, newly added features etc.

ReactN

ReactN is an extension of React that includes global state management. It treats global state as if it were built into React itself — without the boilerplate of third party libraries.

Reactotron

An app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Spectacle

A ReactJS based library for creating sleek presentations using JSX syntax that gives you the ability to live demo your code.

React Toastify

A toast for all of us and our web apps. React-Toastify allow you to add notification to your app with ease. No more nonsense!

React Draft WYSIWYG

Don’t get me wrong, I love Draft.js – it’s simple and most importantly customizable.

But then wouldn’t you love a great work done by a fellow developer on top of Draft.js with 100s of options? I am talking emoji and hashtags :)

February 4, 2019
How to stop zoom in on input focus on mobile devices
It has been almost a year since Safari (starting from iOS 10) disabled web developers ability to prevent user zoom.

We normally the viewport meta for granted.
```
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
```
This was a bulletproof solution to make our mobile responsive pages looks the same in all mobile browsers while we ignored that many users struggled to read our hand-picked crafted fonts and our 4K display supported font size.

We had one more problem. When users tap in any form fields – the webpage zoom in automatically.

Problem

Now I know for the fact that – allowing this feature stay unchanged is recommended – sometimes we do need to honour the client request and sometimes this zoom creates unwanted bugs in the UI.

For example – a date picker input – if zoomed in mobile – would most likely break the UI.

Continue reading below for the fix.

You might be interested in:

https://www.expiredqueues.com/youtube/why-i-never-make-a-youtube-video/
I walk you through my procastination of how I never end up getting to the point.

How To Fix

By default, all mobile browsers force the form element to work as it is. But when a developer sets the font size less than 16 pixels on any form element – mobile browsers intervene and forces the UI or Page to zoom so that the texts are readable enough.

You guessed it, the solution.

Apply below
```
@media screen and (max-width: 767px) {
  input, select, textarea {
    font-size: 16px;
  }
}
```
Please note, you can set any value for the max-width property as per your style guide or UI design.

Same, the font-size: 16px might be overridden by other higher specificity rules, like other classes, selectors etc.

It’s a good idea to use !important just in this case. You are restraining the selector only for mobile that means it won’t break your other UIs
June 2, 2018
Git commands I wish I knew early
It has been a little more than a decade since I started coding.

Started career in this industry as a web designer, then moved on to become front-end developer with savvy HTML and CSS tricks. Later around 2012 started renaming all resume and online profiles to claim to be JavaScript developer – with Vanilla JS, AngularJS blah.. blah.. blah… and then now a full-stack developer. Heck!!!

One simple thing has remained consistent even though I have moved on from position to position, shifting focus from design to programming, changing primary language from Photoshop to PHP to JavaScript – is the tools I use to work.

Git and Github, in particular, has played a major role in the career. Along with its useful features – it brought many nightmares as well.

Committing passwords, secret keys, unwanted changes etc. – I have had my fair share of embarrassments! I wish I knew more than `git push` and `git pull`.

Git commands I wish I knew early
1. Ignore changes from tracked files, temporarily
2. Undo local changes
3. Remove file from remote Git repository but keep locally
4. Remove git tracking entirely from a project
1. Temporarily ignore changes from tracked files

Tell Git to stop tracking changes
```
git update-index --assume-unchanged filename.ext 
```
and to start tracking again –
```
git update-index --no-assume-unchanged filename.ext 
```
2. Undo All Local Changes

Please note the dot, meaning reset everything to last pull state in the current directory.
```
 git checkout . 
```
If you just wish to reset one file, replace the dot with filename.ext

3. Remove file from remote Git repository but keep locally

You join the project in the sometimes in the middle of dev activities. The File is already on the remote repository – let us say ‘.env’ or my ‘secret.keys’.

Following command to rescue:
```
git rm --cached filename.ext 
```
Or if you have to remove an entire directory, .e.g. `fakedata/` then:
```
git rm --cached -r directoryName 
```
Above, “-r” means, recursively.

4. Remove git tracking entirely from a project

Let’s say you cloned a git repo, some boilerplate or starter template but it has all the tracking pointed towards its author git repository.

When you need to start fresh and remove the old git tracking and initialize new git repo, do following:
```
rm -rf .git
```
Example above, “-rf” means recursively force the command. Git stores all tracking data inside hidden “.git” directory. All we did here is deleted that directory.

Now if you wish to start fresh git repo on this same directory – “git init” should do.

Tips

Take a look on StackOverflow for top voted questions.

https://stackoverflow.com/questions/tagged/git?sort=votes&pageSize=15
May 10, 2018
On the verge of MNC life
Enough has already been said about 9 to 5 MNC job life of a Software Engineer.

You start by 8 am in the morning, commute for an hour or longer to reach the high tech office gate – go through security checks – both hands up with ID badge visibly worn around the neck.

Get inside the campus building – drive around 2 km track here and there in the parking area to find a free slot and park your Activa.

Finally make it to your cubicle, where you open your last ‘late night’ sleep mode laptop. As soon as you fire it up – there you have 10+ IMs window already opened and yellow marked to let you know people are desperate for your replies and then there your inbox running out of storage with emails from build server reports, bug tracker, your managers concern about roles in community initiatives, last nights meeting email thread and then HR emails on how you can have a great life and benefits of this MNC.

You catch up with all that and realize oh its time for daily scrum meeting for 15 minutes. That means some gym time, which is good. You walk into a conference room and do a stand-up meeting. Yes, there are fancy chairs and sleek round tables with 120+ inch screens for remote working peoples but you do standup. I told you it was gym time except it doesn’t end in within 15 minutes. There you update everyone about what you did yesterday and will you do today.

Everybody applauds – meetings/gym ends. Get back to your cubicle. Start coding. You pass another hour or so and then lunch time. After lunch – walk around the campus so that your food is better digested. Experience some beautiful scenery while walking in jogging tracks (yes, many MNCs has jogging track).

Get back to the cubicle after a small walk. Resume the coding + IM answers. This blah blah continues till evening when you (almost all the time) get an email stating a P1 bug has been logged and you have to fix it anyhow today. Whenever there is a P1 bug – it automatically gets followed by insisting that “tomorrow we have a demo so you need to fix this anyhow”.

What would you do – fire the bug tracker, copy the bug title and StackOverflow about it? Open the damn all first search result page link with CTRL + click and make all chrome tab size full of sh#@ like below:

Bug search on StackOverflow

You work till late at night, at last, you make a patch and check-in. Mark the bug resolved – tomorrow does the loop.

Are you still awake?

If yes then let’s talk about why this MNC life of mine is at the verge of extinct.
- Imagine – you never have to spend your morning in the traffic – instead – enjoy the good coffee and read the newspaper.
- Then, when you start your work – you work with the most amazing products on the internet, solve the real problem along with the talented team from around the world.
- Don’t just fix the bug of a legacy software built two decades ago.
- Get paid handsomely while you enjoy the healthy food cooked at the home.
- Have the freedom of a set of tools you use, contribute and use open source. Use the most advance modern technologies for development.
- Keep learning because you gotta stay modern and things change pretty quickly so you have to.
- Don’t ever have to race through the parking lot in 20km/ph for 2 feet of spare space
Fancy thought, isn’t it?
January 23, 2016
How to: delete node_modules folders in windows.

Let us agree, we all have been there once in a while, messing up our hair while removing these long path issue with node_modules.

For a while, I used to copy paste nested npm folders outside and try deleting again and again until I delete them all. I googled around and found few other tricks that does the job fairly, but after being so used to of Node workflow, I happen to find the easiest way. So here we is what you have to do.

Enter npm prune

All you got to do is remove the node_module listings from your package json and the run `npm prune`

Lets say your package.json looks like this:

Remove everything or may be just any particular npm which you wish to remove. Take an example, we wanted to remove all of it – then I would simply empty the dependencies like:

Then run “npm prune” and voila. NPM will unbuild all of the node_modules folder which it didn’t find in the package.json but did locate in drive.

You might be interested in:

https://www.expiredqueues.com/youtube/why-i-never-make-a-youtube-video/
I walk you through my procastination of how I never end up getting to the point.

December 8, 2015