Hiring

What's New Features Introduced In Ionic 4 Beta

  Jul 31, 2018   Mobile Apps 2937 Views
Share this article Return

Facebook Twitter Google Plus

Ionic 4 features and improvements

Ionic is one of the best frameworks in the market, It's open source SDK for developing the Hybrid Mobile Application. It includes three main components such as a Sass-based UI framework which is optimized explicitly for mobile UIs. Second is an Angular framework which is useful for developing scalable application rapidly. And the third one is a compiler (PhoneGap or Cordova) used for native apps with JavaScript, HTML & CSS. This efficient framework comprises several functional CSS components out-of-the-box.

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 features


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 are a set of web platform APIs that enable you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom widgets and components build on the Web Component standards, that will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.
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
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.

Shadow DOM
Shadow DOM is designed as a tool for building component-based apps. It fixes CSS and DOM. It introduces scoped styles to the web platform. Without tools or naming conventions, you can bundle CSS with markup, hide implementation details, and author self-contained components in vanilla JavaScript.
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. 

HTML imports
It defines the inclusion and reuse of HTML documents in other HTML documents.

HTML Template:

It defines how to declare fragments of markup that go unused at page load, but can be instantiated later on at runtime.

Stencil
Stencil is a new web component compiler created by the Ionic team to meet the following goals:

    • Framework agnostic - It not restricted by or tied to a particular front-end framework, It can work with any other JavaScript framework (Vue, React, Preact, etc), or with no framework at all.
    • 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
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

ion-backdrop
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.

ion-content
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.

ion-picker
A Picker displays a row of buttons and columns on top of the app's content, and at the bottom of the viewport.
--Picker-column
--Picker controller

ion-ripple-effect
The ripple effect component adds the Material Design ink ripple interaction effect. It is designed to be efficient, noninvasive, and usable without adding any extra DOM to your elements. It works without javascript degrades to easier CSS-Only implementation.

ion-route
It takes a component, and render it when the Browser URl matches the URL prop.

ion-reorder
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.

ion-searchbar
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.

ion-show-when
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.

ion-select-popover
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.

ion-skeleton-text
Skeleton Text is for rendering placeholder content. The element will render a gray block at the specified width.

Color Changes
The default color have been changed, and some new default color have also been added

Tappable Items
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()">

  Button Item

</ion-item>

Ionicons 4.0
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
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
Past releases of the Ionic framework was majorly coupled with Angular, In V4 ionic team has re-engineered the framework to work as it a standalone Web Component library, with integrations for the latest JavaScript frameworks, like Angular, it is now also framework-agnostic, meaning it can work with any other JavaScript framework (Vue, React, Preact, etc), or with no framework at all. As it's still in beta so support for other frameworks are expected in the future release.

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
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.

New DocumentationNew Documentation
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.

Conclusion
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.

Check our blog Comparison Between Flutter Vs React Native For Mobile App Development

Share this article

Facebook Twitter Google Plus

We strive to deliver solutions highest level of consistency in performance and quality

Call us today on +91 9096932144 or email at sales@angularminds.com

Contact us