Date post: | 09-Jan-2017 |
Category: |
Technology |
Upload: | mike-hartington |
View: | 144 times |
Download: | 3 times |
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