Mobile Apps with JS feat

Can JavaScript be used to Make Mobile Apps? A Simple Guide

In JavaScript, Mobile by Rune

JavaScript started as a simple language to manipulate the user interface of a web page. Since then, the language has become more and more popular, with usage in the back-end and even desktop application!

So the question I want to answer in this post is this:

Can JavaScript be used to make Mobile Apps? Yes, JavaScript can be used for making mobile applications. In fact, there are frameworks like React Native, Ionic, and NativeScript, which are designed to compile JavaScript code to Native Mobile apps. These apps work like native apps you can find in the app stores.

The Mobile Platform

The mobile platform is one of the fastest growing platforms. Since the introduction of smartphones, the industry has changed revolutionarily.

Smartphones offer tremendous flexibility and usability in more than just a fixed set of tasks. Now, you can use your smartphone for performing almost everything, including using it as your main computer! Unless, of course, you need to edit a 4K 60 FPS video or working with a heavy load workload like AutoCAD. That’s something a mobile can’t handle, not yet.

Jokes aside, the point is, nowadays, the smartphones are capable of performing almost every single task that a normal computer can do. You can browse the internet, you can chat with your friends, share images, videos and other contents, capture your memorable moments in an ever-lasting frame, and play games and what not! Moreover, you also get the traditional features like sending SMS, calling your friend instantly and others.

Keeping the power of smart devices in mind, the development focus of the world has shifted dramatically towards the mobile platform. Now, any online service will focus on the mobile platform the most. Smartphones are everywhere and from a business’s perspective, that’s completely reasonable. Because everyone is now using smartphones, the mobile platform is the fastest way to reach more people in a fast and efficient manner.

In this article, we’ll be focusing on the mobile platform, how it works and mobile app development using JavaScript – one of the oldest and most powerful web technologies yet.

JavaScript

The journey of JavaScript started way back in the age of Netscape, during the 1990s. The initial purpose was to have a sort of “glue” language that would make it easy for devs (web designers and past-time developers) to assemble different parts like images and plugins etc. while directly including the code inside the markup of the web page.

During its development by Brendan Eich under Netscape Communications in 1995, Java was a rising star on the horizon with some of the really hot features of that time. That’s why the syntax of JavaScript got its structure just like Java. If you’re familiar with Java, you’ll be surprised to find out so many syntax similarities in both of them!

JavaScript isn’t the first name of the language either. At first, it was named Mocha before it was changed to LiveScript in September 1995. The same year, it got renamed to JavaScript in December 1995. The official and standardized name of JavaScript is ECMAScript.

Being for such a long time on the web platform, it’s always a concern – is it still worth investing in JavaScript? Will JavaScript live long enough?

YES. JavaScript is still a worthy technology for the web. In fact, it’s now a part of almost every single website you’ll ever browse. Without proper JavaScript support, a web browser doesn’t have the right to call itself a “web browser”.

On every single web browser, there’s even a dedicated part that’s carefully optimized to ensure the best JavaScript runtime performance! If that performs poorly, your overall web experience will drop to such a level that you wish you just SMASHED your computer with your bare fist (that’s a really, really BAD idea, trust me)!

With such a large scale implementation, JavaScript isn’t going anywhere anytime soon. Of course, there will always be new competitors coming in the future with future JavaScript revisions. Unless there’s something more awesome and powerful than JavaScript emerges, rest assured – JavaScript will live to the fullest potential.

Now, the tech world has improved to such a degree that you can even develop mobile apps using JavaScript!!!

History of smartphones

Past smartphones

At first, let’s take a look at the mobile platform (the smartphones, to be honest). The smartphone platform has come a really LONG way since its debut about 27 years ago. It’s an evolution that took over the market by storm!

Interestingly, the first smartphone developer wasn’t Google or Apple, or Nokia, Motorola or any famous brand. The world’s first smartphone was developed by IBM and released back in 1992. With features equivalent to the current “modern” age, it was surely a marvelous achievement. At that time, it held revolutionary capabilities other than its preceding cell phones. The device included many of the modern-day smartphone features, for example,

  • Touch screen
  • Apps and widgets
  • Email
  • Fax
  • Notes

At that time, it was a bold move. Unfortunately, it was way ahead of its time and people didn’t jump on board.

Next came BlackBerry into the field. The first BlackBerry device was BlackBerry 5810 with all the classic “BlackBerry” features –

  • Music
  • Full keyboard
  • Calendar
  • Internet access

Yet, you were forced to call through a headset. The primary target of the BlackBerry back then was the business professionals. With more and more investment in advanced devices, BlackBerry soon earned the title of the “mainstream” smartphone brand.

It didn’t take time to change the picture. Apple was already on the field of portable devices, starting with the iPod. Once the stage was ready, Apple unveiled its next big step in the market with its flagship iPhones.

iPhone was one of the most advanced consumer products to date. Priced $499 for 4GB and $599 for the 8GB model, people simply flooded the stores. In the first year of the release, Apple sold more than 1.4 million iPhones in the market. In 2008, the number boomed to 11.6 million!

Present smartphones

Compared to the old, classic smartphones, modern smartphones are way more “modern” in every sense. For example,

  • Comes with higher memory
  • Powerful and faster hardware with optimized smart OS
  • HD camera
  • Easier multitasking
  • Easier video and audio streaming
  • Smartphone games are very enjoyable
  • Higher battery backup

Since the path of evolution, 2 major operating system emerged in the market – Android from Google and iOS from Apple. Both came with their own pros and cons.

Android is an open-source solution from Google. Since Android is open-source, manufacturers are free to use Android on their devices free of cost. Moreover, manufacturers also enjoy the freedom of customizing the default code into their own. With regular updates and performance improvements, Android is now the leading operating system for the smartphone market. Due to its flexibility and customizability, the Google Play Store contains billions of apps with millions of new apps published on a regular basis!

You don’t have to take my word for it. Check out the current condition on GlobalStats StatCounter.

On the other hand, we got iOS from Apple. It’s Apple’s proprietary software that’s only used for Apple smartphones (mobiles, tablets, and other gadgets). iOS isn’t that much flexibility in terms of customizability and others. However, it’s tighter on security with a number of tweaks and limitations on how the user should use the platform.

Programming languages for mobile app development

With the emerging market of the mobile platform, it’s obviously a necessary thing to have a powerful mean to develop apps that will run on these platforms without any issue. Android uses Java, Kotlin for creating its native apps. If you’re willing to develop an iOS app, then you have to use Objective-C and Swift.

Well, another candidate is on the rise. It’s quite an unconventional programming language. In fact, it’s not even supposed to be used for mobile app development. Ladies and gentlemen, introducing the next mobile development legend –JAVASCRIPT!!!

JavaScript on mobile development

JavaScript is mostly known for its usage on the web platform. Well, that’s natural. HTML, CSS, and JavaScript are the major parts of the web. These are the 3 main building blocks of the World Wide Web.

The primary role of JavaScript programs is to show dynamic content on the websites. HTML builds up the main framework of a webpage, CSS gives its gorgeous look and JavaScript offers dynamic layouts (roughly speaking). So, how come is JavaScript into the mobile app development sector?

Nice question, indeed! This is all because of the fact that with the advancement of technology, there are more and newer techniques emerging. With the help of some of the finest frameworks out there, it’s possible to develop the finest mobile apps using just JavaScript; nothing else!

JavaScript frameworks for mobile apps

There are a number of frameworks available for JavaScript with tons of powerful features for a number of purposes. jQuery, jQWidgets, Babylon.js, React etc. are just to name a few. However, all of these are for the web platform.

Then, how about the mobile platform? Well, let’s check them out as well. For mobile app development, there are already some great frameworks and tools. For example, Apache Cordova, NativeScript, Ionic, React Native, etc. All of them are full-fledged frameworks. You can also build apps for both Android and iOS. Need the app for other platforms? They got you covered!

Before jumping into the list, it’s important to note the difference between a “web app” and “native app”. In the case of web apps, there’s a small native client that connects with the web for enabling direct access to a certain web service. Because of their nature, they’re more known by the term “hybrid apps”.

In the case of native apps, they are full-fledged apps that are capable of performing a number of tasks including accessing many lower-level functions of the system. If you’re using JavaScript for such purpose, you can access the lower-level APIs via JavaScript code with ease.

Apache Cordova

Apache Software Foundation is a well-known and reputed brand for all it’s open-source and powerful Apache software. You’ll find various Apache apps everywhere – servers, desktop apps and now, even mobiles!

Apache Cordova is a mobile app development framework that allows the dev to use web technologies like HTML, CSS, and JavaScript to create apps for Android, iOS and Windows UWP. Cordova follows the principle of “one code base”. You only have to develop your app once. Then, allow Cordova to take care of baking the app packages for all the platforms.

Check out Apache Cordova now!

Ionic

Ionic is a powerful platform for building hybrid mobile apps. Originally developed by Max Lynch, Adam Bradley and Ben Sperry of Drifty Co. in 2013. Ionic is an open-source SDK that’s built on top of the Angular and Apache Cordova.

Ionic doesn’t target building native mobile apps like React Native or NativeScript. Instead, you get to develop powerful web apps for mobile, or, hybrid apps. For accessing OS features like GPS, camera, and flashlight etc. Ionic implements the Cordova plugins. You can easily customize the apps according to the target platform – Android, iOS, Windows and any modern browser.

Now, for the performance, don’t expect to match the power of NATIVE apps. However, with clever optimizations and tweaks, Ionic offers dramatic performance improvements, unlike traditional hybrid apps. Ionic depends on the hardware acceleration for providing the result extensively, especially GPU acceleration for doing all the CSS transitions and animations.

Check out Ionic right now!

React Native

React Native is based on the React library developed by Facebook. While React is targeting the web front-end, React Native is targeting the mobile.

React is the most popular front-end library at this moment. With React Native, the popularity is very high and is still trending with future updates.

React Native use JavaScript to target the native API for Android and IOS. The main benefit of this is that you can reuse about 90% of the code for both platforms, saving developing time and maintenance.

If you are thinking of a career in app development, React Native is a great choice. Due to its high popularity, there is a high demand for developers with knowledge in this JavaScript library.

Check out React Native here

NativeScript

Next on the list is NativeScript. NativeScript is one of the finest frameworks for developing mobile apps using web technologies. Like React Native it allows developing high-performance mobile apps for both Android and iOS using web technologies.

In the case of NativeScript, JavaScript is also the core (hence NativeScript). But NativeScript comes up with a twist. Previously mentioned frameworks like Cordova require to use their own library of JavaScript for the mobile app development. But NativeScript is completely flexible in that sense. Now, you get to use a wide range of already-available JavaScript frameworks instead of the custom ones!

Yes, my friends. NativeScript allows using popular JavaScript libraries and frameworks like Angular.js, TypeScript, Vue.js, CSS and a lot of others to develop NATIVE mobile apps!

Now, let’s discuss the Native part. NativeScript generates apps for using the full potential of the platform and available hardware resource. That’s a major thing to consider, especially when you’re planning to use web techs like JavaScript.

In addition, NativeScript is free and open-source (Apache 2 licensed). You don’t have to learn any additional programming language. Put your web development skills into work to build native apps for both Android and iOS with NativeScript!

How does it work? The following demonstration shows it with 100% precision.

Develop the UI with the power of CSS and HTML-like language while writing all the app logic using JavaScript and Angular. Once complete, let NativeScript build the apps. It’s that simple!

Check out NativeScript right now!

Pros and cons of cross-platform frameworks

All the frameworks I mentioned before are cross-platform. Meaning, you develop the app once using the framework and the compiler will do the rest of the job for you. You need the basic understanding of the web techs like HTML, CSS, and JavaScript for the purpose, nothing else!

However, they are not without their drawbacks. Let’s check them out as well.

There are tremendous benefits for such app development frameworks. The flexibility of coding is extremely beneficial for any mobile app developer. All you need to do is develop your program using the web techs once. Then, tell the compiler/framework to build an Android/iOS app. In the case of any future patch/update, all you need is modify the code once. No need to check out all the thousands of lines of codes for every single platform.

However, using such frameworks are obviously not something you want if your target app depends HEAVILY on platform performance. Of course, with proper optimization and good programming practice, it’s always possible to improve the performance of such JavaScript-built apps. But no matter what, nothing beats the native mobile apps in terms of performance. Moreover, you also get to access more lower-level “critical” areas of the system.

Learn mobile app development with JavaScript!

With so many frameworks at hand, it’s really a tough place to get started. Fortunately, there are numerous resources online that you will be enjoying for free to become a master app developer! Of course, there are some really good paid training courses that are worth the investment.

At first, it’s important that you learn all the web development basics like HTML, CSS, and JavaScript

Now, for the paid tutorials, I’ll be linking the popular tutorials available on Udemy.

Ready? Time to jump into mobile app development using the JavaScript frameworks!

Bonus Section – Flutter

There is also a cross-platform mobile development framework from Google called Flutter. I just want to mention this before concluding with the article.

This is a bonus section since Flutter differs from the other frameworks I mentioned in this article. It doesn’t use JavaScript for developing apps but uses a language called Dart instead.

If you are a web developer, this might not interest you since you can’t use your existing JavaScript knowledge. But this is an up and coming framework with interesting feature worth checking out.

Flutter is an open-source mobile app SDK from Google. The target is using the web techs for crafting high-quality apps with the native-like performance for both Android and iOS in record time.

Just like Cordova, Flutter also follows the “one code base” motto. Essentially, all you need is develop the app the way you like; no platform constrictions. No need to craft Android and iOS apps separately when Flutter can take care of it. That’s why I find developing mobile apps using Flutter more engaging and intuitive. As it’s from Google, Flutter uses Google’s trademark Material Design for the UI. A good UI is also a major part for any mobile app and Flutter takes care of that effortlessly. Material Design is highly appreciated in the community for a nice, attractive UI. That’s a bonus for Flutter.

Well, how about the performance? A major concern for apps developed using web technologies require an intermediate layer to connect with the OS. This can decrease the performance in lots of cases. Flutter takes care of that very easily. By taking care of all the critical functions like scrolling, navigation, fonts, and icons, Flutter improves performance dramatically. In normal eyes, you won’t even be able to tell the difference.

Flutter learning resources:

Check out Flutter.

Conclusion

Developing mobile apps using JavaScript isn’t a dream anymore. In fact, it’s even more viable than the traditional mobile app development style. However, both of them are going to prevail in the upcoming years for their own features.

Start learning the frameworks today and enjoy being a master mobile app developer right away!

Enjoy!