MOBILEAPPSWITHTHEWEB

MikeHartington|@mhartington

BEFOREWEJUMPINTOTHINGS...

IONICV1!SDKforDevelopingHybridAppsFocusedonmobileappsfirstSassforeasycustomizationAngularforcodestructure

EMPOWEREDDEVELOPERSEVERYWHERE

WebDeveloperscouldnowparticipateinmakingapps!

THESTATS34thmostpopularOSSproject

(24,000+starsonGitHub)MeetupGroupsaroundtheworldIonicappstopappstorecharts

UsedeverywherefromFortune50co’stoYC/TechStarscompanies

WAIT,THISWHOLE"WEBTHING"AGAIN?

WETRIEDTHISBEFOREANDWERENOTIMPRESSED

JS=>NATIVE

FALLBACKTONATIVE

BUTTHEWEBHASGOTTENALOTBETTER

IONIC2Pushingwhatspossiblewiththeweb

V2GOALSSimplicityNavigationTooling

MakeNG2Easy

SIMPLICITYMakeiteasytounderstandHTML

CLASSES <a class="button button-positive"></a> <button type="button" class="btn btn-default"></button> <a class="small expanded button" href="#"></a>

<div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button>

<div class="btn-group" role="group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div></div>

CSSCLASSESCANGETCOMPLEXANDCLUTTERED

JUSTUSERAWELEMENTSEasiertounderstandandlessclutter

THESTYLESDON'TCHANGE <ion-list> <ion-list-header> Action </ion-list-header> <ion-item>Terminator II</ion-item> <ion-item>The Empire Strikes Back</ion-item> <ion-item>Blade Runner</ion-item> </ion-list>

butthemarkupbecomesmuchclearer

EQUALLYEASYTOSTYLEANDEXTEND

ion-avatar{ border-radius: 30px; } ion-card{ width: 80%; }

NAVIGATIONMorerobustandpowerful

INEEDTOOPENAMODAL,THENNAVIGATETOA

SUBVIEWIWANTTOCREATEASUBVIEWINA

SIDEMENU

V1'SROUTING.config(function($stateProvider){ $stateProvider .state('firstpage', { url:'/firstpage', templateUrl: 'firstpage.html' }) .state('secondpage', { url:'/secondpage', templateUrl: 'secondpage.html' }) .state('thirdpage', { url:'/thirdpage/:id', templateUrl: 'thirdpage.html' });});

UI-Router

DOESN'TGIVETHEFLEXIBILITYYOUWANT

Navigation:userexperienceURLsdon'tofferthat

DevelopersNEEDtobeincontrol

PUSH/POP/PARAMS import SecondPage from '../secondpage'; export class FirstPage { constructor( public nav: NavController) {}; pushState() { this.nav.push(SecondPage) }; };

FULLCONTROLPushpagesontothenavstackPoppagesoffthenavstack

Insert/Remove/UpdateCreateapphistoryfromnothingUpdatetheURLasanoption

TOOLINGFOREVERYONE

Buildingappswithnewstandards

JAVASCRIPTHASCHANGEDES6bringsmanynewfeaturesTypescriptbuildsontopofthatToolingthatIDEscanhookinto

Allofthis,helpingyoutodeveloperfaster

ES6Modular:Importwhatyouneed&and

getsridofglobalsScoping:letdefinesablock-scoped

variablePromises:Builtintothelanguagenatively

Classes:Simplersyntaxforbuildingobjects

TYPESCRIPTES6+Decorators+Types

Ionic2andNG2builtusingTSOptionalTypesforstrictercodingCodecompletioninyoureditor

ALLTHESENEWFEATURES....

BUTHOWDOISTART?

DON'TWORRY,IONIC'SGOTYOURBACK!

IonicprovidesaTypeScriptsetupYoucanjustfocusonwritingyourappAbuildsystemhandleseverythingelse!

It"justworks"™

SETUP$ NPM INSTALL -G IONIC@BETA$ IONIC START MYAPP --V2

$ CD MYAPP$ IONIC SERVE

FINALMESSAGEIonic2isreallypushingwhat

wecandowiththewebThefutureislookinggreatforweband

webtechnologiesAlwaysbetontheweb

THANKYOU!</HTML>

SAMPLEAPPIONIC.IO/2@mhartington