Offshore AngularJS- development- Hire-AngularJS-Developers- Outsource-AngularJS-Development
Mobile HTML5 websites and Hybrid Apps with AngularJS
-
Upload
carlo-bonamico -
Category
Software
-
view
2.900 -
download
3
description
Transcript of Mobile HTML5 websites and Hybrid Apps with AngularJS
![Page 1: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/1.jpg)
MobileHTML5websitesandHybridAppswithAngularJS
Howtocodetodaywithtomorrowtools-mobileeditionCarloBonamico-@carlobonamico
NISs.r.l.
Web
0
![Page 2: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/2.jpg)
AngularJSletsyouusetodaythefeaturesofnext-generationwebstandards,
makingfront-enddevelopmentmoreproductiveandfunWhat'sbetter,itprovidesits"magic"toolstobothwebANDmobileapps
databinding,dependencyinjectionmodularity,composableandevent-drivenarchitecture
This code-based interactivetalkwillsharesomelessonslearned
howtostructureapplicationstunebandwidthandperformanceinteractwithmobile-specificelementssuchastouch,sensorsnative-lookingUXwithIonicFramework
Inshort
1
![Page 3: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/3.jpg)
Idonotwanttojointhefight;-)
Thewebtendstoalwaysbemorepowerfulthanpeoplethink!andthegapwithnativewillonlybecomesmallerwithtime
Therearemanyusecasesforweb-basedsitesandhybridapps(HTML5packedinanapp)
avoidinginstallondeviceensuringalwayslatestversionplatformsupport:iOS,Android,WindowsPhone...easierandmorefamiliardevelopmentworkflow
Andmyfavorite...touseAngularmagic!
WebvsNative
2
![Page 4: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/4.jpg)
OpenSourceframweworkfast-growinggreatcommunity
http://www.angularjs.org
LetsyouadoptfuturewebarchitectureandtoolstodayanticipateWebComponentsandEcmaScript6
Createmodular,robust,testableapps
SowhyAngularJS
3
![Page 5: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/5.jpg)
DependencyInjectionsplitcomponentdefinitionfromcomponentwiring
Modulecompositione.g.commonmodulesmobile-onlycomponentsdesktop-onlycomponents
Whatyouget:writelesscode,reusemorethecodeyouwrite!
Angulargivesstructureandmodularity
4
![Page 6: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/6.jpg)
...isn'taweb/JSMobileappunusablyslow?
Let'stry...
ThispresentationisanAngular-basedSinglePageApplication
NowwelaunchitonaphoneandexploreitwithChromeusbdebugging
But...
5
![Page 7: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/7.jpg)
about:inspect
enableportforwardingfromlaptoptophoneopen http://localhost:8000 onthephone
Discoveringthedevice
6
![Page 8: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/8.jpg)
MonitoringCPUusageandFPS
7
![Page 9: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/9.jpg)
Inspectingthepageonthephone
8
![Page 10: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/10.jpg)
AView:index.htmlastyle.css
peppered-upwithAngularJS'ng-something'directivesAmodel
data:slides.mdcode:arrayofslideobject
Acontrollerscript.js
What'sinside
9
![Page 11: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/11.jpg)
varslide={number:i+1,title:"Title"+i,content:"#Title\nmarkdownsample",html:"",background:"backgroundSlide"};
Themodel
10
![Page 12: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/12.jpg)
ngSlides.service('slidesMarkdownService',function($http){varconverter=newShowdown.converter();return{getFromMarkdown:function(path){varslides=[];
$http({method:'GET',url:path}).success(function(data,status,headers,config){varslidesToLoad=data.split(separator);//twodashesfor(i=0;i<slidesToLoad.length;i++){varslide={content:slidesToLoad[i],//..initotherslidefields};slide.html=converter.makeHtml(slide.content);slides.push(slide);}});returnslides;}}})
Aservicetoloadslidesfrommarkdown
11
![Page 13: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/13.jpg)
bindingthemodeltothehtml
<bodyng-app="ngSlides"ng-class="slides[currentSlide].background"ng-controller="presentationCtrl">
<divid="slidesContainer"class="slidesContainer"><divclass="slide"ng-repeat="slideinslides"ng-show="slide.number==currentSlide">
<divng-bind-html="slide.html"></div>
<h4class="number">{{slide.number}}</h4>
</div>
</div></body>
andaverysimplecssforpositioningelementsinthepage
Asimpledeclarativeview
12
![Page 14: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/14.jpg)
ngSlides.controller("presentationCtrl",function($scope,$http,$rootScope,slidesMarkdownService){
$scope.slides=slidesMarkdownService.getFromMarkdown('slides.md');
$scope.currentSlide=0;
$scope.next=function(){$scope.currentSlide=$scope.currentSlide+1;
};
$scope.previous=function(){$scope.currentSlide=$scope.currentSlide-1;};
});
Acontrollerfocusedoninteraction
13
![Page 15: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/15.jpg)
Anysufficientlyadvancedtechnologyisindistinguishablefrommagic.ArthurC.Clarcke
Addsearchwithintheslidesinoneline
<divng-repeat="slideinslides|filter:q">...</div>
whereqisavariablecontainingthesearchkeyword
AngularJSmagic
14
![Page 16: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/16.jpg)
Two-wayDatabindingsplittheviewfromthelogic {{slide.number}}
DependencyInjectiongivesdecoupling,testability&enrichingofcodeandtags
functionSlidesCtrl($scope,SlidesService){SlidesService.loadFromMarkdown('slides.md');}
Thepowerofcomposition-ofmodulesmodule('slides',['slides.markdown'])directives<h1ng-show='enableTitle'ng-class='titleClass'>..</h1>filtersslideinslides|filter:q|orderBy:title|limit:3...
AngularJSmagicismadeof
15
![Page 17: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/17.jpg)
Butwhat'smoreimportant,less"lowvalue"codemorereadablecode
Soyoucanconcentrateonyourapplicationidea
AngularJSisopinionatedbutitwillletyoufollowadifferentwayincaseyoureallyneedit
SoAngularletyouwritelesscode
16
![Page 18: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/18.jpg)
SpeedcanmeanmanythingsUXspeedvsprocessingspeed
databindingletsyoueasilydisplaydataprogressivelyclient-siderichmodelsandfilteringletyourespondquicklytouserinput
networkdelaysvsappresponsetimes
Butthechallengeisn'tjustbeingperformantBeinganawesomemobileapp
handlegesturesrespectuserexpectations(e.g.swipeablecards)managenavigationmanageappstateandoff-lineavailability
So,backtoourmobileapps...
17
![Page 19: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/19.jpg)
reduceDOMmanipulationusesimplemarkupmoveallstylingtoCSS
noJSAnimation,useCSS3HWacceleratedtransitions
optimizeyourdatabindingshttps://www.exratione.com/2013/12/considering-speed-and-slowness-in-angularjs/
bindonceandtargetedbindingshttps://github.com/Pasvaz/bindonce
PerformanceTips
18
![Page 20: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/20.jpg)
TunewithAngularJSBataranghttps://github.com/angular/angularjs-batarang
PerformanceTuning
19
![Page 21: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/21.jpg)
Thebiggestcostisopeningaconnection,nottransferringfiles
useHTTPKeep-aliveenableGZipcompressionhttps://developers.google.com/speed/pagespeed/module
LocalmanipulationofdatagreatlyreducesnetworktrafficLocalDBandsync
Bandwidthoptimizations
20
![Page 22: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/22.jpg)
Moduleng-touchfastclick:eliminatethe300msdelayeasilymanageswipes <divng-swipe-left="next()">
foradvancedcases:ionic-gestureshammer.js
SupportTouchandGestures
21
![Page 23: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/23.jpg)
OnthedeviceSessionstorageLocalstoragelawnchairPouchDBhttp://pouchdb.com/
InthecloudMongolabhttp://mongolab.comFirebasewithAngularFirehttps://www.firebase.comBaasBoxhttp://www.baasbox.com
Storingstate
22
![Page 24: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/24.jpg)
HTML5standardAPIssupportonlysomesensorslocation(verygoodsupport)orientationacceleration
AdditionalsensorsrequirethePhoneGapAPIs
needtowrapallcallbackswith$apply()orbetter,adedicatedservice
tonotifyAngularofchangesoccurredoutofitslifecycle
Managingsensors
23
![Page 25: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/25.jpg)
Chromeremotedebuggingandscreencasthttps://developers.google.com/chrome-developer-tools/docs/remote-debugging
chrome://inspect/#devices
Emulatedeviceresolutions,DPIs,sensors:ChromeemulatorRippleEmulatorhttp://emulate.phonegap.com
Howtodevelopformobile?
24
![Page 26: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/26.jpg)
Development-timestructuremultiplefilescomponent/dependencymanagers(bower...)
Compile-timestructurelimitednumberoffilesconcatenationminification
UseatoolchainMarcelloTeodori'stalkonJSPowerTools
Issues
25
![Page 27: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/27.jpg)
firstphase:prototypingonaDesktopbrowsersecondphase:unittesting
wayeasierwithAngularJSthirdphase:ondevicetesting
Chromeon-devicedebugging
Testablemobileapps?
26
![Page 28: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/28.jpg)
Phonegaphttp://phonegap.com/https://cordova.apache.org/
PhonegapBuildhttp://build.phonegap.com
ChromeAppsforMobilehttp://blog.chromium.org/2014/01/run-chrome-apps-on-mobile-using-apache.html
Packagingappsformarkets
27
![Page 29: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/29.jpg)
CordovaBrowseryouinstallitonceandopenyourcodeonyourwebservercontinuousrefreshwithoutreinstallingtheapp
Developmenttips
28
![Page 30: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/30.jpg)
orbettertheUX-UserExperience?Comparingmobilewebframeworks
http://moduscreate.com/5-best-mobile-web-app-frameworks-ionic-angulalrjs/
JQueryMobilewidgets-onlyDOM-heavvyAngularintegrationisnotsimple(differentlifecycles)atmost,JQMobileforCSSandAngularfornavigationandlogic
WhatabouttheUI?
29
![Page 31: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/31.jpg)
AngularJS-based,OpenSourceperformanceobsessedmobile-lookingextensible
http://ionicframework.com/http://ionicframework.com/getting-started/http://ionicframework.com/docs/guide/
EnterIonicFramework
30
![Page 32: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/32.jpg)
IonicCSSIonicIconsIonicDirectives
andsupportTooling
What'sinside?
31
![Page 33: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/33.jpg)
elegantyetverylightweight
<divclass="list"><divclass="itemitem-divider">CandyBars</div><aclass="item"href="#">Butterfinger</a></div>
http://ionicframework.com/docs/
3Danimations,HWaccelerated
sass-basedforcustomtheming500freeicons(ionicons)
IonicCSS
32
![Page 34: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/34.jpg)
mobilenavigationandinteractions
<ion-list><ion-itemng-repeat="iteminitems"item="item"can-swipe="true"option-buttons="itemButtons"></ion-item></ion-list>
servicesforgesturesnavigation
http://ionicframework.com/docs/api
IonicDirectives
33
![Page 35: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/35.jpg)
http://plnkr.co/edit/Mcw6F2BQP3RbB8ZhBYRl?p=preview
Let'splayaround...(withLiveReload)
34
![Page 36: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/36.jpg)
basedonUI-Routerhttp://angular-ui.github.io/ui-router
sub-views(e.g.Tabs)per-viewnavigationhistory
UIGalleryhttp://ionicframework.com/present-ionic/slides/#/16
Navigation
35
![Page 37: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/37.jpg)
PhoneGapbasedbuildchain
$npm-ginstallionic$ionicstartmyApptabs
$cdmyApp$ionicplatformaddios$ionicbuildios$ionicemulateios
IonicTooling
36
![Page 38: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/38.jpg)
AngularJS2.0willbeMobileFirstperformancebrowsersupporthttp://blog.angularjs.org/2014/03/angular-20.html
WebComponentsonMobile
EcmaScript6- Object.observe() ->ultrafastbinding
TheFuture
37
![Page 39: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/39.jpg)
AngularJScanbeviableonmobileinteractivityinplainHTML5views
AngularJSchangesyourwayofworking(forthebetter!)letyoufreeofconcentratingonyourideasmakesforawayfasterdevelopmentcyclemakesforawayfasterinteractionwithcustomercycleessentialforContinuousDelivery!
Lessonslearnt
38
![Page 40: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/40.jpg)
Likeallthemagicwands,youcouldenduplikeMikeyMouseastheapprenticesorcererGettingstartedisveryeasyButtogofurtheryouneedtolearnthekeyconcepts
scopesdependencyinjectiondirectivespromises
Sogetyourtraining!Codemotiontraining(june2014)http://training.codemotion.it/
NEW!AdvancedAngularJScoursecominginJuly-September2014
Lessonslearnt
39
![Page 41: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/41.jpg)
Bookshttp://www.ng-book.com/-Recommended!AngularJSand.NEThttp://henriquat.re
Onlinetutorialsandvideotrainings:http://www.yearofmoo.com/http://egghead.io
AlllinksandreferencefrommyCodemotionWorkshophttps://github.com/carlobonamico/angularjs-quickstarthttps://github.com/carlobonamico/angularjs-quickstart/blob/master/references.md
FulllabfrommyCodemotionWorkshophttps://github.com/carlobonamico/angularjs-quickstart
Tolearnmore
40
![Page 42: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/42.jpg)
OptimizingAngularJSformobilehttp://blog.revolunet.com/angular-for-mobilehttp://www.ng-newsletter.com/posts/angular-on-mobile.htmlhttps://www.youtube.com/watch?v=xOAG7Ab_Oz0http://www.bennadel.com/blog/2492-What-A-Select-watch-Teaches-Me-About-ngModel-And-AngularJS.htm
WebComponentshttp://mozilla.github.io/brick/docs.htmlhttp://www.polymer-project.org/
Evenmore
41
![Page 43: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/43.jpg)
Exploretheseslideshttps://github.com/carlobonamico/mobile-html5-websites-and-hybrid-apps-with-angularjshttps://github.com/carlobonamico/angularjs-future-web-development-slides
Mypresentationshttp://slideshare.net/carlo.bonamico
Followmeat@carlobonamico/@nis_srlwillpublishtheseslidesinafewdays
AttendmyCodemotiontrainingshttp://training.codemotion.it/
Thankyou!
42
![Page 44: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/44.jpg)
![Page 45: Mobile HTML5 websites and Hybrid Apps with AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022042623/53fde5558d7f72a81c8b4bae/html5/thumbnails/45.jpg)