The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

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!

Read more…


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-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.


Ionic Blog RSS Feed