Embed Size (px)
Citation preview
Mobile & Pervasive ComputingCSC 332 - Fall 2019
Web Applications & Hybrid Frameworks
Outline• Mobile Web & Model-View-Controller
• Sample web app and app development
• Comparison to native apps
• Hybrid application frameworks
• Sample apps
• Comparison to native apps
Word Wide Web• Origins
• HTML and HTTP proposed by Tim Berners-Lee in 1989
• HTTP: request-response protocol for client-server models
• HTML: markup language, also a standard since 1995, currently HTML 5
• Web browsers
• Efforts started in 1984 but took off with NCSA Mosaic in 1993
• Netscape Navigator in 1994
• Internet Explorer in 1995
• Web browser wars highlights
• In 1996 Netscape had 86% of market share
• By 1999 IE had 99%
• Netscape open-sourced Mozilla and Firefox followed in 2002
• By 2004 IE had %92 and %11.8 by 2013
• Safari released in 2003 dominating the OS X market
By Geek3 - Own work, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=81879090
World Wide Web• Technological evolution
• Client-server model
• Initially all content delivered as static documents
• Web server: HTTPd (1993), Apache (1995), nginx (2004), IIS
• Dynamic content (server-side scripting)
• E.g. PHP, Java Servlets, ASP.NET, Ruby on Rails, Node.js
• Produce web content “on the fly”
• Client-side scripting languages• Javascript (1995) client-side document changes without server
communication
• Flash (1996) client-side animation and interactions without server communication
• Ajax technologies (2005), decoupled data interchange from presentation layer (no need to reload a page)
Ajax Technologies• What Ajax does
• Decouples data interchange layer from presentation layer
• Includes• HTML and CSS
• DOM and JSON
• XMLHttpRequest
• Javascript, JQuery, HTML5 By DanielSHaischt, via Wikimedia Commons - https://
commons.wikimedia.org/wiki/File%3AAjax-vergleich.svg, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=29724785
HTML & CSS (inline & internal)
<html>
</html>
<body> <div>
</div> </body>
<head>
</head>
<title>My Project</title>
<p>My inspiration is</p>
<html> <head><title>My Project</title> <style type="text/css"> body {background-color:brown} p {color:orange;font-family:"Times New Roman";font-size:20px;} h1 { color:#666666;text-align:center;} table {color:orange;} </style> </head> <body> <div id="container" style="width:500px;"> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0">My Project Website</h1></div> <div id="menu" style="background-color:#FFD700; height:600px; width:100px;float:left;"> <b>Menu</b><br>Intro<br>Prototype<br></div>
<div id=“demo" style="background-color:#EEEEEE; width:400px; height:600px; float:left;"> <h1>Introduction</h1> <p>I draw my inspiration from <a href="http://twitter.com" >here</a></p> <h1>Motivation</h1> <img src="http://oldgoldandblack.com/wp-content/uploads/2013/02/barn.carousel1.jpg" width="200px"></img> <h1>Stages</h1> </div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">Copyright CSC101 Wake Forest University </div>
</div> </body> </html>
Document Object Model• Browser
• creates a DOM for the HTML document
• Javascript
• Has access to the document through the DOM
By Birger Eriksson - Own work, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=18034500
<html>
</html>
<body> <div>
</div> </body>
<head>
</head>
<title>My Project</title>
<p>My inspiration is</p>
<script>document.getElementById("demo").innerHTML = "Hello World!";</script>
XMLHttpRequest• Client-side object
• Facilitates data transfer between the browser and server• Initialized with open()
• Methods
• GET
• POST
• HEAD
• PUT
• DELETE
• HTTP request done with send()
• Standard developed and maintained by W3C
Javascript, JQuery & Storage• Javascript
• Client-side, can change the web page through the DOM, interact with the browser through the BOM
• JQuery
• Javascript library, facilitates DOM manipulation, event handling, CSS animation
• Storage
• Cookies: name-value pairs used by server
• Local storage: name-value pairs used by client
• no expiration date
• Session storage: name-value pairs
• Data expires when browser tab is closed
Mobile Web• Mobile web browser evolution
• Apple Newton featured PocketWeb in 1994
• Severals others developed for Palm OS
• Open Mobile Alliance (OMA) formed in 2002• To develop open standards for mobile devices
• Wireless Application Protocol (WAP) standard released• Allowed interoperability of equipment and software
with different network technologies
• Defined a markup language, Wireless Markup Language (WML) specifically for mobile wireless phones
• WAP superseded by full support for HTML, CSS, Javascript and HTML5
http://www.teco.edu/pocketweb/
http://ilpubs.stanford.edu:8090/387/1/1999-32.pdf
Mobile Web Applications• Application development similar to web apps
• Server-side scripting and database management
• Client-side scripting and user interface
• Model-View-Controller
• Widely adopted by several web frameworks, implementations vary
• Thin client approach — most of MVC placed on server, e.g. Django, Rails, ASP.NET
• Client-side MVC approach — AngularJS (MEAN stack)
• Responsive web design
• Dynamic mobil-friendly web page rendering
• View adapts to the device, screen size, etc. (fluid grid concept)
• Progressive enhancement, dynamic CSS
Mobile Web Applications Features
• Device and orientation detection
• In browser (user agent)
• Using Javascript and DOM (screen.width, window.onorientationchange, etc.) and 3rd party tools, e.g. device.js, mobile-detect.js
• Try: http://hgoebl.github.io/mobile-detect.js/
• In server
• E.g. from HTTP header generated by user agent
• 3rd party tools, e.g. WURFL for Java, PHP, Ruby, etc.
Mobile Web Applications Features
• Viewport meta tag (HTML5)
• Viewport: the user’s visible area of a web page
• Allows designer to take control of the viewport
• E.g.
• CSS3 Media Queries
• Check media type and adjust style sheets
• E.g.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
body { background-color: pink; } @media screen and (min-width: 480px) { body { background-color: lightgreen; } }
Mobile Web Applications Features
• Touch and gesture events
• Enabled by device APIs for their browsers
• Example from MDN web doc<canvas id="canvas" width="600" height="600" style="border:solid black 1px;"> Your browser does not support canvas element.</canvas><br><button onclick="startup()">Initialize</button><br>Log: <pre id="log" style="border: 1px solid #ccc;”></pre>function startup() { var el = document.getElementsByTagName("canvas")[0]; el.addEventListener("touchstart", handleStart, false); el.addEventListener("touchend", handleEnd, false); el.addEventListener("touchcancel", handleCancel, false); el.addEventListener("touchmove", handleMove, false); console.log("initialized.");}
https://developer.mozilla.org/en-US/docs/Web/API/Touch_events
Mobile Web Applications Features
• HTML links and native applications
• URL:
• Phone calls:
• SMS:
• HTML5 additional features
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
<a href=“tel:3367581234”>Call us</a>
<a href=“sms:3367581234”>Text us</a>
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
https://www.w3schools.com/html/html5_video.asp
<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
<script> var x = document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = "Geolocation is not supported by this browser."; } }
function showPosition(position) { x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script>
Video
Audio
Geolocation
WebKit• Open-source browser engine
• First developed by Apple
• Rendering engine used within numerous web browsers, e.g. Safari, App Store, iOS, Linux and formerly by Chrome and Android
Web vs. Native Apps• Advantages of web apps
• Less expensive and relatively easy to maintain
• Cross-platform: run in a web browser
• Easy to deploy: no approval from an app marketplace required
• Simple updates: no need to go through app store
• Disadvantages of web apps
• Generally slower, particularly for animations
• Must use a web app - not stand alone, inconsistent user experience
• Harder access to special device features
• Poor discoverability, fewer branding opportunities
Hybrid Applications• Combine elements of both native and web apps
• E.g. web views can be included in native apps and phone APIs can be visible from Javascript
• Android can use android.webkit.WebView
• iOS can use UIWebView
• Some frameworks
• PhoneGap
• Apache Cordova, HTML, CSS, Javascript
• Ionic
• Angular.js and Cordova
• Xamarin
• C# codebase
• React Native
• Objective-C or Java combined with Javascript-like
• Titanium Appcelerator
• Combination of native and Javascript
Hybrid Applications• Advantages
• Don’t need a web app to run
• Better access to internal APIs and hardware
• Disadvantages
• Slower than native apps
• Deployed through an app store
• Additional customization takes away from hybrid development
Additional Reading and Interesting Resources
• History of the Web - The World Wide Web Foundation
• World Wide Web Timeline - Pew Research Center
• Mobile Visual Network Index - Cisco
• Best open source web servers - ComputerworldUK
• NGINX - ZDnet
• Ajax - MDN web docs
• XMLHttpRequest - MDN web docs
• <audio> tag - w3schools.com
• <video> tag - w3schools.com
• webkit.org
•
Metacognition• Understand well enough to teach to others (what are they, why do they
exist?)
• Languages and protocols for the web
• Client-server model, static and dynamic content
• Ajax technologies: HTML, CSS, DOM, XMLHttpRequest, Javascript
• MVC in mobile web applications & examples
• Mobile web app specific features
• Comparisons of web vs. native vs. hybrid apps
• Seek higher levels of learning
• Apply, analyze (break into constituent parts), evaluate (compare & critique)
• Some additional terminology to know
• httpd, Apache, PHP, Java Servlets, Ruby on Rails, JQuery, ASP.NET
• URL, geolocation, Webkit,
