You will generally work in groups of two for the lab exercises, producing a single solution per team. And we encourage you to ask questions and to collaborate with others.

Comparing Web Applications and Traditional Applications

Web Applications are different from general computing applications in some critical ways.

Exercise 1.1

Consider (only) one of the following web applications.

Construct a diagram of the basic components you believe would be required to implement your chosen web application and how they are deployed. Include machines/servers, application environments, files and communication protocols. Be prepared to explain your diagram.

Draw this model on paper or using a drawing package of your choice so that you can turn it in.

We’ll revisit this model throughout the semester.

Using Chrome DevTools

Most browsers provide development tools that can help assess and debug web applications. Google Chrome provides DevTools, which are described here:

Chrome DevTools Overview
Exercise 1.2

Try out Chrome DevTools on your chosen app from lab exercise 1.1. Make sure that you can do the following.

  1. Access the tools while using the browser.
  2. Inspect/Edit the Document Object Model (DOM).
    • Make some edits. Do your edits display properly? When, if ever, do they go away? If they do, why do they go away?
  3. Check to see if any messages have been logged.
    • Try logging a message yourself.
  4. Try out the JavaScript debugger.
    • Set a breakpoint and walk through some code.
  5. See what resources are accessed when you reload the main webpage.
    • Can you explain the network traffic?
  6. Review the suggestions made by the webpage audit tool.
  7. Compare and contrast the “Network” and “Performance”/“Memory” tools.

There’s nothing to turn in for this exercise but you should know the answers.

Reviewing the Course Prerequisites

With whatever time you have left over, double-check the prerequisite technologies.

Exercise 1.3

Make sure that you can implement simple, hello-world implementations of the prerequisite technologies.

There’s nothing to turn in for this exercise but we will assume you know the technologies in the course.

Checking in

Submit an image of your model from the first exercise (on paper). We will grade your work according to the following criteria:

If you worked on a team, make sure that both names are on the submission.

Lab assignments are generally due by the beginning of the next class period, but this one is due by the end of the today.