23
20.06.2022 The Next Big Thing? JavaScript in Modern Web Architectures Tom Hombergs

AngularJS - The Next Big Thing?

Embed Size (px)

DESCRIPTION

Discussion of the disadvantages of server-side web architectures and introduction to AngularJS as an alternative.

Citation preview

Page 1: AngularJS - The Next Big Thing?

11.04.2023

The Next Big Thing?JavaScript in Modern Web Architectures

Tom Hombergs

Page 2: AngularJS - The Next Big Thing?

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

Page 3: AngularJS - The Next Big Thing?

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

Page 4: AngularJS - The Next Big Thing?

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!

Page 5: AngularJS - The Next Big Thing?

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

Page 6: AngularJS - The Next Big Thing?

11.04.2023 The Next Big Thing?6

Revolution?

Abolish Server Side Web Architectures

Page 7: AngularJS - The Next Big Thing?

11.04.2023 The Next Big Thing?7

Alternative: JavaScript-Based Architecture

GUI logic where it belongs

No JavaScript abstraction

Page 8: AngularJS - The Next Big Thing?

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

Page 9: AngularJS - The Next Big Thing?

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/

Page 10: AngularJS - The Next Big Thing?

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?

Page 11: AngularJS - The Next Big Thing?

11.04.2023 The Next Big Thing?11

How can we rule JavaScript?

Page 12: AngularJS - The Next Big Thing?

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>

Page 13: AngularJS - The Next Big Thing?

11.04.2023 The Next Big Thing?13

AngularJS – What it is about

Page 14: AngularJS - The Next Big Thing?

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

Page 15: AngularJS - The Next Big Thing?

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

Page 16: AngularJS - The Next Big Thing?

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

Page 17: AngularJS - The Next Big Thing?

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

Page 18: AngularJS - The Next Big Thing?

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

Page 19: AngularJS - The Next Big Thing?

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

Page 20: AngularJS - The Next Big Thing?

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

Page 21: AngularJS - The Next Big Thing?

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

Page 22: AngularJS - The Next Big Thing?

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)

Page 23: AngularJS - The Next Big Thing?

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