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

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

  • Asynchronous JavaScript and XML

  • the art of asking a server for data without refreshing the entire page

  • It is possible to interact with a server without the browser screen flickering white and reloading.

  • While the “X” stands for XML, modern developers almost exclusively use JSON because it’s lighter and easier to read.

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!

File structure of email management

Plaintext
/flask_app
├── app.py          # Your Python logic
├── static          # Resource directory (icons, graphics)
│   └── favicon.ico 
└── templates/      # HTML files
    ├── index.html
    └── edit.html

File Structure of AJAX

Plaintext
/flask_app
├── tempcnx.html
├── tempcnx.js
└── tempcnx.css