If you have been a part of any mobile app development company in recent years, the chances are that you have probably heard about the iconic 4.0 release of Ionic Framework.
First launched in 2013, Ionic was created as an open-source software development kit (SDK) for creating hybrid mobile apps (apps that work on iOS and Android with a single development). But that was a long time ago. With its latest version, Ionic has greatly redefined itself and invented a path of its own.
Ionic uses front-end technologies like JavaScript, HTML, CSS, and Angular for the development of applications and currently has over 5 million apps created using the SDK. It uses these technologies to create cross-platform mobile apps using a single codebase, allowing developers to create web pages that are run inside t
he browser instance of a device known as WebView.
The initial versions of Ionic were based on Angular, which is why it has access to the Angular Command Line Interface (CLI) and components that help it create high-functioning mobile applications. However, all that is set to change with the introduction of Ionic 4.0. Advertised as the “Ionic for Everyone,” Ionic4 represents the transformation from a ‘mobile for Angular’ to a more powerful UI Design System and app framework.
New and Amazing Features of Ionic 4
So what’s new and novel about this version? A lot actually. But here are the ones worth mentioning:
- Independence from Angular
With its fourth iteration, the biggest shift Ionic made was becoming independent of Angular. While there are plans to add support for Vue.js and React in the pipeline, Ionic 4 can be used even without using any frameworks. Ionic’s CLI has been revamped and suited to work with Angular. Thus you can still work with the Ionic Angular combination or make use of other supported frameworks at your convenience.
Another major change that comes with the fourth version is the shift towards web components. Making use of Shadow DOM APIs and Custom Elements available in all modern desktop and mobile browsers, Ionic Framework is distributed as a set of Web Components. This would allow developers worldwide to use Ionic’s components on a range of devices and Progressive Web Apps by using Ionic’s custom HTML tags within their app.
Developers can now breathe a sigh of relief as Ionic4 would now target standard web APIs and not third-party ones. This would allow Ionic’s component APIs to remain stable for several years and not be a victim of frontend or framework churn.
- Optimized for performance and Faster
Not only is Ionic 4 more accessible than its previous versions, but it is also, in fact, 1.5 times faster than its predecessor and is more exhaustive. This is because each Ionic component has now been upgraded to a Web Component, which adds to its performance, appearance, and customizability.
These components are also optimized for better load and render performance, which helped Ionic apps bag the prestigious 99/100 score on Google’s own Lighthouse benchmark tool. There has been a drastic improvement in all-new application starter templates to help app developers create stunning designs quickly.
With Progressive Web Apps (PWAs) becoming increasingly popular these days, Ionic 4 was designed to become the best UI for creating high-performance PWAs. For this, developers built a web component pipeline using Stencil to create Ionic components that were ‘lazy-loaded,’ tightly packed and delivered in collections that users actually find useful.
The need for customization was another major requirement that was addressed in the Ionic 4. The latest version uses native CSS Variables in each component, making it feasible to expose a public theming API. The API provides structure to developers wanting to customize and brand Ionic’s components in a way that allows easy up-gradation to the future versions of Ionic without any compatibility issues. This also helps in providing a standard procedure to theme Ionic apps that would be independent of the framework used in the front-end.
Lastly, modern JavaScript tooling was just emerging when Ionic 2 was being created. Hence for version 4.0, Ionic had to figure out and create a huge amount of tooling to bundle and compile modern Angular apps. Ionic 4 now uses your framework’s tooling to build, bundle, and route so that it is easier for users. This means that you would be using Angular CLI while using Ionic with Angular, Vue CLI with Vue.js, etc.
Thus Ionic has truly evolved from a primarily ‘mobile for angular’ to a functional web-based app framework and UI design system that every developer can work with regardless of the frameworks or tools they use. Isn’t that great news? Tell us in the comments!
Perhaps the biggest difference between Ionic 3 and 4 is the way navigation and routing are handled. Previously, Ionic used its own navigation push-pop called NavController, but since version 4 it would be making direct use of the Angular Router, which would make it more powerful.
Angular Router helps you navigate programmatically while also giving you the flexibility to dynamically navigate from a component or service. The Angular Router service also allows you to inject into components by simply declaring inside the constructor.
The easiest way to navigate to a defined route on Ionic4 is by using a button or link. However, you may also use the Angular Router syntax in case of non-ionic components.
Compatibility with other frameworks
As discussed above, Ionic4 was created to work as a standalone library for Web Components. It has integrations for the latest JS frameworks like Angular and can be used in most frontend frameworks without much hassle. This also includes React and Vue.
The prime reason behind moving the Ionic Framework to Web Components was removing the need to host the components on a single framework. Thus core components can work alone on a webpage using only a script tag. Moreover, the Ionic Angular package helps in easy integration with the Angular ecosystem.
Ionic now officially supports React library. Thus you can create apps that target Android, iOS, web, and desktop using Ionic React. This gives you the flexibility of using core Ionic components, which might feel like using native React Components.
Differences between Ionic 3 and Ionic 4
There are several differences between Ionic 3 and Ionic 4, which are enumerated below:
- The major difference between Ionic v3 and v4 is that the latter has been created to use Web APIs with each component packaged as a Web Component using a tool called Stencil. Web Components are sets of web-based APIs that let you create reusable and encapsulated HTML tags. Being part of the browser themselves, Web Components do not require external libraries to function. However, they can be used with JavaScript, HTML and CSS to conjure almost anything.
- Ionic3 used a navigation system based on a basic stack where new pages were placed on top of the stack using push and backward navigation was done by making a pop of the previous page.
- Most websites today use a linear history pattern. Thus when the user navigates to a page, they can use the Back button to navigate. However, the Ionic Framework allows applications to take a step further by allowing parallel navigation, i.e., using multiple navigation batteries that can be exchanged at any time.
- The life cycles used in Ionic 3 would no longer be used in the latest version. Angular lifecycles like ngAfterViewInit and nhOnInit would now be used.
- Ionic 4 also makes importing the pages in the app.module.ts file obsolete, making projects much easier and more organized. Each page would now have its own module.
How to develop your first Ionic 4 app?
While migration from Ionic 3 to Ionic 4 is a breeze, you can also create a basic app in Ionic 4 to get a first-hand idea about it’s new and improved features. The best thing about this app creation is that Ionic allows you to build for any platform using only JavaScript, HTML, and CSS from a single codebase.
Here’s how you can get started.
Let us begin with the ideation. To create a Gallery app with Angular, for instance, we would need the following:
- The functionality of a Photo Gallery app would be powered by the storage APIs, Capacitor Camera, and Filesystem
- An Angular-based codebase which can run on all devices and in the web using the UI components of Ionic Frameworks
- Deployment as a native Android and iOS mobile app with the using Capacitor, the official native app runtime of Ionic
Tools to be downloaded-
- Node.js for interaction with the Ionic ecosystem
- A code editor for creating the code
- Command Line Interface(CLI)/ Terminal
Now that we have the prerequisites let’s install the Ionic tooling and run the Command Line Interface/Terminal to run the Ionic CLI ‘( ionic ), native-run‘ for running native binaries and use ‘Cordova-res‘ for generating splash screens and native app icons.
The starter project will already have 3 pre-built pages for development and more features are ready to be added. Now change into the app folder and install PWA elements and import them by editing the ‘src/main.ts‘. The app is now ready to run.
Run the command ‘$ ionic serve‘ next and voila! You have your fully functional Ionic app running in your browser. Most of your app can be tested and built in the browser itself, which greatly improved the speed of testing and development.
With app creation made this easy and smooth, and so many new features, one can only imagine the possibilities that Ionic 4 holds for the future.
Please feel free to share your views and experiences over the same with us.
Need Any Technology Assistance? Call Pursho @ 0731-6725516
