Mobile for Enterprise
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share
  • 1,300 views

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

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

Statistics

Views

Total Views
1,300
Views on SlideShare
1,300
Embed Views
0

Actions

Likes
0
Downloads
21
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Mobile for Enterprise Presentation Transcript

  • 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