Embed Size (px)
DESCRIPTION
Many popular online services have demonstrated the power of javascript, html5 and mobile technologies. However, designing, implementing & maintaining a rich application for both web and mobile browsers is a challenging task given the characteristics of javascript. We will share our real-world experience with AngularJS – an open source, robust and brilliantly usable tool which will make your app mobile and designer-friendly, extremely modular and reusable (with Dependency Injection!), and even easily testable (in javascript!), in less than half the code. Expect few slides and lots of code samples and tips from our project experiences. References: http://mozilla.github.io/brick/docs.html http://www.polymer-project.org/ If the hundred year language (from 2113) were available today, would we want to program in it? Paul Graham http://paulgraham.com/hundred.html Enter AngularJS http://www.angularjs.org And almost transparently upgrade as soon as they are available http://www.2ality.com/2013/05/web-components-angular-ember.html Play with AngularJS online Thanks http://plnkr.co So get your training! Codemotion training (4-5 february and 4-5 march 2014) http://training.codemotion.it/ To learn more Online tutorials and video trainings: http://www.yearofmoo.com/ http://egghead.io All links and reference from my Codemotion Workshop https://github.com/carlobonamico/angularjs-quickstart https://github.com/carlobonamico/angularjs-quickstart/blob/master/references.md Full lab from my Codemotion Workshop https://github.com/carlobonamico/angularjs-quickstart Web Components http://www.w3.org/TR/components-intro Youtube video "Web Components in Action" http://css-tricks.com/modular-future-web-components Books http://www.ng-book.com AngularJS and .NET http://henriquat.re My current plans integrate AngularJS with my favourite Open Source server-side dev platform http://www.manydesigns.com/en/portofino Thank you! Explore these slides https://github.com/carlobonamico/angularjs-future-web-development-slides My presentations http://slideshare.net/carlo.bonamico https://twitter.com/carlobonamico
Citation preview
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!
