Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Practical Experiences
1
+ +
Link to presentation
David Amend
GXT
David.Amend@it-amend.de
2
David Amend
GXT
REST
David.Amend@it-amend.de
3
Agenda
1. Angular.js: story at DAB-Bank
2. Additional slides
a. Angular 2.0
b. TypeScript
c. Techstack
d. SEO with JavaScr...
DAB Bank
- Depotführung & Wertpapierhandel: B2B & B2C
- 600.000 Kunden
19971994 2002
erster Discount-
Broker Deutschlands
...
DAB Bank
- Depotführung & Wertpapierhandel: B2B & B2C
- 600.000 Kunden
19971994 2002 2005
erster Discount-
Broker Deutschl...
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-Fi...
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 had
with web development
- AJAX & Web 2.0
- Customization
- JavaScript hacks
- monolith
- Future proof
Choose By Level Of Web Abstraction
Decision Matrix
http://readwrite.com/2014/02/06/angular-backbone-ember-best-javascript-...
Choose By Level Of Web Abstraction
Decision Matrix
http://readwrite.com/2014/02/06/angular-backbone-ember-best-javascript-...
Choose By Level Of Web Abstraction
Decision Matrix
http://readwrite.com/2014/02/06/angular-backbone-ember-best-javascript-...
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 Hevery
1000
17.000
Lines o...
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 before
to stay with Server-web-frameworks
JavaScript is ...
- not for large scale
- only for web 2.0 apps
-...
23
How to use angular.js, correct ?
Concepts &
Best Practices
? 1. MVC ? MVVM ? M* ? *?
2. <button ng-click=”validate(!req...
24
How To Use Angular.js, Correct ?
Angular
Community
Java/jQuery
Existing Knownledge
Understanding Angular.js magic data-...
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...
Backend
Angular.js: The web application framework
Very fast start
→ starter code template
→ no workshop
→ coexistent techn...
Backend
Angular.js: The web application framework
Angular = omnipresent
→ media agency
→ web consulants
→ tons of existing...
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 Devel...
32
- HTML
- JavaScript
- stateless Server
- CSS: SMACSS/BEM
→ high reuse
→ smooth integration
Web Development != Web Devel...
33
too much new stuff!
34
?
The Almighty
Web Ecosystem
Iterative Introduction
Of New Topics
Simplicity is
not a crime !
- Angular.js
- Bootstrap
- Quality JS
King of the hill
35...
Iterative Introduction
Of New Topics
Simplicity is
not a crime !
- Angular.js
- Bootstrap
- Quality JS
King of the hill
36...
Simplicity is
not a crime !
- Angular.js
- Bootstrap
- Quality JS
King of the hill
37
- have web experts in team
- node.js...
Simplicity is
not a crime !
- Angular.js
- Bootstrap
- Quality JS
King of the hill
38
- TypeScript: introduce a level
- co...
Innovative vs Traditional
IE8
39
Existing portal
server state
& design
CMS
CSS resolution &
collaboration with
external me...
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 breeds
Template-setup
IMA-Portal
Web-Portal...
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
Database
stable
agile
Architectural
Character
49
results
Identified Vision & IT Long Term Strategy
50
Mobile
REST
Desktop
Vendor
Sevices
→ flexible SOA modules
→ Continuous Delive...
- Facebook
- Twitter
- Yahoo
- Google
- Ebay
- LinkedIn
- Airbnb
- Paypal
Closure
Templates
2013
2013
2012
2009
2012
2012
...
Open Todos
- Responsive Webdesign/ Mobile
- CSS components
- lighten CMS bounds
- JavaScript on Server
- SEO with Phantom....
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
- TypeScrip...
David.Amend@it-amend.de 57
Link to presentation
Additional Slides
58
IT enabler : competitive in eBusiness
web-
knownledge
Time
Advantage
your company
competitor
Happyuser!
✔
Our reasons to stay with Browser-based
web-development frameworks
JavaScript & HTML is ...
- especially for large scale
- ...
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 cont...
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 Validations
http://gglwebtoolkit.blogspot.de/2011/12/client-side-bean-validation-with-g...
Security
- client | server
- ng-csp
- ng-sanitize
- $http: CSFR
- Security issues
https://code.google.com/p/mustache-secur...
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 ...
Typescriptifying
69
Why TypeScript?
Compilation Imposed by Google
Sweet Home Java/.Net-Developer
Refactoring Made Easy
Models Management
Futur...
71
72
73
74
75
76
77
Techstack
Full Transition
to Modern Techstack
Sonar/ Findbugs
- Plato
- Istanbul
- Phantomas
- TSLint
- JsDoc3
Beginner Advanced Exp...
Full Transition
to Modern Techstack
Sonar/ Findbugs
- Plato
- Istanbul
- Phantomas
- TSLint
- JsDoc3
MVN-Repository
- Bowe...
Full Transition
to Modern Techstack
Maven/AntSonar/ Findbugs
- Node.js
- Gulp
- Plato
- Istanbul
- Phantomas
- TSLint
- Js...
Full Transition
to Modern Techstack
Maven/AntSonar/ Findbugs
- Node.js
- Gulp
- Plato
- Istanbul
- Phantomas
- TSLint
- Js...
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 Testing
Karma wit...
Modern Techstack : Frameworks
Java language
- TypeScript
- SourceMaps
- CSS
- HTML
JUnit/Selenium
- Unit Testing
Karma wit...
Multi Web Project
Open Source Template
86
Modularization
Web modularization: Maven, None, AMD, CommonJS, ES6, TypeScript
87
angular 2.0
Styleguides & Project Template
david.amend@it-amend.de
https://github.com/dabbank/web3-build-template-demo-
apps
https://g...
Component
Responsibility
89
Think MVC
Angular Service
=
model &
communicator
99
PFM Demo Fallback
100
101
102
103
104
Images
http://www.freeimages.com/photo/1428661
http://www.freeimages.com/browse.phtml?f=download&id=1428650
https://opencl...
106
Identified Vision & IT Long Term Strategy
UI
Business Logic
Database
stable
agile
Architectural
Character
107
easy extenda...
108
Innovations happen in the browser
109
This is the way to go !
110
Unplanned !
111
Adaptable Adaptiv
Angularjs practical project experiences with javascript development in a bank
Angularjs practical project experiences with javascript development in a bank
Angularjs practical project experiences with javascript development in a bank
Angularjs practical project experiences with javascript development in a bank
Angularjs practical project experiences with javascript development in a bank
Angularjs practical project experiences with javascript development in a bank
Angularjs practical project experiences with javascript development in a bank
Angularjs practical project experiences with javascript development in a bank
Próxima SlideShare
Cargando en…5
×

Angularjs practical project experiences with javascript development in a bank

Angularjs practical project experiences with javascript development in a bank

  • Sé el primero en comentar

Angularjs practical project experiences with javascript development in a bank

  1. 1. Practical Experiences 1 + + Link to presentation
  2. 2. David Amend GXT David.Amend@it-amend.de 2
  3. 3. David Amend GXT REST David.Amend@it-amend.de 3
  4. 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. 5. DAB Bank - Depotführung & Wertpapierhandel: B2B & B2C - 600.000 Kunden 19971994 2002 erster Discount- Broker Deutschlands 5 DAB Bank AG
  6. 6. DAB Bank - Depotführung & Wertpapierhandel: B2B & B2C - 600.000 Kunden 19971994 2002 2005 erster Discount- Broker Deutschlands 2014 6 DAB Bank AG
  7. 7. Innovation 7 Banking
  8. 8. Innovation 8 Banking Numbrs Personal Finance Manager
  9. 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. 10 ?Spring MVC JSF JSPjQuery The Setup Technology Background New Portal 3.0 Struts PFM
  11. 11. 11 The Setup JavaScriptTechnology Background Spring MVC JSF JSPjQuery Struts
  12. 12. 12 Problems we had with web development - AJAX & Web 2.0 - Customization - JavaScript hacks - monolith - Future proof
  13. 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. 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. 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. 16. Once upon a time ... 16 2009 24 weeks 3 developer 17.000 Lines of code
  17. 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. 18. We switched to another web framework called 18
  19. 19. 19 Lets get ready ! Our DAB Story with
  20. 20. Innovative Environment With Experts 20
  21. 21. 21 Too optimistic!
  22. 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. 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. 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. 25 Brilliant !
  26. 26. Backend Angular.js: The web application framework 26 Frontend
  27. 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. 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. 29. Backend Angular.js: The web application framework Angular = omnipresent → media agency → web consulants → tons of existing widgets/tools 29 Frontend
  30. 30. 30 - HTML - JavaScript - stateless Server - CSS: SMACSS/BEM Web Development != Web Development
  31. 31. 31 - HTML - JavaScript - stateless Server - CSS: SMACSS/BEM → high reuse → smooth integration Web Development != Web Development
  32. 32. 32 - HTML - JavaScript - stateless Server - CSS: SMACSS/BEM → high reuse → smooth integration Web Development != Web Development
  33. 33. 33 too much new stuff!
  34. 34. 34 ? The Almighty Web Ecosystem
  35. 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. 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. 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. 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. 39. Innovative vs Traditional IE8 39 Existing portal server state & design CMS CSS resolution & collaboration with external media agency
  40. 40. 40 Change is happening → people matter most
  41. 41. 41 Change is happening → people matter most → techtalks → shared knownledge → web experts → babysteps
  42. 42. 42 Yes, we did it ! ✓ Personal Finance Manager
  43. 43. Personal Finance Manager, Results
  44. 44. Personal Finance Manager, Results 44
  45. 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. 46. We just switched to another web framework 46 ?
  47. 47. We just switched to another web framework 47
  48. 48. Identified Vision & IT Long Term Strategy UI stable agile Architectural Character 48 → easy extendable > reusable
  49. 49. Identified Vision & IT Long Term Strategy UI Business Logic Database stable agile Architectural Character 49 results
  50. 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. 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. 52. Open Todos - Responsive Webdesign/ Mobile - CSS components - lighten CMS bounds - JavaScript on Server - SEO with Phantom.js 52
  53. 53. 53
  54. 54. Being part of the elite 54 → got it ?
  55. 55. We successfully switched to long term web development with the help of 55 … and how about You ?
  56. 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. 57. David.Amend@it-amend.de 57 Link to presentation
  58. 58. Additional Slides 58
  59. 59. IT enabler : competitive in eBusiness web- knownledge Time Advantage your company competitor Happyuser! ✔
  60. 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. 61. SEO Should you use Angular for SEO pages ? → made for applications 61
  62. 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. 63. SEO http://de.slideshare.net/Battlefy/seofriendly-single-page-applications-angularjs-prerenderio-by-battlefy-jaime-bueza 63
  64. 64. JavaScript Sharing Code with Server 64
  65. 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. 66. Security - client | server - ng-csp - ng-sanitize - $http: CSFR - Security issues https://code.google.com/p/mustache-security/wiki/AngularJS 66
  67. 67. Angular 2.0 67
  68. 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. 69. Typescriptifying 69
  70. 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. 71
  72. 72. 72
  73. 73. 73
  74. 74. 74
  75. 75. 75
  76. 76. 76
  77. 77. 77 Techstack
  78. 78. Full Transition to Modern Techstack Sonar/ Findbugs - Plato - Istanbul - Phantomas - TSLint - JsDoc3 Beginner Advanced Expert 78
  79. 79. Full Transition to Modern Techstack Sonar/ Findbugs - Plato - Istanbul - Phantomas - TSLint - JsDoc3 MVN-Repository - Bower - NPM Beginner Advanced Expert 79
  80. 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. 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. 82. Modern Techstack : Frameworks Java language - TypeScript - SourceMaps - CSS - HTML 82
  83. 83. Modern Techstack : Frameworks Java language - TypeScript - SourceMaps - CSS - HTML JSF/Vaadin/Spring MVC 83
  84. 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. 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. 86. Multi Web Project Open Source Template 86
  87. 87. Modularization Web modularization: Maven, None, AMD, CommonJS, ES6, TypeScript 87 angular 2.0
  88. 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. 89. Component Responsibility 89
  90. 90. Think MVC Angular Service = model & communicator
  91. 91. 99 PFM Demo Fallback
  92. 92. 100
  93. 93. 101
  94. 94. 102
  95. 95. 103
  96. 96. 104
  97. 97. 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
  98. 98. 106
  99. 99. 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
  100. 100. 108 Innovations happen in the browser
  101. 101. 109 This is the way to go !
  102. 102. 110 Unplanned !
  103. 103. 111 Adaptable Adaptiv

×