Share this article Return
Ionic 4 beta was released just a week back and it’s on same lines of Ionic 3. Some of the up-gradations that included in Ionic 4 are performance and build time improvements, powerful theming capabilities, multi-framework compatibility, brand new documentation, and Migrating your current application to Ionic 4 is like the transition from Ionic 1 to 2 they have also provided the migrating tool which also gets's the job done.
The main goal is to make Ionic a powerful framework for building mobile progressive web apps that have access to native device features. Ionic 4 brings with it some solid technologies, tools, and concepts such as Stencil, Capacitor, Ionic Native 5 and Ionic PWA Toolkit, With ionic 4 you will be able to use Ionic Components with React, Vue, Angular or with no framework at all.
Now, Let's jump to what's new features and improvements introduced in ionic 4
Ionic 4 brought some features like internal code refactoring with Stencil and alternative to use other frameworks instead of Angular but, for all intents and purposes, developers should be able to continue developing their applications with minimal impact.
Components for the Web
One of the biggest changes in Ionic 4 is they moved to web components for each component. but what exactly is web components?
Web Components push more work to the browsers without writing the chunk of code, bringing key performance improvements to load and startup times, crucial for building high-performance Progressive Web Apps, a major focus for the project moving forward.
Web components are based on four main specifications:
Custom Elements lets you modernize the HTML, web developers can create new HTML tags, beef-up existing HTML tags, or extend the components other developers have authored. It lays the foundation for designing and using new types of DOM elements.
When we use a new HTML <id/class>, there are some chances that it will conflict with an existing name used by the page. Subtle bugs, CSS specificity (!important all the things), sometimes style selectors grow out of control, and performance can suffer.
It defines the inclusion and reuse of HTML documents in other HTML documents.
It defines how to declare fragments of markup that go unused at page load, but can be instantiated later on at runtime.
Stencil is a new web component compiler created by the Ionic team to meet the following goals:
- Build standards compliant web components
- Utilises additional API's such as TypeScript, Virtual DOM, JSX and async renderingIdeally suited for Progressive web Apps (runs well on slow/fast networks, small code size, fast execution/rendering times, interoperable across different browsers & devices).
Capacitor is a cross-platform API and code execution layer that makes it easy to call Native SDKs from web code and to write custom Native plugins that your app might need. Additionally, Capacitor provides first-class Progressive Web App support so you can write one app and deploy it to the app stores, and the mobile web.
New Components introduced in Ionic 4
They are full-screen components which overlay other components. They transition in on top of other content and can be used to dismiss that component.
There should only be one content in a single view component. It provides an easy to use content area with some useful methods to control the scrollable area.
A Picker displays a row of buttons and columns on top of the app's content, and at the bottom of the viewport.
It takes a component, and render it when the Browser URl matches the URL prop.
Reorder allows items to be dragged to change its order horizontally. It can be used within an ion-reorder-group to provide a visual drag and drop interface.
Searchbars represent a text field that can be used to search through a collection. Ionic team have added 9 different search bar styles which looks great.
It automatically shows it's child contents when a query evaluates to true. ShowWhen can watch for platform changes, mode changes, CSS media queries, and device orientation.
A Popover is a dialog that appears on top of the current page and used for overflow actions that don't fit in the navigation bar.
Skeleton Text is for rendering placeholder content. The element will render a gray block at the specified width.
The default color have been changed, and some new default color have also been added
Previously, we would use a <button> for list items that we wanted to be tappable, but now we will just add the tappable attribute to an <ion-item>:
<ion-item tappable (click)="doSomething()">
Premium designed icons for use in web, iOS, Android, and desktop apps. Support for SVG and web font now available and distributed as web components with drastically reduced sizes, and brand new icon forms reflecting the latest iOS and Material Design styles.
CSS Variables are the core of Ionic’s theming modify the overall look and feel of your app by just changing a few variables, all without build tools.
Framework Integration & Compatibility
Ionic Framework V4 is a major advance in the underlying technology and capabilities of the project it's biggest advantages is to make continuous internal improvements, without requiring corresponding Angular framework updates. The same can be applied for Vue, React or no framework at all. Just like with ionic@angular, the goal is to make it easy to adopt Ionic in the most popular frameworks using their conventional standards.
Ionic CLI 4.0
Ionic CLI(Command Line Interface) is a tool that provides a number of helpful commands to Ionic developers. Ionic CLI is the engine that provides the option to select a different framework when generating an Ionic project (Angular by default). The new CLI has been designed to work alongside the Angular CLI so you can get the best of both worlds.
In addition to installing and updating Ionic, the CLI comes with a built-in development server, offering powerful Cordova integration with livereload, build and debugging tools, custom schematics for generators and many more. If you are an Ionic Pro member, the CLI can be used to perform cloud builds and deployments, and administer your account.
Routing in Ionic
One of the big feature introduced in ionic 4 is the change to routing. Ionic 4 now uses native Angular Routing with some twist. Instead of pushing components directly into ion-nav, you will need to map those components to routes. Apps should have a single ion-router component in the codebase. This component controls all interactions with the browser history and it aggregates updates through an event system makes it a lot easier to support building PWA’s natively. For Angular projects, use ion-router-outlet and the Angular router.
Lazy loading is a design pattern in Ionic framework used to defer initialization of components until it is needed. It increases performance and speeds up the application load time by splitting it into multiple bundles and loading them on demand.
Ionic Native 5
Ionic Native 5 brings the project to fully framework-agnostic status, where our components work in any popular framework, or without one at all. Ionic Native 5 requires Angular 5 for those choosing to use injectables/providers.
Changelogs in Native 5
- It shipped with three bundles i,e one with Angular (5.x+) providers, ES6 modules, and a bundle with AngularJS support.
- The ES6 and bundle releases feature static classes for plugins.
- Ionic devs using Angular can choose between using injectables, or import and use the ES6 plugins statically.
The ionic team have completely redesigned and drastically improved the Ionic Framework documentation, increasing load and navigation performance, and making it easier to update and maintain. They have added more examples and previews along with more code snippets ready to drop right into your app. The new docs are built with Web Component compiler Stencil and are also an open source.
Ionic 4 brings with it some solid changes such as internal code refactoring with Stencil and the option to use other frameworks instead of Angular. we are quite interested in further stencil development and seeing how that particular tool is going to be integrated into the Ionic CLI. It's still in beta and we are sure more features and improvements will be there in their stable build. let's hope Ionic 4 will revolutionize the Ionic App Development to whole another level and will flourish the cross-platform application that can run on mobile platforms, Web, as PWAs, and Desktop.