AngularJS

HowtocodetodaywithtomorrowtoolsCarloBonamico-@carlobonamico

NISs.r.l.carlo.bonamico@gmail.comcarlo.bonamico@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!