Web	Framework

AngularJS
How	to	code	today	with	tomorrow	tools
Carlo	Bonamico	-	@carlobonamico
NIS	s.r.l.
carlo.bonamico@g...
Yes	but	you	can't	do	that	in	a	web	app
Sure?	people	used	to	think	it	was	impossible	to	get
interactive	email	clients	(GMai...
OK,	wo	I	will	go	for	HTML5
to	implement	my	next	great	service/project
																										...	a	few	months	go	by...
...
Then	the	problems	begin
Initially,	it	"feels"	more	productive,	but...
When	the	app	grows,
debugging	gets	harder
refactorin...
HELP	ME!

Please,	before	I	go	back	to	Desktop	development,
can	you	tell	me	if	there	is	a	better	way?
If	I	were	to	answer	this	question	in	2008...
Almost	a	no	brainer:	go	for	Adobe	Flex!
It	has
encapsulation,	interfaces
even...
Fast-forward	to	2015...
Definitely	a	no-brainer:
go	for	Web	Components	+	event-driven	MVC
http://mozilla.github.io/brick/d...
And	now?	on	end	of	2013
Blurry	situation...
Adobe	Flex	is	Open	Source	(but	maybe	too	late...)	and	lost	support
HTML5	is	bo...
Well..
The	future	is	already	here	—	it's	just	not	very	evenly	distributed.
William	Gibson

If	the	hundred	year	language	(f...
Enter	AngularJS
Use	tomorrow	web	technologies	today

http://www.angularjs.org
And	almost	transparently	upgrade	as	soon	as	...
Robust,	productive	(&	fun!)	Web	dev
Open	Source	toolset
backed	by	Google
great,	active	and	open	community

used	from	start...
Strong	points
Angular	follows	and	ehnances	the	HTML	way	of	doing	things
declarative
interoperable
Event-driven	Model-View-...
OK,	you	are	getting	me	interested

but	I	want	proof!
Well...

OK!	THIS	presentation	is	not	PowerPoint
nor	OpenOffice	nor	Keynote
It's	an	AngularJS	app	I	wrote	in	a	few	hours

Press	F12	to	be	sure!

Thanks	http://plnkr.co	!
#
What's	inside
A	View:	index.html
a	style.css
peppered-up	with	AngularJS	'ng-something'	directives
A	model
data:	slides.md
...
The	model
			var	slide	=	{
																				number:	i	+	1,
																				title:	"Title	"	+	i,
																			...
A	service	to	load	the	model	from	markdown
				ngSlides.service('slidesMarkdownService',	function	($http)	{
				var	convert...
A	simple	declarative	view
binding	the	model	to	the	html
<body	ng-app="ngSlides"	ng-class="slides[currentSlide].background"...
A	controller	focused	on	interaction
				ngSlides.controller("presentationCtrl",	function	($scope,	$http,
																	...
Integration	with	non-angular	code
$apply	utility	function	to	notify	angular	of	changes
angular.element(	...).scope()
to	ac...
Slide	sources	in	markdown	format
slides.md
#It's	an	AngularJS	app	I	wrote	in	a	few	hours
<br/>
##	Press	F12	to	be	sure!
What's	inside	-	details
A	custom	directive
A	few	filters
AngularJS	magic
Any	sufficiently	advanced	technology	is	indistinguishable	from	magic.
Arthur	C.	Clarcke
<li	ng-repeat="sli...
AngularJS	magic	is	made	of
Dependency	Injection
makes	for	decoupling,	testability,	and	enriching	of	your
code	and	tags
		f...
AngularJS	magic	is	made	of
Transparent	navigation	and	history	with	 ng-view 	and	 ng-route
Databinding
a	few	little	tricks...
The	power	of	composition
Microkernel	architecture
core:	HTML	compiler,	Dependency	Injection,	module
system
everything	else...
Take	advantage	of	AngularJS	capabilities
Integration	with	other	frameworks
Showdon	Markdown	converter
https://github.com/c...
Testing
Unit	Testing
mocking
http	mocking
End-To-End	testing
scenarios
Jasmine
Weak	points
Even	angular	is	not	perfect...	yet!
Dynamic	page	rendering,	so	SEO	is	hard
temporary	solutions	with	PhantomJS	...
Lessons	learnt
angularJS	docs	are	great!	but	beware	of	 <ANY	ng-show="{expression}">
If	you	write	 <div	ng-show="{divEnabl...
Lessons	learnt
Getting	started	is	very	easy
But	to	go	further	you	need	to	learn	the	key	concepts
promises
dependency	injec...
Lessons	learnt
Like	all	the	magic	wands,	you	could	end	up	like	Mikey	Mouse	as	the
apprentice	sorcerer
So	get	your	training...
Lessons	learnt
AngularJS	makes	for	great	mockups
interactivity	in	plain	HTML	views
AngularJS	changes	your	way	of	working	(...
To	learn	more
Online	tutorials	and	video	trainings:
http://www.yearofmoo.com/
http://egghead.io
All	links	and	reference	fr...
Web	Components
http://www.w3.org/TR/components-intro/
Youtube	video	"Web	Components	in	Action"
http://css-tricks.com/modul...
Books
http://www.ng-book.com/
AngularJS	and	.NET	http://henriquat.re
My	current	plans
writing	about	AngularJS	and	security
attend	Marcello	Teodori	talk	on	JS	Power	Tools
integrate	AngularJS	w...
Thank	you!
Explore	these	slides
https://github.com/carlobonamico/angularjs-future-webdevelopment-slides
My	presentations
h...
AngularJS: How to code today with tomorrow tools - Codemotion Milan 2013
AngularJS: How to code today with tomorrow tools - Codemotion Milan 2013
AngularJS: How to code today with tomorrow tools - Codemotion Milan 2013
AngularJS: How to code today with tomorrow tools - Codemotion Milan 2013
AngularJS: How to code today with tomorrow tools - Codemotion Milan 2013
Upcoming SlideShare
Loading in...5
×

AngularJS: How to code today with tomorrow tools - Codemotion Milan 2013

8,042

Published on

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

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,042
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
53
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

AngularJS: How to code today with tomorrow tools - Codemotion Milan 2013

  1. 1. Web Framework AngularJS How to code today with tomorrow tools Carlo Bonamico - @carlobonamico NIS s.r.l. carlo.bonamico@gmail.com carlo.bonamico@nispro.it
  2. 2. Yes but you can't do that in a web app Sure? people used to think it was impossible to get interactive email clients (GMail) word processors and spreadsheets (GDocs) file share (Dropbox) real-time monitoring (Kibana) offline apps (Nozbe) The web is (and will always be) more powerful than people think! the same now applies to mobile web which will overcome the "desktop" web in terms of traffic next year
  3. 3. OK, wo I will go for HTML5 to implement my next great service/project ... a few months go by... WTF!! I did not think web development was could be that messy! Spaghetti code tastes better in a dynamic language such as JS I spent most of my time juggling the DOM I cannot integrate the Form widgets I love with the charts library I love Where is modularization? and encapsulation? "everything" can fiddle with "everything"...
  4. 4. Then the problems begin Initially, it "feels" more productive, but... When the app grows, debugging gets harder refactoring gets harder effective testing gets impossible When the team grows, collaboration becomes harder! every time a designer makes a beautiful look, we spend days implementing it and regression testing It's becoming impossible to evolve!
  5. 5. HELP ME! Please, before I go back to Desktop development, can you tell me if there is a better way?
  6. 6. If I were to answer this question in 2008... Almost a no brainer: go for Adobe Flex! It has encapsulation, interfaces event driven GUI modular and reusable comoponents great tooling The web platform was just not there yet...
  7. 7. Fast-forward to 2015... Definitely a no-brainer: go for Web Components + event-driven MVC http://mozilla.github.io/brick/docs.html http://www.polymer-project.org/
  8. 8. And now? on end of 2013 Blurry situation... Adobe Flex is Open Source (but maybe too late...) and lost support HTML5 is booming, but large-scale JS dev is hard But please, I HAVE to deliver a great Web App in a few months!
  9. 9. Well.. The future is already here — it's just not very evenly distributed. William Gibson If the hundred year language (from 2113) were available today, would we want to program in it? Paul Graham - http://paulgraham.com/hundred.html
  10. 10. Enter AngularJS Use tomorrow web technologies today 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
  11. 11. Robust, productive (& fun!) Web dev Open Source toolset backed by Google great, active and open community used from startups to Microsoft, Oracle & Google itself Extremely productive, robust, testable, and scalable from mockups to small apps to large enterprise apps
  12. 12. Strong points Angular follows and ehnances the HTML way of doing things declarative interoperable Event-driven Model-View-Controller plain JS models Data binding View is as decoupled as possibile from logic Great for effective Designer-Developer workflows!
  13. 13. OK, you are getting me interested but I want proof!
  14. 14. Well... OK! THIS presentation is not PowerPoint nor OpenOffice nor Keynote
  15. 15. It's an AngularJS app I wrote in a few hours Press F12 to be sure! Thanks http://plnkr.co !
  16. 16. #
  17. 17. What's inside A View: index.html a style.css peppered-up with AngularJS 'ng-something' directives A model data: slides.md code: array of slide object A controller script.js
  18. 18. The model var slide = { number: i + 1, title: "Title " + i, content: "#Title n markdown sample", html: "", background: "backgroundSlide" };
  19. 19. A service to load the model from markdown ngSlides.service('slidesMarkdownService', function ($http) { var converter = new Showdown.converter(); return { getFromMarkdown: function (path) { var slides = []; $http({method: 'GET', url: path}). success(function (data, status, headers, config) { var slidesToLoad = data.split(separator); //two dashes for (i = 0; i < slidesToLoad.length; i++) { var slide = { content: slidesToLoad[i], //.. init other slide fields }; slide.html = converter.makeHtml(slide.content); slides.push(slide); } }); return slides; } } })
  20. 20. A simple declarative view binding the model to the html <body ng-app="ngSlides" ng-class="slides[currentSlide].background" ng-controller="presentationCtrl"> <div id="slidesContainer" class="slidesContainer" > <div class="slide" ng-repeat="slide in slides" ng-show="slide.number == currentSlide" > <div ng-bind-html="slide.html"></div> <h4 class="number">{{slide.number}}</h4> </div> </div> </body> and a very simple css for positioning elements in the page
  21. 21. A controller focused on interaction 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; }; });
  22. 22. Integration with non-angular code $apply utility function to notify angular of changes angular.element( ...).scope() to access controller methods and scope outside angular document.onkeyup = KeyPressed; function KeyPressed(e) { var key = ( window.event ) ? event.keyCode : e.keyCode; var controllerElement = angular.element(document.getElementById("slidesContainer")) ; var scope = controllerElement.scope() scope.$apply(function () { switch (key) { case 39: { scope.next(); break; } //...
  23. 23. Slide sources in markdown format slides.md #It's an AngularJS app I wrote in a few hours <br/> ## Press F12 to be sure!
  24. 24. What's inside - details A custom directive A few filters
  25. 25. AngularJS magic Any sufficiently advanced technology is indistinguishable from magic. Arthur C. Clarcke <li ng-repeat="slide in slides | filter:q">...</li>
  26. 26. AngularJS magic is made of Dependency Injection makes for decoupling, testability, and enriching of your code and tags function SlidesCtrl($scope, SlidesService) { SlidesService.loadFromMarkdown('slides.md'); }
  27. 27. AngularJS magic is made of Transparent navigation and history with ng-view and ng-route Databinding a few little tricks (Dirty checking) which will disappear when the future (ECMAScript6 object.observe) arrives
  28. 28. The power of composition Microkernel architecture core: HTML compiler, Dependency Injection, module system everything else is a directive, service or module Composition of modules module('slides',['slides.markdown']) directives <h1 ng-show='enableTitle' ng-class='titleClass'>..</h1> filters slide in slides | filter:q | orderBy:title | limit:3 ... Do you know of other microkernel-based technologies with a strong focus on composition? they tend to be strong and long lived :-), right Linux, Maven, Jenkins?
  29. 29. Take advantage of AngularJS capabilities Integration with other frameworks Showdon Markdown converter https://github.com/coreyti/showdown Highlight.js for syntax highlighting plain JS for keyboard handling AngularJS is opinionated but it will let you follow a different way in case you really really need it
  30. 30. Testing Unit Testing mocking http mocking End-To-End testing scenarios Jasmine
  31. 31. Weak points Even angular is not perfect... yet! Dynamic page rendering, so SEO is hard temporary solutions with PhantomJS on the server side a few cloud-based services personally think Google is working on fixing that Tooling is good but can improve Support for lesser browser
  32. 32. Lessons learnt angularJS docs are great! but beware of <ANY ng-show="{expression}"> If you write <div ng-show="{divEnableFlag}"> It won't work! Write <div ng-show="divEnableFlag">
  33. 33. Lessons learnt Getting started is very easy But to go further you need to learn the key concepts promises dependency injection directives scopes
  34. 34. Lessons learnt Like all the magic wands, you could end up like Mikey Mouse as the apprentice sorcerer So get your training! Online Codemotion training (4-5 february and 4-5 march 2014) http://training.codemotion.it/
  35. 35. Lessons learnt AngularJS makes for great mockups interactivity in plain HTML views AngularJS changes your way of working (for the better!) let you free of concentrating on your ideas makes for a way faster development cycle makes for a way faster interaction with customer cycle essential for Continuous Delivery!
  36. 36. 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/angularjsquickstart/blob/master/references.md Full lab from my Codemotion Workshop https://github.com/carlobonamico/angularjs-quickstart
  37. 37. Web Components http://www.w3.org/TR/components-intro/ Youtube video "Web Components in Action" http://css-tricks.com/modular-future-web-components/
  38. 38. Books http://www.ng-book.com/ AngularJS and .NET http://henriquat.re
  39. 39. My current plans writing about AngularJS and security attend Marcello Teodori talk on JS Power Tools integrate AngularJS with my favourite Open Source server-side dev platform http://www.manydesigns.com/en/portofino preparing the 'Advanced AngularJS' workshop contact us if interested
  40. 40. Thank you! Explore these slides https://github.com/carlobonamico/angularjs-future-webdevelopment-slides My presentations http://slideshare.net/carlo.bonamico Follow me at @carlobonamico / @nis_srl will publish these slides in a few days Attend my Codemotion trainings http://training.codemotion.it/ Write me if you are interested in the upcoming AngularJS Italy online community and thanks to Elena Venni for the many ideas about Angular in our last project together
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×