View
1.715
Download
7
Category
Preview:
DESCRIPTION
Discussion of the disadvantages of server-side web architectures and introduction to AngularJS as an alternative.
Citation preview
11.04.2023
The Next Big Thing?JavaScript in Modern Web Architectures
Tom Hombergs
11.04.2023 The Next Big Thing?2
Common Web Architecture Styles
► Server-Side Web Frameworks> JSF> JSP> Wicket> GWT> Struts> …
► Portal Server
► CMS-Based Architecture
11.04.2023 The Next Big Thing?3
Server-Side Web Frameworks
Web Container
Servlet Container
Web Framework
EJB Container
…
http://...
Roundtrip for each Change in the GUI!
Server Load!
Potentially Unresponsive
11.04.2023 The Next Big Thing?4
Portal Server
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!
11.04.2023 The Next Big Thing?5
CMS-Based Architecture
CMS-Server
Content
Application Server
Content
Web-Framework
Adapter
Editor
Export
End User
Do-It-Yourself-Framework!
Same Problems as with Web-Frameworks
11.04.2023 The Next Big Thing?6
Revolution?
Abolish Server Side Web Architectures
11.04.2023 The Next Big Thing?7
Alternative: JavaScript-Based Architecture
GUI logic where it belongs
No JavaScript abstraction
11.04.2023 The Next Big Thing?8
Which Styles are Practiced?
28%
2013
25 %
2011
20 %
2009
Portal-BasedCMS-BasedServer-Side Web FrameworkJavaScript-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
11.04.2023 The Next Big Thing?9
Which Languages are en vogue?
JavaScript Ruby Java PHP Python0
50000
100000
150000
200000
250000
300000
# of Github Repositories Created in 2013
http://adambard.com/blog/top-github-languages-for-2013-so-far/
11.04.2023 The Next Big Thing?10
Revolution?
► 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.04.2023 The Next Big Thing?11
How can we rule JavaScript?
11.04.2023 The Next Big Thing?12
AngularJS – Hello World
<!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>
11.04.2023 The Next Big Thing?13
AngularJS – What it is about
11.04.2023 The Next Big Thing?14
An AngularJS Application
'use strict';// Declare app level module which depends on filters, and servicesangular.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'});}]);
Clean Code!
Declare an Angular Module
Declare Dependencies
Configure different routes with a
Controller each
Inject the RouteProvider
11.04.2023 The Next Big Thing?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>
Bind the Angular module to an
HTML element
Include Your Angular
modules / components
Display a (Dynamically
Changing) View
11.04.2023 The Next Big Thing?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'};
}]);
Define the GUI Model
Register the Controller
11.04.2023 The Next Big Thing?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>
Placeholder for Scope Variable
11.04.2023 The Next Big Thing?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(...);
Declare a Service API
Declare a Constant
Different Declaration Styles for different use cases
11.04.2023 The Next Big Thing?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>
Injection of „version“ Service
Modify the content of an HTML element
Apply directive to <span> element
11.04.2023 The Next Big Thing?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>
Register filter named
„replaceVersion“Inject „version“
Service
Apply filter
11.04.2023 The Next Big Thing?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");
};
});
Precondition for all test cases
Navigate to a View
Assert correct state
11.04.2023 The Next Big Thing?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)
11.04.2023 The Next Big Thing?23
AngularJS - Links
► Tutorial: https://docs.angularjs.org/tutorial/
► Project Template: https://github.com/angular/angular-seed
► API Documentation: https://docs.angularjs.org/api
Recommended