Announcing Ionic Framework 2 Beta

Over the past several months, the Ionic team has been hard at work on the next generation of Ionic. We took everything we learned from building Ionic 1 and made significant improvements to the way Ionic apps look, how they perform, and their ability to adapt to future technology shifts. If you’ve been paying close attention, you may have seen us sprinkle a few hints here and there about the next generation of Ionic, but for the most part, we’ve stayed relatively quiet about the next version of Ionic.

Today, all of that changes. We are thrilled to announce the official Ionic 2 Beta release and the release of our all-new docs!

The Ionic team spent the better part of 2015 on Ionic 2, and we’re so excited to open it up and share it with you. In Ionic 2, we’ve focused on performance boosts, architectural improvements, cross-platform theming, support for Angular 2, support for the mobile web, and so much more!

It’s the best version of Ionic we’ve ever made, and we know you’re going to love it.

Why Ionic 2?

It’s been so humbling watching Ionic take off around the world. When we started working on Ionic in 2013 (when iOS 6 was king, and Android 2.3 was still a major factor), we had few mobile-focused browser APIs, some seriously underperforming devices, and a crazy vision of bringing the web to native parity on mobile. In hindsight, it feels like we had so much stacked against us.

Fast forward just two years, and so much has changed! Browser APIs and devices have drastically improved, and the hybrid approach to building native apps has been validated. Ionic has seen widespread adoption, with over 1.9 million apps built by everyone from individual developers to small startups to large enterprise businesses from around the world. Ionic is one of the top open source repositories on GitHub and powers some incredible apps. A few of our favorites include the official app of the Rio 2016 Olympic Games, Sworkit, the New York MTA Bus Time app, Adobe Social, Meerkat Movies, Card.com, and our very own Ionic View (to name a few!).

With all those apps and your feedback, we’ve learned a thing or two about how a great web-based mobile framework should well…work! Let’s dig in and see exactly how Ionic has changed:

Angular 2 Power-up!

One of the single biggest improvements to Ionic 2 is the way it leverages the power of Angular 2. We’ve been fortunate to have the opportunity to work closely with the Angular team and build Ionic 2 with their weekly feedback. Angular 2 brings incredible performance boosts, especially to mobile, and we think you’re going to love it.

Along with a significant bump in performance, Angular 2 brings a simpler, more standard way of building Javascript apps. Angular 1x was developed back in 2009, before ES6 and before the modern JS app that it pioneered. Unfortunately, that meant a lot of custom approaches to things like state management, dependency injection, components, and modules. These custom solutions are no longer necessary with today’s JS standards.

Today, an Ionic and Angular 2 app is just TC-39, standards-compliant JS. While it may look different from what you’re used to, the benefit is the entire web industry is moving towards this standard set of technologies, so your skills will adapt to other projects beyond Ionic and Angular 2. That wasn’t the case with Angular 1.

A lot of developers are worried about their Angular 1 skills transferring over. I think it’s important to realize that Angular is largely a set of opinions around how JS apps should be built. Those opinions are still the same despite a change in underlying implementation and language. We still store state on our components, use HTML in our templates to render them, and use familiar “directives” like ngFor (new ngRepeat), ngIf, etc. We’re finding that ng1 developers pick up ng2 quickly because the core concepts are the same.

There are some other big improvements that Angular 2 gives us that we will be taking advantage of down the road, including server-side rendering, cross-platform views, and web workers for improved performance. Stay tuned for those updates in later Ionic releases!

Overhauled Navigation

Few things have changed as dramatically in Ionic 2 as navigation. In Ionic 1, navigating between a standard page and a tabbed page was particularly difficult, and trying to navigate to the same page from different pages involved duplicated code and complicated UI-Router definitions. Trust us, we’ve felt your pain here.

Navigation in Ionic 2 is easier, more powerful, and much more flexible. It now works like a stack—you push a new page onto the stack to go to it and pop from the stack when you want to go back. Pages can be nested infinitely and a page can live anywhere in the app without having to define unique routes for it as in v1. For example, navigating inside modals and tabs Just Works with zero extra router configuration required. Hurray!

Since Ionic 2 treats all pages the same, you can navigate to a page from any other page. This resolves a ton of the problems we had with the Ionic 1 router navigation. Pages are not tied to specific URLs. However, if you’d like to continue to use a router, Ionic also supports the URL-based Angular 2 router.

For way more info on the new navigation changes, see the Navigation docs.

Side Menu Improvements

Using a side menu in Ionic 1 required the content to be wrapped by the side menu structure, which made it difficult to use multiple side menus, or to combine side menus and tabs together. Ionic 2 completely restructured the side menu so that it’s a sibling to the content. Now you can have as many menus as you’d like, reference a menu from anywhere in the app, and enable or disable specific menus!

Side menus are also customized to look and animate uniquely, depending on the platform they’re running on. There are now three types of menus available, including the Android “overlay” style. The default menu for each platform is different, but still highly configurable.

Learn more about the new Menu component on the Menu docs.

Platform Theming and Continuity

By default, Ionic styles the UI components based on the platform in which it’s being displayed, in order to provide users a familiar native experience. We want developers to be able to write once, deploy everywhere, and have the visual experience feel right at home, regardless of the platform. We call this Platform Continuity.

Ionic 2 takes this concept to a new level. We streamlined and simplified our iOS-styled components, and brought Material Design support front and center for Android apps. We’re especially excited about this, because full support for Material Design styles is a long-awaited, much-requested feature!

Alongside the visual changes are some awesome new and/or refactored components, like alerts, segment control, search bar, tabs, and select inputs. To see what we mean, checkout the new Component docs, and toggle the preview device to Android mode.

Theming

We built Ionic to be a blank slate that you can easily customize and modify to fit your brand, while still following the standards of each platform. We believe the best apps in the app stores are fully customized, and we want to make it easy for you to do the same with your apps.

We worked to make theming Ionic 2 apps easier than ever. Since Ionic is built on top of Sass, we’re able to set some default styles for your app but also make it extremely easy for you to change those defaults (and that’s the point!). Theming your app to match your brand is as simple as changing the pre-defined colors for the app. Basically, we define a few “starter colors” for you, but these can all be removed or renamed to just about anything you want. Some Ionic 2 components will even change their style based on the color specified to them, which makes customizing your app across multiple platforms super easy!

You can easily customize the styles for each platform by changing the default value of a Sass variable. Many of the platform variables get their values from a shared variable, so in certain cases, you can change one variable and override the style on all platforms. The application can further be customized by setting the configuration. Change the back button text for a specific platform, set the tabs to the top for iOS…the possibilities are endless. The Sass files themselves are even more modular now, allowing you to import one component at a time, if you want to.

To get started theming your Ionic 2 app, take a look at our new Theming docs.

Ionicons

Ionicons 3.0 is now live and its own NPM module! We overhauled the whole project, and there are now over 900 icons. Ionicons is MIT licensed and can be used on its own or inside any number of Ionic UI components. One awesome new feature that comes with Ionicons 3.0 in Ionic 2 is that the actual icon can change, depending on the platform from which the app is running.

For example, by simply using the “home” icon, Ionic will automatically show the appropriate icon, depending on the platform. Android devices will display the Material Design home icon, and iPhones will display the iOS home icon. This one-for-one icon match to each platform is yet another feature that makes it easier for developers to quickly create a familiar experience for users.

To use the new Icon features and see the whole set of Ionicons, check out the new Icon docs.

Build Tools

We want to make sure Ionic developers can get up and running fast with the Ionic build chain, but it’s no secret that the JavaScript community has seen an onslaught of new tools this past year. Trust us, we have been experiencing this firsthand as well! With modern JavaScript and all the cool new possibilities that come with it, it can quickly become overwhelming just to understand what tools you need, why you need them, which ones are recommended, and which ones are even compatible with others.

This is a major way in which we feel Ionic adds value: by providing an organized build system based on our experiences of what works best, so you can worry about building your app, rather than wasting time wiring up tooling. If things change in the build tool space down the road, Ionic will adapt to give you what we think is the best set of build tools for building Ionic apps.

That’s why all of our starters come preconfigured and ready to go with the Ionic CLI. Each starter uses Webpack for bundling and transpiling, Sass for CSS compilation, and NPM for package management, along with TypeScript, if you want it, or vanilla ES6/ES2015, if you don’t. New to some of these terms? Head over to our Glossary for a comprehensive list of many of the technologies involved, and stay tuned for an upcoming blog of why we chose the tools we use.

Along with the changes to Ionic tooling, there are some exciting features coming down the road from our friends as well. While still relatively young, we’re looking forward to the Angular CLI streamlining the development workflow and making packaging lightweight apps for production extremely easy. We’re excited to be working with the Angular team to ensure that Ionic 2 and the Ionic CLI maximize the benefits of the Angular CLI.

On the IDE front, because Ionic 2’s core is already built using TypeScript, the framework comes with support for powerful editor features like Intellisense out of the box. We’re happy to say we’ve been working with Microsoft to make the development experience for Ionic 2 with Visual Studio and VS Code as easy and powerful as possible, with more exciting improvements planned.

Web all the way down

It’s no secret that we’re passionate fans of the open web at Ionic. We think one of the most important technological efforts today is in bringing open web and browser standards to parity with native, proprietary mobile technology. If mobile continues to dominate as the primary way people spend their computing time, it’s crucial that apps can be built in an accessible, standards-compliant way that works on all mobile devices, not just a chosen few. We’re proud that Ionic is based entirely on open web technologies, and we are doubling down on this.

Going forward, we’re making the mobile web a first-class platform in Ionic. Any Ionic app today will work as a mobile web app with zero code changes required. We are working on a new web-based theme to adapt to some of the intricacies of mobile web browsers, but we’re already seeing major brands use Ionic for mobile web apps today.

This is especially important today as Google starts to prioritize sites that provide great mobile web experiences. For example, if you use app download interstitials instead of a mobile web app, Google will no longer consider your site mobile friendly which could severely impact your search engine ranking. Additionally, Google is adding new features in Android to allow mobile web apps to function as native apps, and we are working hard to make sure Ionic can thrive with those changes.

Ionic is pretty much the only major mobile framework out there that lets you adapt your app to the app store as a native app and put it on a web server to provide a great mobile web experience with no changes required. We’re proud of this and want to do more to make the mobile web a top Ionic platform. Stay tuned for that!

But Wait, There’s Moar!

There are just too many changes to talk about in depth here, so we’re going shorthand on these honorable mentions, all of which deserve their own blog post:

• TypeScript support – Optionally write your project using Typescript. We find this is a major benefit for large apps and teams.
• ES6 – The new version of JavaScript. You might find yourself wondering WTF you’re looking at, but what you’re really seeing is the next version of standardized JavaScript.
• Animation System – Completely revised, customizable, and highly performant animation system.
• Ionic Native – A thin wrapper for Cordova plugins, so you can easily import and wire up native functionality.

Looking Ahead…

We have a ton of features in store for Ionic 2 and couldn’t resist offering you a sneak peek…

• Windows 10 – platform continuity support, with Windows-specific designs.
• Webworkers – Multithreaded JavaScript! Essentially places the app’s logic and renders the UI onto two different threads.
• Further performance improvements – in both Angular and Ionic. Additionally, Angular 2 itself is in beta, with many large performance improvements on the way, such as:
  • Offline template compiling: Compiling templates in a build step, not on runtime.
  • Drastic file size reduction: The Angular team has a stated goal of bringing their Hello World app down to a 10KB payload size.
• Extra Themes – Currently, there is only the default theme, but we will be adding more, such as a dark theme, with the ability for users to contribute their own.
• More – For more information about what’s next, we recommend taking a look at our roadmap here.

Thank you!

We wouldn’t have Ionic 2 to share if it weren’t for the community’s incredible embrace of Ionic. There are over 150 worldwide meetups, an extremely active forum with hundreds of thousands of registered members, nearly 5,000 members in our Ionic Worldwide Slack channel, many online courses, books, and more. You are the reason Ionic is such an inviting and supportive community and we are so grateful for your support.

Also, I want to give a huge “congrats!” to the Ionic team. It’s been an incredibly challenging and exciting few months at Ionic, and I’m so proud of your hard work and hustle to make Ionic 2 a reality. There will be bubbly!

Now, go take Ionic 2 beta for a spin! Check out the new Getting Started docs, and read up on all the new APIs. Make sure to submit any issues to us through our Issue Form. We welcome any and all feedback and welcome your assistance as we make Ionic even better!

P.S. Check out a very special Ionic Show covering the Ionic 2 Beta!

P.P.S. We’re hiring if you want to come help us build awesome things like Ionic 2

P.P.P.S. We’re hosting a live Q&A tomorrow on Blab at 12:00PM CST. Come by and say hi!