Presented by Mr Lee Chuk Munn, Advance Technology Applications Practice, NUS-ISS at ISS Seminar: Enabling Mobile Enterprise on 16 Jan 2014.

1. Opening the Window
Lee Chuk Munn
isslcm@nus.edu.sg
1

2. About Me
Teach HTML5 and Enterprise Java
Prior working experience
Sun Microsystems – 16 years
Help ISVs to port, tune and size their application
Java Platform Evangelist
Oracle – 2.5 years
Product manager for WebLogic and Coherence
Have been coding since 1981
Still coding today
Keeps busy with a few open source projects
2

3. 3

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

5. 5

6. 6

7. Why HTML5?
Improving performance
More cores coming...
JavaScript's maturity – VM, tools, know how
asm.js – http://mzl.la/1hqEfkD
Platform fidelity and integration
Can be provided through wrappers or cross
compilation
Easier to hire web developers
Tonnes of tutorial, classes
Rich set of free libraries
7

8. HTML5 for Websites?
8

9. http://slides.html5rocks.com
9

10. HTML5 Options
Browser
Cross platform
Wrappers
Cross
Compilation
Tighter integration
10

11. 11

12. 12

13. Characteristics of Enterprise Web Application
Fairly static, mostly form based
Eg. 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
13

14. 14

15. Mobile phones
Tables
Desktop monitors
< 480px
< 768px
> 768px
15

16. Adapting to Viewport Sizes
16

17. Responsive Enterprise Application – Intrinsic
Use 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>
17

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

19. Responsive Enterprise Application – External
Leverage responsive CSS toolkit
Eg Bootstrap 3 – “mobile first”
Advantage
More work but better control over the layout,
break points, etc
One set of views instead of 2 or 3 separate view
catering to different dimensions
Disadvantage
Potentially more complex view to cater for
different sizes
Understand CSS and CSS toolkits
19

20. 20

21. 1
2
3
5
4
6
7
Fully rendered page or fragments
Enterprise – Fat server application architecture
HTML5 – Thin server application architecture
4
1
2
3
5
8
6
7
Data in JSON or XML format
21

22. Preferred Interactions
Desktop
Smartphones
22

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 data
Shifting from MVC to MVVC
Allow your web application to be a web
platform
Eg. Facebook, Tumblr, Google, etc.
23

24. Implementing REST on Java EE
JAX-RS introduced in Java EE 6
Part of the platform, no mess no fuss
Supports POJO based programming
Plus dependency injection
Integrates with the rest of the EE APIs
Can be added to existing Java Web
application without modifying existing
codebase
24

25. http://example.com/hr/api/customer/1
Lifecycle management
@RequestScoped
@Path(“/customer/{custId}”)
public class CustomerResource {
Path template
@PersistenceContext EntityManager em;
Resource injection
Content negotiation
HTTP method
@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));
}
}
25

26. 26

27. 100
100
27

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

29. AJAX Polling
29

30. AJAX Long Poll
30

31. HTML5 Server Sent Events
31

32. HTML5 Websockets
32

33. 33

34. Mobile HTML5 Course
April 14 – 17 2014
Launching a new
mobile course
Design and Develop
Mobile Enterprise
Application with HTML5
Client side focus
For developers who are
familiar with HTML5
Learn to write
maintainable HTML5
application
Tentative outline
Revision – HTML, CSS,
DOM and JavaScript
jQuery
Platform API
Geolocation, push state,
local storage, application
cache
Communications
jQuery Mobile
Backbone.js
Cordova
34

35. Download source from
http://bit.ly/demosrc2014
35