Reasons to migrate to modern web development with JavaScript
4 likes2,395 views
The document discusses the transition from traditional server-side Java frameworks to modern JavaScript web development, emphasizing the importance of leveraging innovative web technologies for efficiency and user experience. It highlights challenges associated with server-side frameworks and advocates for a shift toward a modular, client-driven architecture that prioritizes frontend development. The document also outlines practical steps for organizations to adopt these modern technologies, including hiring skilled web developers and simplifying UI choices.
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
- 38. ● https://openclipart.org/image/800px/svg_to_png/202768/puzzle_magnify.png
- 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