Build Your First Mobile App With Ionic 2 & Angular 2 - Part 1
http://gonehybrid.com/build-your-first-mobile-app-with-ionic-2-angular-2/
12 January 2016 on Cordova, Ionic 2, Angular 2 | 4 Comments
A year ago I wrote a series of posts on how to build a mobile app with Ionic. The Ionic Team have been working on the next version of Ionic and will be releasing that in beta soon, so now is a good time to revisit that tutorial and update it for Ionic 2. This tutorial series is for web developers who don't have any previous experience with Ionic.
This tutorial is for Ionic 2, you can find the Ionic 1.x tutorial here.
This tutorial is part of a multi-part tutorial:
Part 1 - Introduction to Hybrid Mobile Apps and Ionic (this post)
Part 2 - Set Up your Development Environment
Part 3 - Introduction to TypeScript & ES6
Part 4 - Introduction to Angular 2
Part 5 - Build an Ionic 2 App
Part 6 - Navigating between Pages
Part 7 - Test on Emulators and Mobile Devices
What is a Hybrid Mobile App?
A hybrid mobile app is built with HTML, CSS and JavaScript and is contained in a native wrapper so that it can be installed on a mobile device.
This allows web developers to build mobile apps without having to learn the native programming languages (e.g., Objective-C, Swift, Java). It also means that you can have one codebase for all the different platforms.
Cordova/PhoneGap
The most popular native wrapper is Cordova (the engine that powers PhoneGap) and has been around since 2009. Cordova is responsible for loading your HTML/CSS/JavaScript in a web view when the mobile app is started.
The other big feature of Cordova are plugins that allow you to communicate with the native features of your mobile device, for instance accessing the Contacts list or Camera, using just JavaScript.
Ionic 2
The Ionic Framework uses Cordova and provides you with a UI framework that mimics the native UI. That means that you don't have to worry about implementing a native-like UI and debugging all the quirks between web view implementations on different platforms.
Ionic 2 is built on top of Angular 2, a very popular framework (made by Google) for developing web applications.
Angular 2 is currently in beta and Ionic 2 is in alpha and should reach beta status soon.
Ionic 2 is now also in beta. Both frameworks are completely rebuilt from scratch offering better performance and simplified code.
What will happen to Ionic 1?
The Ionic Team have said that they will continue working on Ionic 1 for the foreseeable future and have recently released a major update with a huge list of bug fixes.
So if you're looking to build something that needs to go in production soon, you might want to use the current stable Ionic version (which depends on Angular 1).
Read my 6-part tutorial to get started with Ionic 1.
Keep in mind that if you have an Ionic 1 app and want to upgrade to Ionic 2, you'll encounter many breaking changes.
For an impression of what you can build with Ionic, there is the official showcase on the Ionic website, but there is also this unofficial list in the forums.
What about React Native, NativeScript, etc.?
In the past year we've seen the rise of compile-to-native frameworks like React Native (made by Facebook) and NativeScript (built by Telerik). These frameworks allow you to build native apps by writing them in JavaScript and compiling to native.
I haven't had time to explore these frameworks yet, but I do think that native apps will always give you a better performance than hybrid apps, because you won't have that extra layer in-between (the web view).
However, depending on the type of app you're building, this difference in performance is probably not noticeable to the user and that is what matters in the end.
Mobile devices are getting faster with every new release and so are the mobile browsers. With the support of Service Workers in the browser we can now even build web applications that will behave just like an app on mobile devices negating the need for app stores.
Why you should go hybrid
One of the cool things about hybrid apps is that you can update your app without having to republish it through the app stores. Your app is basically just a bunch of HTML, JavaScript and CSS files and you can use a service like Ionic Deploy to update any of those files in the app. This is especially useful on iOS where it takes more than a week to publish apps.
Also, if you don't have a good eye for design but still want to build a beautiful app, you can buy themes for your Ionic app on the Ionic Marketplace or on Ionic Themes.
So if you're a web developer and if you want to leverage your current coding skills, the fastest way to get started with app development is by building a hybrid app. Ionic is the most popular hybrid mobile app framework out there and has an amazing community who will help you out whenever you get stuck.
In Part 2 we will set up our development environment and install the tools we need along with Cordova and Ionic.
Interesting Links
Ionic 2 Forum
Ionic Blog
Join Ionic Worldwide on Slack
Follow me on Twitter @ashteya and sign up for my weekly emails to get new tutorials.
If you found this article useful, could you hit the share buttons so that others can benefit from it, too? Thanks!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通