Today, I’m thrilled to announce Ionic Framework 5 (Magnesium)! 🎉
This release includes iOS 13 design updates, a brand new API for creating your own custom animations, revamped Ionicons, updated Ionic colors, new starter designs, improvements to component customization, and more!
All of these changes are made in the core of Ionic Framework, which also applies to our Angular, React, and Vue (beta) integrations. Yes, if you haven’t heard yet, we launched our official React support this past October!
Attend our upcoming live walkthrough of Ionic 5, hosted by the Ionic team. Register here
Easy Upgrade ⛵️
Long story short: for those on v4, this upgrade should be easy. Now, let’s dive in and see what’s new!
Today, I’m excited to announce version 5 of Ionicons, a hand-crafted set of premium open source icons for use across web, iOS, Android, and desktop apps.
Ionicons 5 builds on our previous Web Component icon foundation, bringing over 1200 icons and a totally new design approach.
Over 1200 icons 👀
Ionicons 5 brings a massive number of new icons, including new objects, brands, and actions. Every single icon has been lovingly redesigned to better reflect the latest mobile platform icon styles.
TL;DR, we’re re-releasing the CLI package under a new name,
To update, first you will need to uninstall the old CLI package.
$ npm uninstall -g ionic
$ npm install -g @ionic/cli
You will still interact with the CLI via
ionic command, just how the CLI is installed has changed. And now, on with the blog post!
New “Your First Ionic App” tutorials for Angular and React are now available! Learn the fundamentals of Ionic app development by creating a real app step by step.
In the tutorial, you’ll create a cross-platform Photo Gallery app: take photos with your device’s camera, display them in a grid, and store them permanently on the device.
Today Google announced the shuttering of their App Maker product, a no-code app building tool focused on helping business users build simple apps around a primarily no-code drag and drop and data modeling experience.
While many will see this as yet another nail in the coffin of Google’s enterprise-ready reputation, I see it as a warning for the entire no-code market.
You see, there’s one tiny problem with App Maker: none of the code it used under the hood was built on standards or could be taken out of App Maker.
And as if this were even a question, the shut down announcement made it clear as day:
Due to the specific source code used for App Maker, you can’t directly migrate your apps to another platform.
Oof! Talk about a disaster.
The Release Candidate for Ionic 5.0.0 is finally here 🎉🎉!
As you’ve probably heard already, Ionic 5 will bring major design updates and lots of exciting new features to the Framework. We’ve been working on it for exactly a year now (today is the anniversary of Ionic 4) and now we’re excited to share this RC with the Ionic community.
At this point, we’ve made all of the changes we needed to and we’re looking for feedback from developers. With that in mind, there are a few breaking changes that people should be aware of. Most of these have had deprecation warnings for some time now and we have finally removed the API. For reference, we’ve documented all the breaking changes in a Breaking Changes guide.
We’ll be diving into what all of the new features are in the coming weeks, but for eager devs, you can start testing out these updates by running the commands below.
We recommend updating to the latest version of 4.x before trying out version 5 in order to see deprecation warnings related to your app. To do this, update to latest Ionic 4 (
npm i @ionic/angular or
npm i @ionic/react), then run
ionic serve in a terminal. Open the browser’s dev tools, then while you navigate around your app, yellow deprecation warnings will appear in the console.
# For Angular
npm install @ionic/angular@next
# For React
npm install @ionic/react@next
npm install @ionic/react-router@next
npm install ionicons@dev
Some key improvements to highlight are:
- Public Animations and Gesture API
- Updated component design to match the latest iOS and Material spec
- Easier customization with CSS Variables
- Revamped Ionicons
Please take some time to test out this RC and give us your feedback!
requestAnimationFrame event loop.
To combat these issues we have created Ionic Animations. Ionic Animations is an open source animations utility that provides the tools developers need to build highly performant animations regardless of the framework they are using. Ionic Animations is more performant than leading animation libraries, which is why we are especially excited about its release. Officially part of our upcoming 5.0 release, we wanted to take some time to dig into what Ionic Animations is and why it is different than other animation libraries.
This is a guest post from Aaron Saunders. Aaron is a developer and CEO at Clearly Innovative. This is the first of a series of posts Aaron wrote about using Firebase and React hooks with Ionic React.
In this post, I’ll walk through the process of creating a custom hook that uploads a file to Firebase.
Since the focus of the post is the custom hook, I will focus on pieces of code related to the hook, how it is called, and how it is implemented, not the surrounding code. However, the complete source code for the project is provided here.
Happy New Year Ionites! 2019 was a huge year for Ionic. We released new products (open source and commercial), shipped updates to our existing products, added so many wonderful customers, and continued to build the foundation to scale Ionic into a much larger business.
Here’s a recap of everything that happened last year and what we’re doing this year:
One of the biggest updates in the pipeline right now is the upcoming release of Angular 9.0.0. Currently in RC, Angular 9.0 will hopefully ship early next year. But this release includes so much that I thought it required a post to highlight some of the most important updates. Now for Ionic devs, why should they care about this? Well given that most apps currently are built with Angular and Ionic, any improvements to the overall ecosystem should always be welcomed! But given the goals of Angular 9.0, this directly impacts (in a positive way) Ionic be being able to ship faster and smaller apps, in faster manner. For reference, we’ll be looking at the Angular version of the Star Track demo app – built with Ionic 4 and Angular – and checking out the improvements.