Web Applications with

Philipp Burgmer▸ Senior Software Engineer / Consultant

▸ WeigleWilczek GmbH

▸ burgmer@w11k.com

▸ Focus: Frontend, Web Technologies

About Me

WeigleWilczek / W11k▸ Software Design, Development & Maintenance

▸ Consulting and Coaching

▸ Web Applications

▸ Eclipse RCP

▸ Java / JVM

About Us

▸ GWT▪ UI in Java / XML

▪ hard to use JS libs / scatters ui logic

▪ "Java World" instead of "Web World"

▸ JSF▪ UI on Server

▪ a lot HTTP requests just to update UI

▪ hard to use JS libs / scatters ui logic

▸ Flex▪ based on Flash

▪ Adobe discontinues developement

▪ MXML and ActionScript instead of HTML and JavaScript

Web Apps until now

▸ Frontend runs completely in the browser

▸ Stateful UI, stateless server

▸ Server delivers static resources

▸ Server delivers dynamic data

▸ HTML, CSS and JavaScript as UI Toolkit

Web Apps from now on

HTML enhanced for web apps!angularjs.com

▸ client / browser JS framework

▸ rich browser applications

▸ brings core frontend concepts and features to the browser

▸ extends html instead of abstracting or wrapping it

▸ lets you extend html to fit your needs

What is AngularJS?

▸ Model View Controller Pattern

▸ Two Way Data-Binding

▸ Dependency Injection

▸ Modules

▸ Services

▸ Directives

▸ Filter

▸ Separation of Concerns

▸ Testable 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 HTML

▸ Tags, Attributes, CSS classes

▸ encapsulate DOM manipulations

▸ proceeded 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 linking

▸ Partial 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: local

▸ This Presentation

Demo

Animations▸ new in Version 1.2

▸ easy to use

▸ plain CSS Animations and Transitions

▸ CSS classes for 'enter', 'move' and 'leave'

▸ custom JS functions possible

▸ directives must support ng-animate

▸ ng-repeat

▸ ng-view

▸ ng-include

▸ ng-show

▸ ng-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

▸ Extensibility

▸ Embeddable

▸ Testable Code

▸ Templating

▸ Localization

▸ Validation

▸ REST support

▸ Async Code with Promises

▸ ...

Built-in Features

Built-in Features

Directives▸ ng-click

▸ ng-class

▸ ng-show / ng-hide

▸ ng-include

▸ ng-view

▸ ng-pluralize

▸ ng-repeat

▸ ng-submit

▸ ...

Filter▸ currency

▸ date

▸ filter

▸ json

▸ limitTo

▸ lowercase

▸ number

▸ orderBy

▸ uppercase

Services▸ http

▸ location

▸ log

▸ q

▸ resource

▸ route

▸ timeout

▸ window

▸ ...

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 Backend

▸ Features like DI, MVC and DataBinding in the browser

▸ Seamless integration with other frameworks

▸ Lets you use all the cool new Web / JS tools

▸ Easy to learn

▸ Documentation with a lot of runnable examples

▸ Large community and fast growing eco system

▸ powered 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)