The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

Hey Ionites,

It’s no secret that the Ionic team has built a lot of products and services over the last few years. Some were only meant to be curious experiments, and some are major product efforts. Our Discover Ionic page is an almost comical testament to the prolific nature of the team.

Over the last few months, we’ve been doing a lot of soul searching at Ionic to figure out where we can best spend our energy. One thing has been made clear that we haven’t always focused hard enough on the things we are uniquely good at, and where we can provide the best value to the world.

Today, we’re making some changes to help our team focus on what we do best: making amazing open source mobile development software, and backend services that power them.

Goodbye to Ionic Lab

Ionic Lab, not to be confused with ionic serve --lab, was built to essentially be a frontend GUI to our command line tools. In fact, Ionic Lab is a great example of how Ionic can be used to build Electron apps and we’re incredibly proud of the product and the team that built it back in 2014.

After we launched Lab, it was clear that the maintenance and upkeep effort on the project was going to be high, and the tools available to solve the pain point Lab solved had evolved such that the investment was brought into question.

One big change was Microsoft adding Cordova and Ionic support to Visual Studio. Developers on Windows that aren’t comfortable with the command line can use a best-in-class tool they might already be using to build and test Ionic apps.

Additionally, developers are increasingly comfortable with the CLI and we want to take a step back and rethink how we can provide an awesome CLI experience while also looking ahead at the potential for future desktop Ionic tools that can run directly in the browser instead of requiring a bundled install like Lab did. Most likely this will mean expanding ionic serve --lab into a much more feature rich experience.

Towards the end of the year, we will be shutting down Ionic Lab’s download page and focusing on our CLI toolchain and build scripts.

Refocusing Ionic Cloud

Ionic Cloud has gone through a number of iterations as we’ve tried to figure out where we can add the most value to the Ionic Framework experience, and at the same time the mobile market has changed dramatically.

Today, not only are developers looking at building cross-platform apps for the app stores, but they’re increasingly interested in deploying their apps to the web to gain the wonderful benefits of Progressive Web Apps.

We think Ionic Cloud can add a ton of value to both Ionic apps in the app stores, but also Ionic Progressive Web Apps. In order to get there though, we need to shift resources on our team to build out a scaffolding that will help Ionic Cloud be a leader in cross-platform mobile development services.

With that in mind, we have made the tough decision to stop development on Ionic Analytics and will be sunsetting that product by early 2017. We realized that we weren’t providing enough value over existing analytics tools, and that we could be putting that engineering effort into unique Ionic services around Progressive Web Apps and web-first realtime databases. This isn’t to say analytics won’t be a part of a future product effort, but most likely will be integrated rather than a standalone experience.

For those concerned about this shut down, please contact me at [email protected] to talk through a transition plan.

Adios, Appcamp

Appcamp was an experiment in building an interactive learning course for Ionic and Angular, focused on specific tutorials and a live coding environment.

While we’re immensely proud of Appcamp and for the team that built it, we realized that we could be providing better learning materials in a way that required less of an engineering effort while still providing most if not more value than Appcamp does today.

We will be shuttering the Appcamp you see today early 2017.

On to Ionic 2!

Every year we try to take a step outside of Ionic the company and look at the products we’ve built and the investments we’re making, to make sure we are being as effective as possible with the most limited of resources we have: focus.

We’re pumped to be shortly releasing one of the best Ionic releases yet with Ionic 2, as well as a much more cohesive and powerful story around Ionic Cloud and how it fits into Ionic apps. By focusing on these projects Ionic will be stronger and more powerful than ever before.

None of this is to say we won’t ever try new things or experiment, but sometimes those experiments have to be put to rest for us to come up with bigger and better things.

Onward!


We’ve been talking a lot about Progressive Web Apps—web apps built using modern standardized web APIs like service workers, web manifest, and web push, that provide an app-like experience delivered through the browser. Maybe you’ve built a few yourself by now. Progressive Web Apps have certain important advantages over native apps, especially for the next billion users who will come online in the near future. Let’s talk about those advantages and why they’re crucial to those users’ mobile experience.
Read more…


Ionic 2 and Meteor

Uri Goldshtein is a software developer at Meteor Development Group and frequently writes about Ionic on Meteor’s blog.

A little over a year ago, I released the WhatsApp clone tutorial with Angular, Ionic, and Meteor.

A year has passed, and a lot has happened—Angular 2.0 became stable, Ionic 2.0 entered its RC stage, and Meteor just released 1.4.2 with many improvements (fast build times, full npm and yarn support, Node 4.6.1 and MongoDB 3 by default, GraphQL, and more Databases supported with Apollo).

We’ve been hard at work on a complete integration of Angular 2.0, Meteor, and Ionic.

Each platform has its own CLI and build process solutions, so we made it possible for you to choose your favorite.

Today, I’m happy to announce that we are releasing two new versions of the Ionic/Meteor WhatsApp tutorial, this time with Angular 2.0 and Ionic 2.0, one using the Ionic CLI and one using the Meteor CLI.

Check them out here.

In these tutorials, we’ll create a full WhatsApp clone using Angular 2 and Ionic 2. We’ll use Meteor’s real-time collections for the chat and Meteor’s simple Authentication packages for SMS-based authentication.

It’s great to see the power of these two solutions working together, keeping the platforms up-to-date with the latest improvements in the JavaScript ecosystem!


Enrique Oriol is the CTO of a Barcelona-based startup and frequently writes about Ionic in Spanish on his blog, where this post originally appeared. He also teaches Ionic 2 at Udemy.

In native apps (iOS, Android), views have a well structured lifecycle that allows you to perform actions on key points of their execution. Ionic 2 has a similar feature: Navigation Lifecycle Event.

ios native view lifecycle image

In Ionic 2, any view added or removed from a NavController emits certain events. You can take advantage of those events to instantiate the view, refresh content, or store data.

I’ll teach you how to use them in a hands-on code example, but first, let’s dig into the concept!
Read more…


Howdy, folks! I just wanted to share a few updates on things and talk about an amazing new feature in the Ionic build process.

Framework Updates

RC3 has shipped 🍻 ! We’ve been hard at work closing issues and improving the performance of our components. Three components in particular—Menu, Sliding Items, and DateTime—have had significant work done to improve their performance. For example, here are before and after shots of Menu from the developer tools:

Before
before

After
after

We’re excited for you to test these out and see the performance increase!

Error Reporting

Last week, both Max and I shared videos about the new error reporting information in App Scripts. This way, we can remove the feared “white screen of death”. Now, if something happens during your build, you’ll get that information added right away, instead of a blank screen.

We wanted to go even further, so we’ve improved on this and have also added run time error catching! For those who aren’t quite sure what this is, imagine this situation…

You’re testing your app, tapping through screens, then all of a sudden…nothing. The entire app stops, and you can’t go back or go forward to any pages. What happened?

We wanted to do away with that, so we’ve added a custom ErrorHandling class to Ionic that ties into the App Scripts dev server. Here’s what it looks like:

run-time-error

If for some reason you run into an error, now we can display something meaningful and provide the right information. While this is cool, we wanted to go beyond that and add a new bit of UI to this.

run-time-error-overlay

If you do get an error and want to reload the app, you can hit ctrl-shift-8 (cmd-shift-8 for mac) to display a list of debug options. Currently, we only have the option to reload the app, but we’ll be expanding to include a few other options. What’s even better is that this sort of functionally is also available on a real device with live-reload!

$ ionic run android -lc

Once it’s deployed, just shake the device, and the debug action sheet will be displayed. But what about turning it off for production builds? This is handled automatically, in order to avoid any…awkward moments in a production app.

How to get it

In order to get this new feature, you’ll want to make sure you have the most up to date CLI.

$ npm install -g ionic


$ ionic -v
# should return at least 2.1.12

If you’re starting a new project, you should be good! But if you have an older project that you want to update, you’ll want to update the following packages.

$ npm install [email protected] --save
# get RC3 of ionic-angular


$ npm install @[email protected] --save-dev
# get the latest app-scripts package

For a complete list of what your package.json should be updated to, check out the RC3 Changelog

After installing those packages, open src/app/app.module.ts and import ErrorHandler from angular and IonicErrorHandler from ionic-angular.

import { NgModule, ErrorHandler } from [email protected]/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';

@NgModule({

  // Here we tell the Angular ErrorHandling class
  // that it should be using the IonicErrorHandler class for any errors
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})

That’s it! Now, any runtime errors can be better handled by Ionic’s build tools.

Ionic Module Template

We’ve heard many questions from developers trying to build reusable Angular 2 and Ionic 2 modules, and how to get them to work with Angular’s ngc and Ahead-of-Time compiling. To help, we’ve put together a starting template that you can use to build your own modules. It’s a very new release, so please let us know if you run into issues or have questions and we’ll get it sorted.

Ionic Module Template

So what’s left?

With App Scripts reaching a stable point, the framework is team focusing on the final batch of bug fixes and performance improvements, meaning…we’re in the final stretch here! It’s been a crazy road to get here, and from everyone at Ionic, we couldn’t have done it without your input and help in testing things. So, keep an eye out as we go heads down and work on getting 2.0 Final out the door.

Cheers!


Raymond Camden is a Developer Advocate at IBM and frequently writes about Ionic on his blog, where this post originally appeared.

A little over a year ago, I wrote a post (“Ionic Example: ion-slide-box”) that demonstrated how to use the ion-slide-box component with Ionic 1. A few days ago, a reader asked if I could update that post to work with Ionic 2. I’ve done that and am now going to share some of the code from the updated version.
Read more…


Hello Ionites! Today we’re excited to talk about a brand new version, 0.0.42, of @ionic/app-scripts, the build process for Ionic apps. This new version contains some terrific enhancements for developers. In our last blog post, we talked about how our short-term focus was going to be on improving the developer experience and speeding up the build process. We think this new release includes big improvements to both.

Read more…


evolution-mobile-web

In case you missed it, our very own Adam Bradley, a self-proclaimed “car buff,” gave a wonderful talk this month at ngEurope about how the evolution of the web, in particular on mobile, has parallels to the history of the car industry. In fact, many of the same things that influence why people pick certain technologies and stick with them over generations are the same whether we’re talking about cars, or software tools, or even light bulbs and screws.

Adam is a veteran, both of the military and of the mobile web, so he’s seen everything from our earliest attempts at making the browser dynamic, to 2016 where the mobile browser environment is increasingly capable of native-quality experiences and is helping people make a lot of money through Serious Business.

Through it all, it’s impressed on him the futility of trying to rely on proprietary technology. Over the years, every major proprietary improvement to web technology, whether it’s Flash or Silverlight or ActiveX, has eventually been proven obsolete and those that built kingdoms on closed systems had consistently faced days of reckoning that were costly and disruptive to their business.

close-systems-always-fail

Adam’s tongue-in-cheek framework for deciding whether a technology is going to be short lived is whether the company puts their brand name next to it (Adobe Flash, Microsoft Silverlight, etc.). I found that pretty apt.

When we think about Ionic, it’s important to realize that Ionic is built 100% on and is itself open web technology. An Ionic app will run on every modern browser today and probably for the next several decades. That’s an unprecedented level of stability and consistency in technology that businesses can truly rely on. Every hook we make into a native iOS and Android SDK diminishes the longevity of the stability of our code, though it’s often a necessary evil of using new native features like TouchID and voice input that haven’t quite made their way to the web stack.

always-bet-on-the-web

Ionic is proud of being web-first in a world of native-first technologies. We believe having standards for things like weights and measurements, nuts and bolts, lightbulbs, electricity, and software technology, make our world not only safer but more collaborative because we can rely on everyone in the world being able to work together. It also helps us sleep better at night, and people know that I need to get my sleep.

With that, here’s Adam’s talk, I hope you enjoy it!


Announcing Ionic 2, RC 2!
We’re thrilled to announce that Ionic 2, RC 2 is now live! The Ionic team has been focused on bug fixes and build improvements in preparation for our final release. In addition to this, we’ve been working on ways we can improve both the developer and user experience. There aren’t many changes that need to be made with this release candidate, but make sure to update your dependencies according to the changelog.
Read more…


Built with Ionic: Joule by ChefSteps
Our friends at ChefSteps have a cool new cooking tool! Joule is an immersion circulator that allows you to use the sous vide cooking method, in which food is placed in airtight plastic bags, then heated in precisely controlled, low-temperature water. Because the food can never get hotter than the water, it’s almost impossible to under- or overcook it, guaranteeing some of the most amazing steak, fish or chicken you have ever had. Joule’s companion app is built with Ionic.

“Anyone can download the app today and check out the many sous vide guides we provide, even if you don’t own a Joule,” says Ryan Miller, a mobile engineer at ChefSteps. “The app talks to Joule via Bluetooth, if you’re in close proximity, or over WiFi, which is useful if you’re at the supermarket.”
Read more…


Ionic Blog RSS Feed