@dskgry #WISSENTEILEN MVC 1.0 als alternative Webtechnologie Womit machen wir‘s denn nun? @_openknowledge Sven Kölpin – open knowledge GmbH
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
@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
Related Documents
