Ionic has been a popular UI library among web developers because of it being completely framework-agnostic. Now they have announced the much anticipated Ionic 4 Beta release with a focus on performance, build time improvements, theming and multi-framework capabilities, and more.
Although the release is in beta, Ionic invites developers to try testing and migrate their existing ionic- angular apps.
You need to install the latest version of the Ionic CLI (4.0.0) using:
npm install -g ionic
Since v4 is still in beta, creating projects with it requires a flag when starting a new Ionic app:
ionic start myApp tabs –type= angular
Your v4 beta app will be created using ng cli conventions and the new Ionic 4 components.
Let’s talk about the features Ionic 4 comes packed with.
Focus on Web standards
Ionic 4 has been rebuilt using standard Web APIs, and each component is packaged as a standards-compliant Web Component. With this standardization, the framework will now rely solely on APIs browser’s native support keeping the public API for each component stable.
The Ionic team has also developed and open-sourced a Web Component compiler Stencil, to use Web Components for each component more easily. Ionic 4 completely embraces modern Web APIs such as Custom Elements, CSS Variables, and Shadow DOM.
Updates for Angular
Angular developers can now use the Angular CLI directly for Ionic apps. ionic-app-scripts are now replaced with Angular CLI and Router.
Changes to Documentation
Ionic 4 comes with a completely redesigned Ionic Framework documentation. The documentation increases load and navigation performance, making it easier to update and maintain. There are more examples and previews along with more code snippets. The new docs are built with Stencil.
- New Ionicons 4.0 with reduced sizes, and brand new icon forms reflecting the latest iOS and Material Design styles.
- Ionic Native 5.0 Beta has been upgraded to be framework independent. Check out the new Native API Docs
- CLI 4.0, is heavily refactored offering powerful Cordova integration with livereload, custom schematics for generators, and support for multiple projects.
- New CLI Docs, provide more information in a cleaner and easier to read layout.
- Shadow DOM, makes it easy to reduce the amount of client-side code by embracing native browser APIs and web-standards. Additionally, Shadow Dom helps in easily consuming Ionic components from any web app by encapsulating its styles.