Hey! I create tutorials, mostly about Ionic

I have a lot of content, let's figure out what's best for you:

Why I fell in love with Ionic and web tech...

If you haven't heard of it already, you'll be hearing a lot about Ionic through my content. Ionic is the most popular and powerful UI toolkit for creating mobile applications with web tech available today - we'll talk about why it's important to use a framework or toolkit like Ionic when building mobile apps with web tech in just a moment.

Ionic allows you to build native-quality mobile applications that run on multiple platforms, all with the web technologies you know and love (HTML, CSS, and JavaScript). If you just want to jump right into things, you can check out the video below for a quick introduction to setting up Ionic on your machine and generating your first application.

It is common to use some kind of JavaScript framework like Angular, React, or Vue to help build Ionic applications - this particular example uses StencilJS (a web component compiler used to build Ionic itself) to get the application up and running. This is my preferred method for creating Ionic applications, but you can use whatever you are most comfortable with.

(I also have content available for Angular, React, and Vue as well)

If you'd like to learn a little more about how we can create native mobile applications with web tech, keep reading below...

How can you build mobile apps with HTML, CSS, and JavaScript?

A mobile application that is created using HTML, CSS and Javascript, rather than the native language of the device, is usually referred to as a hybrid, web view, or HTML5 mobile application. We can (and generally should) use a mobile UI framework/toolkit like Ionic - which has built-in components to handle creating common mobile interfaces, navigation, and so on - to make creating these mobile apps a lot easier.

Since the applications are built with web tech, they will run on the web and users will be able to access them through their browser. In fact, this is what a progressive web app is - a web-based mobile application that makes use of modern web technology to bring a native app-like experience to the user.

But... what if you want a normal app that can be submitted to app stores and installed on the user's device?

No problem. We have frameworks like Ionic to help build our mobile app with web tech, and we have other technologies like Capacitor and Cordova that can wrap that app up into a native package. Both of these technologies create a native application for whatever platforms you are building on, they embed a web browser into that application, and then load your web-based application into that browser. The end result is a native application that can access all native functionality, can be submitted to the app stores, and looks no different to a normal native app (you can't actually see this "embedded browser").

Although progressive web apps are the trendy new thing (for good reason), mobile applications built with Capacitor/Cordova are the most common use case - these are often called hybrid apps because they mix web tech into native code. One of the best things about building apps this way is that you can create native apps (for multiple platforms) and have a progressive web app available on the web if you like.

So let's recap the benefits of building mobile applications with web tech that we have discussed so far...

  • They are built with web tech (and the web is cool)
  • They can run on multiple platforms from a single code base
  • They can be deployed to the web as progressive web apps
  • They can be deployed natively to app stores and installed on user's devices
  • They can access all of the native functionality that a native app can

All that sounds great, but what's the downside? In tech, there is never one solution to rule them all, so yes, there are downsides. I want to highlight those downsides here because I think they are legitimate but are often exaggerated. I'm also not trying to paint a pretty picture, I want you to know all the facts.

A common line of thought is.... don't native apps perform better? It is a valid concern, but in most cases the answer is no, not noticeably.

Native applications do have access to more power than "hybrid" apps do (a native apps engine is the device itself, a hybrid apps engine is that embedded browser), and it's important to understand the limitations of the browser. If you want to build an application that is going to rely on heavy animations, high processor use, 3D graphics, or anything that is going to require a lot of power, then a native approach will likely be the better option. In some circumstances where you have huge amounts of data in your application, you will also need to be more careful in how you display and manipulate that data with a hybrid app.

For a bit of background on the whole "hybrid" vs "native" situation, and whether or not we should consider Ionic applications to be native, check out the video below.

The idea that regular native apps are just inherently better is simply not true. For a lot of circumstances, there will be no noticeable difference. Native applications built with Objective-C/Swift or Java/Kotlin certainly have a higher performance cap but often that does not matter.

Imagine you have access to a distributed quantum supercomputer capable of accurately simulating a small universe. Let's say you want that computer to run PacMan. It doesn't matter that the quantum computer has almost infinitely more computing power available, it isn't going to run PacMan any better than any other computer. This is an extreme (and silly) example, but I am just making the point that just because there is more power available it doesn't mean that you will always need it or that it would make any difference. It is also possible for an application to perform far worse on a more powerful device if it is not coded well.

The other big issue with hybrid mobile applications is plugins. As I mentioned, with Cordova or Capacitor an HTML5 mobile application can access all of the functionality that a native app can - Camera, Contacts, Bluetooth, and so on. To do this, you need to use Cordova plugins or the Capacitor APIs. This is basically a bit of code that handles communication between your app and the Native API that you are using, like the Camera API. There are tons of plugins currently available, both official and community created, and in most cases, there will already be a plugin for what you need. But if there isn't, or the plugin that does exist doesn't work the way you want it to, you'll have to extend or create it yourself - which will involve diving into the native code.

If you think that building mobile applications with Ionic might be a good fit for you, let's find out what content of mine might benefit you the most:

About Me

I'm a mobile developer from Adelaide, Australia. After working with a university research commercialisation firm and a couple of tech startups, I started teaching developers how to build mobile apps with web tech through my website full time. Now I've been doing that for around 5 years (which has given me plenty of time to create a lot of content).

Most of my content is free, but I do release paid premium content once in a while to support what I do. I've published several books and courses including:

Outside of tech you might also find me:

  • Planting food crops in our garden
  • Getting kind of OK at playing piano
  • Creating pixel art
  • Starting, but usually never finishing, game dev projects
  • Towing a caravan around Australia (I think other people would call it a "camper trailer")
  • Reading (mostly fiction)

If you'd like to reach out to me, check out my contact page.