Karlsruher Entwicklertag 2013 Web Applications with
May 10, 2015
Karlsruher Entwicklertag 2013
Web Applications with
Philipp BurgmerSenior Software Engineer / ConsultantWeigleWilczek [email protected]: 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 [email protected]
www.w11k.com (http://www.w11k.com)
www.thecodecampus.de (http://www.thecodecampus.de)