Decision from

stagnancyto modern web

development with javascript

David Amend@DAB-Bank

GXTREST

David.Amend@it-amend.de

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

JavaScriptHTMLHTTP/REST

modern web development= knownledge and usage in

web technologies &

Is JavaScript web development

more efficient than

serverside Java Web Frameworks

Depends on

Yes No

Audience Question

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

Unwilling dirty hacking

→ not expert of shell scripting

→ unexpected piece of code

→ quick and dirty

myshellscript.sh

Unwilling dirty hacking

→ unexpected piece of code→ does not fit in technology stack concept

Full Transitionto 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

Node.js NPM: Build tools for the web

- Efficient development- Minification- Optimization- Modularization- Analysis

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

All about

User EXperience

→ high quality & unrivaled UI

→ time to market & performant

Frontend First → Server

Server First → Frontend

Change- focus on UX- user first- propagates

iterative development

- focus on spec- database first

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

CGI

JSP

Point Of Transition: Web-Standards Are Preferred

Time

Server-side Java

Maturity

complexity

HTTP

HTML

JavaScript

more

efficien

tWeb-Frameworks

AJAX

Framework Systems

1. avoiding web technologies

2. different lifecycles & philosophies

3. hard to migrate

GWT Wicket JSFSpring MVC

Illusion of Abstraction

Disrespect of Standards

Reasons Of Serverside Web Failture

All-in-One product suites

1. 2. 4.3.

Code Generators

MVC

Browser

Traditional Architecture

Server1. missing clear

separation of

UI & business code

2. stateful server

→ leads to monolithRequest Response

REST-Layer Architecture

Server

Input

Output

= Tester

= Mock

Browser REST

Development:

- independant

- testable

MVC

Multi-Device Architecture

Server

Mobile

...

12%

75%

% = Device Shipment, 2014

Desktop REST

- homogenous architecture

- fits mobile strategy

Future Architecture

ServerClient REST

SharedCommonJS

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

PrimeFaces

requirements

IceFacesPrimeFaces

+ +RichFaces

Requirements do not fit existing framework

Example:

→ Customization != default

“Tomcat server

dependencies,

only.”

→ Really ???

=

Dependencies:Server != Browser

Servermvn dependency-tree

Uncontrolled shipped code

1. Module dependencies- bower- npm

2. Code Dependencies- CommonJS- AMD - Web Components

TypeScript

import angular = require(“angular”)

ECMAScript6 Harmony

import * as angular from “angular”

modern web

→ modularized

→ lightweight

Widgets

- jQuery- angular- custom- ...

Layout-

Manager

WidgetsCSS

- dropdown- modal- custom- ...

1. 2. 3.

Lean UIExample: Twitter Bootstrap

Modern Web Aplication Stack

1. introduce

- best solution on market

2. exchange

- non-fitting features

3. extend, refactor & customize

controlled flexibility over:

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

Competitive in Web-Solutions

web-

knownledge

Time

Advantage

your company

competitor

Happy u

ser!

Questions &Discussion

David.Amend@it-amend.de

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?

?

Proof by Code

http://jsfiddle.net/davidamend/fpe51p96

1. controlled flexibility2. common understanding

a. declarative HTMLb. JavaScript event binding

How to start ?

1. hire web developers2. start simple: Lean UI3. simplify choice:

by contributors

Success

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

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

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.jpghttp://www.growthengineering.co.uk/wp-content/uploads/2013/10/make-work-fun.jpghttp://sivadcomputertech.com/images/WWW2.jpghttp://2.bp.blogspot.com/_G1SQIgndCik/TK1r6hW4MDI/AAAAAAAABSI/Pysw-wNOHqs/s1600/wrong%2Btool.jpghttp://www.sysaid.com/images/easyblog_images/49/Ros_ChangeManagement.jpghttp://www.getaway.co.za/wp-content/uploads/2012/10/24.-Wenger-Giant-Knife.jpghttps://openclipart.org/detail/29647/quality-control:-rejected-by-stijnbernhttp://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

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

?

1. Efficience2. Stability by flexibility3. User Experience

WHY Modern Web?

Experiences@DAB-Bank

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