The document discusses MVC 1.0 as an alternative web technology, detailing its evolution from simple web applications to modern single-page applications. It contrasts action-based and component-based MVC frameworks, highlighting their advantages, limitations, and use cases. The conclusion emphasizes the flexibility of MVC 1.0 and the shifting importance towards client-side development.

1. @dskgry #WISSENTEILEN
MVC 1.0 als alternative Webtechnologie
Womit machen wir‘s
denn nun?
@_openknowledge
Sven Kölpin – open knowledge GmbH

2. Evolution of the web
• Simple Web-Applications
• Rich Internet Applications
• Single-page Applications
2000
Heute
MVC

3. BrowserServer
Web MVC
ControllerModel View
Business-Logik
JavaScript
XHRRequest
ResponseDB
HTML

4. What do you guys use?
Spring MVC Spring boot Other JSF GWT/Vaadin Nothing Struts Play
zeroturnaround 2016

5. https://jaxenter.com/

6. Boiling it down…

7. • JSF
• Wicket
• Vaadin
• …
Component-based
• Spring MVC
• MVC 1.0
• Play
• …
Action-based
Types Of MVC Web Frameworks
Abstraction Web oriented

8. Component-based MVC Frameworks

9. Component-based MVC
• Components
• Components == serverside
• Viewstate
• Stateful / Sessions
• Abstraction
• != HTTP
• != JavaScript, CSS, HTML

10. Architecture
ControllerModel View
Business-Logik
HTML
JavaScript
XHR
Framework
Convert / Validate
Components
Req. / Res.
Developer
Framework

11. Limits
• Abstraction
• Scalability
• Complexity
• Learning curve
• Special requirements

12. Works well when…
• Abstraction necessary
• Form-based applications
• Simple UI / Prototyping

13. Works not so well when…
• Complex UI / data flows
• Techn. flexibility
• Mobile or slow / unstable network

14. 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>

15. Example: Vaadin abstraction
• Java to JavaScript
• != HTML, JS, CSS

16. 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 -> {
...
});

17. Action-based MVC Frameworks

18. Properties
• „Classic“ web programming
• Less abstraction
• NO (serverside) components
• More lightweight MVC 1.0

19. Architecture
ControllerModel View
Request
Business-Logik
JavaScript
XHRFramework
Dispatch
Response
HTML
Developer
Framework
Render

20. Advantages
• Stateless / Stateful
• Clientside rendering / Serverside rendering
• HTML / JSON / XML / …
• Flexibility

21. Limits
• Can be costlier
• More techn. knowledge needed
• Reusable components

22. MVC 1.0
MVC 1.0

23. 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

24. MVC & JAX-RS
• Based on JAX-RS
• HTTP-Methods
• @GET, @POST, @PUT, @PATCH, @DELETE…
• Annotations
• @QueryParam, @PathParam, @BeanParam…

25. MVC vs. JAX-RS
• CDI is a must-have
• Controller can be stateful!
• Integrates various templating engines
• Default: Facelets & JSP

26. MVC Features
ControllerModel View

27. Controller
• New Annotation @Controller
• Class or method
• Mix of JAX-RS and @Controller possible
• @Controller-Methods return View

28. @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"
}
}

29. MVC Features
ControllerModel View

30. 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{
…
}

31. 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

32. MVC Features
ControllerModel View

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

34. Views (2/2)
Modelinterface via EL
<h1>
${time}
</h1>
public Viewable index() {
models.put("time",…);
…
}

35. MVC Features
ControllerModel View
CUD

36. <form method="post">
<input type="text" name="title"/>
<input type="date" name="dueDate"/>
<input type="submit"/>
</form>

37. Form Data
FormParam & BeanValidation
@POST
@Controller
public Response createTodo(
@FormParam("title") @NotNull String title,
@FormParam("dueDate") @Future Date dueDate) {
…
}

38. 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) {
…
}

39. 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();
}

40. Form Data…

41. 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;
}

42. Modern Web?

43. MVC 1.0: NO LIMITS!

44. Clientside components
Serverside rendered pages Clientside rendered pages

45. MVC 1.0
• Serverside Rendering
• „Rich internet applications“
• JavaScript: DOM-Manipulation

46. Example: jQuery UI
• HTML
• JavaScript
<input type="text"
data-datepicker="true"
name="dueDate"/>
$("input[data-datepicker='true']").datepicker();

47. Web Components

48. Web Components
• Custom elements
• Templates
• HTML-imports
• Shadow DOM

49. Example: Web Components
• HTML
• JavaScript
<my-datePicker format="dd.mm.yy"/>
class DatePickerComponent extends HTMLElement {
}
window.customElements.define('my-datepicker', DatePickerComponent);

50. MVC 1.0
• Clientside Rendering
• „Single-Page Applications“
• JavaScript: Rendering & App-Logic
 Pre-render via Nashorn

51. 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

52. All images taken from pixabay.com