mobile for enterprise
Upload: institute-of-systems-science-national-university-of-singapore
Post on 06-May-2015
1.236 views
DESCRIPTION
Presented by Mr Lee Chuk Munn, Advance Technology Applications Practice, NUS-ISS at ISS Seminar: Enabling Mobile Enterprise on 16 Jan 2014.TRANSCRIPT
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