Writing React Native has never been easier: how to do it in your browser
React Native is an amazing language. You are able to write code for both platforms at the same time. Though you might not have a great PC. Without a great PC you can’t run an emulator, and your compiling times will be low.
There is a solution for this problem. There are 2 options to develop React Native online. You have Expo Snack, and Appitr. The former being the most well known. Before we get into these websites, let’s analyse the benefits and drawbacks of developing React Native in the cloud.
Benefits of cloud development
- It does not heavily depend on your processing power/hardware. So you can develop on your old laptop, raspberry pi, etc.
- Your project is stored in the cloud. This will make sure your project isn’t accidentally deleted, or corrupted. It also brings the benefit of not having to waste your own local storage.
- Some IDE’s have GitHub integration, so you can automatically commit changes and manage pull requests for one of your GitHub repositories.
Downsides of cloud development
- Your project becomes dependent on the company that provides the IDE. This means, your code technically belongs to the company.
- If you are developing closed-source or private software, your project might get indexed and your source code could get exposed.
- The company is responsible for your code. Meaning if they mess up, your code is gone.
To me, the benefits outweigh the downsides. Though I would only say this in the case where you have to develop in the cloud (for example, on an old laptop).
Now, let’s look at Appitr and Expo Snack.
On their website they say:
It sounds very promising right? Well, it is. Let’s setup an application. First, head over to https://ide.appitr.com/. From there, you can sign up for an account. Once you get back to the homepage, you will see a card like this:
Click on it to start developing! First, it will show you some dialog asking if you want any dependencies added. I skipped this, as you can add dependencies later. After you finish the setup, a new card will show next to the “Create App” one. It will look like this:
“understood rice” is just the random name assigned to my project. Click on the phone icon to go to the IDE.
The IDE itself wont be as polished as Sublime, or VS Code for example. Though it gets the job done. Here’s a screenshot of the IDE:
Let’s look at the features of Appitr:
- Dependency support. You can add any dependencies you wish
- Has IntelliSense/code completion
- Allows you to have private projects
These 3 features are quite fundamental parts of cloud IDE’s.
Appitr renders the application in your browser, it doesn’t go through any emulators, etc. It simply virtualises the mobile phone.
Expo Snack is the most known React Native web IDE. It’s the most known for a reason. Snack is very basic, yet gives a lot of great features. You don’t even need an account to create a Snack. Just head to: https://snack.expo.io/ and a randomly named Snack will be created for you.
Here is what the IDE looks like:
Just like Appitr, Expo offers code completion and “IntelliSense”. It also supports dependencies. Expo offers the webview the same as Appitr.
The reason Expo stands out, is because of their standalone Android and iOS app. This allows you to connect to your IDE and compile it on your phone. So it becomes fully native. This eliminates problems of styling issues, and allows use of components like the camera and accelerometer/gyroscope.
Appitr vs Expo?
Here is where I tell you about the drawbacks of each one. The drawbacks with Appitr are:
- You can’t export your project. Once you have completed your application, you have to copy each file one by one.
This is a considerable drawback, however Appitr is still in beta. New features are constantly being added
2. Only WebView modes are available for rendering.
This isn’t much of a drawback, but it doesn’t give true nativeness like Expo’s Android and iOS apps do.
Here are the drawbacks with Expo Snack:
- No private projects.
Expo’s reasoning behind this is that everyone should be able to learn for others projects. This isn’t great in certain circumstances. If you are developing proprietary software, you run the risk of someone finding your source code.
However, it is possible to use the web editor/client locally without storing your project on Expo, which is what I have done for a few projects. I might do a post on how to do this in the future.
You can use both Appitr and Expo for development, they are great options!
My personal preference is Expo, as it’s much cleaner and has the mobile apps for Android and iOS.
I would recommend trying both of them out, and picking the one that is most comfortable for you.