The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

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-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 @ionic/app-scripts@latest --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…


Ionic Blog RSS Feed