AngularJS
HowtocodetodaywithtomorrowtoolsCarloBonamico-@carlobonamico
[email protected]@nispro.it
WebFramework
Sure?peopleusedtothinkitwasimpossibletogetinteractiveemailclients(GMail)wordprocessorsandspreadsheets(GDocs)fileshare(Dropbox)real-timemonitoring(Kibana)offlineapps(Nozbe)
Thewebis(andwillalwaysbe)morepowerfulthanpeoplethink!thesamenowappliestomobileweb
whichwillovercomethe"desktop"webintermsoftrafficnextyear
Yesbutyoucan'tdothatinawebapp
toimplementmynextgreatservice/project...afewmonthsgoby...
WTF!!Ididnotthinkwebdevelopmentwascouldbethatmessy!SpaghetticodetastesbetterinadynamiclanguagesuchasJSIspentmostofmytimejugglingtheDOMIcannotintegratetheFormwidgetsIlovewiththechartslibraryIloveWhereismodularization?andencapsulation?
"everything"canfiddlewith"everything"...
OK,woIwillgoforHTML5
Initially,it"feels"moreproductive,but...Whentheappgrows,
debugginggetsharderrefactoringgetshardereffectivetestinggetsimpossible
Whentheteamgrows,collaborationbecomesharder!everytimeadesignermakesabeautifullook,wespenddaysimplementingitandregressiontesting
It'sbecomingimpossibletoevolve!
Thentheproblemsbegin
Please,beforeIgobacktoDesktopdevelopment,canyoutellmeifthereisabetterway?
HELPME!
Almostanobrainer:goforAdobeFlex!Ithas
encapsulation,interfaceseventdrivenGUImodularandreusablecomoponentsgreattooling
Thewebplatformwasjustnotthereyet...
IfIweretoanswerthisquestionin2008...
Definitelyano-brainer:
goforWebComponents+event-drivenMVChttp://mozilla.github.io/brick/docs.htmlhttp://www.polymer-project.org/
Fast-forwardto2015...
Blurrysituation...
AdobeFlexisOpenSource(butmaybetoolate...)andlostsupportHTML5isbooming,butlarge-scaleJSdevishard
Butplease,IHAVEtodeliveragreatWebAppinafewmonths!
Andnow?onendof2013
Thefutureisalreadyhere—it'sjustnotveryevenlydistributed.WilliamGibson
Ifthehundredyearlanguage(from2113)wereavailabletoday,wouldwewanttoprograminit?
PaulGraham-http://paulgraham.com/hundred.html
Well..
Usetomorrowwebtechnologiestoday
http://www.angularjs.org
Andalmosttransparentlyupgradeassoonastheyareavailablehttp://www.2ality.com/2013/05/web-components-angular-ember.html
EnterAngularJS
OpenSourcetoolsetbackedbyGoogle
great,activeandopencommunity
usedfromstartupstoMicrosoft,Oracle&Googleitself
Extremelyproductive,robust,testable,andscalablefrommockupstosmallappstolargeenterpriseapps
Robust,productive(&fun!)Webdev
AngularfollowsandehnancestheHTMLwayofdoingthingsdeclarativeinteroperable
Event-drivenModel-View-ControllerplainJSmodels
Databinding
ViewisasdecoupledaspossibilefromlogicGreatforeffectiveDesigner-Developerworkflows!
Strongpoints
butIwantproof!
OK,youaregettingmeinterested
OK!THISpresentationisnotPowerPointnorOpenOfficenorKeynote
Well...
PressF12tobesure!
Thankshttp://plnkr.co!
It'sanAngularJSappIwroteinafewhours
#
AView:index.htmlastyle.css
peppered-upwithAngularJS'ng-something'directivesAmodel
data:slides.mdcode:arrayofslideobject
Acontrollerscript.js
What'sinside
varslide={number:i+1,title:"Title"+i,content:"#Title\nmarkdownsample",html:"",background:"backgroundSlide"};
Themodel
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;}}})
Aservicetoloadthemodelfrommarkdown
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
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
$applyutilityfunctiontonotifyangularofchangesangular.element(...).scope()
toaccesscontrollermethodsandscopeoutsideangulardocument.onkeyup=KeyPressed;
functionKeyPressed(e){varkey=(window.event)?event.keyCode:e.keyCode;
varcontrollerElement=angular.element(document.getElementById("slidesContainer"));varscope=controllerElement.scope()
scope.$apply(function(){switch(key){case39:{scope.next();break;}//...
Integrationwithnon-angularcode
slides.md
#It'sanAngularJSappIwroteinafewhours<br/>##PressF12tobesure!
Slidesourcesinmarkdownformat
AcustomdirectiveAfewfilters
What'sinside-details
Anysufficientlyadvancedtechnologyisindistinguishablefrommagic.ArthurC.Clarcke
<ling-repeat="slideinslides|filter:q">...</li>
AngularJSmagic
DependencyInjectionmakesfordecoupling,testability,andenrichingofyourcodeandtags
functionSlidesCtrl($scope,SlidesService){SlidesService.loadFromMarkdown('slides.md');}
AngularJSmagicismadeof
Transparentnavigationandhistorywith ng-view and ng-routeDatabinding
afewlittletricks(Dirtychecking)whichwilldisappearwhenthefuture(ECMAScript6object.observe)arrives
AngularJSmagicismadeof
Microkernelarchitecturecore:HTMLcompiler,DependencyInjection,modulesystemeverythingelseisadirective,serviceormodule
Compositionofmodulesmodule('slides',['slides.markdown'])directives<h1ng-show='enableTitle'ng-class='titleClass'>..</h1>filtersslideinslides|filter:q|orderBy:title|limit:3...
Doyouknowofothermicrokernel-basedtechnologieswithastrongfocusoncomposition?
theytendtobestrongandlonglived:-),rightLinux,Maven,Jenkins?
Thepowerofcomposition
IntegrationwithotherframeworksShowdonMarkdownconverterhttps://github.com/coreyti/showdownHighlight.jsforsyntaxhighlightingplainJSforkeyboardhandling
AngularJSisopinionatedbutitwillletyoufollowadifferentwayincaseyoureallyreallyneedit
TakeadvantageofAngularJScapabilities
UnitTestingmockinghttpmocking
End-To-Endtestingscenarios
Jasmine
Testing
Evenangularisnotperfect...yet!Dynamicpagerendering,soSEOishard
temporarysolutionswithPhantomJSontheserversideafewcloud-basedservicespersonallythinkGoogleisworkingonfixingthat
ToolingisgoodbutcanimproveSupportforlesserbrowser
Weakpoints
angularJSdocsaregreat!butbewareof<ANYng-show="{expression}">Ifyouwrite<divng-show="{divEnableFlag}">
Itwon'twork!Write<divng-show="divEnableFlag">
Lessonslearnt
GettingstartedisveryeasyButtogofurtheryouneedtolearnthekeyconcepts
promisesdependencyinjectiondirectivesscopes
Lessonslearnt
Likeallthemagicwands,youcouldenduplikeMikeyMouseastheapprenticesorcererSogetyourtraining!
OnlineCodemotiontraining(4-5februaryand4-5march2014)http://training.codemotion.it/
Lessonslearnt
AngularJSmakesforgreatmockupsinteractivityinplainHTMLviews
AngularJSchangesyourwayofworking(forthebetter!)letyoufreeofconcentratingonyourideasmakesforawayfasterdevelopmentcyclemakesforawayfasterinteractionwithcustomercycleessentialforContinuousDelivery!
Lessonslearnt
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
http://www.w3.org/TR/components-intro/Youtubevideo"WebComponentsinAction"http://css-tricks.com/modular-future-web-components/
WebComponents
http://www.ng-book.com/AngularJSand.NEThttp://henriquat.re
Books
writingaboutAngularJSandsecurityattendMarcelloTeodoritalkonJSPowerToolsintegrateAngularJSwithmyfavouriteOpenSourceserver-sidedevplatform
http://www.manydesigns.com/en/portofinopreparingthe'AdvancedAngularJS'workshop
contactusifinterested
Mycurrentplans
Exploretheseslideshttps://github.com/carlobonamico/angularjs-future-web-development-slides
Mypresentationshttp://slideshare.net/carlo.bonamico
Followmeat@carlobonamico/@nis_srlwillpublishtheseslidesinafewdays
AttendmyCodemotiontrainingshttp://training.codemotion.it/
WritemeifyouareinterestedintheupcomingAngularJSItalyonlinecommunity
andthankstoElenaVenniforthemanyideasaboutAngularinourlastprojecttogether
Thankyou!
