BUILDINGENTERPRISE APPLICATIONS

WITH ANGULARJSChristian Janz ( )@c_janz

christian.janz@bridging-it.de

Christian JanzConsultant im Bereich SoftwareentwicklungJava/JEE, Web bei in MannheimBridging IT

Twitter: | E-Mail: | Slides: | Code:

@c_janz christian.janz@bridging-it.de http://de.slideshare.net/cjanzhttps://github.com/bridgingIT/angular-seed

AgendaEnterprise ApplicationsEnterprise + JavaScript?AngularJSJavaScript ÖkosystemContinuous IntegrationFazit

EnterpriseApplications

Was ist besonders daran?

Enterprise Applicationsunterstützen kritische

Geschäftsprozesse

Hohe Komplexität

Hohe Qualitätsanforderungen

Deadlines

Enterprise +JavaScript?

“JavaScript ist doch für Animationen aufWebseiten. Damit kann man keine

professionellen Geschäftsanwendungenentwickeln.”

“Der JavaScript-Code hat keine Unit-Tests, dasgeht nicht so einfach.”

Enterprise +JavaScript!

AngularJSHTML enhanced for web apps!

JavaScript-Framework von GoogleOpen Source (MIT)MVW (Model-View-Whatever)

FeaturesModuleDependency InjectionTrennung von View und LogikData BindingErweiterung von HTMLTestability

Building BlocksModuleViewRoute DefinitionControllerServiceDirectiveFilter

DemoInterpolateFilter + Unit Test

'use strict';

angular.module('myApp.version.interpolate-filter', [])

.filter('interpolate', ['version', function(version) { return function(text) { return String(text).replace(/\%VERSION\%/mg, version); };

}]);

JavaScriptÖkosystem

Testing

Code Analysis

Package Management

Bower: Beispiel { "name": "angular-seed", "description": "A starter project for AngularJS", "version": "0.0.0", "homepage": "https://github.com/angular/angular-seed", "license": "MIT", "private": true, "dependencies": { "angular": "1.2.x", "angular-route": "1.2.x", "angular-loader": "1.2.x", "angular-mocks": "~1.2.x", "html5-boilerplate": "~4.3.0" } }

Task Runner

Demo: Gulp [22:53:53] Using gulpfile ./angular-seed/gulpfile.js [22:53:53] Starting 'test'... INFO [karma]: Karma v0.12.24 server started at http://localhost:9876/ INFO [launcher]: Starting browser Chrome INFO [Chrome 38.0.2125 (Linux)]: Connected on socket P7CU4ehH9G-nJyq-796g with id 53690621 ...... Chrome 38.0.2125 (Linux): Executed 6 of 6 SUCCESS (0.052 secs / 0.049 secs) [22:53:55] Finished 'test' after 2.27 s [22:53:55] Starting 'build'... ./angular-seed/app/view2/view2.js: line 4, col 3, Missing "use strict" statement.

1 error

events.js:72 throw er; // Unhandled 'error' event ̂ Error: JSHint failed for: ./angular-seed/app/view2/view2.js

ContinuousIntegration

Bringing it all together

Demo: Jenkins Job

Demo: Code-Analyse mitSonarQube

Fazit

Mit AngularJS könnenprofessionelle

Geschäftsanwendungenentwickelt werden

Es gibt sehr gute Werkzeuge

Bewährte Methoden lassensich übertragen

Fragen?

Bildnachweisehttps://www.flickr.com/photos/dominik99/384027019/http://cdn.playbuzz.com/cdn/8ba53e3b-5c1b-4fe0-8d93-f9586b7f4a97/73917b9f-1ced-41fd-8e97-986c8754a01c.jpghttp://commons.wikimedia.org/wiki/File:Neon_sign,_%22CHANGE%22.jpghttps://www.blossom.io/static/img/site/product-mgmt-anti-patterns/office_space.jpghttp://commons.wikimedia.org/wiki/File:Space_Shuttle_Discovery_Transport.jpghttp://blog.shoeboxed.com/4-lessons-we-can-learn-from-the-movie-office-space/