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, The transition from V1 to V2 was the hardest transition to do of a major version, ever but with angular v2 to v3 was easiest because you are familiar with the angular. So with the new update ionic team improving the framework for migration and with ionic 4, they have provided the migrating tool that will get 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.
Ionic 4 Features - What's New & What has Changed?
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.
Progressive Web App development is trending right now many big shot companies opted PWA for their app development, and Ionic 4 was designed out-of-the-box to be the best UI framework for building high-performance PWAs. Ionic team developed a web component pipeline using Stencil to generate Ionic’s components, ensuring they were tightly packed, lazy loaded, and delivered in smart collections consisting of components for asynchronous component loading and delivery.
Ionic Dev team have evaluated more than 100 Ionic components for performance improvement, theme customizability, UI and includes a complete iOS and Material Design refresh for each component to match the latest standards on iOS and Android.
Ionic components are optimized for load and render performance, each component is now a Web Component built with the new Web Component compiler project Stencil which scores 100/100 on Google’s Lighthouse benchmark tool.
Built for Customization
One of the major ionic 4 feature as they move using native CSS Custom Properties, also known as CSS Variables, in each component. CSS Custom Properties make it possible to expose a “public theming API” that provides structure to developers and modifications now happen by targeting Ionic’s public theming API through the published, documented CSS Custom Properties.
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.
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 represents a text field that can be used to search through a collection. The ionic team have added 9 different search bar styles in their v4 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.
Ionic 4 allows you to use the framework’s official tooling for building, bundling and routing, so you can get the most out of your framework’s ecosystem. That means you’ll use the Angular CLI when using Ionic with Angular, Vue CLI with Vue.js, and other.
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 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. Ionic 4 has revolutionized the Ionic App Development to a whole another level and will flourish the cross-platform application that can run on mobile platforms, Web, as PWAs, and Desktop.