ionic-talk

What is Ionic Framework?

Ionic is an HTML5 mobile app development framework targeted at building hybrid mobile apps.

Ionic Framework Docs

Ionic Stack

Leveraged in New Technologies

Cordova

Apache Cordova is an open-source mobile development framework.

Apache Cordova is an open-source mobile development framework. It allows you to use standard web technologies - HTML5, CSS3, and JavaScript for cross-platform development. Applications execute within wrappers targeted to each platform, and rely on standards-compliant API bindings to access each device's capabilities such as sensors, data, network status, etc.

Architecture

AngularJS

AngularJS is an open-source web application framework mainly maintained by Google to address many of the challenges encountered in developing SPA.

AngularJS

GulpJS

Gulp is a javascript task runner that lets you automate tasks such as building, minifying, live reload, pre-process files and more...

GulpJS

NodeJS

Server side javascript and it's package manager.

Node.js & npm

HTML5 & CSS3

Local Storage, Audio, Video, Animations...

HTML5 Features and Tips

Sass

An extension of CSS that adds power and elegance to the basic language. It allows to use variables, nested rules, mixins, inline imports, and more...

Sass

And more...

• bower
• jasmine
• karma
• mocha
• grunt

Hybrid Mobile Apps

the obvious Practical Market Solution

Native vs. Hybrid

The Native Dilema

When developing for multiple platforms...

• Mobile Experts are expensive and hard to find
• Lot of new platforms (Android, iOS, WP, BB10OS, FirefoxOS...)

Sooner or later you'll like to reach users from different platforms

Stack Overflow Survey 2016

Stack Overflow Survey 2016

Stack Overflow Survey 2015

Stack Overflow Survey 2015

Stack Overflow Survey Results

Developer Occupations

There are roughly just as many developers who call themselves Mobile Developers as there are Android Mobile Developers (3% for each). About 2.5% of all developers are iOS Mobile Developers. We received 59 responses from Windows Phone Mobile Developers (.1%).

Stack Overflow Survey 2016

Ionic Rapid Prototyping

The powerful command line utility

Ionic Client

    $ npm install -g ionic cordova
    $ ionic start demoapp sidemenu
    $ cd demoapp
    $ ionic serve

Ionic Up And Running

Tabs, Navigation, Menus and more...

Ionic Components

Contributed Templates

    $ ionic start myMapDemo https://github.com/calendee/ionic-leafletjs-map-demo
    $ cd myMapDemo
    $ ionic serve

Leaftlet Mapping Application

Map Demo And Running

Adding Platforms

    $ cordova plugin add cordova-plugin-geolocation 
    $ ionic platform add android
    $ ionic platform add ios
    $ ionic emulate ios

iPhone 6 Emulation

Run & Emulate on your Phone

Look & Feel

Ionic Material

Ionic Market

Ionic Market Example

Sharing and Publishing

Being Efficient with Ionic

Quick Sharing

Ionic View

Uploading / Viewing

    $ ionic login # create account first
    $ ionic upload
    $ ionic share cortez.cristian@gmail.com

Invite a friend to your Ionic App

Publish Android Market

        $ ionic start sopa-de-letras blank
        $ # do some work with AngularJS
        $ ionic platform add android
        $ cordova build --release android
        $ # publish app on google play
    

Ionic Tools & Tips

Improving the development flow

Continuous Deployment

Continuously deploy your ionic app using Circle CI

Ionic Generator

Yeoman generator for creating Ionic hybrid mobile applications using AngularJS and Cordova - lets you quickly set up a project with sensible defaults and best practices.

Generator Ionic

Yeoman Generators

Ionic Box

Ionic Box is a ready-to-go hybrid development environment (based on Vagrant) for building mobile apps with Ionic, Cordova, and Android.

Ionic Box

Notes

Ionic 2

Why Ionic 2?

• Because of...
• Angular 2
• TypeScript
• ES6
• ES5
• JavaScript

Angular 2

TypeScript