Ionic - An introduction to a hybrid framework

Budacode
Budacode
Jun 24 · 3 min read

Hey Guys,

We have gathered a lot of experience with the Ionic framework recently, and we felt it would be selfish to keep it all to ourselves. That’s why we decided to start a series of articles where we collect the most important info to help anyone with a basic knowledge of JavaScript and Site build to get started on developing hybrid mobile applications. While the first part of our series will give an overview of the framework itself, in the following posts, we are going to start building an app, which we will expand post by post with various technologies, solutions, and third-party libraries. I think that’s enough of the intro, let’s get down to it!

Ionic? Is that a new Marvel hero?

Ionic is a framework for developing user interfaces (UIs) for various platforms. It is one of the most popular cross-platform solutions these days, and a simple and quick way to build unique web apps. Its strength lies in letting us use HTML, CSS and JS in writing the app, so we’re working on one single code base, which can be used for building mobile, desktop and web apps as well. This makes developing extremely streamlined, because we are simultaneously developing for multiple platforms, and we don’t have to write the business logic more than once. To do this and allow us to run the app on mobile, too, Ionic uses WebView. So far, native functionalities have been supplied by Cordova but a new alternative is developed by the team of Ionic that is called Capacitor. Not that the performance of WebView isn’t sufficient, but with some larger apps, you can notice one of the disadvantages of hybrid apps: interactions and animations are not always as seamless as in a native application.

Our goal here is to show you how easy it is to write apps with Ionic, from simple ones to large and complex systems.

So, how does it work?

Ionic uses web components which ensure that each UI element is displayed and harmonised with the style of any given platform. This is important because this way, developers don’t have to struggle with designing and implementing each element of the interface, since Ionic has already done it for us. All we have to do is use it. It is important to note that while the components provided by Ionic are coherent with the appearance and functions of the operating systems, if we write our own components, those are interpreted in a web environment, and they can be tailored to our needs.

On Android and iOS devices, Apache Cordova runs the web app through a mobile framework: more precisely, it interprets, processes, and displays our app through an HTML rendering engine called WebView. Besides that, an important task of Cordova is to use its APIs to give access to the functions provided by the OS (camera, geolocation, network, etc.) so that we can use the basic functions provided by the devices technically in a web environment. All of this is important because the API functions and methods Ionic implemented in JS serve as a unified interface on various platforms, so calling up the right API methods will get us the same functionality on any platform.

As I have promised before, we are going to write you an app step by step, which can help you find your mates easily during a pub crawl, wherever you left them. At the first startup, the app will ask for a username to identify the user. After entering your username, a map appears, where you can track the location of your friends in real time. To be able to track a friend, you need to generate a share key, and send it to your fellow player. Once your friend has received the key, he/she will get a chance to input it on the app interface. Now, that’s a relief: the whereabouts of your wandering friend are no longer a secret! The movements of a given user can be tracked in real time with the app. Positioning uses the GPS coordinates of the device, so the user must give the app permission to use the GPS.

Thank you very much for taking the time to read this article.

Written by Tamas Hugyak, Full Stack Developer @Budacode.

Stay tuned for part two!

Get in touch with us at www.budacode.com / info@budacode.com if you have any questions.

Budacode
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade