Comprehensive Introduction to Web Applications and Engineering

Defining Websites vs. Web Applications

  • The distinction between a website and a web application is often defined by the level of user engagement and the mechanism of data storage.
  • A simple website is primarily content-centric, used for reading information and clicking links (e.g., a travel guide website).
  • A web application behaves like a software program within a browser, allowing interactions to be saved in a permanent location, such as a database.
  • Key identifiers of a web application:
    • User login functionality.
    • Personalized recommendations (e.g., Google News feeds).
    • Ability to store user-generated content (e.g., comments on a blog).
    • Tracking user behavior to cater to personal tastes.
  • Historical context: In the 1990s, almost everything on the internet was a static website. Over time, these evolved into complex web applications.

The Role of Algorithms and Artificial Intelligence (AI)

  • Algorithms are defined as a "bunch of code" often utilizing "if-then" statements to process data.
  • AI-powered algorithms (e.g., TikTok and YouTube) track user engagement—such as how long a video is watched—to focus the feed on similar content.
  • Recommendation Engines:
    • Amazon uses AI models to suggest similar items once a product is placed in a cart.
    • Significant difference: In standard web app development, rules are written by humans. In AI, the model learns the rules.
  • The next stage of evolution involves moving from basic web applications to AI-powered applications where every aspect of the user experience is customized.

Professional Roles and Economics in Software Engineering

  • A variety of roles support the creation and maintenance of web applications:
    • Software Engineer: The most expensive resource due to team size and salary requirements.
    • Product Manager: Decides on features and develops the product roadmap.
    • Business Analyst: Translates business needs into technical requirements.
    • Page Designer (UI/UX): Focuses on the artistic user interface (UI) and the user experience (UX) (how the site feels and navigates).
    • Project Manager: Ensures the project remains on track.
    • Security Analyst: Protects the system from hacking.
    • Database Administrator: Manages the data storage infrastructure.
  • The cost of a software engineering team can be massive. For a class of 2323 students, if each earns a salary of $150,000\$150,000 per year, the total cost for the business is over $3\$3 million (approximately $3,450,000\$3,450,000) annually for labor alone.
  • Productivity: A major goal of modern engineering is using AI to make software engineers more productive, potentially allowing for smaller, more efficient teams.

The Web Application Development Cycle

  • The class follows a specific iterative process for building web applications:
    1. Identify the business problem or opportunity.
    2. Gather requirements from stakeholders (e.g., using a chatbot as a proxy for a business owner).
    3. Design the user flow and determine the number/function of pages.
    4. Build the web application (both front-end and back-end).
    5. Test and Refine in a continuous loop.
    6. Deploy the application.

Evolution of the Web

  • Web 1.0: Characterized by static websites where the content did not change unless a web administrator manually updated the code.
  • Web 2.0: Introduced interactive and user-generated content, such as social networking (Instagram) and blogging. This era saw the rise of faster internet (moving away from dial-up).
  • Web 3.0: Highlighting the semantic web and AI-driven recommendations. Sites became more intelligent and connected.
  • Web 4.0/5.0: Modern web characterized by microservices, distributed architecture, and worldwide synchronicity/availability.
  • Google’s Rise: Google became a powerhouse by creating a portal to find websites. Their "PageRank" logic assumed that the more people linked to a website, the more valuable it was. Their revenue was earned through Google Ads.

Ethics and Environmental Impact

  • Security: Users expect that sensitive data (Social Security numbers, credit cards) is stored securely.
  • Accessibility: Websites must be designed for people with different abilities (color blindness, pattern recognition); failing to do so may break laws, particularly in the European Union.
  • Bias: AI results must be monitored to ensure they do not produce unethical or biased recommendations.
  • Dark Patterns: These are manipulative designs intended to trick users into unexpected behavior (e.g., Amazon being sued for making it difficult to avoid signing up for a monthly Prime membership during checkout).
  • Environmental Impact: Running server farms for AI requires significant power. Businesses should consider if their hosting is powered by renewable energy.
  • Intellectual Property: Avoid stealing content or representing others' work as your own.

Client-Server Architecture and HTTP

  • Software operates on a Client-Server model:
    • Client: The user's web browser (Chrome, Firefox, Safari).
    • Server: The intermediary providing the service. It retrieves content from a database and delivers it to the client.
  • Databases: Represented by a cylindrical icon because historical hard drives consisted of physical spinning platters. Modern systems use Solid State Drives (SSDs).
  • Hypertext Transfer Protocol (HTTP): A common framework for communication.
  • Basic HTTP Methods:
    • GET: Retrieves data from a server (e.g., asking for a web page).
    • POST: Sends data to the server for processing (e.g., uploading a photo or credit card info).
    • PUT: Updates existing data on the server (e.g., modifying an existing order).
    • DELETE: Flags data for removal (most companies "soft delete" by flagging the data rather than wiping it entirely).
  • Status Codes:
    • 200200: OK (Success).
    • 300300 Series: Something has changed (Redirection).
    • 404404: Not Found (Client error).
    • 500500: Internal Server Error (The website is down or broken).

Programming Languages and the Full Stack

  • Full Stack Engineer: Someone who can build both the Front-end and the Back-end.
  • Front-end: What the user sees in the browser. It consists of three languages:
    1. HTML: Content and structure.
    2. CSS: Stylesheets and design.
    3. JavaScript: Interactivity.
  • Back-end: Logic that runs on the server. Most browsers cannot run Python, so Python runs on the server and generates the HTML/CSS for the client.
  • Django: A Python programming framework used in this class to build web applications.
  • SQLite: A lightweight SQL database used for development.
  • Why Python?
    • It is versatile, easier to read/write, and widely supported by AI.
    • It is interpreted (no separate compiling step) and dynamically typed.
  • Dynamic Typing Example:
    • If a=5a=5 and b=6b=6, then a+b=11a+b=11.
    • If bb is changed to the string "Math", an error occurs because you cannot add an integer to a string.
    • However, if a="5"a="5" and b="6"b="6" (both strings), the result of a+ba+b is the string "56" via concatenation.

Development Tools and Deployment

  • IDE (Integrated Development Environment): Visual Studio Code (VS Code) is used for writing code. It is free, lightweight, and supports extensions for AI.
  • Version Control: GitHub is used like "Google Drive for code" to store files, track versions, and collaborate.
  • GitHub Codespaces: A virtual machine in the cloud (a computer within a computer). This ensures everyone uses the same Python environment without local installation issues.
  • GitHub Education: Students should sign up using their ".edu" email to receive free compute time and discounts. Proof of enrollment (transcript or letter) is required for verification.

Questions & Discussion

  • Question: What would be an example of a website vs. a web application?
  • Answer: A travel guide is typically a website because we are just reading and clicking links. A news site requiring a login for personalized feeds is a web application.
  • Question: How does the algorithm know what I like?
  • Answer: It takes in data and matches it as you go. For example, if you watch a TikTok about dogs for a long time, the model learns to show you more dog content.
  • Question: Who is the most expensive person on a dev team?
  • Answer: The software engineer. While a product manager might have a higher individual salary, a business usually needs a large team of 2020 to 3030 engineers, making the collective cost the highest portion of the budget.
  • Question: What happens when you delete an order on Amazon?
  • Answer: It probably isn't actually deleted from the database; it is just marked/flagged as deleted so the record remains for the business.