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

1
About Me

Teach HTML5 and Enterprise Java
Prior working experience
Sun Microsystems – 16 years
Help ISVs to port, tune and...
3
Source: http://www.businessinsider.com/15-billion-smartphones-in-the-world-22013-2

4
5
6
Why HTML5?

Improving performance
More cores coming...
JavaScript's maturity – VM, tools, know how
asm.js – http://mzl.la/...
HTML5 for Websites?

8
http://slides.html5rocks.com

9
HTML5 Options

Browser

Cross platform

Wrappers

Cross
Compilation
Tighter integration
10
11
12
Characteristics of Enterprise Web Application

Fairly static, mostly form based
Eg. Master-detail, graphs, data input, que...
14
Mobile phones
Tables
Desktop monitors

< 480px
< 768px
> 768px
15
Adapting to Viewport Sizes

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

<h:form>
<h:panelGrid columns="2"...
Responsive Enterprise Application – Intrinsic
Use mobile toolkit/renderkit if available
<pm:page id="mobile_index"
title="...
Responsive Enterprise Application – External

Leverage responsive CSS toolkit
Eg Bootstrap 3 – “mobile first”

Advantage
M...
20
1

2
3

5
4

6
7

Fully rendered page or fragments

Enterprise – Fat server application architecture
HTML5 – Thin server a...
Preferred Interactions

Desktop

Smartphones
22
RESTful Web Services

Generalization of the web application
paradigm
Default assumption is that the client is always a
bro...
Implementing REST on Java EE

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

Supports POJO based pr...
http://example.com/hr/api/customer/1
Lifecycle management
@RequestScoped
@Path(“/customer/{custId}”)
public class Customer...
26
100
100

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

28
AJAX Polling

29
AJAX Long Poll

30
HTML5 Server Sent Events

31
HTML5 Websockets

32
33
Mobile HTML5 Course
April 14 – 17 2014

Launching a new
mobile course
Design and Develop
Mobile Enterprise
Application wit...
Download source from
http://bit.ly/demosrc2014

35
Upcoming SlideShare
Loading in …5
×

Mobile for Enterprise

1,281
-1

Published on

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

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,281
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mobile for Enterprise

  1. 1. Opening the Window Lee Chuk Munn isslcm@nus.edu.sg 1
  2. 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. 3
  4. 4. Source: http://www.businessinsider.com/15-billion-smartphones-in-the-world-22013-2 4
  5. 5. 5
  6. 6. 6
  7. 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. 8. HTML5 for Websites? 8
  9. 9. http://slides.html5rocks.com 9
  10. 10. HTML5 Options Browser Cross platform Wrappers Cross Compilation Tighter integration 10
  11. 11. 11
  12. 12. 12
  13. 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. 14
  15. 15. Mobile phones Tables Desktop monitors < 480px < 768px > 768px 15
  16. 16. Adapting to Viewport Sizes 16
  17. 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. 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. 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. 20
  21. 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. 22. Preferred Interactions Desktop Smartphones 22
  23. 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. 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. 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. 26
  27. 27. 100 100 27
  28. 28. HTTP – Don't Call Us We'll Call You 28
  29. 29. AJAX Polling 29
  30. 30. AJAX Long Poll 30
  31. 31. HTML5 Server Sent Events 31
  32. 32. HTML5 Websockets 32
  33. 33. 33
  34. 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. 35. Download source from http://bit.ly/demosrc2014 35
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×