YOU ARE DOWNLOADING DOCUMENT

Please tick the box to continue:

Transcript
Page 1: MVC 1.0 als alternative Webtechnologie

@dskgry #WISSENTEILEN

MVC 1.0 als alternative Webtechnologie

Womit machen wir‘s denn nun?

@_openknowledge

Sven Kölpin – open knowledge GmbH

Page 2: MVC 1.0 als alternative Webtechnologie

Evolution of the web

• Simple Web-Applications

• Rich Internet Applications

• Single-page Applications

2000

Heute

MVC

Page 3: MVC 1.0 als alternative Webtechnologie

BrowserServer

Web MVC

ControllerModel View

Business-Logik

JavaScript

XHRRequest

ResponseDB

HTML

Page 4: MVC 1.0 als alternative Webtechnologie

What do you guys use?

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

zeroturnaround 2016

Page 5: MVC 1.0 als alternative Webtechnologie

https://jaxenter.com/

Page 6: MVC 1.0 als alternative Webtechnologie

Boiling it down…

Page 7: MVC 1.0 als alternative Webtechnologie

• JSF

• Wicket

• Vaadin

• …

Component-based

• Spring MVC

• MVC 1.0

• Play

• …

Action-based

Types Of MVC Web Frameworks

Abstraction Web oriented

Page 8: MVC 1.0 als alternative Webtechnologie

Component-based MVC Frameworks

Page 9: MVC 1.0 als alternative Webtechnologie

Component-based MVC

• Components

• Components == serverside

• Viewstate

• Stateful / Sessions

• Abstraction

• != HTTP

• != JavaScript, CSS, HTML

Page 10: MVC 1.0 als alternative Webtechnologie

Architecture

ControllerModel View

Business-LogikHTML

JavaScript

XHRFramework

Convert / Validate

Components

Req. / Res.

Developer

Framework

Page 11: MVC 1.0 als alternative Webtechnologie

Limits

• Abstraction

• Scalability

• Complexity

• Learning curve

• Special requirements

Page 12: MVC 1.0 als alternative Webtechnologie

Works well when…

• Abstraction necessary

• Form-based applications

• Simple UI / Prototyping

Page 13: MVC 1.0 als alternative Webtechnologie

Works not so well when…

• Complex UI / data flows

• Techn. flexibility

• Mobile or slow / unstable network

Page 14: MVC 1.0 als alternative Webtechnologie

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>

Page 15: MVC 1.0 als alternative Webtechnologie

Example: Vaadin abstraction

• Java to JavaScript

• != HTML, JS, CSS

Page 16: MVC 1.0 als alternative Webtechnologie

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 -> {

...

});

Page 17: MVC 1.0 als alternative Webtechnologie

Action-based MVC Frameworks

Page 18: MVC 1.0 als alternative Webtechnologie

Properties

• „Classic“ web programming

• Less abstraction

• NO (serverside) components

• More lightweight MVC 1.0

Page 19: MVC 1.0 als alternative Webtechnologie

Architecture

ControllerModel View

Request

Business-Logik

JavaScript

XHRFramework

Dispatch

Response

HTML

Developer

Framework

Render

Page 20: MVC 1.0 als alternative Webtechnologie

Advantages

• Stateless / Stateful

• Clientside rendering / Serverside rendering

• HTML / JSON / XML / …

• Flexibility

Page 21: MVC 1.0 als alternative Webtechnologie

Limits

• Can be costlier

• More techn. knowledge needed

• Reusable components

Page 22: MVC 1.0 als alternative Webtechnologie

MVC 1.0

MVC 1.0

Page 23: MVC 1.0 als alternative Webtechnologie

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

Page 24: MVC 1.0 als alternative Webtechnologie

MVC & JAX-RS

• Based on JAX-RS

• HTTP-Methods

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

• Annotations

• @QueryParam, @PathParam, @BeanParam…

Page 25: MVC 1.0 als alternative Webtechnologie

MVC vs. JAX-RS

• CDI is a must-have

• Controller can be stateful!

• Integrates various templating engines

• Default: Facelets & JSP

Page 26: MVC 1.0 als alternative Webtechnologie

MVC Features

ControllerModel View

Page 27: MVC 1.0 als alternative Webtechnologie

Controller

• New Annotation @Controller

• Class or method

• Mix of JAX-RS and @Controller possible

• @Controller-Methods return View

Page 28: MVC 1.0 als alternative Webtechnologie

@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"

}

}

Page 29: MVC 1.0 als alternative Webtechnologie

MVC Features

ControllerModel View

Page 30: MVC 1.0 als alternative Webtechnologie

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{

}

Page 31: MVC 1.0 als alternative Webtechnologie

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

Page 32: MVC 1.0 als alternative Webtechnologie

MVC Features

ControllerModel View

Page 33: MVC 1.0 als alternative Webtechnologie

@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>

Page 34: MVC 1.0 als alternative Webtechnologie

Views (2/2)

Modelinterface via EL

<h1>

${time}

</h1>

public Viewable index() {

models.put("time",…);

}

Page 35: MVC 1.0 als alternative Webtechnologie

MVC Features

ControllerModel View

CUD

Page 36: MVC 1.0 als alternative Webtechnologie

<form method="post">

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

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

<input type="submit"/>

</form>

Page 37: MVC 1.0 als alternative Webtechnologie

Form Data

FormParam & BeanValidation

@POST

@Controller

public Response createTodo(

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

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

}

Page 38: MVC 1.0 als alternative Webtechnologie

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) {

}

Page 39: MVC 1.0 als alternative Webtechnologie

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();

}

Page 40: MVC 1.0 als alternative Webtechnologie

Form Data…

Page 41: MVC 1.0 als alternative Webtechnologie

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;

}

Page 42: MVC 1.0 als alternative Webtechnologie

Modern Web?

Page 43: MVC 1.0 als alternative Webtechnologie

MVC 1.0: NO LIMITS!

Page 44: MVC 1.0 als alternative Webtechnologie

Clientside components

Serverside rendered pages Clientside rendered pages

Page 45: MVC 1.0 als alternative Webtechnologie

MVC 1.0

• Serverside Rendering

• „Rich internet applications“

• JavaScript: DOM-Manipulation

Page 46: MVC 1.0 als alternative Webtechnologie

Example: jQuery UI

• HTML

• JavaScript

<input type="text"

data-datepicker="true"

name="dueDate"/>

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

Page 47: MVC 1.0 als alternative Webtechnologie

Web Components

Page 48: MVC 1.0 als alternative Webtechnologie

Web Components

• Custom elements

• Templates

• HTML-imports

• Shadow DOM

Page 49: MVC 1.0 als alternative Webtechnologie

Example: Web Components

• HTML

• JavaScript

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

class DatePickerComponent extends HTMLElement {

}

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

Page 50: MVC 1.0 als alternative Webtechnologie

MVC 1.0

• Clientside Rendering

• „Single-Page Applications“

• JavaScript: Rendering & App-Logic

Pre-render via Nashorn

Page 51: MVC 1.0 als alternative Webtechnologie

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

Page 52: MVC 1.0 als alternative Webtechnologie

All images taken from pixabay.com


Related Documents