2. Talking Points
1. About Me
2. Native vs. Hybrid Mobile Development
3. What is Cordova/Phonegap?
4. What is Ionic framework?
5. Features of Ionic
6. Pros and Cons of Native and Hybrid Development
3. About Me
JS and PHP Developer
Two mobile apps in the App Store and Play
Store (DipQuit and CigQuit).
From NJ now living in St. Petersburg, FL
10. What is Ionic?
A very popular framework to build hybrid
mobile applications.
Built on top of Cordova.
Built with AngularJS.
Custom CSS classes for native-looking
components.
Makes things like transitions, reordering
lists, loading spinners, and many more a
16. But can Ionic do THAT?
YES
http://ngcordova.com/docs/plugins/
17. When to use Hybrid vs. Native
Hybrid Native
● Cheaper.
● Less code to write.
● Slower.
● Less learning
curve.
● Can debug in
browser.
● Use common
technologies.
● Faster.
● Can talk directly to
hardware.
● Don’t have to rely
on third party
plugins.
● More code to write.
● More expensive.
● More of a learning
curve.
● Submit to
app
stores.
● Can
access
all of
phones
features
Each mobile operating system has it’s own native language. This native language allows the code to talk directly to the hardware inside the phone. For Android, to develop a native app, you use Java. For iOS, you use Swift or Objective-C.
The problem with native development is you have two completely separate code bases. None of the code is compatible with each other. This means that for any new feature, bug fix, or whatever it may be, you need to write the same thing twice, but in two (or more) separate languages. This causes slower release dates, more work, more possibilities for future bugs, and one giant headache for companies and developers.
With native development, there is also a HUGE learning curve. To develop for iOS you need to learn how to use Xcode (Apple’s IDE), Objective-C, Swift, and Apple’s SDKs and APIs. For Android, you need to learn how to use Android Studio (Android’s IDE), Java, and Android’s SDKs and APIs.
Because of the headache of native development, hybrid development was born. The theory behind hybrid development is that you use HTML, CSS, and JavaScript to write ONE code base that can be used across all platforms for mobile applications. Any IDE can be used, and you don’t have to learn all of the special methods and components with Apple and Android’s API and SDK.
With hybrid mobile development, you write your code in HTML, CSS, and JavaScript. Natively, a mobile device does not understand HTML, CSS, or JavaScript. Thats where Cordova and Phonegap come in (which we will touch on in the next slide). Cordova and Phonegap act as bridges between your HTML, CSS, and JavaScript and the operating system’s main language (Java or Swift). You don’t use Cordova and Phonegap together. You use one or the other. Essentially, they sort of convert your code to native code. What it really does under the hood is Cordova and Phonegap actually call the native API methods so you don’t have to worry about learning what method does what. All you have to worry about is writing your HTML, CSS, and JavaScript.
In a nutshell, Cordova and Phonegap are the tools that let you write hybrid applications with JavaScript. Like I said in the last slide, they act as a bridge between your HTML, CSS, and JavaScript and the native code (Java and Swift). Cordova is maintained by Apache and is open source. Phonegap is owned by Adobe. Right now, they are basically the same thing. You can use one or the other and Cordova plugins are compatible with Phonegap and vice-versa. However, Adobe plans to integrate Phonegap into the Adobe ecosystem later on down the line. What’s really cool about these tools is now with JavaScript, you can write front-end code for websites, back-end code wind Node.js, and mobile applications all with JavaScript. No other language can boast this capability.
Installing Ionic is a breeze. Assuming you already have npm installed (which every JavaScript developer should have installed on their computer) all you need to do is run this command. This will install Ionic and Cordova (remember Ionic is built on top of Cordova not Phonegap) globally onto your machine.
Ionic has three starter templates that you can base your project off of. The first is a blank project where you basically get nothing to start out with. The second project is called tabs where you get an application with a menu at the bottom. The third one is called sidemenu where you get a collapsable menu on the side. To start the project you simply run the command listed below and replace “myApp” with whatever you want to call your app.
Now lets go ahead and actually make an app right here! Since I have an android phone I will be showing you on my android. This is a demo slide.
One of the cool things with Ionic is that you don’t need to install the app on your phone all the time. Since it is really just HTML,CSS, and Javascript, you can run it right in your browser. To do this all you do is cd into your directory and run ionic serve. (DEMO). Whats cool about ionic serve is it features a live reload. So after every change in your code, instead of having to refresh, it automatically refreshes any time you hit save on your code. Ionic serve --lab is another cool feature. It shows you a split view of android and ios (DEMO).
One of the cool parts of Ionic is all of the CSS components it comes with. It allows you to really make native-like components for your app (DEMO). Another cool part is something called ionicons. This allows you to use a lot of cool icons in your app (DEMO).
When I talk about Ionic a lot, people often say, “You know that seems cool and all, but I need my app to access the phone’s camera. Can hybrid apps even do that?” Or, “I need my app to be able to access the phones location. Ionic can’t do that, can it?” The answer to any of these questions is YES. Ionic and hybrid apps overall are capable of doing anything a native application can. Many of the things you are probably looking for are already available in ngCordova (demo). If they are not, you can actually write your own custom plugin to do whatever you want your phone to do.
Currently, Angular 2 is currently in beta. Angular 2 is built around TypeScript, a strictly-typed compiled way to write JavaScript. Ionic 2, also in beta, is obviously based around Angular 2. It features a lot of cool new stuff. Ionic 2 is expected to be released around the fall. For React.js fans out there, React Native has been making a push into the hybrid development scene. What is cool with React.js is it actually uses native components in the SDK to build apps instead of using CSS. This can add a big performance boost. It is still very new, and the community isn’t really developed around it yet, but you should watch out for it.
