mvc 1 - jug-h.de · @dskgry #wissenteilen zeitgemäße webanwendungen in javaee mvc 1.0...
TRANSCRIPT
@dskgry #WISSENTEILEN
Zeitgemäße Webanwendungen in JavaEE
MVC 1.0
@_openknowledge
Sven Kölpin – open knowledge GmbH
Entwicklung des Webs
• Simple Web-Applications
• Rich Internet Applications
• Ajax
• Single Page Web-Applications
• „WebApps“
2000
Heute
Entwicklung des Webs
• Simple Web-Applications
• Rich Internet Applications
• Ajax
• Single Page Web-Applications
• „WebApps“
2000
Heute
MVC
ClientServer
MVC im Web
ControllerModel View
HTML /
JSON
Business-Logik
JSON / XML
JavaScript
AJAXREST
DispatcherDB
HTML
What do you guys use? (1/2)
JSF Spring MVC Other(Struts, Grails…)
Wicket GWT / Vaddin Play No Framework
DZONE.com 2015
What do you guys use? (2/2)
Spring MVC Spring boot Other JSF GWT/Vaadin Nothing Struts Play
zeroturnaround 2016
Boiling it down…
• JSF
• Wicket
• Vaadin
• …
Component-based
• Spring MVC
• MVC 1.0
• Struts
• …
Action-based
Web MVC Frameworks
Abstraction Web oriented
Component-based MVC Frameworks
Eigenschaften
• UI aus Komponenten „zusammenstecken“
• Stateful
• Komponenten == serverseitig
• Sessions & Viewstate
• Abstraktion
• != HTTP
• != JavaScript, CSS, HTML
Architektur
ControllerModel View
HTML /
JSON
Business-LogikHTML
JSON / XML
JavaScript
AJAXFramework
Convert / Validate
GUI-Components
Dispatch
Grenzen
• Abstraktion
• Skalierbarkeit
• Komplexität
• Lernkurve
• Sonderfälle
Wann nehmen?
• Abstraktion v. Webtechnologien erforderlich
• Viele Formulare
• Prototyping
Wann lassen?
• Komplexe UI-Logik
• Skalierbarkeit
• Technologietrends
JSF Abstraktion
@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>
Beispiel Vaadin
• Noch mehr Abstraktion
• Java to JavaScript-Compiler
• != 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
Eigenschaften
• Klassische Web-Programmierung
• Weniger Abstraktion
• Request / Response basiert
• Viel leichtgewichtiger
Architektur
ControllerModel View
HTML /
JSON
Request
Business-
Logik
JSON
JavaScript
AJAXFramework
Dispatch
REST
Response
HTML
Vorteile
• Stateless / Stateful
• Clientseitiges Rendering / Serverseitiges Rendering
• HTML & JSON
• Technologietrends
Grenzen
• Aufwändiger
• Technologiewissen
• Wiederwendbare Komponenten
• Nicht ohne Weiteres
MVC 1.0
Grundlagen
• JSR(371)
• Java EE 8: First Half 2017
• Schlanke Spec
• Integration vorhandener Specs
• Alternative zu JSF
• Kein Ersatz
MVC 1.0
MVC und JAX-RS
• Basis: JAX-RS
• HTTP-Methods
• @GET, @POST, @PUT, @DELETE…
• Annotations
• @QueryParam, @PathParam, @BeanParam…
MVC vs. JAX-RS
• CDI fester Bestandteil
• Controller können stateful sein!
• Unterstützt beliebige Templating Engines
• Facelets & JSP per default
ControllerModel View
Controller
• Annotation @Controller
• An Klasse oder Methoden
• Vermischung JAX-RS und @Controller
• Flexible HTTP-Responses (HTML vs. Data)
• @Controller-Methods return View
@Controller
@Path("myController")
public class MyController {
@GET
@Path("void")
@View("hello.jsp")
public void helloVoid() {
}
@GET
@Path("string")
public String helloString() {
return "hello.jsp";
}
@GET
@Path("viewable")
public Viewable helloViewable() {
return new Viewable("hello.jsp");
}
@GET
@Path("response")
public Response helloResponse() {
return Response.status(Response.Status.OK).entity("hello.jsp").build();
}
@GET
@Path("myview")
public MyView helloMyView() {
return new MyView("hello.jsp"); // toString() -> "hello.jsp"
}
}
ControllerModel View
Models (1/2)
• CDI Beans
@Inject
private SettingsBean settingsBean;
@POST
@Controller
public Viewable changeLanguage(@QueryParam("lang") String lang) {
settingsBean.setCurrentLocale(lang);
return new Viewable("main.jsp");
}
@Named
@SessionScoped
public class SettingsBean …{
}
Models (2/2)
• Models-Interface
• Map<String, Object>
• Nur @RequestScoped
@Inject
private Models models;
@GET
@Controller
public Viewable index() {
models.put("locale","en");
return new Viewable("index.jsp");
}
${locale} available in EL
ControllerModel View
@Named
@SessionScoped
public class SettingsBean …{
}
Views (1/2)
• Zugriff auf Named-Beans
<ul>
<c:forEach items="${settingsBean.myList}" var="item">
<li>
${item}
</li>
</c:forEach>
</ul>
Views (2/2)
• Modelinterface via EL
<h1>
${locale}
</h1>
public Viewable index() {
models.put("locale","en");
…
}
ControllerModel View
CUD
<form method="post">
<input type="text" name="title"/>
<input type="date" name="dueDate"/>
<input type="submit"/>
</form>
Form Data: FormParam
@POST
@Controller
public Response createTodo(@FormParam("title") @NotNull String title,
@FormParam("dueDate") @Future Date dueDate) {
}
Form Data: BeanParam
public 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) {
}
@XmlRootElement
public class TodoItem {
@NotNull
@Size(min = 3, max = 50)
private String title;
}
Modern Web?
MVC 1.0: Keine Grenzen
Clientseitige Komponenten
MVC 1.0
• Serverseitiges Rendering
• „Rich internet applications“
• Rolle von JavaScript: DOM-Manipulation
DOM Manipulation
• Ziel: Desktopfeeling
• DOM-API
• Selektoren & Events
• APIs: Geocoding, LocalStorage, Audio + Video,…
• Widgets
• Dialoge, Datepicker,…
• Ajax
jQuery
• JavaScript DOM-Library
• Fokus auf DOM-APIs
• Fokus auf Cross-Browser
• Komponenten-Library
• Widgets
• Effekte
• Interaktionen
jQuery UI
• HTML
• JavaScript
<input type="text"
data-datepicker="true"
name="dueDate"/>
$("input[data-datepicker='true']").datepicker();
Web Components
Web Components
• Custom elements
• Eigene HTML-Tags (mit Logik)
• Templates
• Vorlagen (für Komponenten)
• HTML-imports
• Shadow DOM
Web Components
• HTML
• JavaScript
var datePicker = Object.create(HTMLElement.prototype); //inherit HTMLELement
document.registerElement("ok-datePicker", {
prototype: datePicker
});
<ok-datePicker name="dueDate"/>
Zukunftsmusik…?
• Schon heute nativ nutzbar
• Polyfill: webcomponents.js
Polymer
• Framework + Komponentensammlung
Polymer({
is: "proto-element",
ready: function() { this.textContent = "Hello Summit!"}
});
<link rel="import" href="components/google-map/google-map.html">
<google-map latitude="37.790" longitude="-122.390"></google-map>
MVC 1.0
• Clientseitiges Rendering
• „Single Page Web-Applications“
• Rolle von JavaScript: Application Logic + Rendering
MVC & SPA
• HTML
• Serverside Rendering
• Nashorn
<!DOCTYPE html>
<html>
<body>
<input type="hidden" value="${userSettingsJson}"/>
<div id="app"></div>
<script src="${mvc.contextPath}/myApp.bundle.js"></script>
</body>
</html>
Bsp.: ReactJS
• JavaScript
import React, {Component} from "react";
class MyView extends Component {
render() {
return (
<div className="container">
<button onClick={this.showMessage.bind(this)}>
<span>Click me!</span>
</button>
</div>
);
}
}
Fazit
• Action based vs. Component based
• Erst dann kommt das Framework…
• MVC 1.0 === Maximale Flexibilität
• Bestehende Standards
• Mehr Verantwortung im Client
MVC 1.0
All images taken from pixabay.com