advanced, angular, angular.js, architecture, cons, dab-bank, java, javaee, javascript, jsf, lessons learned, migration, node, pro, serverside, techstack, typescript, vaadin, webframework, java

1. Decision from
stagnancy
to modern web
development with
javascript

2. David Amend
@DAB-Bank
GXT
REST
David.Amend@it-amend.de

3. Facts about web development
Runs in the browser:
1. JavaScript
2. declarative HTML
3. stateless HTTP for communication
→ same for serverside-webframeworks
→ innovations happen in browser

4. JavaScript
HTML
HTTP/REST
modern web development
= knownledge and usage in
web technologies
&

5. Is JavaScript web development
more efficient than
serverside Java Web Frameworks
Depends on
Yes No
Audience Question

6. Reasons we had before
to stay with Java-web-frameworks
JavaScript is ...
- not for large scale
- less efficient
- limited:
SEO, security, stable, …
- not for business apps
http://lewisblayse.files.wordpress.com/2013/04/know_your_enemy.gif

7. Unwilling dirty hacking
→ not expert of shell scripting
→ unexpected piece of code
→ quick and dirty
myshellscript.sh

8. Unwilling dirty hacking
→ unexpected piece of code
→ does not fit in technology stack concept

9. Full Transition
to Modern Techstack
Maven/AntSonar/ Findbugs
- Node.js
- Grunt → Gulp
- Plato
- Istanbul
- Phantomas
- TSLint
- JsDoc3
MVN-Repository
- Bower
- NPM
- Webstorm
- BrowserSync
- Remote debugging
- Spy.Js
Gadgets
Beginner Advanced Expert

10. Node.js NPM:
Build tools for the web
- Efficient development
- Minification
- Optimization
- Modularization
- Analysis

11. Modern Techstack : Frameworks
Java language
- TypeScript
- SourceMaps
- CSS
- HTML
JUnit/Selenium
- Jasmine
- Protractor
Component based / OO
JSF/Vaadin/Spring MVC
- Jersey → Java
- mvn: d.ts interface-generator
- Angular
- Bootstrap
- ...
- declarative
- Composite Pattern
- project structure: web optimized
Even exceeds Java code quality & effort

12. All about
User
EXperience
→ high quality & unrivaled UI
→ time to market & performant

13. Frontend First → Server
Server First → Frontend
Change
- focus on UX
- user first
- propagates
iterative development
- focus on spec
- database first

15. https://www.dab-bank.de/Konto-Kredit/DAB-Finanzmanager-Demo/
https://www.dab-bank.de/Special/Videos/Video-Finanzmanager.xhtml
From JSF
to Web-Technologies
DEMO

16. CGI
JSP
Point Of Transition: Web-Standards Are Preferred
Time
Server-side Java
Maturity
complexity
HTTP
HTML
JavaScript
m
o
re
efficientWeb-Frameworks
AJAX

17. Framework Systems
1. avoiding web technologies
2. different lifecycles & philosophies
3. hard to migrate
GWT Wicket JSF
Spring
MVC

18. Illusion of
Abstraction
Disrespect
of Standards
Reasons Of Serverside Web Failture
All-in-One
product suites
1. 2. 4.3.
Code
Generators

19. MVC
Browser
Traditional Architecture
Server 1. missing clear
separation of
UI & business code
2. stateful server
→ leads to monolith
Request Response

20. REST-Layer Architecture
Server
Input
Output
= Tester
= Mock
Browser REST
Development:
- independant
- testable
MVC

21. Multi-Device Architecture
Server
Mobile
...
12%
75%
% = Device Shipment, 2014
Desktop REST
- homogenous architecture
- fits mobile strategy

22. Future Architecture
ServerClient REST
Shared
CommonJS

23. Learn from the best
- Facebook
- Twitter
- Yahoo
- Google
- Ebay
- LinkedIn
- Airbnb
- Paypal
Closure
Templates
2013
2013
2012
2009
2012
2012
2012
2013
Client Driven Web Development, JavaScript on the server

24. PrimeFaces
requirements
IceFacesPrimeFaces
+ +
RichFaces
Requirements do not fit existing framework
Example:
→ Customization != default
“Tomcat server
dependencies,
only.”
→ Really ???
=

25. Dependencies:
Server != Browser
Server
mvn dependency-tree
Uncontrolled shipped code

26. 1. Module dependencies
- bower
- npm
2. Code Dependencies
- CommonJS
- AMD
- Web Components
TypeScript
import angular = require(“angular”)
ECMAScript6 Harmony
import * as angular from “angular”

27. modern web
→ modularized
→ lightweight
Widgets
- jQuery
- angular
- custom
- ...
Layout-
Manager
Widgets
CSS
- dropdown
- modal
- custom
- ...
1. 2. 3.
Lean UIExample: Twitter Bootstrap

28. Modern Web Aplication Stack
1. introduce
- best solution on market
2. exchange
- non-fitting features
3. extend, refactor & customize
controlled flexibility over:

29. Costs of introducing modern web
http://www.infoq.com/news/2013/11/paypal-java-javascript
Java JavaScript
Set-up time 0 2 months
Development ~ 5 months ~ 3 months
Engineers 5 2
→ long term money saver
→ “cool stuff”: reason for candidates
→ wider job market
Ruby- Devs Python-Devs
Java-DevsPHP-Devs
.NET- Devs
Designer
Web-Dev
Ops

30. Competitive in Web-Solutions
web-
knownledge
Time
Advantage
your company
com
petitor
Happy
user!

31. Questions &
Discussion
David.Amend@it-amend.de

32. Bug/Missing Feature explain & reproduce wait for solution
All-In-One
Framework-Partner
Bug /Missing Feature
Just Implement
wait for solution
Immature Developer
explain & reproduce
V
Customization != default
Customization == default
Feature doable? Estimated time?
?

33. Proof by Code
http://jsfiddle.net/davidamend/fpe51p96
1. controlled flexibility
2. common understanding
a. declarative HTML
b. JavaScript event binding

34. How to start ?
1. hire web developers
2. start simple: Lean UI
3. simplify choice:
by contributors
Success

35. Links
http://addyosmani.com/blog/front-end-choice-paralysis/
http://brandongaille.com/html-5-browser-support-and-compatibility-chart/
http://www.gartner.com/newsroom/id/2408515

36. Images
http://ptgmedia.pearsoncmg.com/images/chap3_9780321247131/elementLinks/03fig04_alt.jpg
http://ptgmedia.pearsoncmg.com/images/chap3_9780321247131/elementLinks/03fig03_alt.jpg
http://www.igniteme.org/photos/albums/toolkit-1.jpg?img
http://megahdscreen.com/sport-wallpaper/download-free-soccer-ball-cool-nature-simpsons-wallpaper.
html/attachment/download-free-soccer-ball-cool-nature-simpsons-wallpaper-2/
http://img4.wikia.nocookie.
net/__cb20101023180303/simpsons/images/6/63/The_Simpsons_Simpsons_FamilyPicture.png
http://marketing-gui.de/2010/07/08/weg-de-lastminute-kampagne/
http://www.iwanitoo.com/2013/04/fisch-und-sexy-nordsee-macht-auf-mutig/
http://www.franchisecompany.co.uk/wp-content/uploads/2010/01/FranManuals-img.jpg
http://blog.cect-shop.com/wp-content/uploads/2011/03/server_error.jpg
http://jobtrakr.files.wordpress.com/2011/11/manager1.jpg
http://edblogs.columbia.edu/scppx3335-001-2014-1/files/2014/04/stock-green-people-puzzle-pieces.jpg
http://images.clipartof.com/thumbnails/23173-Clipart-Illustration-Of-A-Red-Man-Sitting-All-Alone-With-A-Palm-
Tree-On-A-Deserted-Island.jpg
http://www.samsykes.com/wp/wp-content/uploads/2011/12/interview.jpeg
http://hirefreelanceprogrammers.files.wordpress.com/2014/03/html5-project-ideas.png
http://lewisblayse.files.wordpress.com/2013/04/know_your_enemy.gif

37. Images 2/2
http://internut.se/wp-content/uploads/2013/01/html5_future.png
http://www.vergleichenwebhoster.de/images/6.jpg
http://efastfacts.com/blog/wp-content/uploads/2013/04/internet-marketing-specialist-a3243.jpg
https://c1.staticflickr.com/5/4049/4493341271_d568664f0d_z.jpg
http://2.media.collegehumor.cvcdn.com/81/67/439b165e5915cea96df773cebe9efc87.jpg
http://www.digitalplanet.ie/wp-content/uploads/2013/09/Myths.jpg
http://www.richarz-goetz.de/wp-content/uploads/2012/02/Ideen.jpg
http://www.fotos.sc/img2/u/angsch/h/Erdmnnchen__neugierig.jpg
http://www.growthengineering.co.uk/wp-content/uploads/2013/10/make-work-fun.jpg
http://sivadcomputertech.com/images/WWW2.jpg
http://2.bp.blogspot.com/_G1SQIgndCik/TK1r6hW4MDI/AAAAAAAABSI/Pysw-
wNOHqs/s1600/wrong%2Btool.jpg
http://www.sysaid.com/images/easyblog_images/49/Ros_ChangeManagement.jpg
http://www.getaway.co.za/wp-content/uploads/2012/10/24.-Wenger-Giant-Knife.jpg
https://openclipart.org/detail/29647/quality-control:-rejected-by-stijnbern
http://pixabay.com/de/strand-spielzeug-schaufel-eimer-33280/
https://openclipart.org/detail/37135/personnage_ordinateur-by-antoine-37135
http://macandnocheese.files.wordpress.com/2013/12/high-fever-thermometer-clip-art.jpg

38. ● https://openclipart.org/image/800px/svg_to_png/202768/puzzle_magnify.png

40. ?
1. Efficience
2. Stability by flexibility
3. User Experience
WHY Modern Web?
Experiences@DAB-Bank

41. Twitter
Bootstrap
Modern Web Aplication Stack
Fade-Animation
HTML-5
Drag-Drop
Foundation 5
Choose only
the best
Angular
Backbone
Customization
== default
Unflexible All-in-one solution