JUG Münster

Modern Java web development

Thomas Kruse

Modern web architecture - with Java 22015-03-18

INTRODUCTION

▪ Thomas Kruse

▫Consultant

▫ Leader JUG Münster

▫@everflux on twitter

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

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

Modern web architecture - with Java 52015-03-18

FRONTEND OPTIONS

Java Swing / JavaFX

JSF

HTML5+REST

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

Modern web architecture - with Java 72015-03-18

DEMO

▪ Netbeans round-trip editing

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

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

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

Modern web architecture - with Java 112015-03-18

REACT + FLUX

▪ Facebook

▫… and others

▪ React.js

▫ Library

▫ (virtual) DOM manipulation

▫Unidirectional data-flow concept

▫Server-side rendering possible

▪ No framework!

▫HTTP Service - superagent

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)

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

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...” },...]

Modern web architecture - with Java 152015-03-18

DEMO

▪ Angular message service – fake or real

Modern web architecture - with Java 162015-03-18

WEB COMPONENTS

▪ Mostly implemented across relevant platforms

▪

▪

DEMO

▪ Netbeans web-component editing

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

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

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

Modern web architecture - with Java 212015-03-18

Modern web architecture - with Java 222015-03-18

DEMO

Run spring-boot in Netbeans

Configuration hint: resources:resources

Modern web architecture - with Java 232015-03-18

FRONTEND BOOTSTRAP

yeoman

angular seed

Modern web architecture - with Java 242015-03-18

DEMO

▪ Netbeans angular seed bootstrap

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

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

Modern web architecture - with Java 272015-03-18

Q&A

Your Questions?

Thomas Kruse @everflux

Modern web architecture - with Java 282015-03-18

STOP BACKUP STOP

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