Angularjs practical project experiences with javascript development in a bank
4 likes2,742 views
This document summarizes a presentation about DAB Bank's experience switching to Angular.js for web development. It discusses how Angular.js helped solve problems with AJAX, customization, and legacy code. It provides an overview of how DAB Bank used Angular.js to build a personal finance manager application. Additional slides cover topics like SEO, security, Angular 2.0, TypeScript, and modern tech stacks.
Angularjs practical project experiences with javascript development in a bank
- 1. Practical Experiences 1 + + Link to presentation
- 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
- 10. 10 ?Spring MVC JSF JSPjQuery The Setup Technology Background New Portal 3.0 Struts PFM
- 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
- 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!
- 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 [email protected] 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. [email protected] 57 Link to presentation
- 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
- 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
- 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 [email protected] https://github.com/dabbank/web3-build-template-demo- apps https://github.com/dabbank/web3-common-build-setup 88
- 90. Think MVC Angular Service = model & communicator
- 100. 100
- 101. 101
- 102. 102
- 103. 103
- 104. 104
- 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 !