Reasons to migrate to modern web development with JavaScript
4 likes2,389 views
advanced, angular, angular.js, architecture, cons, dab-bank, java, javaee, javascript, jsf, lessons learned, migration, node, pro, serverside, techstack, typescript, vaadin, webframework, java
Reasons to migrate to modern web development with JavaScript
- 1. Decision from stagnancy to modern web development with javascript
- 3. Facts about web development Runs in the browser: 1. JavaScript 2. declarative HTML 3. stateless HTTP for communication same for serverside-webframeworks innovations happen in browser
- 4. JavaScript HTML HTTP/REST modern web development = knownledge and usage in web technologies &
- 5. Is JavaScript web development more efficient than serverside Java Web Frameworks Depends on Yes No Audience Question
- 6. Reasons we had before to stay with Java-web-frameworks JavaScript is ... - not for large scale - less efficient - limited: SEO, security, stable, - not for business apps http://lewisblayse.files.wordpress.com/2013/04/know_your_enemy.gif
- 7. Unwilling dirty hacking not expert of shell scripting unexpected piece of code quick and dirty myshellscript.sh
- 8. Unwilling dirty hacking unexpected piece of code does not fit in technology stack concept
- 9. Full Transition to Modern Techstack Maven/AntSonar/ Findbugs - Node.js - Grunt Gulp - Plato - Istanbul - Phantomas - TSLint - JsDoc3 MVN-Repository - Bower - NPM - Webstorm - BrowserSync - Remote debugging - Spy.Js Gadgets Beginner Advanced Expert
- 10. Node.js NPM: Build tools for the web - Efficient development - Minification - Optimization - Modularization - Analysis
- 11. Modern Techstack : Frameworks Java language - TypeScript - SourceMaps - CSS - HTML JUnit/Selenium - Jasmine - Protractor Component based / OO JSF/Vaadin/Spring MVC - Jersey Java - mvn: d.ts interface-generator - Angular - Bootstrap - ... - declarative - Composite Pattern - project structure: web optimized Even exceeds Java code quality & effort
- 12. All about User EXperience high quality & unrivaled UI time to market & performant
- 13. Frontend First Server Server First Frontend Change - focus on UX - user first - propagates iterative development - focus on spec - database first
- 16. CGI JSP Point Of Transition: Web-Standards Are Preferred Time Server-side Java Maturity complexity HTTP HTML JavaScript m o re efficientWeb-Frameworks AJAX
- 17. Framework Systems 1. avoiding web technologies 2. different lifecycles & philosophies 3. hard to migrate GWT Wicket JSF Spring MVC
- 18. Illusion of Abstraction Disrespect of Standards Reasons Of Serverside Web Failture All-in-One product suites 1. 2. 4.3. Code Generators
- 19. MVC Browser Traditional Architecture Server 1. missing clear separation of UI & business code 2. stateful server leads to monolith Request Response
- 20. REST-Layer Architecture Server Input Output = Tester = Mock Browser REST Development: - independant - testable MVC
- 21. Multi-Device Architecture Server Mobile ... 12% 75% % = Device Shipment, 2014 Desktop REST - homogenous architecture - fits mobile strategy
- 23. Learn from the best - Facebook - Twitter - Yahoo - Google - Ebay - LinkedIn - Airbnb - Paypal Closure Templates 2013 2013 2012 2009 2012 2012 2012 2013 Client Driven Web Development, JavaScript on the server
- 24. PrimeFaces requirements IceFacesPrimeFaces + + RichFaces Requirements do not fit existing framework Example: Customization != default Tomcat server dependencies, only. Really ??? =
- 25. Dependencies: Server != Browser Server mvn dependency-tree Uncontrolled shipped code
- 26. 1. Module dependencies - bower - npm 2. Code Dependencies - CommonJS - AMD - Web Components TypeScript import angular = require(angular) ECMAScript6 Harmony import * as angular from angular
- 27. modern web modularized lightweight Widgets - jQuery - angular - custom - ... Layout- Manager Widgets CSS - dropdown - modal - custom - ... 1. 2. 3. Lean UIExample: Twitter Bootstrap
- 28. Modern Web Aplication Stack 1. introduce - best solution on market 2. exchange - non-fitting features 3. extend, refactor & customize controlled flexibility over:
- 29. Costs of introducing modern web http://www.infoq.com/news/2013/11/paypal-java-javascript Java JavaScript Set-up time 0 2 months Development ~ 5 months ~ 3 months Engineers 5 2 long term money saver cool stuff: reason for candidates wider job market Ruby- Devs Python-Devs Java-DevsPHP-Devs .NET- Devs Designer Web-Dev Ops
- 30. Competitive in Web-Solutions web- knownledge Time Advantage your company com petitor Happy user!
- 32. Bug/Missing Feature explain & reproduce wait for solution All-In-One Framework-Partner Bug /Missing Feature Just Implement wait for solution Immature Developer explain & reproduce V Customization != default Customization == default Feature doable? Estimated time? ?
- 33. Proof by Code http://jsfiddle.net/davidamend/fpe51p96 1. controlled flexibility 2. common understanding a. declarative HTML b. JavaScript event binding
- 34. How to start ? 1. hire web developers 2. start simple: Lean UI 3. simplify choice: by contributors Success
- 40. ? 1. Efficience 2. Stability by flexibility 3. User Experience WHY Modern Web? Experiences@DAB-Bank
- 41. Twitter Bootstrap Modern Web Aplication Stack Fade-Animation HTML-5 Drag-Drop Foundation 5 Choose only the best Angular Backbone Customization == default Unflexible All-in-one solution