1

Opening the WindowOpening the Window

Lee Chuk Munnisslcm@nus.edu.sg

2

About Me

Teach HTML5 and Enterprise JavaPrior working experience

Sun Microsystems – 16 yearsHelp ISVs to port, tune and size their applicationJava Platform Evangelist

Oracle – 2.5 yearsProduct manager for WebLogic and Coherence

Have been coding since 1981Still coding today

Keeps busy with a few open source projects

3

4Source: http://www.businessinsider.com/15-billion-smartphones-in-the-world-22013-2

5

6

7

Why HTML5?

Improving performanceMore cores coming...JavaScript's maturity – VM, tools, know howasm.js – http://mzl.la/1hqEfkD

Platform fidelity and integrationCan be provided through wrappers or cross compilation

Easier to hire web developersTonnes of tutorial, classes

Rich set of free libraries

8

HTML5 for Websites?

9

http://slides.html5rocks.com

10

HTML5 Options

Browser WrappersCross

Compilation

Cross platform Tighter integration

11

12

13

Characteristics of Enterprise Web Application

Fairly static, mostly form basedEg. Master-detail, graphs, data input, queries

Dynamic web pages are rendered on the server

“Fat server” model

Assumes that you are using a desktop browser for access

Viewport size and the content type

14

15

Mobile phones < 480pxTables < 768pxDesktop monitors > 768px

16

Adapting to Viewport Sizes

17

Responsive Enterprise Application – IntrinsicUse mobile toolkit/renderkit if available

<h:form><h:panelGrid columns="2">

<p:outputLabel value="Name:"/><p:inputText label="Name" type="text" size="30"/><p:outputLabel value="Email:"/><p:inputText label="Email" type="email" size="30"/><p:outputLabel value="Topics:"/><p:selectManyCheckbox label="Topics">

<f:selectItem itemLabel="Sports" itemValue="sports"/><f:selectItem itemLabel="Movies" itemValue="movies"/><f:selectItem itemLabel="Food" itemValue="food"/><f:selectItem itemLabel="News" itemValue="news"/>

</p:selectManyCheckbox><p:commandButton value="Submit" type="button"/>

</h:panelGrid></h:form>

18

Responsive Enterprise Application – Intrinsic Use mobile toolkit/renderkit if available

<pm:page id="mobile_index" title="Mobile Form">

<pm:view id="main"><pm:header title="Form" swatch="b"/><pm:content><h:form><p:inputText label="Name" .../><p:inputText label="Email" .../><pm:field><p:selectManyCheckbox ...>...

</p:selectManyCheckbox></pm:field><p:commandButton value="Submit" .../>

</h:form></pm:content>

</pm:view></pm:page>

19

Responsive Enterprise Application – External

Leverage responsive CSS toolkitEg Bootstrap 3 – “mobile first”

AdvantageMore work but better control over the layout, break points, etcOne set of views instead of 2 or 3 separate view catering to different dimensions

DisadvantagePotentially more complex view to cater for different sizesUnderstand CSS and CSS toolkits

20

21

1 2

3

5

4

6

7

Enterprise – Fat server application architecture

HTML5 – Thin server application architecture

Fully rendered page or fragments

Data in JSON or XML format

1 2

3

4

8

65

7

22

Preferred Interactions

Desktop Smartphones

23

RESTful Web Services

Generalization of the web application paradigm

Default assumption is that the client is always a browser so application will always return HTML

Separation of the view from the dataShifting from MVC to MVVC

Allow your web application to be a web platform

Eg. Facebook, Tumblr, Google, etc.

24

Implementing REST on Java EE

JAX-RS introduced in Java EE 6Part of the platform, no mess no fuss

Supports POJO based programmingPlus dependency injection

Integrates with the rest of the EE APIsCan be added to existing Java Web application without modifying existing codebase

25

@RequestScoped@Path(“/customer/{custId}”)public class CustomerResource {

@PersistenceContext EntityManager em;

@GET@Produces({“application/json”, “application/xml”})public Response get(@PathParam(“custId”) int id) {

Customer customer = em.find(Customer.class, id);

if (null == customer)return (Response.status(

Response.Status.NOT_FOUND).build());

return (Response.ok(customer));}

}

Path templateLifecycle management

Resource injection

Content negotiation

HTTP method

http://example.com/hr/api/customer/1

26

27

100100

28

HTTP – Don't Call Us We'll Call You

29

AJAX Polling

30

AJAX Long Poll

31

HTML5 Server Sent Events

32

HTML5 Websockets

33

34

Mobile HTML5 Course

Launching a new mobile course

Design and Develop Mobile Enterprise Application with HTML5

Client side focusFor developers who are familiar with HTML5

Learn to write maintainable HTML5 application

Tentative outlineRevision – HTML, CSS, DOM and JavaScriptjQueryPlatform API

Geolocation, push state, local storage, application cache

CommunicationsjQuery MobileBackbone.js Cordova

April 14 – 17 2014

35

Download source from

http://bit.ly/demosrc2014