The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

ionic-meta

Hello Ionites! Happy Halloween! 🎃 I just wanted to give you a heads up about some changes to to our @ionic/app-scripts package. This package manages the build process for Ionic RC apps.

When we released Ionic RC a few weeks back, we made significant changes to the build process for Ionic apps. A few of these changes were necessary to make the leap to the production release of Angular 2, and a few were some of our ambitious ideas to simplify and dramatically improve the Ionic build process. Or goal is and will always be to reduce the amount of knowledge developers need to have about modern JS build tools to build Ionic apps.

The production release of Angular introduced several new concepts, including NgModules and Ahead-of-time compiling. These changes will be very positive for Ionic apps, but they have also caused some frustration for developers making the transition to Ionic 2 RC with Angular 2 Final. We’re really sorry about that. We recognize that we could have done a better job with documentation and examples during the transition. We are working around the clock to try to improve the developer experience with ngc, the Angular AoT compiler. We’re actively working with the Angular team to improve the quality of error messages and improve build times from ngc.

In addition, we underestimated the impact of some of our more ambitious changes with the build process. We chose a tool called Rollup to “bundle” our code together. Rollup is a tool that specializes in blazing fast start-up performance and a small bundle size. In our internal testing, everything went well for the most part. When we released this to the community, we found the tool to be challenging for developers to use when working with third party libraries that weren’t using the modern ES2015 module format yet. Working around this for commonjs and other types of modules required complicated configuration and in some cases just wouldn’t work at all. We are sorry for any frustration this may have caused, and we have a solution that is more forgiving and is going to work better for Ionic devs moving forward.
Read more…


Ionic relies on the power of many command-line-interface tools (CLI) to start, build, test, and deploy Ionic apps.

Unlike traditional desktop applications, CLI tools are small programs that perform various tasks in a way that makes them easy to use together, all without the complexities of having to build visual desktop apps for each program.

To use CLI tools, we need to use a Terminal. A Terminal lets us run CLI tools by typing commands, and is a popular way developers build web and mobile apps today. A terminal looks like this (yours might look different):

screenshot-2016-10-30-09-51-19

Windows, Linux, and Mac all have different ways to use the terminal. Let’s start with Mac

Mac

For Mac, we have a nice terminal installed by default called terminal. If we search in spotlight for terminal it will pop up:

screenshot-2016-10-30-09-56-17

Alternatively, we can find it in the Utilities folder in our Applications list.

When we open it, we should see something like this:

screenshot-2016-10-30-10-03-25

We can continue using this default terminal, though many Mac users choose to use a 3rd party terminal tool with more features, iTerm 2 being the most popular.

Windows

Windows has a few different terminal tools available by default, including two you may be familiar with: cmd.exe and PowerShell. We don’t recommend either for Ionic development or for modern web and mobile development because they don’t have many common utilities available that developers use.

Instead, we strongly recommend installing Git for Windows which comes with Git Bash, a prompt that is more compatible with the terminal experience on Mac and Linux.

After installing Git Bash and running it, you’ll see a prompt like this:

gw1

Linux

You’re running Linux, you should know how to launch your Terminal 😜

Tip #1: The Prompt

On our example terminals above, we see the text bash-3.2$ and something similar on the Windows side, both having a $ and our cursor positioned to the right of it.

This is the command prompt, and it’s “prompting” us to enter a command. The dollar sign is a very common prompt character, and you’ll occasionally see it written in commands to give you context and to indicate this command should be run in a terminal. You should not write the dollar sign character when typing your commands, it will make your command not work.

Tip #2: Basic commands

There are a few core commands that you will want to learn that are often implied by tutorials. The first, and arguably most important, is cd. cd lets you “change directory” and is equivalent to navigating into folders in Finder or Explorer.

The second is ls and “lists” the contents of the directory you are in. This becomes a common sequence Terminal users perform: cd theDirectory and then immediately ls to list the contents and give you context for where you are.

screenshot-2016-10-30-10-40-40

ls takes some additional flags to customize the output, and a common one is ls -l to show a nice tabular list of the contents of your directory.

So, when we say cd into a directory, that means you’ll type cd theDirectory.

Tip #3: More commands

There are many commands available, and we recommend learning to use at least these other commands: mkdir to create directories, cp to copy files, mv to move and rename files, rm to remove files, and less to open files in a scrolling window for previewing. Try each one to learn how to use it.

Tip #4: sudo

Sometimes, a command we want to run requires administrator privileges to modify sensitive files on our computer. On Linux and Mac, we can use the sudo command before the command we want to run, which will prompt us for our administrator password before running the command. For example, here’s how we install Ionic globally (meaning for all users) on Mac and Linux:

sudo npm install -g ionic

screenshot-2016-10-30-10-55-15

Often times, sudo will be left out of commands printed in tutorials and guides because it’s one of those tricks you need to know if you use the Terminal on Linux and Mac yet not required for Windows so it’s not technically correct to have it printed.

You need to know that certain commands are going to require elevated permissions, and sometimes the only way to learn is through trial and error. Ionic needs to be installed globally so that it can become a command the terminal knows about, so on Mac and Linux we need to include sudo.

Tip #5: NPM

NPM is a popular command line tool for installing libraries from the Node.js ecosystem. Ionic uses it extensively and you’ll see it printed in our getting started guide.

After installing Node.js on our machine, the npm command will be available in our terminal. To install new packages, run npm install and then the name of the package. As mentioned in the “sudo” section above, if we need to install new commands globally (or, for “all users”), then we need to add sudo before the command on Mac and Linux (it’s not required on Windows), and then use the -g flag.

Tip #6: Flags, arguments

When you see the word “flags” or “arguments” for commands, that means adding text to your prompt to make the command run differently. For example, npm install -g ionic tells npm that we want to install Ionic globally.

A “flag” is commonly a sequence with a dash and a character or two dashes and a word, and can often be used interchangeably. That means we can write npm install -g or npm install --global and the behavior is identical.

“arguments” are just additional data we send to the command. For exmaple, if npm is the command, then install and ionic are arguments to the command.

Any questions?

We realized that many developers new to Ionic didn’t have extensive Terminal experience, so we hope this tutorial helps you better understand how to use the terminal and interact with Ionic.

Any questions about anything above? Please let us know by leaving a comment below.


Hey Ionites,

We’ve been a bit quiet over here post RC0 launch because, frankly, we’ve been heads down making tweaks and fixing things based on feedback and issues filed from the release.

We have a few updates available that address issues and we ask that you update as soon as possible.

First, update the version of @ionic/app-scripts in your Ionic 2 app with

npm install @[email protected] --save-dev

Second, update your Ionic CLI using

npm install -g ionic

If you were using the beta tag for the Ionic CLI, make sure to npm uninstall -g ionic first and then install it again, otherwise the install will fail.

Finally, to make sure you have the proper dependencies in your Ionic 2 app, update your package.json to use the dependencies listed in this example package.json.
Read more…


It’s pretty much unavoidable that we’re going to need to pass data around our app at some point. Why? Because apps are made up of a whole bunch of views and user interactions and…stuff, none of which tend to exist in isolation. Whether we’re talking about data pulled in via a REST API, collected from a user input, generated client-side, or whatever else, it is often the case that we’ll need to use it in more than one place to create the types of rich experiences users have come to expect from mobile. At the same time, resources like data usage and battery life are limited on mobile, so we want to keep things like network requests and computation to a minimum whenever possible. Keep it DRY (don’t repeat yourself), as the old saying goes.

In today’s blog post, we’ll take a look at two ways to do this in an Ionic 2 app: Angular services and Ionic nav params.
Read more…


Ionic 2 RC0
Well, hello there, wonderful people! You may have noticed that we’ve been a bit quiet since the last release of Ionic and may have been wondering where we ventured off to. We’ve been hard at work prepping the Ionic 2 Release Candidate! We’re happy to announce that it’s finally here, along with some major performance improvements and new features!


All The excitement

Now, before you rush off to update your dependencies, please take the time to read over this section of the changelog. There are several structural changes to the setup and build process that need to be made before your app can be upgraded. The changelog goes over the update process. Without these changes, your app will not be upgradeable.

Read more…


Yesterday, we hosted a webinar with our partner Neumob called “Building Mobile Apps With Performance and Speed,” in which Ionic’s Developer Advocate, Alex Muramoto, and Neumob’s Mobile Evangelist, Tom Catterall, tackled questions like:

  • What’s the current state of hybrid app development?
  • What are some best practices in designing for challenging mobile network conditions?
  • What tools are available in 2016 that will help your apps outperform your competition?

You can watch the webinar and the attendee Q&A below. Alex’s talk, “Building Performant Hybrid Apps,” comes first, followed by Tom’s presentation, “A Crash Course in Networking for Mobile,” and the Q&A. Enjoy!


Built with Ionic: Wavve app
Wavve is an engagement platform built with Ionic that allows listeners of audio content to post short voice clips back to shows and talk with other listeners as a community.

“Wavve is a powerful, easy-to-use platform helping broadcasters to engage listeners, improve content marketing, reach wider audiences, and sell more sponsorships,” says Wavve cofounder and CTO Nick Fogle, who was a lawyer until his passion for tech drove him to switch from legal code to computer code. “Imagine a cross between Twitter and a verbal message board packed with marketing tools, which is perfect for radio shows and podcasts.”

The Wavve team launched their iOS and Android mobile apps this year.

“Our early partners in the radio industry are giving us great feedback,” says Fogle. “They haven’t seen much innovation in recent years, and their listeners love the community interaction.”
Read more…


There’s lots of things that can make a mobile app successful–a great user experience, an intuitive and performant UI, not crashing, and actually being useful are just a few crazy ideas that just might work. But at the end of the day, apps first need to be discovered. There’s currently something to the tune of over two million apps in the Apple App Store and two million apps in the Google Play Store, all fighting for your attention in a dystopian, Thunderdome-like scenario. Conceptually it’s something like this:

thunderdome_photo32

What I’m trying to say is, there’s a lot of competition, which can make it very hard for a new app to get noticed, let alone downloaded. It’s pretty bleak. So how to triumph and rise to the top of the charts? One of the best ways to break out of the crowd is to get positive ratings and reviews from your users.

In this post, we’ll take a look at one of the most common ways to get users to rate and review apps: by asking them to. Specifically, we’ll take a look at the App Rate plugin in Ionic Native, which makes it easy to prompt users to rate and review your app.

It’s useful, simple, and best of all, it doesn’t require a 1980’s special effects hellscape to accomplish.
Read more…


Progressive Web Apps with Ionic

As you know, we’re huge fans of progressive web apps, which are distributed with just a URL, offer an app-like experience using modern web APIs, and allow users of your app to get instant access to your app’s functionality, all without having to download your app from an app store. It’s been a top priority of ours to make PWAs a first-class citizen right out of the box, and we are happy to let you know that the first iteration of that is now available when you create a new Ionic 1 or Ionic 2 app!
Read more…


Service Workers are one of the most useful yet misunderstood APIs to come to the JavaScript world in years. They open up a whole world of functionality to the web and are an integral part of Progressive Web Apps. Service workers give the web independence from the network and allow you to decide exactly how your app uses the network. They also give the web new powers, such as push notifications, that can be the key to providing an “app-like” experience to users of your PWA. Also, in the near future, service workers will be built into Ionic 2 projects and will be extremely easy to enable in your Ionic 2 apps.
Read more…


Ionic Blog RSS Feed