DEV Community: Hassan Djirdeh

Tutorial - Build a chatbot with React and OpenAI

Hassan Djirdeh — Tue, 21 Feb 2023 16:11:00 +0000

This article is the second article and tutorial sent on the frontendfresh.com newsletter. Subscribe to the Front-end Fresh newsletter to get front-end engineering tips, tutorials, and projects sent to your inbox on a weekly basis!

Last week, we built a Node.js/Express server that exposes an /ask endpoint. When this endpoint is triggered and we include a text prompt, the endpoint interacts with OpenAI's /completions API to generate and return a continuation of that text.

When we tested this with an example prompt like "How is the weather in Dubai?", the API returned a valid answer to us.

Today, we're going to build a User Interface (i.e. UI) that resembles a chatbot where the user can type a question and receive an answer from the Node.js backend API we created.

Scaffolding a React app

We'll be building the UI of our app with the React JavaScript library. To get started, we'll first want to scaffold a React development environment quickly and we'll do this with the help of Vite.

I have plans on writing an email that does a bit more of a deep-dive into Vite but in summary, Vite is a build tool and development server that is designed to optimize the development experience of modern web applications. Think Webpack but with faster build/start times and a few additional improvements.

To get started in scaffolding our React app, we'll follow the Getting Started documentation section of Vite, and we'll run the following in our terminal.

npm create vite@latest

We'll then be given a few prompts to fill. We'll state that we'll want our project to be named custom_chat_gpt_frontend and we'll want it to be a React/JavaScript app.

$ npm create vite@latest
✔ Project name: custom_chat_gpt_frontend
✔ Select a framework: › React
✔ Select a variant: › JavaScript

We can then navigate into the project directory and run the following to install the project dependencies.

npm install

When the project dependencies have finished installing, we'll run our front-end server with:

npm run dev

We'll then be presented with the running scaffolded application at http://localhost:5173/.

Creating the markup & styles

We'll begin our work by first focusing on building the markup (i.e. HTML/JSX) and styles (i.e. CSS) of our app.

In the scaffolded React application, we'll notice a bunch of files and directories have been created for us. We'll be working entirely within the src/ directory. To get things started, we'll modify the autogenerated code in our src/App.jsx component to simply return "Hello world!".

import "./App.css";

function App() {
  return <h2>Hello world!</h2>;
}

export default App;

We'll remove the scaffolded CSS styles in our src/index.css file and only have the following.

html,
body,
#root {
  height: 100%;
  font-size: 14px;
  font-family: arial, sans-serif;
  margin: 0;
}

And in the src/App.css file, we'll remove all the initially provided CSS classes.

/* App.css CSS styles to go here */
/* ... */

Saving our changes, we'll be presented with a "Hello world!" message.

We won't spend a lot of time in this email breaking down how our UI is styled. To summarize quickly, our final app will only contain a single input field section that both captures what the user types and the returned answer from the API.

We'll style the UI of our app with standard CSS. We'll paste the following CSS into our src/App.css file which will contain all the CSS we'll need.

.app {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.1);
}

.app-container {
  width: 1000px;
  max-width: 100%;
  padding: 0 20px;
  text-align: center;
}

.spotlight__wrapper {
  border-radius: 12px;
  border: 1px solid #dfe1e5;
  margin: auto;
  max-width: 600px;
  background-color: #fff;
}

.spotlight__wrapper:hover,
.spotlight__wrapper:focus {
  background-color: #fff;
  box-shadow: 0 1px 6px rgb(32 33 36 / 28%);
  border-color: rgba(223, 225, 229, 0);
}

.spotlight__input {
  display: block;
  height: 56px;
  width: 80%;
  border: 0;
  border-radius: 12px;
  outline: none;
  font-size: 1.2rem;
  color: #000;
  background-position: left 17px center;
  background-repeat: no-repeat;
  background-color: #fff;
  background-size: 3.5%;
  padding-left: 60px;
}

.spotlight__input::placeholder {
  line-height: 1.5em;
}

.spotlight__answer {
  min-height: 115px;
  line-height: 1.5em;
  letter-spacing: 0.1px;
  padding: 10px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spotlight__answer p::after {
  content: "";
  width: 2px;
  height: 14px;
  position: relative;
  top: 2px;
  left: 2px;
  background: black;
  display: inline-block;
  animation: cursor-blink 1s steps(2) infinite;
}

@keyframes cursor-blink {
  0% {
    opacity: 0;
  }
}

We'll now move towards establishing the markup/JSX of our <App /> component. In the src/App.jsx file, we'll update the component to first return a few wrapper <div /> elements.

import "./App.css";

function App() {
  return (
    <div className="app">
      <div className="app-container">
        <div className="spotlight__wrapper">
          /* ... */
        </div>
      </div>
    </div>
  );
}

export default App;

Within our wrapper elements, we'll place an <input /> element and a <div /> element to represent the input section and the answer section respectively.

import "./App.css";
import lens from "./assets/lens.png";

function App() {
  return (
    <div className="app">
      <div className="app-container">
        <div className="spotlight__wrapper">
          <input
            type="text"
            className="spotlight__input"
            placeholder="Ask me anything..."
            style={{
              backgroundImage: `url(${lens})`,
            }}
          />
          <div className="spotlight__answer">
            Dubai is a desert city and has a warm and sunny climate throughout
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

For the <input /> element, we're adding an inline backgroundImage style property where the value is the .png image of a magnifying glass that we've saved in our src/assets/ directory. You can find a copy of this image here.

With our changes saved, we'll now be presented with the UI of the app the way we expected it to look.

Capturing the prompt value

Our next step is to capture the prompt value the user is typing. This needs to be done since we intend to send this value to the API when the input has been submitted. We'll capture the user input value in a state property labeled prompt and we'll initialize it with undefined.

import { useState } from "react";
import "./App.css";
import lens from "./assets/lens.png";

function App() {
  const [prompt, updatePrompt] = useState(undefined);

  return (
    /* ... */
  );
}

export default App;

When the user types into the <input /> element, we'll update the state prompt value by using the onChange() event handler.

import { useState } from "react";
import "./App.css";
import lens from "./assets/lens.png";

function App() {
  const [prompt, updatePrompt] = useState(undefined);

  return (
    <div className="app">
      <div className="app-container">
        <div className="spotlight__wrapper">
          <input
            // ...
            onChange={(e) => updatePrompt(e.target.value)}
          />
          // ...
        </div>
      </div>
    </div>
  );
}

export default App;

We want the input to be "submitted" at the moment the user presses the "Enter" key. To do this, we'll use the onKeyDown() event handler and have it trigger a sendPrompt() function we'll create.

In the sendPrompt() function, we'll return early if the user enters a key that is not the "Enter" key. Otherwise, we'll console.log() the prompt state value.

import { useState } from "react";
import "./App.css";
import lens from "./assets/lens.png";

function App() {
  const [prompt, updatePrompt] = useState(undefined);

  const sendPrompt = async (event) => {
    if (event.key !== "Enter") {
      return;
    }

    console.log('prompt', prompt)
  }

  return (
    <div className="app">
      <div className="app-container">
        <div className="spotlight__wrapper">
          <input
            // ...
            onChange={(e) => updatePrompt(e.target.value)}
            onKeyDown={(e) => sendPrompt(e)}
          />
          // ...
        </div>
      </div>
    </div>
  );
}

export default App;

Now, if we type something into the input and press the "Enter" key, we'll be presented with that input value in our console.

Triggering the API

The final step to our implementation is triggering the API when the user presses the "Enter" key after typing a prompt in the input.

We'll want to capture two other state properties that will reflect the information of our API request — the loading state of our request and the answer returned from a successful request. We'll initialize loading with false and answer with undefined.

import { useState } from "react";
import "./App.css";
import lens from "./assets/lens.png";

function App() {
  const [prompt, updatePrompt] = useState(undefined);
  const [loading, setLoading] = useState(false);
  const [answer, setAnswer] = useState(undefined);

  const sendPrompt = async (event) => {
    // ...
  }

  return (
    // ...
  );
}

export default App;

In our sendPrompt() function, we'll use a try/catch statement to handle errors that may occur from the asynchronous request to our API.

const sendPrompt = async (event) => {
  if (event.key !== "Enter") {
    return;
  }

  try {

  } catch (err) {

  }
}

At the beginning of the try block, we'll set the state loading property to true. We'll then prepare our request options and then use the native browser fetch() method to trigger our request. We'll make our request hit an endpoint labeled api/ask (we'll explain why in a second).

const sendPrompt = async (event) => {
  if (event.key !== "Enter") {
    return;
  }

  try {
    setLoading(true);

    const requestOptions = {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ prompt }),
    };

    const res = await fetch("/api/ask", requestOptions);
  } catch (err) {

  }
}

If the response is not successful, we'll throw an error (and console.log() it). Otherwise, we'll capture the response value and update our answer state property with it.

This makes our sendPrompt() function in its complete state look like the following:

const sendPrompt = async (event) => {
  if (event.key !== "Enter") {
    return;
  }

  try {
    setLoading(true);

    const requestOptions = {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ prompt }),
    };

    const res = await fetch("/api/ask", requestOptions);

    if (!res.ok) {
      throw new Error("Something went wrong");
    }

    const { message } = await res.json();
    setAnswer(message);
  } catch (err) {
    console.error(err, "err");
  } finally {
    setLoading(false);
  }
};

Before we move towards testing that our request works as expected, we'll add a few more changes to our component.

When our loading state property is true, we'll want the input to be disabled and we'll also want to display a spinning indicator in place of the magnifying lens image (to convey to the user that the request is "loading").

We'll display a spinning indicator by conditionally dictating the value of the backgroundImage style of the <input /> element based on the status of the loading value. We'll use this spinner GIF that we'll save int our src/assets/ directory.

import { useState } from "react";
import "./App.css";
import loadingGif from "./assets/loading.gif";
import lens from "./assets/lens.png";

function App() {
  // ...

  return (
    <div className="app">
      <div className="app-container">
        <div className="spotlight__wrapper">
          <input
            // ...
            disabled={loading}
            style={{
              backgroundImage: loading ? `url(${loadingGif})` : `url(${lens})`,
            }}
            // ...
          />
          // ...
        </div>
      </div>
    </div>
  );
}

In the answer section of our markup, we'll conditionally add a paragraph tag that contains the {answer} value if it is defined.

import { useState } from "react";
import "./App.css";
import loadingGif from "./assets/loading.gif";
import lens from "./assets/lens.png";

function App() {
  // ...

  return (
    <div className="app">
      <div className="app-container">
        <div className="spotlight__wrapper">
          // ...
          <div className="spotlight__answer">{answer && <p>{answer}</p>}</div>
        </div>
      </div>
    </div>
  );
}

The last thing we'll want to do is have the {answer} state value set back to undefined if the user ever clears the input. We'll do this with the help of the React useEffect() Hook.

import { useState, useEffect } from "react";
// ...

function App() {
  const [prompt, updatePrompt] = useState(undefined);
  const [loading, setLoading] = useState(false);
  const [answer, setAnswer] = useState(undefined);

  useEffect(() => {
    if (prompt != null && prompt.trim() === "") {
      setAnswer(undefined);
    }
  }, [prompt]);

  // ...

  return (
    // ...
  );
}

export default App;

That's all the changes we'll make to our <App /> component! There's one small thing we have to do before we can test our app.

Proxying the request

In our Vite React project, we want to make API requests to a backend server running on a different origin (i.e. a different port at localhost:5000) than the one the web application is served from (localhost:5173). However, due to the same-origin policy enforced by web browsers, such requests can be blocked for security reasons.

To get around this when working within a development environment, we can set up a reverse proxy on the frontend server (i.e. our Vite server) to forward requests to the backend server, effectively making the backend server's API available on the same origin as the frontend application.

Vite allows us to do this by modifying the server.proxy value in the Vite configuration file (which is vite.config.js).

In the vite.config.js file that already exists in our project, we'll specify the proxy to be the /api endpoint. The /api endpoint will get forwarded to http://localhost:5000.

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      "/api": {
        target: "http://localhost:5000",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
});

Now, when our front-end makes a request to /api/ask, it gets forwarded to the backend server running at http://localhost:5000/ask.

Testing our app

We've finished building our simple chatbot app. Let's test our work!

First, we need to have our Node/Express server from the last tutorial running. We'll navigate into that project directory and run node index.js to get that going.

$ custom_chat_gpt: node index.js

We'll save our changes in our front-end app, and restart the front-end server.

$ custom_chat_gpt_frontend: npm run dev

In the UI of our front-end app, we'll provide a prompt and press "Enter". There should be a brief loading period before the answer is then populated and shown to us!

We can even try and ask our chatbot something more specific like "What are the best doughnuts in Toronto Canada?".

Funny enough, when I search for the Castro's Lounge bakery here in Toronto, I get a bar and live-music venue, not a bakery. And Glazed & Confused Donuts appears to be in Syracuse, New York — not Toronto. It looks like there's room to fine-tune our chatbot a bit better — we'll talk about this in our last tutorial email of this series, next week 🙂.

Closing thoughts

You can find the source code for this article at frontend-fresh/articles_source_code/custom_chat_gpt_frontend/.
To control the length of the information returned from OpenAI's /completions endpoint, you can modify the max_tokens setting field in the OpenAI configuration (see example here).
Subscribe to https://www.frontendfresh.com/ for more tutorials like this to hit your inbox on a weekly basis!

That's it for today! 🙂

— Hassan (@djirdehh)

[Tutorial] Interacting with OpenAI in Node.js and Express

Hassan Djirdeh — Mon, 13 Feb 2023 18:06:00 +0000

✨ This article is the first article and tutorial sent on the https://frontendfresh.com newsletter.

Today's article is the first article of a 3 to 4-part tutorial series where we'll be working towards building our very own custom Q&A chatbot. We'll achieve this by:

Building a Node/Express server to interact with OpenAI's APIs (today's email).
Using React to build the UI of our Q&A chatbot.
Finally, we'll then investigate how to fine-tune our app to have our Q&A chatbot return custom information.

Our final app will look something like the following:

Today, we'll be focusing solely on creating a Node.js server where we can interact directly with OpenAI's APIs. This is a precursor to setting up our front-end app that would then interact with the local API we'll create.

If you want to follow along, you'll need Node and NPM installed in your machine and an OpenAI API key (we'll show you how to get this in the next section).

Generating an OpenAI API key

Follow these steps to generate an API key with OpenAI:

Sign up for an account by going to the OpenAI website (https://platform.openai.com/).
Once an account is created, visit the API keys page at https://platform.openai.com/account/api-keys.
Create a new key by clicking the "Create new secret key" button.

When an API key is created, you'll be able to copy the secret key and use it when you begin development.

Note: OpenAI currently provides 18$ free credits for 3 months which is great since you won't have to provide your payment details to begin interacting with the API for the first time.

Setting up a Node/Express app

We'll now move towards creating a new directory for our Node project and we'll call it custom_chat_gpt.

mkdir custom_chat_gpt

We'll navigate into the new directory and we'll run the following command to create a package.json file.

npm init -y

Once the package.json file has been created appropriately, we'll then install the three dependencies we'll need for now.

npm install dotenv express openai

dotenv: will allow us to load environment variables from a .env file when working locally.
express: is the Node.js framework we'll use to spin up a Node server.
openai: is the Node.js library for the OpenAI API.

We'll then create a file named index.js. The index.js file is where we'll build our Node.js/Express server.

In the index.js file, we'll:

Include the express module with require("express").
We'll then run the express() function to define the Express instance and assign it to a constant labeled app.
We'll specify a middleware in our Express instance (with app.use()) to parse incoming JSON requests and place the parsed data in a req body.
We'll specify a port variable that will be given a value that comes from a PORT environment variable or 5000 if the PORT environment variable is undefined.

const express = require("express");

const app = express();
app.use(express.json());

const port = process.env.PORT || 5000;

We'll then set up a POST route labeled /ask that will act as the endpoint our client will trigger. In this route, we will expect a prompt value to exist in the request body and if it doesn't, we'll throw an error. If the prompt value does exist, we'll simply return a response of status 200 that contains the prompt in a message field.

Lastly, we'll run the app.listen() function to have our app listen on the port value we've specified in the port variable.

const express = require("express");

const app = express();
app.use(express.json());

const port = process.env.PORT || 5000;

// POST request endpoint
app.post("/ask", async (req, res) => {
  // getting prompt question from request
  const prompt = req.body.prompt;

  try {
    if (prompt == null) {
      throw new Error("Uh oh, no prompt was provided");
    }

    // return the result
    return res.status(200).json({
      success: true,
      message: prompt,
    });
  } catch (error) {
    console.log(error.message);
  }
});

app.listen(port, () => console.log(`Server is running on port ${port}!!`));

With this change saved, it will be a good time to test that our changes work. We'll run the server with:

node index.js

With our server running, we can then attempt to trigger our /ask POST request through a CURL command to verify our server is set up appropriately.

curl -X POST \
  http://localhost:5000/ask \
  -H 'Content-Type: application/json' \
  -d '{ "prompt": "Hi! This is a test prompt!" }'

We'll be provided with a successful response and our prompt returned to us.

With our server now working as intended, we can move towards having our /ask endpoint interact with OpenAI's /completions endpoint.

Interacting with OpenAI's completions endpoint

OpenAI provides a /completions endpoint in their API that provides completion suggestions for text input.

When we send a request to the /completions endpoint and we include a prompt or seed text, the API will generate a continuation of that text based on its training data.

With this /completions endpoint, we can build our own custom version of ChatGPT (with some caveat that ChatGPT most likely uses a more powerful Machine Learning model that isn't available through the OpenAI API).

To interact with the OpenAI API, we will need the unique API key that we created earlier through the OpenAI website. Sensitive information, such as API keys, should not be hard-coded directly into application source code.

We'll create a .env file in the root directory of our project to store environment variables that contain sensitive information.

custom_chat_gpt
  .env
  // ...

In the .env file, we'll create a new environment variable labeled OPENAI_API_KEY and give it the value of the OpenAI API key.

# your unique API key value goes here
OPENAI_API_KEY=sk-############

In our index.js file, we'll require and use the dotenv module to load environment variables from the .env file into the process environment of our application. We'll also import the classes we'll need from the openai Node.js library — the Configuration and OpenAIApi classes.

// configure dotenv
require("dotenv").config();

// import modules from OpenAI library
const { Configuration, OpenAIApi } = require("openai");

// ...

Next, we'll need to create a configuration object for interacting with the OpenAI API. We'll do this by instantiating the Configuration() constructor and passing in the value of the OPENAI_API_KEY environment variable to the apiKey field.

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});

We'll then set up a new instance of the OpenAI API class like the following:

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

We can now use the openai variable we've created to make API calls and process responses from OpenAI.

In our /ask POST request function, we'll run the openai.createCompletion() function that essentially triggers a call to OpenAI's completions endpoint.

app.post("/ask", async (req, res) => {
  const prompt = req.body.prompt;

  try {
    if (prompt == null) {
      throw new Error("Uh oh, no prompt was provided");
    }

    // trigger OpenAI completion
    const response = await openai.createCompletion();

    // ...
  } catch (error) {
    console.log(error.message);
  }
});

The OpenAI completions endpoint allows us to pass in a large number of optional fields into the request to modify how we want our text completion to behave. For our use case, we'll only look into providing values for two fields — model and prompt.

model: specifies the name of the language model that the API should use to generate the response to the request. OpenAI provides several different language models, each with its strengths and capabilities. For our use case, we'll specify that we want to use the text-davinci-003 model which is OpenAI's most capable GPT-3 model.
prompt: is the prompt that we want OpenAI to generate a completion for. Here we'll just pass the prompt value that exists in the body of our /ask request.

app.post("/ask", async (req, res) => {
  const prompt = req.body.prompt;

  try {
    if (prompt == null) {
      throw new Error("Uh oh, no prompt was provided");
    }

    // trigger OpenAI completion
    const response = await openai.createCompletion({
      model: "text-davinci-003",
      prompt,
    });

    // ...
  } catch (error) {
    console.log(error.message);
  }
});

The text returned from the OpenAI response exists within a choices array that itself is within a response.data object. We'll attempt to access the text returned from the first choice returned in the API which will look like the following:

app.post("/ask", async (req, res) => {
  const prompt = req.body.prompt;

  try {
    if (prompt == null) {
      throw new Error("Uh oh, no prompt was provided");
    }

    const response = await openai.createCompletion({
      model: "text-davinci-003",
      prompt,
    });
    // retrieve the completion text from response
    const completion = response.data.choices[0].text;

    // ...
  } catch (error) {
    console.log(error.message);
  }
});

The last thing we'll do is have this completion response be returned in the successful response of our /ask request. With this change and all the changes we've made, our index.js file will look like the following.

require("dotenv").config();
const express = require("express");
const { Configuration, OpenAIApi } = require("openai");

const app = express();
app.use(express.json());

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

const port = process.env.PORT || 5000;

app.post("/ask", async (req, res) => {
  const prompt = req.body.prompt;

  try {
    if (prompt == null) {
      throw new Error("Uh oh, no prompt was provided");
    }

    const response = await openai.createCompletion({
      model: "text-davinci-003",
      prompt,
    });
    const completion = response.data.choices[0].text;

    return res.status(200).json({
      success: true,
      message: completion,
    });
  } catch (error) {
    console.log(error.message);
  }
});

app.listen(port, () => console.log(`Server is running on port ${port}!!`));

We'll save our changes and restart our server. With our server running, we can ask certain questions to our API like "What is the typical weather in Dubai?".

curl -X POST \
  http://localhost:5000/ask \
  -H 'Content-Type: application/json' \
  -d '{ "prompt": "What is the typical weather in Dubai?" }'

After waiting a few seconds, our API will return to us a valid answer to our question!

That's it! We've managed to build a simple API with Node/Express to interact with OpenAI's completions endpoint.

Next week, we'll be continuing on this tutorial by building a React app that triggers the /ask request when an input field is submitted.

Closing thoughts

You can find the source code for this article at github.com/djirdehh/frontend-fresh/articles_source_code.
Do interact with the /completions endpoint and feel free to ask it any prompt that you would like!
If you're not a fan of using curl to test requests locally, Postman is a popular tool to test API requests through a client.
Do read more on all the different optional fields we can provide in OpenAI's /completion endpoint in the OpenAI API documentation.
Subscribe to https://www.frontendfresh.com/ for more tutorials like this to hit your inbox on a weekly basis!

🙂

— Hassan (@djirdehh)

Snippets of Hooks - A visual directory of React's core Hooks

Hassan Djirdeh — Tue, 25 Aug 2020 13:49:54 +0000

👋🏾 Hey Folks!

When I first started using Hooks in React, I always thought it would have been helpful to have a directory that displays all the different ways Hooks from the core React library can be used.

So in the last few weekends I went ahead and built a simple app to attempt the above called snippetsofhooks.dev.

The app provides code examples for the different variations of each official React Hook with helpful prompts and downloadable PDF cheat sheets.

I really hope this is helpful for anyone who is new to Hooks and/or just need a good reference point to come back to at times! This is still a WIP and I'm thinking of adding a few things later but do let me know if there's anything you think is worth improving. Feel free to leave a comment and I'm always available on Twitter as well - @djirdehh!

30 Days of Vue - Methods and Computed Properties

Hassan Djirdeh — Tue, 08 Jan 2019 13:10:07 +0000

This article is a chapter from 30 Days of Vue, a free resource that introduces the Vue.js framework in 30 bite sized morsels! You can view and download all the articles directly from the website - https://www.fullstack.io/30-days-of-vue/.

Methods

Methods in a Vue instance behave like normal JavaScript functions and are evaluated only when explicitly called. Instead of using methods we could always write our intended functionality change inline in the template.

Let’s see an example of this. We’ll reuse an example seen in the Vue documentation that involves reversing a series of characters from a string. We'll first create a Vue instance that contains a single message property that has a value of 'Greetings!':

new Vue({
  el: '#app',
  data: {
    message: 'Greetings!',
  },
});

In the template, we’ll look to bind the message directly and also bind the message in its reversed state. We’ll reverse the value of message by splitting the property into an array of characters (.split('')), reversing the elements in the array (.reverse()), and rejoining the reversed array back into a single string (.join('')).

<html>
  <head>
    <link rel="stylesheet" href="./styles.css" />
    <link rel="stylesheet"
      href="https://unpkg.com/bulma/css/bulma.css" />
  </head>

  <body>
    <div id="app">
      <div class="card">
        <header class="card-header card-header-title">
          <span>Original:</span>
          {{ message }}
        </header>

        <header class="card-header card-header-title">
          <span>Reversed:</span>
          {{ message.split('').reverse().join('') }}
        </header>
      </div>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="./main.js"></script>
  </body>
</html>

With the help of the styling given to us by Bulma, our simple app will look like the following:

There’s nothing inherently wrong with specifying functionality change, like the above, inline. However, methods are often times more appropriate to use when the intended changes get harder to decipher.

We can change the above example to instead use a method in our Vue instance to help reverse the message string:

new Vue({
  el: '#app',
  data: {
    message: 'Greetings!',
  },
  methods: {
    reverseString(string) {
      return string.split('').reverse().join('');
    },
  }
});

The method is given a name of reverseString and expects a payload. We can declare this method in the template and pass in the message property as the payload:

<html>
  <head>
    <link rel="stylesheet" href="./styles.css" />
    <link rel="stylesheet"
      href="https://unpkg.com/bulma/css/bulma.css" />
  </head>

  <body>
    <div id="app">
      <div class="card">
        <header class="card-header card-header-title">
          <span>Original:</span>
          {{ message }}
        </header>

        <header class="card-header card-header-title">
          <span>Reversed:</span>
          {{ reverseString(message) }}
        </header>
      </div>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="./main.js"></script>
  </body>
</html>

Our UI would behave just the way it had before by displaying the message greeting and the reversed version right below it:

Functionality wise - the above two examples achieve the same thing. Methods might be seen to be more appropriate since it keeps the template cleaner and easier to understand.

We’re also able to achieve the same outcome as above with the use of another property - called the computed property.

Computed Properties

Computed properties are used to handle complex calculations of information that need to be displayed in the view. For our third iteration in building the same simple app, we'll introduce a computed property called reverseMessage that simply reverses the message data property like we’ve done before:

new Vue({
  el: '#app',
  data: {
    message: 'Greetings!',
  },
  computed: {
    reverseMessage() {
      return this.message.split('').reverse().join('');
    },
  }
});

In the template, we can render the value of the reverseMessage computed property just as we would have rendered any other data property:

<html>
  <head>
    <link rel="stylesheet" href="./styles.css" />
    <link rel="stylesheet"
      href="https://unpkg.com/bulma/css/bulma.css" />
  </head>

  <body>
    <div id="app">
      <div class="card">
        <header class="card-header card-header-title">
          <span>Original:</span>
          {{ message }}
        </header>

        <header class="card-header card-header-title">
          <span>Reversed:</span>
          {{ reverseMessage }}
        </header>
      </div>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="./main.js"></script>
  </body>
</html>

With this, our app will behave as desired:

This begs the question, what difference is there to using a computed property or having a method instead return a value?

Methods vs. Computed Properties

In the examples above, using a method or a computed property pretty much achieved the exact same outcome. The key difference to using computed properties is that computed properties are cached based on the dependencies they depend on.

If we take a look at the reverseMessage computed property we’ve declared, we can see it has one data dependancy - the message property.

computed: {
  reverseMessage() {
    return this.message.split('').reverse().join('');
  },
}

The value of reverseMessage directly depends on the message data property. When the value of message changes, so does reverseMessage. Computed properties are useful because as long as the dependant data property (message) remains constant (i.e. unchanged), calling the computed property (reverseMessage) multiple times will always return the same cached value.

Let's see a simple example of this visually. We can place a console.log() message in the computed property function to alert us when the function has been run:

computed: {
  reverseMessage() {
    console.log('computed function is run!');
    return this.message.split('').reverse().join('');
  },
}

In the template, we can aim to render the reverseMessage computed property a couple of times:

<div id="app">
  <div class="card">
    <header class="card-header card-header-title">
      <span>Original:</span>
      {{ message }}
    </header>
  </div>

  <div class="card">
    <header class="card-header card-header-title">
      <span>Reversed:</span>
      {{ reverseMessage }}
    </header>
  </div>

  <div class="card">
    <header class="card-header card-header-title">
      <span>Reversed:</span>
      {{ reverseMessage }}
    </header>
  </div>

  <div class="card">
    <header class="card-header card-header-title">
      <span>Reversed:</span>
      {{ reverseMessage }}
    </header>
  </div>
</div>

By running the application and opening our browser console, we’ll see the console.log() message logged only once:

The first time the reverseMessage property is computed, its value is cached. With every other call to render the value of reverseMessage, the message property hasn’t changed, so the cached result is simply returned without running the computed function again.

If we repeat a similar example but instead call methods multiple times in the template, the console.log() message will be run every single time the method is declared:

In conclusion, though methods can be used in place of computed properties - computed properties should essentially be used if we intend to compute a value from a data property. Caching can help our application with performance once our application starts to have countless properties with each derived functionality potentially being somewhat computationally expensive.

Here's a table that highlights the main differences between using methods or computed properties:

A good rule of thumb to follow:

Use methods when responding to changes (e.g. clicking a button, submitting a form, etc.) or to run explicit functionality change within the instance (e.g. have a method be called from a lifecycle hook).
Use computed properties for data manipulation (e.g. create a sorted array from an unsorted array in the instance).

If you have any questions whatsoever, feel free to leave a comment and I’ll answer as best as I can. I'm always available on Twitter as well - @djirdehh!

If you're brand new to Vue.js and are interested in diving into other topics - feel free to check out https://www.fullstack.io/30-days-of-vue/.