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!
Easy Upgrade ⛵️
You may be concerned about the upgrade process due to the fact that this is a major version release, but fret not! When we migrated to follow the semantic versioning convention, we committed ourselves to publish a major release when any known incompatible API changes were introduced. So in this case, the major version just indicates that our public API has been updated. And because we now use Web Components, API changes are handled separately between our UI components and the JavaScript framework.
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.
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.
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
Building efficient animations has traditionally been hard. Developers are often limited by the libraries available to them as well as the hardware that their apps run on. On top of that, many of these animation libraries use a JavaScript-driven approach to running animations where they handle the calculation of your animation’s values at every step in a 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.
