modern java web development · introduction thomas kruse ... javafx jsf html5+ rest. modern web...
TRANSCRIPT
![Page 1: Modern Java web development · INTRODUCTION Thomas Kruse ... JavaFX JSF HTML5+ REST. Modern web architecture - with Java 2015-03-18 6 TOOLING OPTIONS gulp / grunt / live-reload Browser](https://reader033.vdocuments.us/reader033/viewer/2022050508/5f9990ce435b11253e2d0170/html5/thumbnails/1.jpg)
JUG Münster
Modern Java web development
Thomas Kruse
![Page 2: Modern Java web development · INTRODUCTION Thomas Kruse ... JavaFX JSF HTML5+ REST. Modern web architecture - with Java 2015-03-18 6 TOOLING OPTIONS gulp / grunt / live-reload Browser](https://reader033.vdocuments.us/reader033/viewer/2022050508/5f9990ce435b11253e2d0170/html5/thumbnails/2.jpg)
Modern web architecture - with Java 22015-03-18
INTRODUCTION
▪ Thomas Kruse
▫Consultant
▫ Leader JUG Münster
▫@everflux on twitter
![Page 3: Modern Java web development · INTRODUCTION Thomas Kruse ... JavaFX JSF HTML5+ REST. Modern web architecture - with Java 2015-03-18 6 TOOLING OPTIONS gulp / grunt / live-reload Browser](https://reader033.vdocuments.us/reader033/viewer/2022050508/5f9990ce435b11253e2d0170/html5/thumbnails/3.jpg)
Modern web architecture - with Java 32015-03-18
SHOW CASE
Social App (not only) for JUGs Twitter Facebook …
Keeping credentials centralized
Timed publications …
Illustrate architecture decision making
Showcase Netbeans ;-) And modern Java
![Page 4: Modern Java web development · INTRODUCTION Thomas Kruse ... JavaFX JSF HTML5+ REST. Modern web architecture - with Java 2015-03-18 6 TOOLING OPTIONS gulp / grunt / live-reload Browser](https://reader033.vdocuments.us/reader033/viewer/2022050508/5f9990ce435b11253e2d0170/html5/thumbnails/4.jpg)
Modern web architecture - with Java 42015-03-18
SETTING
Decoupled front-end/back-end
Low latency
Manage front-end complexity
Leverage the cloud
More complex systems
Mobile devices
New major players / trend setters
Low latency
Cross-device
Ease of use
Time to market
Long lasting systems
EnvironmentUser
expectationsArchitecture requirements
![Page 5: Modern Java web development · INTRODUCTION Thomas Kruse ... JavaFX JSF HTML5+ REST. Modern web architecture - with Java 2015-03-18 6 TOOLING OPTIONS gulp / grunt / live-reload Browser](https://reader033.vdocuments.us/reader033/viewer/2022050508/5f9990ce435b11253e2d0170/html5/thumbnails/5.jpg)
Modern web architecture - with Java 52015-03-18
FRONTEND OPTIONS
Java Swing / JavaFX
JSF
HTML5+REST
![Page 6: Modern Java web development · INTRODUCTION Thomas Kruse ... JavaFX JSF HTML5+ REST. Modern web architecture - with Java 2015-03-18 6 TOOLING OPTIONS gulp / grunt / live-reload Browser](https://reader033.vdocuments.us/reader033/viewer/2022050508/5f9990ce435b11253e2d0170/html5/thumbnails/6.jpg)
Modern web architecture - with Java 62015-03-18
TOOLING OPTIONS
gulp / grunt / live-reload
Browser
Chrome dev tools Debugger
HTML5 diagnostic APIsIDE
Code-completion
Navigation
Hints
Round-trip integration
Instant Live-reload
Debugging / breakpoints
gulp / grunt / npm
![Page 7: Modern Java web development · INTRODUCTION Thomas Kruse ... JavaFX JSF HTML5+ REST. Modern web architecture - with Java 2015-03-18 6 TOOLING OPTIONS gulp / grunt / live-reload Browser](https://reader033.vdocuments.us/reader033/viewer/2022050508/5f9990ce435b11253e2d0170/html5/thumbnails/7.jpg)
Modern web architecture - with Java 72015-03-18
DEMO
▪ Netbeans round-trip editing
![Page 8: Modern Java web development · INTRODUCTION Thomas Kruse ... JavaFX JSF HTML5+ REST. Modern web architecture - with Java 2015-03-18 6 TOOLING OPTIONS gulp / grunt / live-reload Browser](https://reader033.vdocuments.us/reader033/viewer/2022050508/5f9990ce435b11253e2d0170/html5/thumbnails/8.jpg)
Modern web architecture - with Java 82015-03-18
INTEGRATION IMPLICATIONS
Finer grained
Parallel
Out-of-order
Composition of multiple APIs
Same API for M2M
Front-End
Coarse grained (JSF, MVC)
Sequential
Single-Threaded
Container services
− Security
− Transactions
Separate API for M2M
Back-End
![Page 9: Modern Java web development · INTRODUCTION Thomas Kruse ... JavaFX JSF HTML5+ REST. Modern web architecture - with Java 2015-03-18 6 TOOLING OPTIONS gulp / grunt / live-reload Browser](https://reader033.vdocuments.us/reader033/viewer/2022050508/5f9990ce435b11253e2d0170/html5/thumbnails/9.jpg)
Modern web architecture - with Java 92015-03-18
PROJECT STRUCTURE
Dependency
● Highly coupled● Pace of evolution mismatch
● Part of application● Simultaneous release
● WebJars● Manual – add to SCM
● Maven● Gradle
Separate front end project
Deployment
Single project
Build system
Coupling
● Loosely coupled● Enables separate evolution● Encourages testability● Easy replacement of one part
● Separate● Low requirements for plain HTML
● npm● bower
● grunt● gulp
![Page 10: Modern Java web development · INTRODUCTION Thomas Kruse ... JavaFX JSF HTML5+ REST. Modern web architecture - with Java 2015-03-18 6 TOOLING OPTIONS gulp / grunt / live-reload Browser](https://reader033.vdocuments.us/reader033/viewer/2022050508/5f9990ce435b11253e2d0170/html5/thumbnails/10.jpg)
Modern web architecture - with Java 102015-03-18
CHOOSING A FRAMEWORK
Why a front-end framework? jQuery is dead … and was never a
framework
Testability Ease of development
Team scaling Even outsourcing
![Page 11: Modern Java web development · INTRODUCTION Thomas Kruse ... JavaFX JSF HTML5+ REST. Modern web architecture - with Java 2015-03-18 6 TOOLING OPTIONS gulp / grunt / live-reload Browser](https://reader033.vdocuments.us/reader033/viewer/2022050508/5f9990ce435b11253e2d0170/html5/thumbnails/11.jpg)
Modern web architecture - with Java 112015-03-18
REACT + FLUX
▫… and others
▪ React.js
▫ Library
▫ (virtual) DOM manipulation
▫Unidirectional data-flow concept
▫Server-side rendering possible
▪ No framework!
▫HTTP Service - superagent
![Page 12: Modern Java web development · INTRODUCTION Thomas Kruse ... JavaFX JSF HTML5+ REST. Modern web architecture - with Java 2015-03-18 6 TOOLING OPTIONS gulp / grunt / live-reload Browser](https://reader033.vdocuments.us/reader033/viewer/2022050508/5f9990ce435b11253e2d0170/html5/thumbnails/12.jpg)
Modern web architecture - with Java 122015-03-18
REACT/FLUX BLOCKS
ACTION DISPATCHER STORE VIEW
▪ View components
▫ JSX (optional, no IDE support)
▫ Properties (immut.) input
▪ Dispatcher
▫ Receives actions, notifies callbacks
▪ Store
▫ Container for state and callbacks
▪ Action
▫ Passed to dispatcher (payload)
![Page 13: Modern Java web development · INTRODUCTION Thomas Kruse ... JavaFX JSF HTML5+ REST. Modern web architecture - with Java 2015-03-18 6 TOOLING OPTIONS gulp / grunt / live-reload Browser](https://reader033.vdocuments.us/reader033/viewer/2022050508/5f9990ce435b11253e2d0170/html5/thumbnails/13.jpg)
Modern web architecture - with Java 132015-03-18
Angular
▪ Front-end framework
▪ Opinionated
▪ Dependency injection
▪ Model-View-ViewModel
▪ Two-way data binding
▪ Routing
▪ Directives, Services
▪ Java developers feel at home
![Page 14: Modern Java web development · INTRODUCTION Thomas Kruse ... JavaFX JSF HTML5+ REST. Modern web architecture - with Java 2015-03-18 6 TOOLING OPTIONS gulp / grunt / live-reload Browser](https://reader033.vdocuments.us/reader033/viewer/2022050508/5f9990ce435b11253e2d0170/html5/thumbnails/14.jpg)
Modern web architecture - with Java 142015-03-18
ANGULAR DESIGN
TwitterDisplay(directive) TwitterService
twitterListEntry
twitterListEntry
twitterListEntry
twitterListEntry
twitterListEntry
getTweets()
[ { “body”: “hi there..”,“sent”: “2015-03-01...” }, { “body”: “i am aliiiive..”,“sent”: “2015-02-28...” },...]
![Page 15: Modern Java web development · INTRODUCTION Thomas Kruse ... JavaFX JSF HTML5+ REST. Modern web architecture - with Java 2015-03-18 6 TOOLING OPTIONS gulp / grunt / live-reload Browser](https://reader033.vdocuments.us/reader033/viewer/2022050508/5f9990ce435b11253e2d0170/html5/thumbnails/15.jpg)
Modern web architecture - with Java 152015-03-18
DEMO
▪ Angular message service – fake or real
![Page 16: Modern Java web development · INTRODUCTION Thomas Kruse ... JavaFX JSF HTML5+ REST. Modern web architecture - with Java 2015-03-18 6 TOOLING OPTIONS gulp / grunt / live-reload Browser](https://reader033.vdocuments.us/reader033/viewer/2022050508/5f9990ce435b11253e2d0170/html5/thumbnails/16.jpg)
Modern web architecture - with Java 162015-03-18
WEB COMPONENTS
▪ Mostly implemented across relevant platforms
▪
▪
![Page 17: Modern Java web development · INTRODUCTION Thomas Kruse ... JavaFX JSF HTML5+ REST. Modern web architecture - with Java 2015-03-18 6 TOOLING OPTIONS gulp / grunt / live-reload Browser](https://reader033.vdocuments.us/reader033/viewer/2022050508/5f9990ce435b11253e2d0170/html5/thumbnails/17.jpg)
DEMO
▪ Netbeans web-component editing
![Page 18: Modern Java web development · INTRODUCTION Thomas Kruse ... JavaFX JSF HTML5+ REST. Modern web architecture - with Java 2015-03-18 6 TOOLING OPTIONS gulp / grunt / live-reload Browser](https://reader033.vdocuments.us/reader033/viewer/2022050508/5f9990ce435b11253e2d0170/html5/thumbnails/18.jpg)
Modern web architecture - with Java 182015-03-18
BACKEND LANGUAGE
Java
PHP / Ruby / Python
Java EE Spring Boot dropwizard Fancy other options like vert.x
node / io.js
go
![Page 19: Modern Java web development · INTRODUCTION Thomas Kruse ... JavaFX JSF HTML5+ REST. Modern web architecture - with Java 2015-03-18 6 TOOLING OPTIONS gulp / grunt / live-reload Browser](https://reader033.vdocuments.us/reader033/viewer/2022050508/5f9990ce435b11253e2d0170/html5/thumbnails/19.jpg)
Modern web architecture - with Java 192015-03-18
OUR STACK
Tooling
● Spring Boot● Spring Integration
● Tomcat
● Netbeans IDE● curl
● Maven
Frontend
Runtime
Backend
Build system/Dependency
mgmt
Frameworks● Foundation CSS● Angular● Angular Foundation
● Browser
● Netbeans IDE● Chrome / Firefox
● npm / bower● grunt
![Page 20: Modern Java web development · INTRODUCTION Thomas Kruse ... JavaFX JSF HTML5+ REST. Modern web architecture - with Java 2015-03-18 6 TOOLING OPTIONS gulp / grunt / live-reload Browser](https://reader033.vdocuments.us/reader033/viewer/2022050508/5f9990ce435b11253e2d0170/html5/thumbnails/20.jpg)
Modern web architecture - with Java 202015-03-18
BACKEND BOOTSTRAP
jhipster
spring initializr Code generation maintained by spring Maven + Gradle Cloud service
maven archetype
No broad support Hard to implement Often not well maintained One time scaffolding
![Page 21: Modern Java web development · INTRODUCTION Thomas Kruse ... JavaFX JSF HTML5+ REST. Modern web architecture - with Java 2015-03-18 6 TOOLING OPTIONS gulp / grunt / live-reload Browser](https://reader033.vdocuments.us/reader033/viewer/2022050508/5f9990ce435b11253e2d0170/html5/thumbnails/21.jpg)
Modern web architecture - with Java 212015-03-18
![Page 22: Modern Java web development · INTRODUCTION Thomas Kruse ... JavaFX JSF HTML5+ REST. Modern web architecture - with Java 2015-03-18 6 TOOLING OPTIONS gulp / grunt / live-reload Browser](https://reader033.vdocuments.us/reader033/viewer/2022050508/5f9990ce435b11253e2d0170/html5/thumbnails/22.jpg)
Modern web architecture - with Java 222015-03-18
DEMO
Run spring-boot in Netbeans
Configuration hint: resources:resources
![Page 23: Modern Java web development · INTRODUCTION Thomas Kruse ... JavaFX JSF HTML5+ REST. Modern web architecture - with Java 2015-03-18 6 TOOLING OPTIONS gulp / grunt / live-reload Browser](https://reader033.vdocuments.us/reader033/viewer/2022050508/5f9990ce435b11253e2d0170/html5/thumbnails/23.jpg)
Modern web architecture - with Java 232015-03-18
FRONTEND BOOTSTRAP
yeoman
angular seed
![Page 24: Modern Java web development · INTRODUCTION Thomas Kruse ... JavaFX JSF HTML5+ REST. Modern web architecture - with Java 2015-03-18 6 TOOLING OPTIONS gulp / grunt / live-reload Browser](https://reader033.vdocuments.us/reader033/viewer/2022050508/5f9990ce435b11253e2d0170/html5/thumbnails/24.jpg)
Modern web architecture - with Java 242015-03-18
DEMO
▪ Netbeans angular seed bootstrap
![Page 25: Modern Java web development · INTRODUCTION Thomas Kruse ... JavaFX JSF HTML5+ REST. Modern web architecture - with Java 2015-03-18 6 TOOLING OPTIONS gulp / grunt / live-reload Browser](https://reader033.vdocuments.us/reader033/viewer/2022050508/5f9990ce435b11253e2d0170/html5/thumbnails/25.jpg)
Modern web architecture - with Java 252015-03-18
IMPLICATIONS
Teams / Roles
Development
Develop stateless back-end services Develop front-end components Different skill set
Testability Flexibility API management Different level of re-use Speed of change
Operations Different infrastructure Distributed logging and diagnosis Scaling can leverage cloud infrastructure
![Page 26: Modern Java web development · INTRODUCTION Thomas Kruse ... JavaFX JSF HTML5+ REST. Modern web architecture - with Java 2015-03-18 6 TOOLING OPTIONS gulp / grunt / live-reload Browser](https://reader033.vdocuments.us/reader033/viewer/2022050508/5f9990ce435b11253e2d0170/html5/thumbnails/26.jpg)
LESSONS LEARNED
Effort! Transition involves many aspects
Technology, Organization, Development
Shift in complexity
Mindshift
Architecture is different
New architecture patterns
API not only for m2m
EvolutionHigh evolution speed
Prepare for (even more) constant change
![Page 27: Modern Java web development · INTRODUCTION Thomas Kruse ... JavaFX JSF HTML5+ REST. Modern web architecture - with Java 2015-03-18 6 TOOLING OPTIONS gulp / grunt / live-reload Browser](https://reader033.vdocuments.us/reader033/viewer/2022050508/5f9990ce435b11253e2d0170/html5/thumbnails/27.jpg)
Modern web architecture - with Java 272015-03-18
Q&A
Your Questions?
Thomas Kruse @everflux
![Page 28: Modern Java web development · INTRODUCTION Thomas Kruse ... JavaFX JSF HTML5+ REST. Modern web architecture - with Java 2015-03-18 6 TOOLING OPTIONS gulp / grunt / live-reload Browser](https://reader033.vdocuments.us/reader033/viewer/2022050508/5f9990ce435b11253e2d0170/html5/thumbnails/28.jpg)
Modern web architecture - with Java 282015-03-18
STOP BACKUP STOP
![Page 29: Modern Java web development · INTRODUCTION Thomas Kruse ... JavaFX JSF HTML5+ REST. Modern web architecture - with Java 2015-03-18 6 TOOLING OPTIONS gulp / grunt / live-reload Browser](https://reader033.vdocuments.us/reader033/viewer/2022050508/5f9990ce435b11253e2d0170/html5/thumbnails/29.jpg)
Modern web architecture - with Java 292015-03-18
DEMOS
▪ HTML Round-trip-editing
▪ Angular message service
▪ Webcomponent editing
▪ Spring-boot-init opening, running on tomcat
▪ Angular-seed opening