DEV Community: Tushar Agrawal

Intro to React Native: Develop mobile apps

Tushar Agrawal — Sat, 04 Feb 2023 11:38:27 +0000

So you want to develop a mobile application, but don't want to learn the the platforms' native language (swift for iOS or Java/Kotlin for Android), or you just stumbled upon this post and wondered what react native is; well, this post if for you. Note, I won't go into actual coding but rather into a glimpse of react native world.

What is React Native?

Simply put, react native or RN is a JavaScript framework which allows you to write native apps using JavaScript. Note I said native apps instead of mobile apps. Reason? I will go in-depth later, but using react native you can write mobile apps (iOS and Android), desktop apps (Windows and MacOS) and heck, even VR. Though in this post, I will mainly focus on mobile apps. It is maintained by Meta (formally Facebook) and was released in 2015. As of writing (February, 2023), 0.71 is the latest release.

Do companies use React Native?

Short answer, Yes. Many companies use react native for their mobile apps like Tesla, Microsoft, and many companies are migrating to react native, like Shopify. You can read their migration blog here.
You can also look into the entire React Native Showcase.

What are some benefits of using React Native?

1. Single code base

You only need to learn 1 language and you can code apps for both Android and iOS. Also you get other benefits of maintaining a single code base like less time to market, faster MVP, etc.

2. Easy Development Environment

It doesn't forces you to work with XCode or Android Studio, heck it doesn't even require you to have them installed (if you use expo, more on that later). You can work with any IDE of your choice, even notepad.

3. Share Code with web

Since it uses Javascript, and if you have a website as well, you could share some of the logic, thus saving your time and sanity.

4. Community

React Native, as with any Javascript framework, benefits from its MASSIVE community. Also most of the packages that work for react, work for react native as well, and for those that doesn't, there are packages for that as well.

5. Other Benefits

These benefits aren't exactly exclusive to RN but it enjoys those features such as OTA (over-the-air) Updates, Hot Reload in development and Component Libraries.

So are there any Prerequisites?

As with any framework, yes there are some Prerequisites, and some things that are good to know.

Prerequisites

These are the things that are more or less required before you get started with React Native.

1. Javascript

Javascript is a programming language of the web. Though it is used to write anything and its about time you learn Javascript if you haven't already.

“Any application that can be written in JavaScript, will eventually be written in JavaScript.” - Atwood's Law

2. React

According to me learning react is a must before you get into React Native, though some might disagree. Why you ask? In a way, you can put react native as a separate framework which builds upon react, so if you are learning react-native you indirectly are learning react. It would be like learning to ride a motorcycle without learning to ride a bicycle.

Good To Know:

1. Typescript

Typescript is basically Javascript, but more strict. It add types to Javascript, which leads us to writing less error prone code. It also enables auto complete on VSCode, which is nice to have.

2. Android Studio or XCode

This is more of a good to have software. I know that I mentioned that you can work without it, but then you will have to plug your phone every time you develop, which is cumbersome. Also these software provide emulators, which you can use which is much easier, and also provide some other tools for performance measurement and enhancement.

Are there any Caveats?

Well, yes.

1. Performance

Compared to Native App, it still lags in performance. Though its not like it is extremely slow. Practically speaking, you will not even see the difference, its only when you compare side by side, you might see react native app lag behind by a few micro seconds.

2. Middle of Migration

So currently, react native is in the middle of migrating to a new architecture. This is not something you need to worry about but the library developers, so you might face some incompatibility when upgrading dependencies, so be sure to check the docs.

3. Custom Modules

This mainly concerns the hardcore developers with extremely niche scenario, but you might not find some components and will have to write your own in native language.

Getting Started

So now you are all pumped up to get started, we can start. However, as mentioned earlier I am not going to be teaching how to write RN apps, for that there are plenty of tutorials out there on YouTube and Udemy. What i will provide though is a guide to how to proceed.

The best way to get into RN development without getting overwhelmed is expo.

What is Expo?

Expo is a managed framework on react native. For my React friends, consider Next.js for React. For my non-react friends, consider Automatic transmission car for a Manual Transmission Car. It reduces complexity, add features and makes its a pleasant drive.
One cannot praise expo enough for how much its makes developing in react native easier. Simplicity, high quality documentation and libraries are not just the only features to use expo. Its services, like Expo Application Service (EAS) lets you build for iOS even without owning a MAC. It also makes OTA updates super easy. And the best part, you won't even have to leave expo until you are one of those niche developers with specific use case that expo doesn't have. So remember I said RN is in the middle of an architecture migration, expo handles that as well, so you don't have to worry about incompatibility.

So yes, head to Expo Docs to get started. What I would suggest is do as many projects as you can to get good at it, and make sure to learn something new in every project you make.

What are Other good to know things about React Native?

Develop for any Platform

As I said earlier, using react native you can develop for any platform and not limited to mobile. But its not as easy as it sounds like.
For desktop apps, React native Windows is used which is maintained by folks at Microsoft, and still in active development, so a lot of things might change.
For VR app, ViroReact is used, which is again is in active development. So its development is not as convenient as expo, and for someone new to react native, i won't suggest going that route. But once you are experienced, not one is stopping you and these are great technologies to develop native apps.

Update apps Over the Air

Over the Air (OTA) updates allow you to push minor updates to apps without having to wait for an approval. The process for publishing apps to play store and app store is, after you publish and update your app requires an approval before it is pushed to your users. This is a great policy but its becomes unnecessary when you might just need to update some spelling mistakes. This is when you can use OTA updates to instantly update the app, without going through the whole approval process. And yes it is allowed, as long as you don't change the functionality drastically.

You can use native code as well

Yes RN mainly is about writing Javascript for making you apps, but you can also write components and functions in native language, and use it. And that's actually how meta uses RN in their apps. They have not, and probably will not migrate their native app to react native, but only some screens use react native.

Can You make games?

Can you use an aircraft to travel 1km ? Yes you can, whether or not you should, depends on your use case. Though if you really want to, you can look into react-native-game-engine.

How can join the community?

React Native Community is extremely welcoming, and it would be great to have you. Have a look at the following resources, and join them if you like:

Subreddits

Twitter Accounts

Blogs

Podcast

React Native Radio by Infinite Red

Conferences

Conclusion

React Native is a great framework, and I have been working with it for a year now. It is a great time to learn react native when many companies are considering react native for their new apps.
If you do decide to learn react native let me know, it would be an incredible and exciting journey.

If you made this far, thanks for reading. It was my first post in a way and hope you liked it. If you have any suggestions or if I missed something, let me know.

Series Open CSS Loaders ["4. Final Submission"]

Tushar Agrawal — Thu, 17 Dec 2020 10:24:53 +0000

What I built

For DigitalOcean's hackathon, I built an app called Open CSS Loaders. It is exactly what it sounds, a collection of CSS loaders, which are open to all and anyone can use. The main difference however is that anyone can also add a loader. Just like on DEV anyone can submit a post, even if he is a beginner, in the same way if someone has a great idea for a loader and want to share it, he can add it here. There is a live editor that shows you how the loader will look on the site.
One can also edit the pre-existing code on the site so that he can customize the loader according to his liking.
The best part though is still the dark mode.😍

Category Submission:

I am submitting the app to Built for Business

App Link

The app can be found here:
open-css-loaders-pwtuz.ondigitalocean.app/
Thank You DigitalOcean for that sweet $50 so I can host my site on the platform for some time.

Screenshots

Description

The app is built to provide a collection of CSS loaders which can be used by anyone, ranging from beginner to professionals. Of course, the highlight being anyone can add a loader if he follows the id and the keyframe rule.
There is also a maintainer page on which one can edit the existing code and save it, in case it hinders the site, or completely delete the code. Though these things require a password.
The nifty features of the app are

quote on page load from adviceslip
dark mode
likes being a random image
Seperate themes for the editor

Link to Source Code

The Source Code is hosted on GitHub:
https://github.com/TusharYaar/Open-CSS-Loaders

Permissive License

The license provided is MIT

Background

While making a project from my college, I was looking for a CSS loader. While there are many great sites, usually they belong to an individual or a very small number of people. Thus the loaders on those sites are limited and are not updated frequently. The solution to this is making a site where anyone can add a loader, thus, in theory, it will be updated more frequently. So I made that site and it does not require login so that there is no pulling back users who don't want to login on random sites. And yes obviously you can copy any of the code and use it on your site.

How I built it

When I got this idea, I visualized what I wanted to make. I was sure I wanted it to be a single-page app. I wanted it to be simple not very wacky and that what I went with.
The first thing was to get the backend running, it was simple since not many routes are there, then it was the front end that took most of my time.
I got the database connection and working in a day, and then it was finding bugs or design flaws, and fix that.
The technologies used are:
Front-end: HTML, CSS, Javascript
Front-end Libraries: Jquery, ace.js
Backend: Node.js and Express
Database: MySQL
The digital Ocean platform provides a platform to serve this. The deployment process is very easy. I was able to get the app running in under 2 minutes. While making the app the biggest thing I learned was asynchronous requests. This was my first single-page web app, and I am pretty happy with how it turned out. The second thing I learned was how to use colors in dark-mode. That drastically improves how the site looks and feels.

Additional Resources/Info

I wanted the app to be light-weight as much as I could because I already am using jQuery and ace so I didn't go with a CSS library and wrote all the CSS on my own, and I think it turned out better compared to if I would have used a library.
I am a 2nd-year college student and this was my first app so I don't have much experience in making apps or improving them. Any feedback or improvements are really appreciated.

Series Open CSS Loaders ["3. Deploying to the DO"]

Tushar Agrawal — Mon, 14 Dec 2020 20:16:05 +0000

This is PART-3 of the series for my entry in the hackathon.

Idea

Here I wanted to Deploy the app on the Digital Ocean Platform. The Docs are great. Super easy. I deployed the app. Simple.
But since I was using MongoDB Atlas the whole time, I had to switch to one of their databases. They have 3 option

PostgreSQL
MySQL
Redis

It would have been best if I would have gone with Redis, since it stores the data in key-value pairs, similar to mongoDb, but I have my collage finals in 2 weeks, and I am having MySQL in the syllabus, so I went with the same. Then it was lots of docs referring and changing the node.
Uninstalling Mongoose
npm uninstall mongoose
And then installing mySQL
npm i mysql --save
Yeah, that's it, I have A basic App running. But I have to do a lot of testing and of course, adding the Loaders to the site.
Also I wanted to the the "Deploy to DO button".

Work

Setting app on the digital ocean is very easy. I say the easiest amongst the services I have tried. Host the repository on GitHub, link your account, choose the repository, give environment variables if necessary, hit deploy. Voila, your app is up in under 2 minutes.
And Every time you update your repo on GitHub, the app is also updated.
Link the database, Simple.
And Now i have an app Running.
Check it out here

Now for the button the docs have everything. You have to add a file .do/deploy.template.ymal and add details to it. Then add the button itself and it works.

Series Open CSS Loaders ["2. The Front End"]

Tushar Agrawal — Mon, 14 Dec 2020 19:09:36 +0000

This is Part-2 of the series for my entry in the hackathon.
Read the Part-1 here

WORK

Nothing much to document here. I had a basic design in my mind, I have to just get that working. Simple right.
The first thing was to get the html, CSS and basic Javascript running. Then I added all the ajax requests using jquery.
These I recycled from the first attempt at making the app.
The other thing did in the first attempt was using a syntax highlighter for all the textboxes. It was working fine, but then I came across ace.js, which is a full fledged IDE on the browser, so I started to implement that.
The docs are great and was easy to setup. But then I had to refactor a lot html and CSS so it took a lot of time.
The other thing I added was a function to like a loader. And in that it shows different icons when liked which I like personally.
Then there were some minor updates like a page theme toggle, an editor window toggle and some bug fixes.
Yeah that was it. Now had to deploy to the platform.

Series Open CSS Loaders ["1. Setting up backend"]

Tushar Agrawal — Sun, 13 Dec 2020 19:49:35 +0000

This is PART-1 of the series for my entry in the hackathon.

The Idea

For the hackathon, I decided to complete my Open CSS Loaders and host it on the Digital Ocean platform.
So I began the work. The cover image you see is the design I had in mind. The top Being the Header "Open CSS Loaders", then a hr, the links to my social media accounts, followed by a quote, and the two buttons, one for adding a code and the other to set editor theme.

The work

But this was the front end. First I started with the backend on Node.js and Express.
Install the basic packages.

npm i express request mongoose dotenv body-parser --save

Now, it was just defining the routes and testing them which was pretty straightforward. So as of now I have the following routes:-

/ => the home page
/getquote => to get a quote
/api/serveranypopup => to check if there is any popup message to show on the page
/api/setpopup => to set a popup message
/api/getloader => to get all the loaders
/api/addthiscode => to add a code
/api/like/:loaderid => to like a loader

There are other routes for managing the page

/iamadmin => to go to the admin page
/api/updatecode => it requires a password to update any code
/api/iamgoingtodeletethispost => it deletes any of the loader but requires password

Open CSS Loader

Tushar Agrawal — Tue, 01 Dec 2020 16:12:34 +0000

Site link:- https://wb26iz.deta.dev

Introduction

So this is my first post🤞 so don't expect much. So a little backstory here. While searching for a pure CSS loader for my college project, I stumbled across a few sites which did get my work done, but every site was maintained by only a few individuals. Also, some sites haven't been updated for a long time. So here I present to you an open CSS loader that allows everyone to contribute to the site. Thus, hopefully, it is updated.

About

So I decided to work on one and host it on DETA since it is free and is new so I decided to give it a try.
I aim this site at someone who is searching for a loader and can find a variety of loaders. He can take any of the code directly or can edit them on the site and see the output above the code.

The main feature though is adding the code. It is simple. Make a parent div and give the specific id specified and you can submit the code. So a beginner or even an experienced developer can submit a code. A point to be remembered is that if the code submitted hinders the working of other loaders or does not work at all, it will be deleted. Else you are free to use any code from the site without any acknowledgment. Also, the complete backend of the site will be available on GitHub once I complete it.

Problems

The first is people targeting other loaders or other components of the page by mistake. I did use regex to check if only the id specified is used and not anything else to prevent style altering of other loaders, but I have to do something about the common div elements.
The second is I am using prism.js for syntax highlighting which I think is not good since it has to style the complete text box when there is a change in the textbox.
Edit I found that there is a library called ace.js which provides an online IDE. I will be switching to it.