Ionic Framework

Angular JS-based, Open Source

  • Performance obsessed
  • Mobile-looking
  • Industry standard
  • Two way data binding
  • Built on existing technologies you love

 

http://ionicframework.com/
http://ionicframework.com/getting-started/
http://ionicframework.com/docs/

What is Ionic?

Ionic Technology Stack

  • Familiar tools
  • Access the device with cordova plugins

OnsenUI

  • Speed

  • Built with angular

  • Shorter learning curve

  • Drag and drop studio

  • Jquery tolerant

http://onsenui.io/

  • Community

Why Ionic over OnsenUI?

  • Ionic's Showcase
  • Angular support and Theme
  • Mature features and CSS components

What is Inside?

  • Ionic    CSS
  • Ionic    Icons
  • Ionic    Directives

Ionic CSS

  • Elegant    yet    very    lightweight
<div	class="list">
<div	class="item	item-divider">
Candy	Bars
</div>
<a	class="item"	href="#">
Butterfinger
</a>
</div>
  • 3D    animations,    HW    accelerated.
  • sass-based    f or    custom    theming
  • 500    f ree    icons    (ionicons)

http://ionicf ramework.com/docs/

Ionic Directives

  • Mobile Navigation and Interactions
<ion-list>
<ion-item	ng-repeat="item	in items"
item="item"
can-swipe="true"
option-buttons="itemButtons">
</ion-item>
</ion-list>
  • Services for gestures and navigation

http://ionicframework.com/docs/api

Ionic Navigation

  • based    on    UI-Router
  • UI    Gallery
  • Sub-Views
  • Navigation History

http://showcase.ionicframework.com/

Ionic Tooling

	npm	-g	install	ionic
	ionic	start	myApp	tabs
	cd	myApp
	ionic	platform  add ios
	ionic	build	ios
	ionic	emulate	ios

PhoneGap  based  build  chain

Go live!

http://192.168.194/IonicSajee/index.html

SWAGGER

Make your API accessible

Documentation

•No standard

•Ad-hoc attributes

•Managed manually

•Not up to date

Swagger is…

  • Technology
  • A framework for producing,consuming

The Swagger Specification

  • JSON to specify metadata
  • JSON to specify API structure
  • JSON schema for the model specification
  • Machine readable
  • Language agnostic

Swagger - API Listing 

Subtitle

API Listing - Annotations

API Details

Test the API

Q&A

Ionic Framework

By Sajeetharan Sinnathurai

Made with Slides.com

Ionic Framework

  • 1,177

More from Sajeetharan Sinnathurai