Skip to content

JA8. Mobile Web Applications

What are the different technologies which are being used to develop a web app? Also, explain the design approach being followed for developing responsive mobile web apps.

A mobile web app is a website that is responsive to the device it is being viewed on; and when it is viewed on a mobile device it gives almost native feeling. The almost-native feeling is getting closer to native due to the advancement in web technologies.

Mobile web apps run in the browser (responsive), or in a webview (hybrid), or on a service worker (progressive). In all cases, the same main technologies are used to develop the web app, along with some additional technologies depending on the type of application. The main technologies are: HTML, CSS, and JavaScript.

HTML, and especially HTML5, Web Apps to the same level as native apps, as your websites can access the device hardware and sensors similar to native apps. The HTML5 APIs include: Geolocation, Orientation, Service Workers, Push API, Notification API, Web Payments API, Touch Events, Web RTC and media capture (Tabor & Vrdoljak, 2019).

CSS is used to control the look and feel of the web app. CSS3 has introduced many new features that make it easier build complex and responsive layouts. These features include: Media Queries, Flexbox, Grid Layout, and Animations (Tabor & Vrdoljak, 2019).

Javascript controls the behavior of the web app; usually web APIs trigger events that can be handled with javascript to define custom business logic. The new javascript features include: ES6, Promises, Fetch API, and Web Components and frameworks like React, Angular, and Vue; the combination of these features and frameworks make it easier to build complex web apps that supports client-side routing, state management, and offline support (aka, caching) (Tabor & Vrdoljak, 2019).

There are multiple design approaches to modern web apps, as listed in (Tabor & Vrdoljak, 2019):

  • Responsive Web Design (RWD): Ship the same page to all devices, once the app is loaded, the view is adjusted to the device using CSS.
  • Progressive Enhancement: Ship a minimal page that works on all devices, and then enhance it with more features for more capable devices using JavaScript.
  • Mobile-First Responsive Design: The same as RWD, but the page is designed for mobile first, and then enhanced for larger screens.
  • Adaptive Web Design (Server-Side): The server detects the device and sends a different page for each device according to its capabilities.
  • RESS: Responsive Design + Server-Side Components: The server detect the device category, then it sends a different page for each category, at the device side, the page is adjusted according to the device.

Hybrid Apps falls between web apps and native apps; as the backbone of the App is still native and must be installed from the App store, then this backbone lunches a WebView (aka, a small browser) that loads normal Web App (HTML/CSS/Javascript).

Progressive web apps also in the middle, as they are web apps that can be installed from the browser itself, and they can run offline. the rely on the service worker to cache the app and make it available offline.

References