IT315: Mobile Apps Development

Unit 2: Webpage Applications

R Batzinger

2025-01-12

Single Page Application

Requirements:

  • Containers that act as virtual pages <div>...</div>
  • Switch objects to select page of interest <button>
  • Switching function to hide virtual pages js code

Strengths/Weaknesses

Advantages

  • fast response to requests for page switch
  • the saved html file is enough to run offline
  • easily distributed from a website

Limitations

  • virtual pages are static
  • limited interaction with user
  • no storage of new information collected

Local server solution

Requirements

  • A local http server
  • Access to internet ports for web, database and backend services
  • A local browser

Strengths/Limitations

Strengths

  • Comparison of Animation Methods

Method Best For Complexity
MJPEG Stream OpenCV processing, webcam feeds, Matplotlib plots. Low
WebSockets Interactive animations (games, real-time dashboards) High
Server Sent Events One-way data updates (moving a ball based on server math). Medium
Static Files Serving animated .mp4 or .gif files stored on the server. Very Low

AJAX Steps

  1. An event occurs: A button is clicked or a timer goes off.

  2. Request sent: JavaScript creates an object to talk to the server.

  3. Server processes: The server fetches data (like from a database).

  4. Response received: The server sends data back to the browser.

  5. Page updated: JavaScript updates the specific part of the page with the new data.

Browser - Server States

State Name Description
0 UNSENT Client has been created. open() not called yet.
1 OPENED open() has been called.
2 HEADERS_RECEIVED send() has been called, and headers are available.
3 LOADING Downloading; responseText holds partial data.
4 DONE The operation is complete. Time to use the data!