Practice: Web Applications

💡 This is your chance to put what you’ve learned into action.

Try solving these practice challenges to check that you understand the concepts.

Submission

To log your practice for credit:

Submit on Gradescope

  • Practice exercises will be graded for completion not correctness. You have to document that you did the work, but we won't be checking if you got it right.
  • You are encouraged to engage with all the exercises listed on the practice page.
  • You are expected to submit only the details requested on the Gradescope submission.

Exercise 1

Objective: Discover the underlying architecture of web applications through firsthand experience.

Steps:

  1. Pick Your App: Select a web application you often use. It can be anything from Gmail, Facebook, to Dropbox, or any other platform you're fond of.

  2. Use and Observe:

    • Spend about 10-15 minutes interacting with your chosen app. It could also be reflecting on your past experiences with it.
    • Jot down all the different functionalities and features you notice (e.g., logging in, searching, retrieving data, submitting data).

  3. Break It Down:

    • For each feature you've noted, try to guess what's happening behind the scenes. What operations might be taking place on the server versus on your device (client-side)?
    • For instance, when you search for a friend on Facebook, ponder over the mechanisms working in the background to fetch that information for you.

  4. Data's Journey:

    • Think about the origins of the data for each function. Is it being pulled from a database? Sourced from elsewhere? Maybe it's cached?
    • Sketch a basic flow diagram, showing how you believe data moves through the app, from the point of a user's request to its display on screen.

  5. Experience Matters:

    • Reflect on how the data is presented to you. Do you think there's any behind-the-scenes data tweaking to enhance the user experience?
    • Identify features that seem to prioritize performance (e.g., content that loads progressively, potential data compression).

  6. Outside Help:

    • Do you notice any elements that hint at third-party integrations? For instance, some apps let you sign in using Google or Facebook. How do you think this integrates into the app's architecture?

  7. Show and Tell:

    • Compile your insights into a brief presentation format. Your showcase should include:
      • A quick intro to your chosen web application.
      • An outline of its main features.
      • Your own architectural diagram, hypothesizing client-side, server-side, data movements, and possible third-party interactions.
      • Observations about design choices focused on user experience and performance.

Exercise 2

Create and deploy a Flask app that shows a text: Hello world when you visit the / route.

Use the render deploy provider. Paste the link of your deployed app into the Gradescope submission.