To some extent, being a developer means taking your time to refresh your knowledge and to learn new things related to tools, concepts, and frameworks. In the world of mobile apps development, one of the most successful open-source projects today is Ionic, which is already behind over 1.2 million apps. The reason for this success is that it allows to create hybrid apps with native capabilities.
We are still talking about Ionic 1, but the popularity of the tool convinced its developers to expand it and introduce the world to Ionic 2, which is not only new, better and improved, but is a revolution as it has already been adopted by 73% of developers. But what makes this new version so popular?
Simplicity & Organization
The Ionic 2 template syntax has the beauty of Japanese Zen gardens. Compared to Ionic 1, it is cleaner, more straightforward and even enhances the functionality. You can change triggering events by merely changing a handler.
This is also an excellent tool for beginners, since it is much more intuitive and with less fluff, but it also forces the developer to stay organized. By attaching a folder to each component, it is entirely modular, including a class file, a template file, and a style file.
The ES6 syntax is automatically transpiled into ES5 through TypeScript and allows you to benefit from a simple, understandable code. Another plus is using productivity tools like autocomplete, module import and tooltip definitions.
The CLI v2 is also an essential improvement due to its ability to generate pages, pipelines and other components in the command line.
Performance
Since Ionic 2 is built on Angular 2.0 or higher, it includes the changes made to the Document Object Model (DOM). The reaction time is significantly improved compared to Angular 1.0 and is now comparable with React. Speed is also essential when it comes to app loading time, scrolling through long lists and playing games.
The new lightning speed is given by Ahead of Time Compilation (AoT) that pre-compiles templates and saves up to a few seconds when compared to in-browser compilation. The app package is smaller as there is no compiler in the bundle, which makes apps download faster.
New Components
The building blocks in Ionic are called components and are like a developer’s LEGO. The real news here is the support for Material Design encouraging the use of UI components.
While the first version offered enough components to create great apps, this new one is going an extra mile to bring menus, buttons and other tools, including navigation and modals. A recent article on Iflexion highlights two of the most useful new components: the DateTime, which can be helpful for calendars and scheduling, and the Floating, which gets the app to mimic the behavior of the Facebook Messenger.
Design
The Ionic framework is known for its ability to offer components that are created by the standards of professional designers. The best part is the Platform Continuity concept, which ensures that each item in an app will look as expected when deployed on a platform. You can see different views in the Ionic Serve Lab, side by side. Simply put, it means ‘write once, run anywhere’. Meeting user expectations is a key principle of UI/UX, and Ionic strives to perform at its best.
One of the most striking design features of the new framework is native scrolling. This dramatically enhances user experience by presenting them with a smooth scroll on each of the three platforms (iOS, Android, Windows Phone).
Building
In this matter, Ionic 2 takes an entirely different route compared to Ionic 1. The app folder contains the code which is transpiled to one JavaScript file that will be served to the browser. The advantage is speed, but on the downside, debugging the bundled code is more difficult. Also, the pre-built version is not minified, which can have a small impact on the loading time.
An exciting change was replacing the URL navigation with push/pop commands. This helps the app behave more natively.
Handling errors
One outstanding feature of the Ionic 2 SDK is the error reporting tool. This operates instantly and catches problems on the fly, right in the developer mode. No longer should you risk propagating errors in the final versions of the app. This also saves some testing time while speeding development, since there is no need to go back and forth to the terminal. This feature comes as a counterbalance to the debugging problem mentioned earlier.
Customization
Ionic 2 stands out by its themes, a way of customizing projects in a flash. Creation starts with a default Light theme and is modified by SASS. This is incredibly useful when you aim to launch the same app on multiple platforms and want the app to blend in with the general feeling of the environment it runs in. The development theme has already announced a Dark theme and possibly more ready-made themes will follow. Until those are available, each developer can build their own.
Wrap-up: Learn & Switch
Angular 1 and Ionic 1 will still be around and supported for the time being, but it is time to dive into the new features offered by the sequel. It is a boost in performance, organization, appearance, and functionality. You can enjoy catching the errors early on and wasting less time on fixing bugs.
Yet, this is a new approach, and it is only reasonable to take some time to learn the ins and outs before diving in to create apps. A good set of recommendations is to start using Ionic 2 as soon as possible and only stick with Ionic 1 for urgent projects.
Top comments (0)