× {{alert.msg}} Never ask again
Receive New Tutorials

Introduction to Ionic with Developer Perry Govier

– {{showDate(postTime)}}

Want to build mobile apps faster without mastering native languages? This article walks you through what the Ionic Framework is, based on the Codementor Office Hours hosted by Ionic’s Perry Govier.

What is Ionic Framework?

Ionic Framework allows you to build hybrid apps with HTML5. It offers plenty of components and everything you need to create a successful and high-performing App. Ionic is the perfect tool for web developers who already use HTML5, CSS, and Javascript, and makes them feel right at home.

What Cocoa Touch is for the iOS developers, we aim to be for web developers.

How does Ionic Framework work?

Ionic uses AngularJS, although there were originally plans to switch to Ember and support Backbone. Our team realized that building an App in Ionic using Angular felt right since it completely broke the mold compared to other frameworks.

The Ionic Framework provides Angular services and directives used to build your App. For example, if you need to create tabs, Ionic uses Angular’s directive syntax to create “Ion tabs”, which is simply a new HTML element that you put in your App. When you need a specific component or service, such as a pop-up, you can have it without having to build it from scratch.

Once you have created an App on Ionic, Ionic itself uses Angular to do its objectives (you can also use it to write your own). Ionic utilizes Apache Cordova’s web view, which allows you to interact with a DOM (Document Object Model) as you build your App. Cordova also gives you access to native SDKs which allows you to utilize functions like the camera plug-in. Together, Ionic help you create Apps for both iOS and Android.

Essentially, if you develop it once, you can work off that. That code works on multiple platforms. You don’t have to reinvent it.

Why use Ionic Framework?

The Ionic Creator has a powerful ecosystem of tools which helps you build and organize the structure of your App. There are many other reasons to use Ionic, such as:

  • Create mobile Apps without learning the language
  • Performance
  • Free to use

Ionic Creator allows you to drag and drop components onto a staging area and allows you to connect your pages together. If you’re a beginner and you are not concerned about customizing the look/design or the back-end logic of an App, you can create a complete App without a single line of code.

If you’re a web developer, you already have the basic knowledge needed to create a great App on Ionic. With a few tweaks, a simple website can easily turn into a fully functional App. Navigation can be the biggest challenge though. Apps have a parallel history that doesn’t exactly work the same way as the web, and getting those navigations to be nice and smooth can be very tricky to do on your own, so we do the work for you.

If you’re a native developer–let’s say iOS developer–instead of taking time to learn Android App development, you just need to plug in the back-end data of your App into Ionic’s Creator to do the work for you. This allows you to have more time adjusting the look and feel of your App.

Performance. Ionic allows you to quickly build and perfect your App. The View App allows people to demo your App while you are developing it. Whether it’s a project manager who wants to track your progress or if you’re running Windows and want to see your how your App looks on the iPhone, Ionic provides you with a solution. Another useful tool is the live-reload server, which allows you to inspect things in Google Chrome and once you change a line of code, the web view will be updated in real time. You can even run the App on your phone if it is connected to your computer. Ionic is different from other frameworks because it’s performant and very closely married to the regular DOM approach to the web, where you can use any irregular component. If you want to extend things or make some component in additionyou can.

It’s free! Ionic is completely free to use. As mentioned on our website, Ionic is “built and maintained by developers and designers passionate about web technologies.” No matter how much coding knowledge you have, following examples are very important, as some Apps’ navigation may be more complicated than they need to be. Ionic’s proud to have a massive community to learn from as well as a great Guide to Ionic packed with tutorials and examples to get started–all free.

Ionic Framework Compatibility

Ionic works well with tools like Vim, Sublime, and Webstorm, which are used by our team. I personally recommend using Tmux with Ionic, which allows users to have different terminal windows open in one window. Some users enjoy using Eclipse, which has an external plug-in. Firebase, another platform for building Apps, can also be used with Ionic.

Angular 2.0 is in the works and the our team has been regularly meeting with Google for Ionic 2.0. They are planning to release Ionic 2.0 with Angular 2.0, so please stay tuned!

Perry Govier

Perry Govier is a senior developer of the Ionic Framework. With 7 years of experience in Minneapolis digital agencies, he was first exposed to Ionic as a developer building Ionic apps for clients.

Read about my Ionic Framework Demo here.

Perry Govier
Perry Govier
Perry Govier is a senior developer of the Ionic Framework. With 7 years of experience in Minneapolis digital agencies, he was first exposed to Ionic as a developer building Ionic apps for clients.
Hire the Author

Questions about this tutorial?  Get Live 1:1 help from JavaScript experts!
Suresh Atta
Suresh Atta
Sr Web and Java developer by profession, your friend by nature. ~1200 sessions so far.
Web and Java developer who loves to fix bugs. I believe in Karma and I believe in the quote "REAL PROGRAMMER'S EYE IS A DEBUGGER." **If I can't...
Hire this Expert
Raditha Dissanayake
Raditha Dissanayake
Polyglot, Software architect, RDBMS expert.
Done a heck of a lot of programming and software design since I wrote my first on a Sinclair ZX spectrum in 1987. Not enough of it has been made...
Hire this Expert
comments powered by Disqus