What is ionic 2

Overview of Ionic 2, the latest version of the framework for developing hybrid applications with Javascript, based on Angular 2.

Ionic 2 is a framework for the development of hybrid applications, initially designed for mobile phones and tablets, but now also capable of implementing web applications and soon even cross-platform desktop applications. Its fundamental characteristic is that it uses Angular 2 underneath and a huge number of components, which greatly facilitates the development of applications.

It is a great tool for creating amazing applications, designed to obtain results quickly and with less financial investment, since it allows you to create applications for different mobile platforms with the same code base.

This is the first of a series of articles to explain Ionic 2 with which we will compose the .com Ionic 2 Manual. We are already developing it with the final version of Ionic 2, the newest version of the framework, already stable and ready for production. Although you are surely looking forward to installing Ionic and starting your first project, at this point we will begin by clarifying some concepts.

What is a hybrid app

A hybrid application is one that allows the development of mobile apps based on web technologies: HTML + CSS + Javascript. They are like any other application that you can install through the application stores for each system, so in principle end users will not perceive the difference with respect to other types of different approaches, such as native applications.

By running on web technologies, developers who already have web development experience can leverage their knowledge to jump-start mobile app development faster. To make this possible, hybrid applications run in what is called a “web view”, which is nothing more than a kind of browser integrated into the mobile and in which only the hybrid app is executed.

Hybrid applications are interesting for several reasons:

1. With the same code base, they will be able to compile apps to work correctly on a large number of mobile or tablet operating systems. Generally, it will be enough for us that our app works on iOS and Android, but Ionic is capable of compiling to other systems such as Windows Phone.
2. The development cost is significantly lower, since it is not necessary to have several development teams for each specific language of each platform.
3. The development time is also less, since it is only necessary to build the application once and we will immediately have it on all the platforms we target.
4. It is easier to adapt for developers who come from the web.

But they are not all advantages, we can also list some disadvantages in relation to native applications (those built with the languages ​​of each system, Java for Android and Swift / Objective-C for iOS):

1. The performance of a native application is usually better than that of a hybrid one, although the hybrid ones have improved a lot in this regard.
2. When running in a web view we are dependent on the technologies available for web development, which may be less rich and powerful than those available in native.
3. In the native applications we work directly with the phone’s hardware, while in the hybrid ones we depend on plugins for their access. This can lead to problems, but fortunately they are less and less.

Integration with Angular 2

Ionic 2 is developed on the Angular 2 Javascript framework. This means that for development with Ionic 2 we can rely on all the advantages of development with Angular, which will allow us to have an excellent project structure, work with good practices, use of varied software design patterns and a good range of components and directives.

Note: Angular 2 has stopped being called that and is now called “Angular” to dry. Throughout this manual we may occasionally use “Angular 2” to emphasize that we are referring to Angular excluding version 1, but it should be clear that from now on we will try to just use Angular without the version number, always referring to versions. of the framework above 2.

Therefore, our code will have better quality using Angular and we will be able to use many of its utilities designed for faster development. Thanks to using Angular 2 onwards, we also have the certainty of having a more optimized code with higher performance, adapted for the current moment and the future.

In this manual we do not intend to explain Angular, although we can often comment on non-Ionic aspects of developing with the Javascript framework. It would be interesting for the reader to know Angular beforehand, for which we recommend reading the .

Component-Based Development

In Ionic 2, inherited from development with Angular, we work based on components. This means that our applications will be composed of a tree of components that use each other to achieve the global objectives of the application.

All modern frameworks use this architecture, which has been shown to offer the best, most easily scalable and maintainable code.

The components are designed to solve small problems in a modular and encapsulated way. For example, there may be components to implement a simple button, components to make a navigation system by tabs, for date pickers, etc. By integrating components we are able to build large and complex applications. Ionic 2 already offers us a very large number of components that are capable of working perfectly on mobile devices with touch screens, but obviously for the development of our applications we will need to build our own components that implement the most specific behaviors of our business model.

typescript

Another thing that is given by the development of Angular is the use of the TypeScript language, which is nothing more than a “superset” of Javascript. In other words, TypeScript is Javascript but with additions designed to improve the work of developers, making us more productive.

The biggest contribution of TypeScript to the Javascript language is the possibility of defining types for variables, but in general it brings much more and also allows us to use all the improvements of ES6 and some of ES7 in applications.

We shouldn’t think of TypeScript as a problem because it’s something we need to relearn. TypeScript is actually Javascript, so it doesn’t mean learning a new language, it means adding some things to what you already know, things that will definitely help you during the development stage and when maintaining applications in the future. You can and also about the new versions of Javascript in the ES6 Manual.

TypeScript requires code transpilation, so that code you write in TypeScript becomes Javascript code that can run in any browser. That transpilation is done by Ionic 2 underneath, so it’s not a problem for the developer.

Look & feel adapted to the device

Ionic 2 components are already aesthetically adapted to the device. This means that when an app is compiled for iOS the component will be displayed differently than when it is compiled for Android. On Android it will use Material Design while on iOS it will use the design guidelines defined by Apple.

This is an advantage in itself, because people will enjoy apps with a user experience close to what they are used to on their phone, and it saves us developers from having to work extra to achieve this effect. However, as app authors with Ionic 2 we are also able to alter the design of the apps, providing a specific and original user experience for our own app.

Development and compilation of applications

With Ionic 2 we develop applications with web technologies. Throughout the development stage we will use the browser to view the applications, which allows a very productive workflow, since it does not have to be compiled. Although the truth is that, due to the need to transpile the code from TypeScript to Javascript compatible with the browser, it will not be as fast to visualize the changes as simply refreshing the browser page.

Once the app is built, the compilation process must be carried out, in which the specific executables for each device are produced. That process is a bit more heavy on the processor, but it is done only when we have to release a new version that will be uploaded to the app stores.

Apache Cordova and Phonegap

Ionic 2 also relies on Apache Cordova for application deployment. There are parts, such as access to the native components of the device, which use plugins provided by Apache Cordova mainly and Phonegap in some cases. Currently, Ionic is also a provider of some plugins to work with the native part of the phone.

Here as native we refer to elements such as the camera, accelerometer, virtual keyboard, etc. All these elements can be used from Ionic applications, with the corresponding native plugins, which form a kind of bridge between development with Javascript and the phone.

Apache Cordova is also the software that allows us to compile the development made with Ionic with web technologies in mobile applications that can be installed via application stores.

conclusion

Ionic 2 is an excellent alternative for app development. We have reviewed various concepts that we will use throughout this manual and to which we will undoubtedly return many times and expand the information when necessary.

If you are learning Ionic 2 you will find in .com shortly new detailed articles on each of the development stages with which you will be able to learn step by step. In any case, if you want to learn in a simple and fast way, right now, we also recommend the , in which you will learn in a tutored and much more detailed, fast, rigorous way and above all from start to finish.

To finish we leave you below the video of the class prior to the Ionic Course, in which you will be able to learn in a practical way about the first steps in the development of mobile apps.