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

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. 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. 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. 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. HELP ME!
Please, before I go back to Desktop development,
can you tell me if there is a better way?

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. 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. 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. 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. 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. 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. 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. OK, you are getting me interested
but I want proof!

14. Well...
OK! THIS presentation is not PowerPoint
nor OpenOffice nor Keynote

15. It's an AngularJS app I wrote in a few hours
Press F12 to be sure!
Thanks http://plnkr.co !

16. #

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. The model
var slide = {
number: i + 1,
title: "Title " + i,
content: "#Title n markdown sample",
html: "",
background: "backgroundSlide"
};

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. 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. 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. 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. 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. What's inside - details
A custom directive
A few filters

25. AngularJS magic
Any sufficiently advanced technology is indistinguishable from magic.
Arthur C. Clarcke
<li ng-repeat="slide in slides | filter:q">...</li>

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. 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. 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. 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. Testing
Unit Testing
mocking
http mocking
End-To-End testing
scenarios
Jasmine

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. 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. Lessons learnt
Getting started is very easy
But to go further you need to learn the key concepts
promises
dependency injection
directives
scopes

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. 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. 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. Web Components
http://www.w3.org/TR/components-intro/
Youtube video "Web Components in Action"
http://css-tricks.com/modular-future-web-components/

38. Books
http://www.ng-book.com/
AngularJS and .NET http://henriquat.re

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. 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