@dskgry #WISSENTEILEN

MVC 1.0 als alternative Webtechnologie

Womit machen wir‘s denn nun?

@_openknowledge

Sven Kölpin – open knowledge GmbH

Evolution of the web

• Simple Web-Applications

• Rich Internet Applications

• Single-page Applications

2000

Heute

MVC

BrowserServer

Web MVC

ControllerModel View

Business-Logik

JavaScript

XHRRequest

ResponseDB

HTML

What do you guys use?

Spring MVC Spring boot Other JSF GWT/Vaadin Nothing Struts Play

zeroturnaround 2016

https://jaxenter.com/

Boiling it down…

• JSF

• Wicket

• Vaadin

• …

Component-based

• Spring MVC

• MVC 1.0

• Play

• …

Action-based

Types Of MVC Web Frameworks

Abstraction Web oriented

Component-based MVC Frameworks

Component-based MVC

• Components

• Components == serverside

• Viewstate

• Stateful / Sessions

• Abstraction

• != HTTP

• != JavaScript, CSS, HTML

Architecture

ControllerModel View

Business-LogikHTML

JavaScript

XHRFramework

Convert / Validate

Components

Req. / Res.

Developer

Framework

Limits

• Abstraction

• Scalability

• Complexity

• Learning curve

• Special requirements

Works well when…

• Abstraction necessary

• Form-based applications

• Simple UI / Prototyping

Works not so well when…

• Complex UI / data flows

• Techn. flexibility

• Mobile or slow / unstable network

Example: JSF abstraction

@Model

public class SomeBean {

private String someValue;

public void create() {/*...*/}

/*getter + setter */

}

<h:body>

<h:form>

<h:inputText id="someValue" value="#{someBean.someValue}"/>

<h:commandButton actionListener="#{someBean.create}">

<f:ajax execute="@form" render="@form"/>

</h:commandButton>

</h:form>

</h:body>

Example: Vaadin abstraction

• Java to JavaScript

• != HTML, JS, CSS

Forms / Events

FormLayout form = new FormLayout();

TextField title = new TextField("Title:");

title.setRequired(true);

title.addValidator(new NullValidator("*", false));

form.addComponent(title);

Button save = new Button("Save");

save.addClickListener((Button.ClickListener) clickEvent -> {

...

});

Action-based MVC Frameworks

Properties

• „Classic“ web programming

• Less abstraction

• NO (serverside) components

• More lightweight MVC 1.0

Architecture

ControllerModel View

Request

Business-Logik

JavaScript

XHRFramework

Dispatch

Response

HTML

Developer

Framework

Render

Advantages

• Stateless / Stateful

• Clientside rendering / Serverside rendering

• HTML / JSON / XML / …

• Flexibility

Limits

• Can be costlier

• More techn. knowledge needed

• Reusable components

MVC 1.0

MVC 1.0

Basics

• JSR(371)• Java EE 8: First Half 2017

• Renewal Ballot 29.11 – 12.12

• Community Project

• EE4j

• Lightweight specification• Integrates existing specs

• Alternative to JSF• Not a replacement

MVC 1.0

MVC & JAX-RS

• Based on JAX-RS

• HTTP-Methods

• @GET, @POST, @PUT, @PATCH, @DELETE…

• Annotations

• @QueryParam, @PathParam, @BeanParam…

MVC vs. JAX-RS

• CDI is a must-have

• Controller can be stateful!

• Integrates various templating engines

• Default: Facelets & JSP

MVC Features

ControllerModel View

Controller

• New Annotation @Controller

• Class or method

• Mix of JAX-RS and @Controller possible

• @Controller-Methods return View

@Controller

@Path("myController")

public class MyController {

@GET

@View("hello.jsp")

public void helloVoid() {

}

@GET

public String helloString() {

return "hello.jsp";

}

@GET

public Viewable helloViewable() {

return new Viewable("hello.jsp");

}

@GET

public Response helloResponse() {

return Response.status(Response.Status.OK).entity("hello.jsp").build();

}

@GET

public MyView helloMyView() {

return new MyView("hello.jsp"); // toString() -> "hello.jsp"

}

}

MVC Features

ControllerModel View

Models (1/2)

Simple CDI beans

@Inject

private TimeBean timeBean;

@POST

@Controller

public Viewable updateTime() {

timeBean.setTime(System.currentTimeMillis());

return new Viewable("index.jsp");

}

@Named

@SessionScoped

public class TimeBean{

…

}

Models (2/2)

Models-Interface

• Map<String, Object>

@Inject

private Models models;

@POST

@Controller

public Viewable updateTime() {

models.put("time", System.currentTimeMillis());

return new Viewable("index.jsp");

}

${time} available in View

MVC Features

ControllerModel View

@Named

@SessionScoped

public class SettingsBean …{

}

Views (1/2)

Access Named CDI-Beans

<ul>

<c:forEach items="${settingsBean.myList}" var="item">

<li>

${item}

</li>

</c:forEach>

</ul>

Views (2/2)

Modelinterface via EL

<h1>

${time}

</h1>

public Viewable index() {

models.put("time",…);

…

}

MVC Features

ControllerModel View

CUD

<form method="post">

<input type="text" name="title"/>

<input type="date" name="dueDate"/>

<input type="submit"/>

</form>

Form Data

FormParam & BeanValidation

@POST

@Controller

public Response createTodo(

@FormParam("title") @NotNull String title,

@FormParam("dueDate") @Future Date dueDate) {

…

}

Form Data: BeanParampublic class TodoItemModel{

@NotNull

@FormParam("title")

@Size(min = 1, max = 20)

private String title;

@NotNull

@Future

@FormParam("dueDate")

private Date dueDate;

}

public Response createTodo(@Valid

@BeanParam TodoItemModel todoItemModel) {

…

}

Validation: BindingResult

@Inject

private BindingResult bindingResult;

@POST

@Controller

public Response saveTodo(@Valid @BeanParam TodoItemModel model) {

if (bindingResult.isFailed()) {

return Response.ok().entity("err.jsp").build();

}

return Response.ok().entity("success.jsp").build();

}

Form Data…

JSON Data

@POST

@Controller

@Consumes(MediaType.APPLICATION_JSON)

public Response createTodo(@Valid TodoItem todoItem) {

}

public class TodoItem {

@NotNull

@Size(min = 3, max = 50)

private String title;

}

Modern Web?

MVC 1.0: NO LIMITS!

Clientside components

Serverside rendered pages Clientside rendered pages

MVC 1.0

• Serverside Rendering

• „Rich internet applications“

• JavaScript: DOM-Manipulation

Example: jQuery UI

• HTML

• JavaScript

<input type="text"

data-datepicker="true"

name="dueDate"/>

$("input[data-datepicker='true']").datepicker();

Web Components

Web Components

• Custom elements

• Templates

• HTML-imports

• Shadow DOM

Example: Web Components

• HTML

• JavaScript

<my-datePicker format="dd.mm.yy"/>

class DatePickerComponent extends HTMLElement {

}

window.customElements.define('my-datepicker', DatePickerComponent);

MVC 1.0

• Clientside Rendering

• „Single-Page Applications“

• JavaScript: Rendering & App-Logic

Pre-render via Nashorn

Conclusion

• Action based vs. Component based

• Action based on the rise (again)

• MVC 1.0 === max. flexibility

• Existing standards

• Client becomes more important

MVC 1.0

All images taken from pixabay.com