Iflexion
Ionic vs. Ionic 2

Ionic vs. Ionic 2: Everything You Need to Know

Staying on top of everything that’s going on in the digital world is no easy feat. If you’re a developer, you’re likely to live in a whirlpool of updates, patches and new version released on an almost daily basis.

Mobile app development is just as fast-moving as any other field. Given the continued growth of the Google Play and iOS App Store markets, the fact that frameworks and app-related technologies are advancing quickly should come as no surprise.

Worldwide App Store Revenue

In this article, we are going to look at some of the key improvements over Ionic 1 that you can expect to find in Ionic 2. If you’re a developer, there’s a range of new features and improvements to get excited about. If you’re in charge of a development team, or outsourcing your Ionic 2 app, then you’ll know what to expect from the new version.

What is Ionic?

If you’re not familiar with it already, Ionic is an extensive SDK for hybrid app development built on the Cordova and Angular frameworks (mainly Angular). Ionic was created to allow web developers to create mobile apps using the markup and programming languages they’re already familiar with – HTML, CSS and JavaScript, while maintaining a degree of native functionality.

Ionic also provides a myriad of cloud-based and database tools that enable developers to add and manage features like push notifications and authentication easily.

There are also a handful of related products, like “Ionic Creator” (a drag-and-drop tool available for people who aren’t comfortable coding). These won’t be covered in this article. If you’re looking for an app creator with a purely graphical interface, then Ionic Creator is a good choice. Alternatively, it might be worth considering outsourcing mobile app development completely.

OK, so what’s new in Ionic 2? Let’s dive in.

More components

Ionic runs on components – self-contained blocks of code that work together to make up an app’s complete functionality. As expected, Ionic 2 includes a ton of new components alongside the extensive library of existing ones.

Material Design (Google’s popular design language) is now fully supported. A number of new modals, toast notifications and navigation elements are also available. The newly-introduced DateTime component, for example, lets developers add an interface for selecting dates and times, inputs which can then interact with other app elements in a number of ways. Floating action buttons are also supported…so your app can pop up next to those pesky Facebook chat bubbles!

Native capabilities

One of the big areas of contention in mobile development focuses around the hybrid vs. native debate. A lot of developers feel that native apps are inherently superior to hybrid ones because of the functionality that only an app written in a high-level language can provide.

The native plugin system for Ionic 2 comes with over 70 ready-built native implementations, overcoming the issue of native incompatibility that’s so common to hybrid apps. Ionic is quick to brand itself as the hybrid app platform for building apps with native capabilities, so this addition isn’t too much of a surprise.

“Ionic Native” is essentially a TypeScript wrapper that enables communication between Angular and Cordova plugins, thus providing accessibility to features like Bluetooth, camera and geolocation, to name a few examples.

Improved customization

One outstanding feature in Ionic 2 is the improved “theming” utility, which makes customizing projects incredibly easy. Themes are branded and modified with SASS and also benefit from what the team at Ionic calls “platform continuity.” This innovation matches an app’s look-and-feel to the platform on which it is run (iOS, Android or Windows), thereby improving user experience in the context of the platform’s environment.

Every app is built on a basic Light theme and modified using Sass, but Ionic have promised to roll out new pre-packaged themes in the future.

Increased overall performance

What really shines through in Ionic 2 is the attention to detail. There are lots of small features that make the ride more enjoyable. In the Ionic Server Lab, for example, you can see each platform version of your app running side-by-side.

Performance seems to have been a central area for improvement, and apps built on Ionic 2 will benefit from a range of enhancements. Because Ionic 2 is based on Angular 2.0, there are lots of out-of-the-box performance improvements. Document Object Model (DOM) manipulation is streamlined, developers can access new animation tools like the Web Animations (W3C) API and scrolling has been improved with their Native Scrolling implementation. The rendering pipeline has also been changed with a view to reducing layout thrashing and other similar rendering issues.

New and better tools

Alongside Ionic Serve, which lets you view your app in different platforms, additional features have been added to “App Scripts”, Ionic’s build toolchain. These programs flag errors and bugs in the app. This is very useful in the testing period because it overcomes the need to switch back to your terminal, reexamining the code to find the problem.

The organizational structure of the app files has also been simplified. For example, individual pages each have their own style, class and template file, and these are created automatically through the CLI. This automation has been carried over to a range of other commands, including components and directives. Ionic uses ES6 syntax (Ionic will transpile your app into ES5 for browser compatibility), which is simpler than ES5.

Conclusion

We’ve been continually struck by Ionic’s commitment to simplicity. Their whole approach involves making the development process more fluid and this comes through in many of the smaller changes. Even the documentation is much easier to navigate and use.

You might notice that version 3.0 has already been released, but don’t be too worried! Angular 4.0 was released very quickly on the back of Angular 2.0 (there was no 3.0 due to misalignment of the router package’s version) so warranted a new major Ionic release. The biggest changes between Ionic 1 and 2, however, have remained the same.

Adriana Blum