The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

We are asked constantly how to do proper unit testing of Ionic apps. To help developers get going quickly, we’ve worked with community member @roblouie to put together an official example project with unit testing baked right in, using Karma and Jasmine (also thanks to @lathonez for his clicker project and Josh Morony for his great tutorials that inspired this).

We’re also working on baking unit testing right into the Ionic CLI (or more accurately, @ionic/app-scripts). Stay tuned for that.

Take a look at the official Unit Testing example and let us know what you think:

Today we’re excited to release the 3.x version of Ionic Native, a project that makes it easy to use over 130 native mobile SDK features in your app through simple JavaScript interfaces, in a way that works across all major platforms (and now the web!). (Impatient? Check out the README for instructions on using it, or start a new v2 project)

With this release, we’ve made two major improvements: drastically reduced code bundle size, and 100% browser development support.

Bundle size improvements

With Ionic Native 3.x, you install only the plugins you need, saving significant space in your final code bundle. In one test, we saw a 15% code size improvement. If you use a lot of plugins, you’ll likely see a smaller but still significant improvement.

Plugin Mocking and Browser Development

The 3.x release is significant for adding full support for plugin mocking. That means any of of the 130+ Ionic Native plugins can be tested and used in the browser. This makes it possible to build the entirety of your app in the browser or ionic serve without dealing with device or emulator testing, a level of development speed and agility that is unheard of in mobile.

To take full advantage of this new super power, you’ll need to do some up front work by providing mocks for the plugins you use, and have them return data that makes sense for your app.

Take a look at the Browser Usage documentation for a full example of how to mock a plugin.

Ionic/Angular 1 Support

3.x is the first version that does not support Ionic/Angular 1.x. For those using Ionic/Angular 1, you’ll need to continue using version 2.x of Ionic Native. Take a look at the README for more info.

What’s next?

Reducing filesize and making it possible to develop your app entirely in the browser even if it relies on native plugins is just step one. We are thinking about ways we can make it easy to work with plugins that have browser APIs available, possibly with pre-baked UI on top of the rapidly expanding Web API’s out there.

We’re looking forward to hearing your feedback on the new release, and ways we can help you do more in the browser. To get started, read the README for installation instructions, or create a new v2 app.


Over the last few months the framework team has been hard at work on a new v3 version of the Ionic CLI. The project’s focus has been on improving the overall developer experience, CLI speed, and architecture to allow us to potentially introduce new plugins and platforms in the future. We want the developer experience of the CLI to be as good as the framework that it supports. ❤️

A major motivation for v3 was improving the speed of the CLI experience itself. The first thing you should notice is the install time: the new CLI install is significantly faster. One measure shows install time reducing from 150 seconds for CLI v2 to around 10 seconds for CLI v3! The commands themselves are also more responsive. ?

Read more…

You thought the grid was great? This isn’t even our final form.

Why hello you amazing people, we’ve got some exciting updates and news to share from the front lines of Ionic development.

Read more…


We’ve been hard at work at Ionic improving our support for desktop applications, one of our most requested features. The central piece of Ionic’s desktop support is an all-new responsive grid system that makes it easy to build UI that scales up from mobile through tablet and desktop displays.

The new grid is a powerful, mobile-first flexbox grid system composed of three units – a grid, row(s) and column(s). Columns will expand to fill their row, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns and breakpoints can be fully customized using Sass.

Let’s dive into the new grid system!

Read more…

Screen Shot 2017-02-16 at 19.18.25

Over the last month, Manu has been working hard on adding an oft-requested and powerful new feature to Ionic apps: Split Pane.

With Split Pane, it’s now easy to show a responsive side menu with side-by-side navigation controllers that will display on larger screens (such as the iPhone 7 plus, tablets, and desktops) and collapse
on small screens (such as portrait mode on most smartphones). With independent navigation controllers, the menu side of the split pane can navigate independently of the content side, or they can work in concert. Finally, the menu side can be fixed or displayed as a side menu.

Feb-16-2017 19-15-43

To help test, install the latest nightly of Ionic (npm install --save [email protected]). For basic usage, simply wrap your <ion-menu> and <ion-nav> with the new <ion-split-pane> component:

  <ion-menu [content]="content">
  <ion-nav [root]="rootPage" #content swipeBackEnabled="false" main></ion-nav>

See the e2e tests for a full example of advanced usage (API Docs coming soon). Note: Split Pane is only available on Ionic 2.x and above.

A major focus at Ionic right now is reducing the final bundle size of an Ionic app. One of the major file size offenders has been Ionic Native, which bundles a decent amount of plugin code into your app regardless of whether or not you’re using those plugins.

Ionic Native 3.x fixes this by moving each plugin into its own npm module. Just need the Camera plugin? Install the @ionic-native/camera package and then import { Camera } from [email protected]/camera' instead of from the legacy ionic-native package.

In our tests, this helped shave 15% of the final bundle size, which will help apps load more quickly.

Test it

To try out this new alpha version, remove ionic-native from your package.json dependencies, and instead add the plugins you need:

  "dependencies": {
    "@angular/common": "2.2.1",
    "@ionic-native/camera": "3.0.0-alpha.1",
    "@ionic-native/statusbar": "3.0.0-alpha.1",
    "@ionic-native/splashscreen": "3.0.0-alpha.1",

Change your imports from ionic-native to match the new package format:

import { StatusBar } from [email protected]/statusbar';
import { Splashscreen } from [email protected]/splashscreen';


Please let us know how this works for you in the comments below or by filing an issue on the repo.

This is one of many filesize and boot time optimizations in the pipeline for Ionic, so stay tuned!


Today, I’m incredibly excited to announce Ionic Framework 2.0.0.

Before we get into that, though, a little history lesson is in order…

Back in March 2015 the Ionic team was given a unique opportunity to take all the lessons learned building a mobile framework on Angular 1 and reimagine it for a new and fast approaching future of JavaScript and web technology.

At the time, we were immensely proud of what we built with Ionic over 2014. The framework helped create over one million apps, from serious enterprise apps to popular social apps with millions of users, all while dramatically reducing the cost and time required to do so. Perhaps most importantly, Ionic enabled web developers on the sidelines of “mobile” to re-invent themselves as highly productive mobile app developers without risking a complete career and technology change. The “web developer” had evolved yet again to stay the most broadly applicable skill-set in software development.

Fast forward to 2015. The JavaScript world was on the brink of a monumental and rare evolution to a new standard of the language, with exciting new features and powerful capabilities. ES6 signaled a new future of JavaScript that was a better fit for the complex, object oriented apps developers were increasingly building, along with better enabling 3rd parties to build and share code with each other.


Around this time, the Angular team approached us about building Ionic on their ambitious new 2.0 version of Angular. As perhaps the most popular Angular-based OSS project outside of Angular itself, it was important to them that we embraced the next generation, and we had no intentions of being left behind! It was decided: We would work closely with the Angular team to build the next generation of Ionic Framework on top of the next generation of Angular.

I’ll be honest, we questioned that decision many times over the last year and a half.

Frankly, Angular 2.x took a lot longer to get to a stable point than any of us expected and we watched other frameworks fill the void. It was rough going for a while, APIs were changing constantly, features weren’t working, and stress levels were rising.

What we eventually realized is that no one had the answers. The Angular team was pioneering a new technology stack and making tough choices that seemed confusing at the time but ultimately made perfect sense. TypeScript was a risky choice that seemed destined to alienate Angular developers from the rest of the JavaScript world. Not using a standard ES6 transpiler seemed like a rejection of community standards. Sticking with HTML instead of an alternative like JSX felt like clinging to the past. Using experimental Decorators was banking on an uncertain feature making it into a standard.

Yet, each one of these decision were ultimately some the best that Angular could have made. The JS ecosystem is now adopting TypeScript in droves (even outside of Angular!). New transpilers have come and gone. HTML has once again proved its resiliency as one of the best markup languages for UI. Decorators dramatically cut down on boilerplate and add powerful new meta programming features. I could go on and on here, but the point is that the Angular team has a vision for how a frontend framework should work, and they weren’t afraid of being misunderstood at first.

It’s worth pointing out that every single developer at Ionic is also a hobbyist and enthusiast of web development, and we are ruthless about evaluating and adopting technology. On the Ionic team you’ll find passionate fans of React, Vue, Angular 1, Ember, Vanilla JS, and beyond. While we’re biased, it’s truly a testament to how far Angular, TypeScript, and Ionic have come that the our own development team constantly raves about the technology stack, despite the rough transition.

So with that said, let’s dig into the all new Ionic Framework:

What’s New in Ionic 2

For those that have been following the development of Ionic 2 closely, Ionic 2.0.0 final is a stable, production ready version of the Ionic 2 you already know. If this is your first exposure to Ionic 2 or you have been waiting patiently (thank you!) for 2.0 final, a number of things are new and different – and we think know you’re going to love it.

New Components, Features, and Documentation


Ionic 2 comes with a bunch of new cross-platform components for building mobile apps, including 100% Material Design support (yes, we have FAB buttons), more capable modals, menus, toasts, and an all new navigation system. We’ve developed powerful new form controls, such as the DateTime picker, that evolve the stock controls available in the browser.

Ionic Native

We’ve integrated a powerful new native plugin system, Ionic Native, with over 70 native features ready to be used like any other Web API, complete with support for Promises and Observables.


We’ve completely revamped theming, making it easier than ever to customize the look of your app to match your vision, with minimal amounts of code.

Ionic 2 supports three different modes: iOS, Material Design, and Windows. We call this Platform Continuity, wherein each mode matches the look-and-feel of the platform it’s displayed on, meaning your app will behave similarly (and predictably) to the experience your users expect. Each design can be modified to your liking using Sass variables or, in several cases, adding attributes to the component itself.

A default Light theme is included with each new app. Themes can be created by setting the Sass variables Ionic uses to the colors of your choosing. We’ll be rolling out more pre-made themes soon, and be on the lookout for our Dark theme in the near future!

Website & Docs

The Ionic Framework homepage has been re-designed, and Ionic 2 comes with some greatly overhauled documentation.

Enhanced Performance

One of the best features of Ionic is that it helps build apps that feel snappy on a variety of platforms, with one code base, using open web standards and APIs – and we’re constantly pushing the envelope when it comes to app performance.

With Ionic 2, we no longer use JavaScript scrolling, so apps now scroll with 60FPS on both Android and iOS. Our new Virtual Scroll implementation (updated for 2.0 final!) makes it possible to build apps that scroll through very large lists of items (and images!) with a minimal performance hit, along with apps that animate based on scroll events.

An all new rendering pipeline shared with Ionic components reduces layout thrashing and repaints, historically a challenging source of perf issues for web developers. Components only redraw the portions of their view that changed, using both new features in Angular and new Web APIs like will-change, CSS containment, and passive event listeners.

The team is using new tools available in Chrome to hunt down rendering problems, and we’ve published some real world examples of this in action.

Finally, the simple fact that Ionic 2 is built on top of the new Angular makes a huge difference for Ionic apps, as it’s significantly faster than Angular 1. All Ionic 2 apps benefit from this inherent performance improvement out of the box.

Bottom line: Performance is our #1 priority, and we’ve gotten very good at improving web performance over the last few years. Ionic apps (and their developers) will greatly benefit from pre-baked components and features that optimize for performance out of the box. One of the biggest advantages of Ionic is that we abstract away low level web APIs and make it easy to use them without performance pitfalls.

New Tools

Error Handling

For the first RC release, we released a new build toolchain called App Scripts that helps coordinate app building, testing, and running. It was a controversial move at the time but now that users have adapted, we are now able to add new features to the build process much more quickly than ever before.

Since we released App Scripts, we now have new error handling and debugging features built directly in your application:


When a compile error is introduced while developing, using the ionic serve command, details of the error will be shown directly in your browser window. This feature is extremely useful for helping track down issues with code and keeps you focused on development instead of switching back and forth to the terminal. If you haven’t tried this new feature out yet, please do! Seriously, we use it internally and love it.

Ionic Serve Lab

We also released a facelift to Ionic Serve to make it even easier to preview different platforms side-by-side, right in your browser:


Try it out with ionic serve --lab. We plan to release a lot more improvements and goodies to this serve environment soon!

Production Ready

Now that Ionic 2.0.0 final is out, Ionic 2 is production ready and API stable. Of course, we will continue to relentlessly work on improving our components, features, and performance, but we don’t foresee major breaking API changes.

Despite being Beta/RC for a time, many have been using Ionic 2 for Serious Production Apps. We are thankful for those early adopters who have helped battle test Ionic 2 for the rest of those waiting for 2.0 final.

What’s next?

Ionic 3 of course! (…joking!)

Ionic 2.0 final is hardly the end of Ionic’s development. Coming next we are working on new features to add proper desktop and electron support, something we’ve dipped our toes into in the past but will be making a bigger priority going forward. Similarly, we will be ramping up our Progressive Web App efforts to enable Ionic developers to deploy the same app with the same code across the app stores and the mobile web to take advantage of those diverse channels.

One of our big goals is to improve Ionic’s tooling and native SDK simulation to help you build 99% of your app directly in the browser, a level of development agility unheard of in the mobile development space. This will truly be a super power for Ionic developers compared to other mobile development approaches.

Beyond Ionic ‘the open source framework’, the team will continue to invest in tools to help improve the Ionic developer experience. For example, we recently rolled out Ionic for Organizations which turns Ionic View into your team’s personal app store. We are also working hard to integrate backend features we’ve developed, like live-deploy and test feedback, to Framework users should they desire to use them. We will also continue to invest in tools like Creator that make development faster and more accessible.

I’m also proud to say that Ionic is generating revenue today, primarily with Creator, so we’re making good progress on the path of being a self-sufficient company which is a great step forward for Ionic.

Getting Started

To use Ionic 2, make sure to update to the latest CLI with npm install -g ionic. Start a new project by following our quick Getting Started guide.

To help those V1 apps out there curious about updating to V2, we’ve put together a Migration Guide (PDF) that walks through updating a sample v1 app to v2. The guide starts by explaining why an app might want to update, and breaks down the process of updating into a set of repeatable steps. We also have some Ionic 2 books we recommend (please leave any others in the comments!)

Don’t think of updating from Ionic 1 to Ionic 2 as moving to a totally new framework. Think of it as updating to a new and improved Ionic based on modern JavaScript and the next generation of Angular.

Thank you

Nearly every blog post we publish ends with a thank you to our community, and this one is no different. Every time we feel overwhelmed with the work of building and maintaining Ionic, and staying up to date with the constant evolution of web and mobile technology, you, the community, make us realize that all this hard work is worth it.

When you tell us that Ionic enabled you to become a mobile developer and build your first app, we are proud and humbled. When you tell us that Ionic let your company quickly build a working app and launch to users on all the platforms you care about (Android, iOS, Electron, PWA, desktop), we feel like we’re making true progress on making mobile and web dev easier and faster. When you tell us that Ionic lets you use existing web content and code seamlessly, all while being able to hire web developers around the world, we feel confident that betting on the web was the right choice.

We’ve been working on Ionic in some form now for a little over three years, and Ben and I could never have imagined that Ionic would turn into the force it has. We remind ourselves often that Ionic might very well be the highlight of our professional careers- one of those rare projects that changed the world and became something so much bigger than the original team, a handful of people in the small city of Madison, WI.

If it wasn’t for you all being passionate and building amazing things with Ionic, the project would just be a lot of code on a GitHub repo.

From all of us: Thank you for giving us the opportunity to spend our working hours helping people through the beauty of open software.

Cheers! ?


Today, I am excited to announce the launch of Ionic for Organizations, a new collaborative feature available in your Ionic Dashboard that makes it easy to build and share apps in your organization, as well as manage developers and users on your team.

Many Ionic developers working in organizations large and small need control over who can test and access their apps from Ionic Cloud and Ionic View. We’ve received a lot of feedback that our current collaborator system wasn’t powerful enough for businesses.

One of the most exciting things about Ionic for Organizations is that Ionic View now becomes your company’s personal app store. Developers in your Organization can upload apps and make sure only those in your Organization can view them. Soon we will be extending this feature to Progressive Web Apps for teams that want to skip the app store completely.

Get started with Ionic for Organizations by creating your first Organization and inviting your team. Each developer on the team is $7/mo with a minimum of two, and you can add and remove developers at any time. We’d love your feedback on this new feature!


Sani Yusuf is a freelance Ionic developer and the co-organizer of Ionic UK, one of Ionic’s largest regional groups.

The first thing a skeptic might ask about Ionic is how the company has achieved its impressive stats (over 27k Stars on Github, top TypeScript project on the web, and over 3 million apps started from the Ionic CLI). How did a small team build a technology that has shaken the mobile development world since its 2013 launch, resulting in apps with global recognition, like Sworkit and Untappd?

I believe the answer lies in Ionic’s vibrant community of people from different backgrounds working together to solve a shared problem. There are over 100 Ionic meetup groups spanning six continents. Ionic’s Slack group has almost 10,000 users, the Ionic Stack Overflow and Ionic Forum confirm how active the Ionic community is.

In December 2015, I set off on a personal tech travel mission, part of which was to reach out both in person and virtually to as many Ionic communities as I could. I was keen to see what people were doing with Ionic, so that I could learn and help collaborate. In this post, I’ll share some of the things I learned during my travels.
Read more…

Ionic Blog RSS Feed