ES Modules

How can we modularise our client-side JavaScript?

Questions to consider

• What are the different ways we can import/export code? What does "dynamic import" do?

• Why might using hundreds of small modules in the browser cause performance problems?

Useful resources

• Modules | JavaScript for impatient programmers

• ES modules: A cartoon deep-dive

Browser rendering

What is the "critical rendering path" in browsers?

Questions to consider

• How does the browser render an HTML page containing links to CSS and JavaScript files?

• What does "render blocking" mean?

• What do the async and defer keywords do?

Useful resources

• Understanding the Critical Rendering Path

• Efficiently load JavaScript with defer and async

Browser caching

How can we avoid unnecessary network requests?

Questions to consider

• What is HTTP caching?

• How can our server tell browsers to cache our responses?

Useful resources

• HTTP Caching | Web Fundamentals

• The HTTP cache: your first line of defense

Image performance

How we can efficiently serve image assets?

Questions to consider

• How can we optimise image file size?

• How can we render different images at different viewport sizes?

Useful resources

• Image Optimization | Web Fundamentals

• Responsive Images: If you’re just changing resolutions, use srcset

• Native lazy-loading for the web

Your project this week is to build a frontend for one of the APIs from REST API week. It should be a single-page app rendered with client-side JavaScript.

If your team don't have a finished API, or don't want to use it, you can use the Dogs API from the workshops. The readme contains documentation of all the endpoints.

User stories

Core

• As a user, I want to: see all the resources

• As a user, I want to: sign up for an account

• As a user, I want to: log in to my account

• As a user, I want to: add my own resources

Stretch

• As a user, I want to: update my own resources

• As a user, I want to: delete my own resources

Since this project is open-ended you'll need to write your own more specific user stories once you know what you want to build.

Acceptance Criteria

• A single-page app (only one HTML file)

• Accessible signup/login forms

• Token-based authentication (storing token in localStorage)

• Form for adding new resources (only for logged in users)

• Works well across Chrome, Firefox and Safari/Edge browsers

Stretch criteria

• Buttons to delete existing resources (for logged in users)

• Form for updating existing resources (for logged in users)

Single-page app

Client rendering

• Make fetch requests to our own server for JSON data

• Render elements in the DOM based on the server data

• Submit data to our own server, then update the DOM based on the response

Error handling

• Respond with useful error information to the client

• Throw errors when our server hits a problem

• Catch errors and log them correctly

• Handle errors that occur in async code

• Show the user useful messages based on server errors

Design (UI/UX)

• Account for all possible states of a network request

• Design and create an accessible loading spinner

Testing

• Mock fetch calls in our tests to avoid hitting our real API

• Test dynamic client-side interactions to ensure they behave as we expect

• Test all of our error handling

Day 1

Day 2

Day 3

Day 4

Day 5