Announcing Ionic 1.2
Today, we are excited to announce the soft release of Ionic 1.2. This release comes with over 100 bugs fixed, tons of PRs merged, and some awesome new features that I’ll get to in a second. It also marks the start of our transition into the next generation of Ionic. We are looking for help testing this release before we make it available by default in our starters and templates next week (so you’ll need to npm/bower install or download manually).
I’ve been really looking forward to writing this blog post for a number of reasons, not the least of which is that I feel like it’s been forever since we announced a major Ionic 1 release. I want to say that sorry for the lack of communication and improvements to Ionic 1 recently. We’ve been so excited about Ionic 2 and the problems it will solve for each of you that we’ve neglected to improve our bread-and-butter. You’ve been telling us you love Ionic 1 and you want it to get better, so today we are excited to give you what you want. Consider it an early holiday gift! ?
With this release, we’ve made some pretty significant changes to the way Ionic apps work, and some may require updates to how you’re using Ionic today. Please read this post carefully to best prepare your app for 1.2.
Native Scrolling
By default, Ionic 1.2 will use native scrolling on all platforms. When we first built Ionic, native overflow scrolling was very buggy in the browser, and to bring parity with features we’ve come to expect from mobile apps, such as pull-to-refresh and virtual scrolling, we decided we needed to have full control over our scroll view, so we utilized a JS scrolling technique. Generally, this worked okay on iOS but was poor on Android.
A few months ago we released a new version of Ionic with many of the core scrolling-related features implemented to work with the modern overflow scrolling on new devices and browsers (including modern Web Views on Android and Crosswalk). Today we are taking it a step further and making native scrolling the default.
In general, this should be a pretty immediate and possibly significant performance and user experience improvement to your Ionic apps, especially on Android.
However, there’s a slight possibility that the change could impact your app or any external libraries that depended on the old scrolling method, so please test with the new version.
To force Javascript scrolling, use <ion-content overflow-scroll="false">
. Note: collection repeat still uses Javascript scrolling which we will phase out in 1.3.
New Slide Box
One of the most requested improvements in Ionic was a better Slide Box component for UIs that let the user swipe between a set of slides.
Today, we are releasing a new Slide Box based on the amazing Swiper widget. This is, by far, the most feature rich and widely used slider component out there, and it’s no surprise that many Ionic users requested us to support it officially. It also happens to be the new slider and markup that Ionic 2 uses, so you’ll be future proof!
With 1.2, we still support the old slider, but it’s deprecated and will be removed in a future release.
To use the new slider, use the <ion-slides>
tag:
<ion-slides options="options" slider="slider">
<ion-slide-page>
</ion-slide-page>
</ion-slides>
The options
argument is passed directly to Swiper and follows the official API options. Set a $scope.$watch
on slider
to get full access to the Swiper object to control the internal API.
Windows 10
Ionic 1.2 marks the first release with a new supported platform. Today, Ionic 1.2 supports Windows 10 and Edge, which runs on the new Windows Phone 10 platform.
For many, this is probably not the Windows Phone 8 update you were hoping for, but we just couldn’t get Ionic apps to perform well enough on that platform to officially support it. With all the changes and updates in the Windows/Edge ecosystem over the last few months, it made sense to just wait and see how it all played out.
This is a functional release that ensures existing Ionic apps run on Windows 10, and later releases will see formal design updates done to match the platform.
Mobile Web
Ionic 1.2 marks the first release where we actively recommend Ionic for those looking to build a mobile website (not just an app for the app store). Lately, the mobile web has been the center of attention with Google now changing how it ranks sites that use Download interstitials. Interstitials are the ads that you see on the mobile web that push you to download the company’s native app, and websites that utilize them instead of providing a nice mobile web experience are being penalized.
It’s fascinating how the mobile web is back in vogue. I’m proud that Ionic is one of few major players in mobile that actively supports this platform out of the box instead of only focusing on the native platform which feels like a step backward.
At Ionic, we know that the mobile web and the native app store environments can share the exact same code, they are just two different distribution methods with their own pro’s and con’s. An Ionic app for the app store would pair very well with an Ionic app for the mobile web. In fact, if you’ve built an Ionic app today, chances are you already have an amazing mobile web experience just waiting to be hosted on the web!
We are passionate about focusing entirely on the open web platform, and will continue to support using Ionic for both the app store and the mobile web.
Form Inputs
With Ionic 1.2, we no longer support using <label>
tags anywhere in your app. Unfortunately, <label>
triggers complex and buggy behavior in most web browsers, especially when using native scrolling.
To mitigate this and ensure your app behaves as expected, we will be moving to the new <ion-input>
directive that also forms the backbone of Ionic 2 (see what I did there?):
<ion-input class="item item-input">
<i class="icon ion-person"></i>
<ion-label>Username</ion-label>
<input type="text">
</ion-input>
Note that <ion-label>
now replaces <span class="input-label">
and comes with full ARIA support for accessibility.
Radio and Checkbox
We are dropping support for the raw HTML and CSS versions of Radio and Checkbox. Instead, you must use the directives.
For example, instead of this way of using radio:
<div class="item item-radio">
<input type="radio" name="group" value="go" checked="checked">
<div class="item-content">
Go
</div>
<i class="radio-icon icon ion-checkmark"></i>
</div>
You will use these directives, which implements something similar under the hood to ensure maximum support with Ionic and to reduce errors in implementing the complex wrapping needed to make these components work:
<ion-radio ng-model="choice" ng-value="'A'">Choose A</ion-radio>
<ion-checkbox ng-model="test" ng-checked="test" ng-disabled="test">Disabled Directive</ion-checkbox>
Also, this is the way these components work in Ionic 2 so you will be ready when v2 lands.
Note: we’ve updated the component docs for these components to reflect the change. Going forward, we are no longer supporting using Ionic without the underlying Javascript as it didn’t make much sense in practice.
Cordova Help
One of the most common issues Ionic and Cordova developers run into is the lack of a Platform.ready()
or lower-level deviceready
event firing in their app. Generally, this issue occurs because one or more plugins are in an inconsistent state.
The remedy in most cases is to remove the plugins using cordova plugin rm
and adding them back, or possibly removing platforms and adding them back.
To help debug the case where device ready does not fire, we now track and report this case to you in a console warning. This is the start of a much bigger integration with Cordova plugins that we are working on for a 1.3 and Ionic 2 release.
ngCordova
Ionic 1.2 does not change ngCordova, our companion library for accessing the full native power of the device through simple Angular 1 services. However, we are working on a new library called Ionic Native that solves a number of issues with ngCordova. Namely, that plugin wrappers would get stale and become extra surface area on top of the plugin itself that needed to be maintained, and the tight coupling with Angular 1.
The combined effect was that ngCordova plugins would get out of date or would hide useful functionality of the core plugin, making the project a pretty large maintenance overhead that we could not bear while also working on the framework.
Ionic Native takes a much simpler approach by wrapping plugin APIs and also providing TypeScript on top of existing plugins. That means you just need to create a stub for your plugin, say Camera
, and Ionic Native will properly wrap the public API with promise and observable support that can be used by anyone building a Cordova app regardless of whether they choose to use Ionic, Angular 1, or Angular 2, or a totally different framework.
For those using ES6+ and TypeScript, which will be the default for Ionic 2, your plugin is exported as a service that you can use just like the original plugin. Additionally, TypeScript definitions mean that you’ll now have awesome auto complete for these native plugins if using a compatible IDE like VS Code or Atom ?
For those using Ionic 1 and Angular 1, we will export mostly identical service names as ngCordova (like $cordovaCamera
), so moving from ngCordova will be simple.
Stay tuned for more info on this project which is not quite ready to be used in your apps today, but the combined effect here is that Ionic apps in the future are going to ship with this powerful library that unlocks the full power of the device, instead of having to find and add a separate project to your app.
We are also going to continue to document and show examples of how to use these interesting plugins, which was one of the big draws of ngCordova. And, if you’re already using ngCordova today, moving to Ionic Native in the future should just be a drop-in replacement of the script tag, so just stay put for now.
Ionic View
We’ve had a number of reports about issues and missing features in Ionic View. We are working on a new release for sometime in the next few weeks for both Android and iOS. With this release will be many more native plugins for your apps to utilize.
WKWebView
Today, the Cordova team announced preliminary support for WKWebView in Cordova. This new Web View comes with a beefier javascript engine and more modern Web API support. NSHipster did a great post on the differences with the UIWebView on iOS, so take a look if you’re interested.
WKWebView and Cordova/Ionic are still early. We have a guide for testing this release and we would love your feedback on how it works for you. This is the future of web views on iOS so one day we will make WKWebView the default, but until then we need to fully understand the impact on Ionic and Cordova apps.
Looking forward to Ionic 2
As we look to Ionic 2 alpha and beta coming soon, with a stable release in 2016, we are seeing a ton of opportunities to tell the story about how Ionic 1 apps can upgrade to Ionic 2, and helping make the transition easier and less scary for people.
With 1.2, we are starting to bring parity to directive names used in v2 to v1. For example, ion-input
, ion-slides
, ion-label
, etc. are all new directives in 1.2 that map to v2 components. This is great because it means fewer changes will be needed in your templates to move to v2.
Our developer advocate, Mike Hartington has started a series on adding TypeScript to your Ionic 1 apps. It’s a great way to dip your toes into this new world that Ionic and Angular 2 live in.
We are also going to start updating Ionic 1 issues with a v2 milestone. Many issues people have with Ionic 1, especially with navigation, will be resolved in v2. We strongly believe ionic developers will have a natural upgrade to v2 and will see tangible user experience and performance upgrades. v2 won’t be a separate project forever, so we are starting the process of integrating the v1 issues and code into a future v2 world.
Conclusion
Ionic 1.2 comes with a ton of changes, bug fixes, and improvements. Take a look at the CHANGELOG to see if your pet bug was squashed (? ?).
From all of us at the Ionic team, we want to thank you for your continued support. We’ve been working incredibly hard behind the scenes to make sure that the open web platform that we’ve all been using for decades is a first-class citizen on mobile. Ionic 1.2 helps us push in that direction, and Ionic 2 takes that to a whole new level.
We are so excited to take the wraps off some big announcements in the coming month or so, so stay tuned!