Practical Experiences

1

http://www.google.com/trends/explore#q=angularjs%2C%20JSF%2C%20GWT%2C%20Backbone%2C%20spring%20mvc&cmpt=q&tz=, Februar, 2015

+ +Link to presentation

David Amend

GXT

David.Amend@it-amend.de2

David Amend

GXTREST

David.Amend@it-amend.de3

Agenda

1. Angular.js: story at DAB-Bank2. Additional slides

a. Angular 2.0b. TypeScriptc. Techstackd. SEO with JavaScripte. JavaScript on Serverf. Security

g. Build processh. Component responsibility 4

DAB Bank- Depotführung & Wertpapierhandel: B2B & B2C - 600.000 Kunden

19971994 2002

erster Discount-Broker Deutschlands

5

DAB Bank AG

DAB Bank- Depotführung & Wertpapierhandel: B2B & B2C - 600.000 Kunden

19971994 2002 2005

erster Discount-Broker Deutschlands

2014

6

DAB Bank AG

Innovation

7

Banking

Innovation

8

Banking Numbrs

Personal Finance Manager

9

The Mission https://www.dab-bank.de/Konto-Kredit/DAB-Finanzmanager-Demo/

https://www.dab-bank.de/Special/Videos/Video-Finanzmanager.xhtml

10

?Spring MVC JSF

JSPjQuery

The Setup

Technology Background

New Portal 3.0

Struts

PFM

11

The Setup

JavaScriptTechnology Background

Spring MVC JSF

JSPjQuery

Struts

12

Problems we hadwith web development

- AJAX & Web 2.0

- Customization

- JavaScript hacks

- monolith

- Future proof

Choose By Level Of Web Abstraction

Decision Matrixhttp://readwrite.com/2014/02/06/angular-backbone-ember-best-javascript-framework-for-you

Hacking web expert

13

Choose By Level Of Web Abstraction

Decision Matrixhttp://readwrite.com/2014/02/06/angular-backbone-ember-best-javascript-framework-for-you

Who needs web knownledge !?Hacking web expert

14

Choose By Level Of Web Abstraction

Decision Matrixhttp://readwrite.com/2014/02/06/angular-backbone-ember-best-javascript-framework-for-you

Getting things done right & efficient

Who needs web knownledge !?Hacking web expert

15

Once upon a time ...

16

2009

24 weeks

3 developer

17.000

Lines of code

Once upon a time ...

https://octoverse.github.com/17

2009

24 weeks

3 weeks

3 developer

1 Misko Hevery1000

17.000

Lines of code

We switched to another web framework called

18

19

Lets get ready !

Our DAB Story with

Innovative Environment With Experts

20

21

Too optimistic!

Reasons we had beforeto stay with Server-web-frameworks

JavaScript is ...- not for large scale

- only for web 2.0 apps

- less efficient & performant

- no SEO, security, stability, …

22

23

How to use angular.js, correct ?

Concepts &Best Practices

? 1. MVC ? MVVM ? M* ? *?

2. <button ng-click=”validate(!required && filled)”>

3. Asynchronism

24

How To Use Angular.js, Correct ?

AngularCommunity

Java/jQueryExisting Knownledge

Understanding Angular.js magic data-bindinghttps://www.youtube.com/watch?v=Mk2WwSxK218

Concepts &Best Practices

?

Angular.js styleguidehttps://github.com/johnpapa/angularjs-styleguide

+

25

Brilliant !

Backend

Angular.js: The web application framework

26

Frontend

Backend

Angular.js: The web application framework

Fits Agile development→ Frontend - Backend separation: mocking, testing, security

→ prototype to real product

→ step by step

27

Frontend

Backend

Angular.js: The web application framework

Very fast start→ starter code template

→ no workshop

→ coexistent technology integration

→ little JavaScript knownledge

28

Frontend

Backend

Angular.js: The web application framework

Angular = omnipresent→ media agency

→ web consulants

→ tons of existing widgets/tools

29

Frontend

30

- HTML- JavaScript- stateless Server- CSS: SMACSS/BEM

Web Development != Web Development

31

- HTML- JavaScript- stateless Server- CSS: SMACSS/BEM

→ high reuse→ smooth integration

Web Development != Web Development

32

- HTML- JavaScript- stateless Server- CSS: SMACSS/BEM

→ high reuse→ smooth integration

Web Development != Web Development

33

too much new stuff!

34

?The Almighty Web Ecosystem

Iterative IntroductionOf New Topics

Simplicity is not a crime !

- Angular.js- Bootstrap- Quality JS

King of the hill

35Build Process

advanced techniques

Iterative IntroductionOf New Topics

Simplicity is not a crime !

- Angular.js- Bootstrap- Quality JS

King of the hill

36

advanced techniques

adapt

Simplicity is not a crime !

- Angular.js- Bootstrap- Quality JS

King of the hill

37

- have web experts in team

- node.js: must have for build process

- prevent AMD - postpone CommonJS

- use NPM & Bower for modules

Topics To Consider

Simplicity is not a crime !

- Angular.js- Bootstrap- Quality JS

King of the hill

38

- TypeScript: introduce a level

- consider Webstorm/IntelliJ IDE

- total separation of client & server

- use existing solutions & adapt

Topics To Consider

Innovative vs Traditional

IE8

39

Existing portal server state& design

CMS

CSS resolution &collaboration with external media agency

40

Change is happening→ people matter most

41

Change is happening→ people matter most

→ techtalks→ shared knownledge→ web experts→ babysteps

42

Yes, we did it !

✓

Personal Finance Manager

Personal Finance Manager, Results

Personal Finance Manager, Results

44

Following

Personal Finance Manager

Angular.js Today ?Camunda BPMN

web3 best of breedsTemplate-setup

IMA-Portal

Web-Portal

45

Multi-Project-Enterprise Module Strategy

We just switched to another web framework

46

?

We just switched to another web framework

47

Identified Vision & IT Long Term Strategy

UI

stable

agile

Architectural Character

48

→ easy extendable > reusable

Identified Vision & IT Long Term Strategy

UI

Business Logic

Databasestable

agile

Architectural Character

49

results

Identified Vision & IT Long Term Strategy

50

Mobile

REST

Desktop

VendorSevices

→ flexible SOA modules→ Continuous Delivery

TV

stateless service

stateless service

stateless service

- Facebook

- Twitter

- Yahoo

- Google

- Ebay

- LinkedIn

- Airbnb

- Paypal

Closure Templates

2013

2013

2012

2009

2012

2012

2012

2013

JavaScript driven developmlent: on client & server

51

Open Todos

- Responsive Webdesign/ Mobile

- CSS components

- lighten CMS bounds

- JavaScript on Server

- SEO with Phantom.js

52

53

Being part of the elite

54

→ got it ?

We successfully switched to long term web development with the help of

55

… and how about You ?

+1 Customer

David.Amend@it-amend.de 56

Additional Slides- SEO- JavaScript on server- Security- Angular 2.0- TypeScript- Techstack- Build process- Component responsibility

“ Hallo David! Die Präsentation war super! Ich überlege mir mein Depot zur DAB zu verlagern, - kein Scherz ! Es freut mich Innovationen bei einer Bank zu sehen. Normalerweise ist diese Branche sehr konservativ. Bis zum nächsten Mal !

Victor C., JS Meetup Munich 9.2014

Link to presentation

David.Amend@it-amend.de 57Link to presentation

Additional Slides

58

IT enabler : competitive in eBusiness

web-knownledge

Time

Advantage

your company

competitor

Hap

py u

ser!

✔

Our reasons to stay with Browser-based web-development frameworks

JavaScript & HTML is ...- especially for large scale

- for simple-pages & web 2.0 apps

- efficient, performant & target oriented

- best for SEO, security, stability

60

SEO

Should you use Angular for SEO pages ?→ made for applications

61

SEO strategies

- for SEO documents, app concept does not fit- unobstrusive JavaScript- duplication: client - server content rendering- client SEO pre-rendering on server

62

SEO

http://de.slideshare.net/Battlefy/seofriendly-single-page-applications-angularjs-prerenderio-by-battlefy-jaime-bueza 63

JavaScript Sharing Code with Server

64

JavaScript on the server?

- Shared Validationshttp://gglwebtoolkit.blogspot.de/2011/12/client-side-bean-validation-with-gwt.htmlhttp://www.oracle.com/technetwork/articles/java/jf14-nashorn-2126515.html

- JSON Schema Editorhttp://jsonschema.net/#/

- JSON Form Testerhttps://github.com/jdorn/json-editor

- Java to JSON/Schema …http://www.jsonschema2pojo.org/

- Java to TypeScript interfaceshttps://github.com/raphaeljolivet/java2typescript

65

Security

- client | server- ng-csp- ng-sanitize- $http: CSFR- Security issues

https://code.google.com/p/mustache-security/wiki/AngularJS

66

Angular 2.0

67

Angular 2.0

- Angular.js 2.0 is best practices + perf

- Can I already use it? → NO

- Should I wait then? → NO

- Is my 1.x code obsolete as soon as 2.0 arrives? → NO

- Is there a migration strategy? → NO

- Angular 2.0 arrives EARLIEST in one year

- Angular 1.x support AT LEAST 1.5-2 years after 2.0 GA

→ Puzzle architecture: long term strategyFranziskus Domighttp://de.slideshare.net/rangle_io/futore-proofangularjsarchitecture?qid=79fdb959-469a-44ec-9560-33a1ff5e0249&v=default&b=&from_search=1 68

Typescriptifying

69

Why TypeScript?

Compilation Imposed by GoogleSweet Home Java/.Net-DeveloperRefactoring Made EasyModels ManagementFuture-Proof Syntax, Angular 2.0, ES6 …

Level of TypeScriptifying ?70

71

72

73

74

75

76

77

Techstack

Full Transitionto Modern Techstack

Sonar/ Findbugs

- Plato- Istanbul- Phantomas- TSLint- JsDoc3

Beginner Advanced Expert

78

Full Transitionto Modern Techstack

Sonar/ Findbugs

- Plato- Istanbul- Phantomas- TSLint- JsDoc3

MVN-Repository

- Bower- NPM

Beginner Advanced Expert

79

Full Transitionto Modern Techstack

Maven/AntSonar/ Findbugs

- Node.js- Gulp

- Plato- Istanbul- Phantomas- TSLint- JsDoc3

MVN-Repository

- Bower- NPM

Beginner Advanced Expert

80

Full Transitionto Modern Techstack

Maven/AntSonar/ Findbugs

- Node.js- Gulp

- Plato- Istanbul- Phantomas- TSLint- JsDoc3

MVN-Repository

- Bower- NPM

- Webstorm- BrowserSync- Remote debugging- Spy.js

Gadgets

Beginner Advanced Expert

81

Modern Techstack : Frameworks

Java language

- TypeScript- SourceMaps- CSS- HTML

82

Modern Techstack : Frameworks

Java language

- TypeScript- SourceMaps- CSS- HTML

JSF/Vaadin/Spring MVC

83

Modern Techstack : Frameworks

Java language

- TypeScript- SourceMaps- CSS- HTML

JUnit/Selenium

- Unit TestingKarma with Jasmine

- Integration UI TestingProtractor

- Acceptance Testing cucumber.js

JSF/Vaadin/Spring MVC

- Jersey → Java- Angular- Bootstrap- ...

84

Modern Techstack : Frameworks

Java language

- TypeScript- SourceMaps- CSS- HTML

JUnit/Selenium

- Unit TestingKarma with Jasmine

- Integration UI TestingProtractor

- Acceptance Testing cucumber.js

Component based / OO

JSF/Vaadin/Spring MVC

- Jersey → Java- Angular- Bootstrap- ...

- declarative- Composite Pattern- project structure: web optimized

85

Multi Web Project Open Source Template

86

Modularization

Web modularization: Maven, None, AMD, CommonJS, ES6, TypeScript87

angular 2.0

Styleguides & Project Template

david.amend@it-amend.de

https://github.com/dabbank/web3-build-template-demo-appshttps://github.com/dabbank/web3-common-build-setup

88

Component Responsibility

89

Think MVC

Angular Service = model & communicator

99

PFM Demo Fallback

100

101

102

103

104

Imageshttp://www.freeimages.com/photo/1428661

http://www.freeimages.com/browse.phtml?f=download&id=1428650

https://openclipart.org/detail/174369/wall-2-by-jarda-174369http://lewisblayse.files.wordpress.com/2013/04/know_your_enemy.gif

http://www.startplatz.de/event/need-for-speed-performante-webseiten-erstellen/

http://kirbymuseum.org/blogs/dynamics/2012/03/page/4/http://www.bildungsxperten.net/bildungschannels/weiterbildung/social-media-und-recht/https://openclipart.org/detail/213183/door-hanger03-by-igor-213183

105

106

Identified Vision & IT Long Term Strategy

UI

Business Logic

Databasestable

agile

Architectural Character

107easy extendable > reusable

Server

Mobile

statelessREST

Desktop

VendorSevices

→ flexible SOA modules→ Continuous Delivery

results

Throwaway UI

108

Innovations happen in the browser

109

This is the way to go !

110

Unplanned !

111

Adaptable Adaptiv