Karlsruher Entwicklertag 2013

Web Applications with

Philipp BurgmerSenior Software Engineer / ConsultantWeigleWilczek GmbHburgmer@w11k.comFocus: Frontend, Web Technologies

About Me

WeigleWilczek / W11kSoftware Design, Development & MaintenanceConsulting and Coaching

Web ApplicationsEclipse RCPJava / JVM

About Us

GWTUI in Java / XMLhard to use JS libs / scatters ui logic"Java World" instead of "Web World"

JSFUI on Servera lot HTTP requests just to update UIhard to use JS libs / scatters ui logic

Flexbased on FlashAdobe discontinues developementMXML and ActionScript instead of HTML and JavaScript

Web Apps until now

Frontend runs completely in the browserStateful UI, stateless serverServer delivers static resourcesServer delivers dynamic dataHTML, CSS and JavaScript as UI Toolkit

Web Apps from now on

HTML enhanced for web apps!angularjs.com

client / browser JS frameworkrich browser applicationsbrings core frontend concepts and features to the browserextends html instead of abstracting or wrapping itlets you extend html to fit your needs

What is AngularJS?

Model View Controller PatternTwo Way Data-BindingDependency InjectionModulesServicesDirectivesFilter

Separation of ConcernsTestable Code

Core Concepts

Two Way Data-Binding (http://jsbin.com/atufut/14/edit?live)

Add Logic with a Controller (http://jsbin.com/igoxuj/15/edit?live)

Format Values with Filters (http://jsbin.com/esavog/13/edit?live)

Demo

Java with Google Guice

Dependency Injection

// no dependency management1

public class MyModule extends AbstractModule {2

protected void configure() {3

// bind with interface4

bind(Service.class).to(ServiceImpl.class);5

// bind with scope6

bind(OtherService.class).in(Singleton.class);7

// bind with alias8

bindConstant().annotatedWith(Names.named("port")).to(8080);9

}10

}11

Java with Google Guice

Dependency Injection

@Singleton1

public class ServiceImpl {2

@Inject3

public ServiceImpl(final OtherService otherService) { }4

}5

// manual or by configured framework1

final Injector injector = Guice.createInjector(new MyModule());2

final Service service = injector.getInstance(Service.class);3

JavaScript with AngularJS

Dependency Injection

// dependency management and di configuration1

angular.module('myModule', ['moduleOfOtherLibrary'])2

// no scopes, services are singletons by definition3

.service('usefulService', function($window) {4

function somethingPrivate() { }5

6 return function() {7

somethingPrivate();8

$window.close();9

}10

};11

JavaScript with AngularJS

Dependency Injection

// dependency management and di configuration1

angular.module('myModule', ['moduleOfOtherLibrary'])2

// no scopes, services are singletons by definition3

.service('usefulService', function(a) {4

function somethingPrivate() { }5

6 return function() {7

somethingPrivate();8

a.close();9

}10

};11

JavaScript with AngularJS

Dependency Injection

// dependency management and di configuration1

angular.module('myModule', ['moduleOfOtherLibrary'])2

// no scopes, services are singletons by definition3

.service('usefulService', ['$window', function(a) {4

function somethingPrivate() { }5

6 return function() {7

somethingPrivate();8

a.close();9

}]10

};11

JavaScript with AngularJS

Dependency Injection

var service = function(a) {1

return function() {2

a.close();3

}4

}5

service.$inject = ['$window'];6

7angular.module('myModule', ['moduleOfOtherLibrary'])8

.service('usefulService', service);9

Additional parameters and overridden DI values

Dependency Injection

// get the injector via static call1

var $injector = angular.injector();2

// or via injection3

function($injector) { }4

var functionA = function(serviceA) { };1

$inject.invoke(functionA);2

3var functionB = function(serviceA, nonDIValue) { };4

var locals = { nonDIValue: 1 };5

$inject.invoke(functionB, locals);6

extend HTMLTags, Attributes, CSS classesencapsulate DOM manipulationsproceeded by AngularJS compiler

Directives

Blink on Steroids Speed (http://jsbin.com/ekevip/41/edit?live)

New Tags with Directives (http://jsbin.com/onacoh/11/edit?live)

Demo

Deep linkingPartial Views / Templating

Views & Routes

angular.module('route.something').config(function ($routeProvider) {1

$routeProvider.when('/something/:id/', {2

templateUrl : "route/something.tpl.html",3

controller : 'SomethingCtrl'4

})5

});6

angular.module('myApp').config(function ($routeProvider) {1

$routeProvider.otherwise({2

redirectTo: '/home'3

});4

<div class="header">...<&div>1

<div class="content">2

<div ng-view></div>3

</div>4

<div class="footer">...<&div>5

Small crud app (http://jsbin.com/exevex/14/edit?live) -> with own URL bar: localThis Presentation

Demo

Animationsnew in Version 1.2easy to useplain CSS Animations and TransitionsCSS classes for 'enter', 'move' and 'leave'custom JS functions possibledirectives must support ng-animate

ng-repeatng-viewng-includeng-showng-hide

ng-repeat (http://jsbin.com/upedez/7/edit?live)

ng-view (http://jsbin.com/ixapay/4/edit?live)

Fancy stuff: bouncy balls (http://jsbin.com/uwiyer/21/edit?live)

Demo

ExtensibilityEmbeddableTestable Code

TemplatingLocalizationValidationREST supportAsync Code with Promises...

Built-in Features

Built-in Features

Directivesng-clickng-classng-show / ng-hideng-includeng-viewng-pluralizeng-repeatng-submit...

FiltercurrencydatefilterjsonlimitTolowercasenumberorderByuppercase

Serviceshttplocationlogqresourceroutetimeoutwindow...

Eco System

(http://www.gruntjs.com)

Task Runner / Build System

Bower (http://www.bower.io)

Dependency Management for 3rdparty libs

Bootstrap (http://www.git-scm.com)

Front-End FrameworkStyling & Layout

(http://www.git-scm.com)

CSS Extension Language

(http://www.git-scm.com)

Version Control System

(http://www.nodejs.org)

Runtime for Dev Tools /Backend Environment

Clean separation of Frontend and BackendFeatures like DI, MVC and DataBinding in the browserSeamless integration with other frameworksLets you use all the cool new Web / JS tools

Easy to learnDocumentation with a lot of runnable examplesLarge community and fast growing eco systempowered and used by Google

Try it!

Conclusion

Philipp Burgmerburgmer@w11k.com

www.w11k.com (http://www.w11k.com)

www.thecodecampus.de (http://www.thecodecampus.de)