Date post: | 15-Jul-2015 |
Category: |
Documents |
Upload: | david-amend |
View: | 559 times |
Download: | 0 times |
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
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
- Yahoo
- Ebay
- 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
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
[email protected] 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
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