Mobile Web Applications. Gary Dubuque IT Research Architect Department of Revenue

Size: px

Start display at page:

Download "Mobile Web Applications. Gary Dubuque IT Research Architect Department of Revenue"

Josephine Green
5 years ago
Views:

1 Mobile Web Applications Gary Dubuque IT Research Architect Department of Revenue

2 Summary Times are approximate 10:15am 10:25am 10:35am 10:45am Evolution of Web Applications How they got replaced by native mobile applications Architecture of a Mobile Web Application Concerns and challenges of design, SPA Libraries and Frameworks Picking development templates in VS 2012 Quick tour of sample code Fortress considerations 10:55am Deployment Website of app store

4 Web Application (using iquery.mobile)

5 Using Mobile Browsers we have to consider: Getting that native app feeling Match well-trained user expectations Keep it speedy Make it beautiful Opt for a simple application user experience.

6 HTML5 in Mobile Browsers Android 219, Android browser for Android , Mobile Chrome for Android 4.0+ (buggy) 424, Mobile Chrome for Android 4.4 ios HTML5Test scores 328, Safari for ios 5.1 (max score is 555) 387, Safari for ios , Safari for ios 7.0 (has bugs) Windows Phone 128, Internet Explorer 9 Mobile for WP , Internet Explorer 10 Mobile for WP 8 Cross Platform Browsers 462, FireFox OS, FireFox for Android, but not Apple s ios, etc. 471, Opera (Android) and Opera Mini (iphone & others) 484, Google Chrome on Apple s ios, but not Microsoft s WP

7 Comparison for a Web App s Evolution How to make a web app more like a native app NATIVE MOBILE APPLICATION Install (once) from app marketplace Dynamic views & downloaded data OS specific view layouts OS specific navigation and styles OS specific programming language WEB BROWSER APPLICATION Downloads page every time shown Active Server Page (JSP, PHP, etc.) Generic HTML page definitions Generic Browser Navigation JavaScript

8 Architecture of a Web Application Concerns and challenges of design, the Single Page Application SEO-support Browser-History-Support (Back button) Dynamic routes (minimum DOM size) RESTful data layer MV*-structure Testing-support

9 An Example using DOR s Mobile Application Browser s HTML/JavaScript Mobile Device Location Services (aka GPS) Current Location RESTful w/ JSON Location Tax rate, Location code, Confirmation code Mobile App Location Tax rate, Location code, Confirmation code Tax Rate Lookup Web Service Mobile Taxpayer

10 Protecting Web Services in Mobile World Going mobile is the most public your data can be Mobile Client Fortress Washington State s Web Servers The reverse proxy software is written for HTML pages. A SPA application does not always get HTML pages from the server.

11 Single Page Application Client Architectures Client HTML AJAX JSON Processing Cycle MV* IIS Server View View User Input Updates User Input Updates View Model Modifies Controller Modifies Model Model

12 Backbone.js MV* HTTP Request Router DOM updates model updates syncs DOM View Models Data Source DOM events model events Template

13 Core Libraries and Frameworks Bootstrap toastr

14 Libraries for a Web Application

15 Some Installed Templates SPA Templates As shown in VS 2012, but VS2013 does not show Breeze versions.

16 Quick Peek at Some Code (MVC _Layout) <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" </head> <body> <header> <div class="content-wrapper"> <div class="float-left"> <p class="site-title"><a href="~/">business Records Database</a></p> </div> </body> </html>

17 Quick Peek at Some Code (MVC View) <div id="body"> <div style="display:none;"> <a id="arooturl" <! for Fortress URL rewrites --> </div> <section class="featured"> <div class="content-wrapper"> <hgroup class="title"> <h1>welcome!</h1> <h2>enter a business name and tap the Search button to select the business details.</h2> </hgroup> <p> <label for="searchtext >Search For:</label> <input type="text" id="searchtext" /> <input type="button value="search" onclick="buildlist()"/> </p> </div> </section> <section id= Details class="content-wrapper main-content clear-fix"> </section> </div>

18 Quick Peek at Some Code (Backbone JS) var app = app {}; $(function () { // This is a model for a business object (an item in the results list for the search) app.business = Backbone.Model.extend({}); // This is the URL for the REST web service to get the list of businesses app.urlrootbusinesses = '/api/brd/getbeginswith'; // This collection of businesses is backed by a remote server. var BusinessList = Backbone.Collection.extend({ // Reference to this collection's model. model: app.business, // Location of remote server url: function () { return app.urlrootbusinesses; } }); // Create our global collection of **Businesses**. app.businesses = new BusinessList(); });

19 Quick Peek at Some Code (Backbone) function BuildList() { // fix the service's url for the State's Fortress firewall app.urlrootbusinesses = $("#arooturl").attr("href") + GetBeginsWith ; // TODO: add code to show busy icon app.businesses.fetch({ data: {criteria: $( #searchtext").val()}, success: function () { // TODO: add code to hide busy icon ShowList(); }, error: function (model, response, options) { // TODO: add code to hide busy icon alert("web Service Unavailable"); } }); }

20 Quick Peek at Some Code (Backbone) function ShowList() { var selectlist = "<h3>we suggest the following list:</h3><br />"; selectlist += "<ul class='round'>"; app.businesses.each(function (business) { selectlist += '<li data-id="' + business.get("tranum") + '"' + ' onclick="showit(this)" class="title" style="font-size:medium; font-weight: bold;">' + businesss.get("name") + ' (' + businesss.get("tranum") + ') ' + business.get("city") + ', Closed: ' + business.get("closedate") + '</li>'; }); } $("#Details").html(selectList + "</ul>");

21 Deploying the Application Now we can bundle the static html, css, and JavaScript that displays dynamic content into bytes that reside on mobile device (cache) <html manifest= cache.manifest > PhoneGap/Cordova makes that easy to do as a (hybrid) native application (using Node.js) Check out Yahoo s YUI framework for Node.js

22 Thank You

Lab 1: Introducing HTML5 and CSS3

CS220 Human- Computer Interaction Spring 2015 Lab 1: Introducing HTML5 and CSS3 In this lab we will cover some basic HTML5 and CSS, as well as ways to make your web app look and feel like a native app.