Data Flows Sprint 1 Prep

Learning Objectives

Explain how data is rendered into a user interface

When we build user interfaces we often take data and render 🧶 it in the user interface. We will model some real-life objects using data structures such as arrays and objects. However, end users don’t directly interact with data structures. Instead, they’ll interact with a rendering of these data structures through some user interface, typically a web browser. We’re going to start with some structured data and explore how we can render it on the page.

Learning Objectives

Define an acceptance criterion for building a web page
Use a wireframe to make a basic design for the web page

Suppose you’re building a user interface to display the films that are now showing on a film website. We need to render some cinema listings in the user interface. Let’s define an acceptance criterion:

Given a list of film data When the page first loads Then it should display the list of films now showing, including the film title, times and film certificate

film-cards — A grid of cards displaying film information

Here are some example film data:

const films = [
  {
    title: "Killing of Flower Moon",
    director: "Martin Scorsese",
    times: ["15:35"],
    certificate: "15",
    duration: 112,
  },
  {
    title: "Typist Artist Pirate King",
    directory: "Carol Morley",
    times: ["15:00", "20:00"],
    certificate: "12A",
    duration: 108,
  },
];

To visualise the user interface, we can use a wireframe 🧶 . This wireframe is built by reusing the same UI component 🧶 . Each film object is rendered as a card component. To build this user interface, we will start with data in the form of an array of objects, each with similar properties.

Our task will be to build the film listings view from this list of data. Create an index.html file and follow along.

Youtube: Step-through-prep workshop 🔗

Learning Objectives

Define a sub-goal for rendering data in the user interface

🎯 Sub-goal: Build a film card component

To break down this problem, we’ll render a single datum, before doing this for the whole list. Here’s one film:

const film = {
  title: "Killing of Flower Moon",
  director: "Martin Scorsese",
  times: ["15:35"],
  certificate: "15",
  duration: 112,
};

Starting with this object, we’ll focus only on building this section of the user interface:

🖼️ Open this wireframe of single film card

single-film-display — A single film card

Learning Objectives

Compose UI elements to some specification
Append DOM elements to other nodes in the DOM tree

We can start by calling createElement to create and compose DOM elements 🧶 .

For now, we’ll only consider rendering the title property from the film object. Create this script in your index.html:

const film = {
  title: "Killing of Flower Moon",
  director: "Martin Scorsese",
  times: ["15:35"],
  certificate: "15",
  duration: 112,
};

const filmTitle = document.createElement("h3");
filmTitle.textContent = film.title;
console.log(filmTitle);

If we open up the console tab, we should be able to see this element logged in the console. However, it won’t yet appear in the browser.

💡 tip

If you see this error, make sure you are running your code in the browser and not VSCode. Node doesn’t have the DOM API. You need to use your browser console. See how to set up your html if you are stuck.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Film View</title>
  </head>
  <body>
    <script>
      const film = {
        title: "Killing of Flower Moon",
        director: "Martin Scorsese",
        times: ["15:35"],
        certificate: "15",
        duration: 112,
      };
      const filmTitle = document.createElement("h3");
      filmTitle.textContent = film.title;
      console.log(filmTitle);
    </script>
  </body>
</html>

Appending elements

To display the film card, we need to append it to another element that is already in the DOM tree. For now let’s append it to the body, because that always exists.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
const film = {
  title: "Killing of Flower Moon",
  director: "Martin Scorsese",
  times: ["15:35"],
  certificate: "15",
  duration: 112,
};

const filmTitle = document.createElement("h3");
filmTitle.textContent = film.title;

document.body.append(filmTitle);

We can extend this card to include more information about the film by creating more elements:

const film = {
  title: "Killing of Flower Moon",
  director: "Martin Scorsese",
  times: ["15:35"],
  certificate: "15",
  duration: 112,
};

const card = document.createElement("section");

const filmTitle = document.createElement("h3");
filmTitle.textContent = film.title;
card.append(filmTitle);

const director = document.createElement("p");
director.textContent = `Director: ${film.director}`;
card.append(director);

const duration = document.createElement("time");
duration.textContent = `${film.duration} minutes`;
card.append(duration);

const certificate = document.createElement("data");
duration.textContent = `Certificate: ${film.certificate}`;
card.append(certificate);

document.body.append(card);

Eventually, we will include all the information, to match the wireframe. This is a bit tedious, as we had to write lots of similar lines of code several times, but it works.

Learning Objectives

Extract functions for common tasks

We now have a card showing all of the information for one film. The code we have is quite repetitive and verbose. It does similar things lots of times.

Let’s look at two ways we could simplify this code. First we will explore extracting a function. Then we’ll look at using <template> tags.

Refactoring: Extracting a function

One way we can simplify this code is to refactor it.

💡 tip

To refactor means to update our code quality without changing the implementation.

We can identify things we’re doing several times, and extract a function to do that thing for us.

In this example, we keep doing these three things:

Create a new element (sometimes with a different tag name).
Set that element’s text content (always to different values).
Appending that element to some parent element (sometimes a different parent).

We could extract a function which does these three things. The things which are different each time need to be parameteres to the function.

We could write a function like this:

function createChildElement(parentElement, tagName, textContent) {
  const element = document.createElement(tagName);
  element.textContent = textContent;
  parentElement.append(element);
  return element;
}

And then rewrite our code to create the card like this:

const film = {
  title: "Killing of Flower Moon",
  director: "Martin Scorsese",
  times: ["15:35"],
  certificate: "15",
  duration: 112,
};

function createChildElement(parentElement, tagName, textContent) {
  const element = document.createElement(tagName);
  element.textContent = textContent;
  parentElement.append(element);
  return element;
}

const card = document.createElement("section");

createChildElement(card, "h3", film.title);

createChildElement(card, "p", `Director: ${film.director}`);

createChildElement(card, "time", `${film.duration} minutes`);

createChildElement(card, "data", film.certificate);

document.body.append(card);

This code does exactly the same thing as the code we had before. By introducing a function we have introduced some advantages:

Our code is smaller, which can make it easier to read and understand what it’s doing.
If we want to change how we create elements we only need to write the new code one time, not for every element. We could add a class attribute for each element easily.
We can see that each element is being created the same way. Before, we would have to compare several lines of code to see this. Because we can see they’re calling the same function, we know they’re made the same way.

There are also some drawbacks to our refactoring:

If we want to change how we create some, but not all, elements, we may have made it harder to make these changes. When we want to include an image of the director, or replace the certificate text with a symbol, we will have to introduce branching logic.
To follow how something is rendered, we need to look in a few places. This is something you will need to get used to, so it’s good to start practising now.

exercise

Stretch goal: Add the datetime

A <time> element needs a datetime attribute. Add this to the createChildElement function to express the duration on the time element only.

PT1H52M is the ISO 8601 format for 112 minutes.

Learning Objectives

Use template tags to simplify element initialisation

Using `<template>` tags

We could simplify this code with a different technique for creating elements.

Until now, we have only seen one way to create elements: document.createElement. The DOM has another way of creating elements - we can copy existing elements and then change them.

HTML has a useful tag designed to help make this easy, the <template> tag. When you add a <template> element to a page, it doesn’t get displayed when the page loads. It is an inert fragment of future HTML.

We can copy any DOM node, not just <template> tags. For this problem, we will use a <template> tag because it is designed for this purpose.

When we copy an element, its children get copied. This means we can write our template card as HTML:

<template id="film-card">
  <section>
    <h3>Film title</h3>
    <p data-director>Director</p>
    <time>Duration</time>
    <p data-certificate>Certificate</p>
  </section>
</template>

This is our template card. Place it in the body of your html. It doesn’t show up! Template HTML is like a wireframe; it’s just a plan. We can use this template to create a card for any film object. We will clone (copy) this template and populate it with data.

const film = {
  title: "Killing of Flower Moon",
  director: "Martin Scorsese",
  times: ["15:35"],
  certificate: "15",
  duration: 112,
};

const card = document.getElementById("film-card").content.cloneNode(true);
// Now we are querying our cloned fragment, not the entire page.
card.querySelector("h3").textContent = film.title;
card.querySelector(
  "[data-director]"
).textContent = `Director: ${film.director}`;
card.querySelector("time").textContent = `${film.duration} minutes`;
card.querySelector("[data-certificate]").textContent = film.certificate;

document.body.append(card);

This code will produce the same DOM elements in the page as the two other versions of the code we’ve seen (the verbose version, and the version using createChildElement).

The first two approaches (the verbose version, and the createChildElement version) did so by calling the same DOM functions as each other.

This approach uses different DOM functions. But it has the same effect.

exercise

We’ve now seen two different ways of simplifying our function: extracting a function, or using a template tag.

Both have advantages and disadvantages.

Think of at least two trade-offs involved. What is better about the “extract a function” solution? What is better about the template tag solution? Could we combine them?

Share your ideas about trade-offs in a thread in Slack.

Learning Objectives

Implement components for a user interface

Recall our sub-goal:

🎯 Sub-goal: Build a film card component

Now that we have made a card work for one particular film, we can re-use that code to render any film object in the user interface with a general component. To do this, we wrap up our code inside a JavaScript function. JavaScript functions reuse code: so we can implement reusable UI components using functions.

const film = {
  title: "Killing of Flower Moon",
  director: "Martin Scorsese",
  times: ["15:35"],
  certificate: "15",
  duration: 112,
};

const createFilmCard = (template, film) => {
  const card = template.content.cloneNode(true);
  // Now we are querying our cloned fragment, not the entire page.
  card.querySelector("h3").textContent = film.title;
  card.querySelector("p").textContent = `Director: ${film.director}`;
  card.querySelector("time").textContent = `${film.duration} minutes`;
  card.querySelector("data").textContent = `Certificate: ${film.certificate}`;
  // Return the card, rather than directly appending it to the page
  return card;
};
const template = document.getElementById("film-card");
const filmCard = createFilmCard(template, film);

// Remember we need to append the card to the DOM for it to appear.
document.body.append(filmCard);

exercise

Refactor the createFilmCard function to use object destructuring in the parameters.

Learning Objectives

Describe how to render a list of data

We can now render any one film data object in the UI. However, to fully solve this problem we must render a list of all of the film objects. For each film object, we need to render a corresponding film card in the UI. In this case, there is a one-to-one mapping 🧶 between the data array and the UI components on the web page. Each item in the array matches a node in the UI. We can represent this diagrammatically by pairing up the data elements with their corresponding UI components:

--- title: One to one mapping between data and the UI components --- flowchart LR A[datum1] == createFilmCard(datum1) ==> B[UI component 1] C[datum2] == createFilmCard(datum2) ==> D[UI component 2]

To create an array of card components, we can iterate through the film data using a for...of loop:

const filmCards = [];
for (const item of films) {
  filmCards.push(createFilmCard(item));
}

document.body.append(...filmCards);
// invoke append using the spread operator

However, there are alternative methods for building this array of UI components.

Learning Objectives

Describe how map works

We want to create a new array by applying a function to each element in the starting array. Earlier, we used a for...of statement to apply the function createFilmCard to each element in the array. However, we can also build an array using the map array method. map is a higher order function 🧶 . In this case, it means we pass a function as an argument to map. Then map will use this function to create a new array.

Work through this map exercise. It’s important to understand map before we apply it to our film data.

const arr = [5, 20, 30];

function double(num) {
  return num * 2;
}

Our goal is to create a new array of doubled numbers given this array and function. We want to create the array [10, 40, 60]. Look, it’s another “one to one mapping”

--- title: One to one mapping - doubling each number in an array --- flowchart LR A[5] == double(5) ==> B[10] C[20] == double(20) ==> D[40] E[30] == double(30) ==> F[60]

We are building a new array by applying double to each item. Each time we call double we store its return value in a new array:

function double(num) {
  return num * 2;
}

const numbers = [5, 20, 30];
const doubledNums = [
  double(numbers[0]),
  double(numbers[1]),
  double(numbers[2]),
];

But we want to generalise this. Whenever we are writing out the same thing repeatedly in code, we probably want to make a general rule instead. We can do this by calling map:

1
2
3
4
5
6
function double(num) {
  return num * 2;
}

const numbers = [5, 20, 30];
const doubledNums = numbers.map(double);

Use the array visualiser to observe what happens when map is used on the arr. Try changing the elements of arr and the function that is passed to map. Answer the following questions in the visualiser:

What does map do?
What does map return?
What parameters does the map method take?
What parameters does the callback function take?

Play computer with the example to see what happens when the map is called.

Given the list of film data:

const films = [
  {
    title: "Killing of Flower Moon",
    director: "Martin Scorsese",
    times: ["15:35"],
    certificate: "15",
    duration: 112,
  },
  {
    title: "Typist Artist Pirate King",
    director: "Carol Morley",
    times: ["15:00", "20:00"],
    certificate: "12A",
    duration: 108,
  },
];

Use createFilmCard and map to create an array of film card components. In a local project, render this array of components in the browser.

categories Categories CYF ITP

🧑🏾‍💻 prep

💾 ➡️ 💻 Data to UI

Learning Objectives

📽️ Cinema listings

Learning Objectives

Youtube: Step-through-prep workshop 🔗

💽 Single datum

Learning Objectives

🧱 Composing elements

Learning Objectives

💡 tip

Appending elements

🧼 Simplifying element creation

Learning Objectives

Refactoring: Extracting a function

💡 tip

exercise

Stretch goal: Add the datetime

🍱 Simplifying element creation

Learning Objectives

Using `<template>` tags

exercise

🃏 Building a component

Learning Objectives

exercise

👭🏾 One to one

Learning Objectives

🗺️ Using map

Learning Objectives

Learning Objectives

Learning Objectives

Youtube: Step-through-prep workshop 🔗

Learning Objectives

Learning Objectives

💡 tip

Appending elements

Learning Objectives

Refactoring: Extracting a function

💡 tip

exercise

Stretch goal: Add the datetime

Learning Objectives

Using <template> tags

exercise

Learning Objectives

exercise

Learning Objectives

Learning Objectives

Using `<template>` tags