2. Common Web Architecture Styles
08.07.2014 The Next Big Thing?2
► Server-Side Web Frameworks
> JSF
> JSP
> Wicket
> GWT
> Struts
> …
► Portal Server
► CMS-Based Architecture
3. Server-Side Web Frameworks
08.07.2014 The Next Big Thing?3
Web Container
Servlet Container
Web Framework
EJB Container
…
http://...
Roundtrip for each
Change in the GUI!
Server Load!
Potentially Unresponsive
4. Portal Server
08.07.2014 The Next Big Thing?4
Portlet Container
http://...
Web Container
Portlet 1
Servlet Container
Web Framework
EJB Container
…
Portlet 2
Servlet Container
Web Framework
EJB Container
…
Portlet
Servlet Container
Web Framework
EJB Container
…
Yay! More Server Load!
5. CMS-Based Architecture
08.07.2014 The Next Big Thing?5
CMS-Server
Content
Application Server
Content
Web-Framework
Adapter
Editor
Export
End User
Do-It-Yourself-Framework!
Same Problems as with
Web-Frameworks
8. Which Styles are Practiced?
08.07.2014 The Next Big Thing?8
28%
2013
25 %
2011
20 %
2009
Portal-Based
CMS-Based
Server-Side Web
Framework
JavaScript-Based
18 %
2007
Diagrams show number of project descriptions in skill profiles at adesso AG containing one of the following keywords:
JSP, Spring MVC, Wicket, JSF, JavaScript, FirstSpirit, Portlet, Struts, GWT
9. Which Languages are en vogue?
08.07.2014 The Next Big Thing?9
0
50000
100000
150000
200000
250000
300000
JavaScript Ruby Java PHP Python
# of Github Repositories Created in 2013
http://adambard.com/blog/top-github-languages-for-2013-so-far/
10. Revolution?
08.07.2014 The Next Big Thing?10
► The era of Server-Side Web
Architectures is not quite over,
but we‘re getting there
► JavaScipt might rule some day
► How can we rule JavaScript?
11. How can we rule JavaScript?
08.07.2014 The Next Big Thing?11
12. AngularJS – Hello World
08.07.2014 The Next Big Thing?12
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8"/>
<title>AngularJS Sandbox</title>
</head>
<body ng-init="name='AngularJS'">
<h1>Hello {{ name }}</h1>
<input type="text" ng-model="name"/>
<script src="lib/angular/angular.min.js"></script>
</body>
</html>
14. An AngularJS Application
'use strict';
// Declare app level module which depends on filters, and services
angular.module('myApp', [
'ngRoute',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl:
'partials/partial1.html', controller: 'MyCtrl1'});
$routeProvider.when('/view2', {templateUrl:
'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
08.07.2014 The Next Big Thing?14
Clean Code!
Declare an
Angular Module
Declare
Dependencies
Configure different
routes with a
Controller each
Inject the
RouteProvider
15. An AngularJS Layout Template
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
…
</head>
<body>
…
<div ng-view></div>
…
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-
route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
08.07.2014 The Next Big Thing?15
Bind the Angular
module to an
HTML element
Include Your
Angular modules
/ components
Display a
(Dynamically
Changing) View
16. An AngularJS Controller
var module = angular.module('myApp.controllers', []);
module.controller('MyCtrl1', ['$scope', function($scope) {
$scope.book = {
title : 'AngularJS',
subtitle : 'Eine praktische Einführung in das
Javascript-Framework'
};
}]);
08.07.2014 The Next Big Thing?16
Define the GUI
Model
Register the
Controller
17. An AngularJS View Template
<p>This is the partial for /view1.</p>
<h1>Book Details</h1>
<ul>
<li>Title: {{ book.title }}</li>
<li>Subtitle: {{ book.subtitle }}</li>
</ul>
08.07.2014 The Next Big Thing?17
Placeholder for
Scope Variable
18. An AngularJS Service
var module = angular.module('myApp.services', []);
module.service('version', function(){
// Public API
return {
getVersion: function(){
return '0.1';
}
};
});
module.constant('version', '0.1');
// other possible service declarations:
module.factory(...);
module.provider(...);
module.value(...);
08.07.2014 The Next Big Thing?18
Declare a Service
API
Declare a
Constant
Different Declaration Styles
for different use cases
19. An AngularJS Directive
angular.module('myApp.directives', []).
directive('appVersion', ['version',
function(version) {
return function(scope, element, attrs) {
element.text(version);
};
}]);
<div>
Current Version: v<span app-version></span>
</div>
08.07.2014 The Next Big Thing?19
Injection of
„version“ Service
Modify the content
of an HTML element
Apply directive to
<span> element
20. An AngularJS Display Filter
angular.module('myApp.filters', []).
filter('replaceVersion', ['version', function(version) {
return function(text) {
return String(text).replace(/%VERSION%/mg, version);
};
}]);
<p>
Result of 'interpolate' filter:
{{ 'Current version is v%VERSION%.' | replaceVersion }}
</p>
08.07.2014 The Next Big Thing?20
Register filter
named
„replaceVersion“
Inject „version“
Service
Apply filter
21. AngularJS – „End To End“ Testing
describe("Book details view test", function () {
beforeEach(function () {
browser().navigateTo("/");
});
it("should show the correct book details"), function(){
browser().navigateTo("#/books/123");
expect(element(".book-title").html()).toBe("AngularJS");
};
});
08.07.2014 The Next Big Thing?21
Precondition for all
test cases
Navigate to a View
Assert correct state
22. AngularJS – Conclusion
► Complex Eco-System
> Jasmine
> Protractor
> Bower
> NodeJS
> Karma
> …
► Hard to structure the building blocks within an Angular App for Beginners (see
http://jan.varwig.org/archive/angularjs-views-vs-directives)
► Easy to integrate with other frameworks (server-side and client-side)
08.07.2014 The Next Big Thing?22
23. AngularJS - Links
► Tutorial: https://docs.angularjs.org/tutorial/
► Project Template: https://github.com/angular/angular-seed
► API Documentation: https://docs.angularjs.org/api
08.07.2014 The Next Big Thing?23
Editor's Notes
What is the alternative?
A module can contain other Angular components like filters, services, directives and controllers
A module can declare dependencies to other modules
Multiple ng-views? No, but you can nest views with the UI-Router module
But you should not nest views but use directives instead
Controller should access services to get GUI Model values
Service can access a backend
You can do much more with directive
Create your own GUI widgets as HTML-elements!
Or use the many provided directives like form, input and the like
You can do much more with directive
Create your own GUI widgets as HTML-elements!
Or use the many provided directives like form, input and the like
Services etc. can be mocked for tests
Also unit tests can be made for Angular components without HTML views
Live Demo of angular-seed project template
Easy integration: Angular can be attached to any part of the DOM and leave the rest of the DOM in peace
Angular JS Training at adesso is on the way