Angularjs practical project experiences with javascript development in a bank

1. Practical Experiences
1
+ +
Link to presentation

2. David Amend
GXT
David.Amend@it-amend.de
2

3. David Amend
GXT
REST
David.Amend@it-amend.de
3

4. Agenda
1. Angular.js: story at DAB-Bank
2. Additional slides
a. Angular 2.0
b. TypeScript
c. Techstack
d. SEO with JavaScript
e. JavaScript on Server
f. Security
g. Build process
h. Component responsibility 4

5. DAB Bank
- Depotführung & Wertpapierhandel: B2B & B2C
- 600.000 Kunden
19971994 2002
erster Discount-
Broker Deutschlands
5
DAB Bank
AG

6. DAB Bank
- Depotführung & Wertpapierhandel: B2B & B2C
- 600.000 Kunden
19971994 2002 2005
erster Discount-
Broker Deutschlands
2014
6
DAB Bank
AG

7. Innovation
7
Banking

8. Innovation
8
Banking
Numbrs
Personal
Finance
Manager

9. 9
The Mission
https://www.dab-bank.de/Konto-Kredit/DAB-Finanzmanager-Demo/
https://www.dab-bank.de/Special/Videos/Video-Finanzmanager.xhtml

10. 10
?Spring MVC
JSF
JSPjQuery
The Setup
Technology
Background
New Portal 3.0
Struts
PFM

11. 11
The Setup
JavaScriptTechnology
Background
Spring MVC
JSF
JSPjQuery
Struts

12. 12
Problems we had
with web development
- AJAX & Web 2.0
- Customization
- JavaScript hacks
- monolith
- Future proof

13. Choose By Level Of Web Abstraction
Decision Matrix
http://readwrite.com/2014/02/06/angular-backbone-ember-best-javascript-framework-for-you
Hacking web expert
13

14. Choose By Level Of Web Abstraction
Decision Matrix
http://readwrite.com/2014/02/06/angular-backbone-ember-best-javascript-framework-for-you
Who needs web knownledge !?Hacking web expert
14

15. Choose By Level Of Web Abstraction
Decision Matrix
http://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

16. Once upon a time ...
16
2009
24 weeks
3 developer
17.000
Lines of code

17. Once upon a time ...
https://octoverse.github.com/
17
2009
24 weeks
3 weeks
3 developer
1 Misko Hevery
1000
17.000
Lines of code

18. We switched to another web
framework called
18

19. 19
Lets get ready !
Our DAB
Story with

20. Innovative Environment With Experts
20

21. 21
Too optimistic!

22. Reasons we had before
to 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. 23
How to use angular.js, correct ?
Concepts &
Best Practices
? 1. MVC ? MVVM ? M* ? *?
2. <button ng-click=”validate(!required && filled)”>
3. Asynchronism

24. 24
How To Use Angular.js, Correct ?
Angular
Community
Java/jQuery
Existing Knownledge
Understanding Angular.js magic data-binding
https://www.youtube.com/watch?v=Mk2WwSxK218
Concepts &
Best Practices
?
Angular.js styleguide
https://github.com/johnpapa/angularjs-styleguide
+

25. 25
Brilliant !

26. Backend
Angular.js: The web application framework
26
Frontend

27. 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

28. Backend
Angular.js: The web application framework
Very fast start
→ starter code template
→ no workshop
→ coexistent technology integration
→ little JavaScript knownledge
28
Frontend

29. Backend
Angular.js: The web application framework
Angular = omnipresent
→ media agency
→ web consulants
→ tons of existing widgets/tools
29
Frontend

30. 30
- HTML
- JavaScript
- stateless Server
- CSS: SMACSS/BEM
Web Development != Web Development

31. 31
- HTML
- JavaScript
- stateless Server
- CSS: SMACSS/BEM
→ high reuse
→ smooth integration
Web Development != Web Development

32. 32
- HTML
- JavaScript
- stateless Server
- CSS: SMACSS/BEM
→ high reuse
→ smooth integration
Web Development != Web Development

33. 33
too much new stuff!

34. 34
?
The Almighty
Web Ecosystem

35. Iterative Introduction
Of New Topics
Simplicity is
not a crime !
- Angular.js
- Bootstrap
- Quality JS
King of the hill
35Build Process
advanced
techniques

36. Iterative Introduction
Of New Topics
Simplicity is
not a crime !
- Angular.js
- Bootstrap
- Quality JS
King of the hill
36
advanced
techniques
adapt

37. 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

38. 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

39. Innovative vs Traditional
IE8
39
Existing portal
server state
& design
CMS
CSS resolution &
collaboration with
external media agency

40. 40
Change is happening
→ people matter most

41. 41
Change is happening
→ people matter most
→ techtalks
→ shared knownledge
→ web experts
→ babysteps

42. 42
Yes, we did it !
✓
Personal
Finance
Manager

43. Personal Finance Manager, Results

44. Personal Finance Manager, Results
44

45. Following
Personal
Finance
Manager
Angular.js Today ?Camunda BPMN
web3
best of breeds
Template-setup
IMA-Portal
Web-Portal
45
Multi-Project-Enterprise
Module Strategy

46. We just switched to another web
framework
46
?

47. We just switched to another web
framework
47

48. Identified Vision & IT Long Term Strategy
UI
stable
agile
Architectural
Character
48
→ easy extendable > reusable

49. Identified Vision & IT Long Term Strategy
UI
Business Logic
Database
stable
agile
Architectural
Character
49
results

50. Identified Vision & IT Long Term Strategy
50
Mobile
REST
Desktop
Vendor
Sevices
→ flexible SOA modules
→ Continuous Delivery
TV
stateless
service
stateless
service
stateless
service

51. - 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

52. Open Todos
- Responsive Webdesign/ Mobile
- CSS components
- lighten CMS bounds
- JavaScript on Server
- SEO with Phantom.js
52

53. 53

54. Being part of the elite
54
→ got it ?

55. We successfully switched
to long term web development
with the help of
55
… and how about You ?

56. +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

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

58. Additional Slides
58

59. IT enabler : competitive in eBusiness
web-
knownledge
Time
Advantage
your company
competitor
Happyuser!
✔

60. 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

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

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

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

64. JavaScript Sharing Code
with Server
64

65. JavaScript on the server?
- Shared Validations
http://gglwebtoolkit.blogspot.de/2011/12/client-side-bean-validation-with-gwt.html
http://www.oracle.com/technetwork/articles/java/jf14-nashorn-2126515.html
- JSON Schema Editor
http://jsonschema.net/#/
- JSON Form Tester
https://github.com/jdorn/json-editor
- Java to JSON/Schema …
http://www.jsonschema2pojo.org/
- Java to TypeScript interfaces
https://github.com/raphaeljolivet/java2typescript
65

66. Security
- client | server
- ng-csp
- ng-sanitize
- $http: CSFR
- Security issues
https://code.google.com/p/mustache-security/wiki/AngularJS
66

67. Angular 2.0
67

68. 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 strategy
Franziskus Domighttp://de.slideshare.net/rangle_io/futore-proofangularjsarchitecture?qid=79fdb959-469a-44ec-9560-33a1ff5e0249&v=default&b=&from_search=1 68

69. Typescriptifying
69

70. Why TypeScript?
Compilation Imposed by Google
Sweet Home Java/.Net-Developer
Refactoring Made Easy
Models Management
Future-Proof Syntax, Angular 2.0, ES6 …
Level of TypeScriptifying ? 70

71. 71

72. 72

73. 73

74. 74

75. 75

76. 76

77. 77
Techstack

78. Full Transition
to Modern Techstack
Sonar/ Findbugs
- Plato
- Istanbul
- Phantomas
- TSLint
- JsDoc3
Beginner Advanced Expert
78

79. Full Transition
to Modern Techstack
Sonar/ Findbugs
- Plato
- Istanbul
- Phantomas
- TSLint
- JsDoc3
MVN-Repository
- Bower
- NPM
Beginner Advanced Expert
79

80. Full Transition
to Modern Techstack
Maven/AntSonar/ Findbugs
- Node.js
- Gulp
- Plato
- Istanbul
- Phantomas
- TSLint
- JsDoc3
MVN-Repository
- Bower
- NPM
Beginner Advanced Expert
80

81. Full Transition
to 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

82. Modern Techstack : Frameworks
Java language
- TypeScript
- SourceMaps
- CSS
- HTML
82

83. Modern Techstack : Frameworks
Java language
- TypeScript
- SourceMaps
- CSS
- HTML
JSF/Vaadin/Spring MVC
83

84. Modern Techstack : Frameworks
Java language
- TypeScript
- SourceMaps
- CSS
- HTML
JUnit/Selenium
- Unit Testing
Karma with Jasmine
- Integration UI Testing
Protractor
- Acceptance Testing
cucumber.js
JSF/Vaadin/Spring MVC
- Jersey → Java
- Angular
- Bootstrap
- ...
84

85. Modern Techstack : Frameworks
Java language
- TypeScript
- SourceMaps
- CSS
- HTML
JUnit/Selenium
- Unit Testing
Karma with Jasmine
- Integration UI Testing
Protractor
- Acceptance Testing
cucumber.js
Component based / OO
JSF/Vaadin/Spring MVC
- Jersey → Java
- Angular
- Bootstrap
- ...
- declarative
- Composite Pattern
- project structure: web optimized
85

86. Multi Web Project
Open Source Template
86

87. Modularization
Web modularization: Maven, None, AMD, CommonJS, ES6, TypeScript
87
angular 2.0

88. Styleguides & Project Template
david.amend@it-amend.de
https://github.com/dabbank/web3-build-template-demo-
apps
https://github.com/dabbank/web3-common-build-setup
88

89. Component
Responsibility
89

90. Think MVC
Angular Service
=
model &
communicator

99. 99
PFM Demo Fallback

100. 100

101. 101

102. 102

103. 103

104. 104

105. Images
http://www.freeimages.com/photo/1428661
http://www.freeimages.com/browse.phtml?f=download&id=1428650
https://openclipart.org/detail/174369/wall-2-by-jarda-174369
http://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. 106

107. Identified Vision & IT Long Term Strategy
UI
Business Logic
Database
stable
agile
Architectural
Character
107
easy extendable > reusable
Server
Mobile
stateless
REST
Desktop
Vendor
Sevices
→ flexible SOA modules
→ Continuous Delivery
results
Throwaway
UI

108. 108
Innovations happen in the browser

109. 109
This is the way to go !

110. 110
Unplanned !

111. 111
Adaptable Adaptiv