DEV Community: Sagar Gurung

Options Vs Composition API in Vue JS

Sagar Gurung — Tue, 12 Mar 2024 09:37:48 +0000

Background

When it comes to defining or creating a component in Vue.js, we probably have heard about the Options API. Using Options API not only we can create specific aspects or behaviors of a component but also allows us how we want to build components.
It provides different properties (or options) such as data, methods, computed, and watch through which we can organize the behavior of a component systematically. But since Vue 3, we have another API called Composition API through which we can achieve the same thing. The Composition API is a new highlight for many Vue developers, but both approaches to define components have their unique pros and cons. So debating which among these two is better would be a difficult one.

In this blog, we will learn how we can convert a component defined in Options API to Composition API and we will also discuss the comparison of both APIs. Also at the end, we will know how we can define the component with Composition API.
To demonstrate this, I have created a simple application called Voting Details, which we will be examining together in this blog.

Play around with `Voting Details`

I have put this section in this blog since it's better to know some information about what we are building. The Voting Details demo application stores the user's details and checks whether a user is eligible to vote or not.
I have implemented two separate components with the same functionalities, one is using Options API and the other is using Composition API. We will go through a bit in brief how we can change the functionality of a component same as in Options API with Composition API.

Note: To get the application up and running, make sure Node.js version 16 or above is installed into your system.

git clone https://github.com/SagarGi/OptionsVsCompositionVue
cd OptionsVsCompositionVue
npm install
npm run dev

We can access it through URL http://localhost:8000 and the application looks something like this.

What's in `Options API`?

For the demo application, in Voting Details I have defined a component using Options API as:

<script>
  export default {
    data() {
      return {
        name: 'Sagar Gurung',
        age: 18,
        bornYear: 2005,
        votingStatus: 'Eligible!'
      }
    },
    methods: {
      increaseAge() {
        this.age++
      },
      decreaseAge() {
        this.age--
      }
    },
    computed: {
      getVotingStatus() {
        return (this.age >= 18) ? 'Eligible' : 'Not Eligible'
      }
    },
    watch: {
      age(oldAge, newAge) {
        if(oldAge > newAge) {
          this.bornYear--
        } else {
          this.bornYear++
        }
      }
    }
  }
</script>

In this demo app the properties data, methods, computed, and watch have been defined using Options API. I will explain the meaning of each of them in the Composition API section since we are converting component defined in Options API with Composition API.

Converting to Composition API

1. Defining `data`

When defining the data necessary for a component, in Composition API, we have to make it reactive to mutate or change values with ref or reactive provided by Vue.js.
So data property can be defined as:

   // data
    const data = reactive({
      name: 'Sagar Gurung',
      age: 18,
      votingStatus: "Eligible",
      bornYear: 2005
    })

2. Defining `methods`

Defining the methods is very simple. It is just as easy as defining functions in JavaScript.

    // methods
    function increaseAge() {
      data.age++
    }

    function decreaseAge() {
      data.age--
    }

The above function changes the age property of the data defined in data which is reactive.

3. Defining `computed`

To define the computed property Vue provides the method called computed through which we can explicitly define the computed function.

   //computed
    const getVotingStatus = computed(() => {
      return (data.age >= 18) ? 'Eligible' : 'Not Eligible'
    })

Here the operation getVotingStatus returns the voting status based on value of age.

4. Defining `watch`

Similarly, Vue has provided a watch function to watch the change in any data properties defined.

   //watcher
    watch(mainData.age, (oldAge, newAge) => {
      if(oldAge > newAge) {
        data.bornYear--
      } else {
        data.bornYear++
      }
    })

We have watched data age in such a way that when age is increased the data bornYear will decrease and vice-versa.

The whole script code snippet looks like this at last for the Composition API:

import { reactive, toRefs, computed , watch} from "vue";
export default {
  setup() {
    // data
    const data = reactive({
      name: 'Sagar Gurung',
      age: 18,
      votingStatus: "Eligible",
      bornYear: 2005
    })
    const mainData = toRefs(data)
    // methods
    function increaseAge() {
      data.age++
    }
    function decreaseAge() {
      data.age--
    }
    //computed
    const getVotingStatus = computed(() => {
      return (data.age >= 18) ? 'Eligible' : 'Not Eligible'
    })
    //watcher
    watch(mainData.age, (oldAge, newAge) => {
      if(oldAge > newAge) {
        data.bornYear--
      } else {
        data.bornYear++
      }
    })

    return {
      ...mainData,
      increaseAge,
      decreaseAge,
      getVotingStatus
    }
  }
}

In the final code, we have imported reactive, toRefs, computed, and watch which are needed for building components with the Composition API. toRefs is used to convert the data created with reactive to plain objects. Also, when using Composition API we need to define all those data, computed, watch, and methods inside of function setup() as done above.
At last, all the things that have been defined such as data, computed, and methods need to be returned to be exposed to the template.

In this demo application we have learnt the basics of how to convert a component defined with Options API to Composition API. However, there are lots of other things that we can perform using the Composition API.
I hope this blog gave you some insights on how to use the Composition API and also how you can replace your component defined in Options API with it.
If you want to learn more about both Options API and Composition API then you can learn more from here.

But before finishing the blog I would like to highlight some points regarding both Options API and Composition API so that you can relate which one to prefer before building up your projects.

`Options API` and `Composition API`

You can find a lot of points regarding the comparison between these two APIs, both approaches for building up components have their benefits and drawbacks. I will only highlight five differences which I consider most relevant for choosing whether to use the Options API or Composition API in your own project:

Composition API is new to Vue which can be called a modern way to define components whereas on the other hand Options API is a proven, traditional way to build up components in Vue.
Also, the structure and syntax for the Options API seems a bit simpler and easier to understand than that of the Composition API. It's a good choice for small projects and also for beginners. But for large and more complex projects, a better choice would be Composition API since it has a more flexible and modular structure that enhances better code maintainability.
In addition to this, since Composition API is fully based on functional, reactive programming it can be difficult for learners who are not familiar with this approach. In this case, Options API could be a suitable choice.
Moreover, Composition API having a function based structure with better type inference, Typescript support is better than that of Options API.
Composition API supports better code reusability as it has functions and modular composition preventing complex code, which ultimately leads to more intuitive code.

Containerize a Web Application using docker compose

Sagar Gurung — Mon, 04 Dec 2023 04:30:56 +0000

In this blog we will basically be containerizing a web application consisting of MySQL, phpmyadmin, frontend and backend as services using docker compose.
Also, we briefly get into how all those services are running and how multiple services make up an application running in multiple containers.

Note: This article does not provide concepts of docker. To know concepts of docker visit here.

Brief About Docker Compose

In short, docker compose helps to define and run docker applications in multiple containers. With docker compose we can define a yml file where we can define our services, networks, and the volumes required for our application to get it running. Basically, configuring, defining and managing all the necessary things required for our application becomes easy with docker compose.

And in this blog, we will also be defining and configuring simple services for our application through a compose file and run it using docker compose.

What is the application about (to be run with docker compose)?

The application we will be running with docker compose has 3 main services:

frontend service
backend service
mysql service (database service)

Also, we will be running the 4th service phpmyadmin which is used for managing and administering MySQL with a GUI.
This is a very simple application for demo, where in the mysql database there are lists of user information and through the frontend service we will request to the backend service to get all those users and then list them in our application UI. Like this, all those application services are dependent and collaborating with each other. We will be configuring these through docker compose.

Prerequisites

Before we start, lets make sure following things get installed into your system.

install docker
install docker compose

Note: I will be doing the whole setup with Ubuntu 22.04 LTS. Things might differ if you have a different operating system.

Getting Started

Since we have enough information about the application and the prerequisites are fulfilled. We can now jump to the section for defining and configuring our application with docker compose.

Initiate file structure

create a directory dockercompose
create a docker compose yml file dockercompose/compose.yml inside it.
Also create an empty testdump.sql file (I will mention the use of it later)

It should look something like this.

  📦dockercompose
      ┗ 📜compose.yml
      ┗ 📜testdump.sql

Defining and configuring services

Now inside the compose.yml let's define and configure the services for our application.

database service (mysql)

 version: "3.8"

 services:
    database:
      image: mysql
      environment:
        MYSQL_ROOT_PASSWORD: root
        MYSQL_DATABASE: demodb
      volumes:
        - ./testdump.sql:/docker-entrypoint-initdb.d/testdump.sql
      restart: always

Here, defining services in docker compose we use the keyword services. We have defined our service database configured with image:mysql and the environment variables required for it.
We can see it has a volumes keyword used here. We can mount local data to the docker container using the volumes keyword. In this context, we have mapped testdump.sql which is in our
local root directory which runs as an entrypoint when the container starts. It means when the database service is started in a container, the testdump.sql is the first thing which is run inside the container.
The entrypoint script will create 4 users in the database. Add some sql commands inside of testdump.sql:

    CREATE TABLE users(userid INT PRIMARY KEY AUTO_INCREMENT, fullname VARCHAR(60), email VARCHAR(60));
    INSERT INTO users (fullname, email) VALUES ('Sagar Gurung', 'sagar@example.com');
    INSERT INTO users (fullname, email) VALUES ('Bob Johnson', 'bob@example.com');
    INSERT INTO users (fullname, email) VALUES ('Eva White', 'eva@example.com');
    INSERT INTO users (fullname, email) VALUES ('Michael Brown', 'michael@example.com');
    ALTER USER 'root' IDENTIFIED WITH mysql_native_password BY 'root';
    flush privileges;

backend service
```
  backend:
    image: sagar4321/demo-server
    environment:
      PORT: 3001
      DBHOST: database
      DBPORT: 3306
      DBUSER: root
      DBNAME: demodb
      DBPASSWORD: root
    restart: always
    ports:
      - "3001:3001"
    depends_on:
      - database
```
Similarly, we define and configure our backend as above with the necessary image:sagar4321/demo-server (this image is built and pushed to docker hub which I created), environment and port 3001 (port where the server listens)
Here, we have another keyword depends_on which has the value database service. It sets the order in which services must start and stop. For the above case, the database service starts before the backend service starts.
frontend service
```
  frontend:
    image: sagar4321/demo-web
    environment:
      SERVER_URL: http://0.0.0.0:3001
    ports:
      - 8080:8080
    depends_on:
      - backend
```
Use a similar style of definition and configuration for the frontend service with image: sagar4321/demo-web (which I built and pushed to docker hub), environment and port 8080 (where the frontend service listen).
But here the frontend service depends on the backend service since it needs to be started before the frontend service.

phpmyadmin service

  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    restart: always
    environment:
      PMA_HOST: database
      PMA_PORT: 3306
    ports:
      - "8081:80"
    depends_on:
      - database

Also, the same thing applies to defining and configuring the phpmyadmin service. It also depends on the database service, and listens to port:8081

Now the overall compose.yml file after combining all the services together looks something like this:

version: "3.8"

services:
  database:
    image: mysql
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: demodb
    volumes:
      - ./testdump.sql:/docker-entrypoint-initdb.d/testdump.sql
    restart: always

  server:
    image: sagar4321/demo-server
    environment:
      PORT: 3001
      DBHOST: database
      DBPORT: 3306
      DBUSER: root
      DBNAME: demodb
      DBPASSWORD: root
    restart: always
    ports:
      - "3001:3001"
    depends_on:
      - database

  web:
    image: sagar4321/demo-web
    environment:
      SERVER_URL: http://0.0.0.0:3001
    ports:
      - 8080:8080
    depends_on:
      - server

  phpmyadmin:
    depends_on:
      - database
    image: phpmyadmin/phpmyadmin
    restart: always
    environment:
      PMA_HOST: database
      PMA_PORT: 3306
    ports:
      - "8081:80"

Yes, we have finally completed setting up our required services for our application through the compose file compose.yml
Now all it takes is the following command to run the whole group of services in multiple containers and get our application running.
From the directory dockercompose in the terminal just run the command:

docker compose -f compose.yml up

The command starts up all the services running together. Just wait a while so that all those services get up and running, then we can
see our application running in the browser. You can see different logs provided by different services in the console.

After a while we can access our frontend in our localhost which is running in port 8080. Accessing the frontend service shows the list of users
that we created in the database. The frontend service makes a request to the backend service. The backend service gets data from the database and
the data is returned to the frontend service which is rendered in the User Interface. This is how multiple services running in different containers can collaborate
with each other through configuration using docker compose. There are lots of thing we can do through docker compose but this is just the basics of it.

The application page you get should be something like this in the browser http://localhost:8080:

And that's all, I hope this blog was a useful for you on how we can run multiple services in multiple docker containers of an application using one docker compose file.

E2E Testing using TestCafe

Sagar Gurung — Wed, 30 Nov 2022 04:18:32 +0000

Background

Are you one of those who is still struggling to write your first End-to-End (E2E) test for your web application?

So what may be the reasons that you are struggling?

difficult to set up test framework with your web application?
difficult to learn?
lengthy implementation of code?

If the above points are exactly of your concern then test-cafe can be your go-to test automation framework for testing your web application.

In this blog post, we will look into the concept of test-cafe, a modern solution to sort out E2E testing for your web application. At the end of this blog hopefully, you will be able to set up test-cafe for your web application and run your first end-to-end test.

Brief about TestCafe

Let's start this blog with a brief understanding of test-cafe. It is an open-source test automation framework or tool built with Node Js. This framework basically supports two programming languages i.e Javascript and Typescript. So you are required to have at least the basics of Javascript to use this tool. DevExpress is in charge of managing TestCafe, which is made available under an open-source MIT license.

Why to use TestCafe?

Before moving to installation and set-up, lets understand some points why to use test-cafe.

It is very easy to set up
No dependencies (with other libraries)
Writing tests is easy and with less code
Cross-browser testing is made easy
Free and Open Source

Note: I will be doing the whole setup with Ubuntu 20.04.3 LTS, but it will be similar for other OS too

Prerequisites

At first, we need Node JS installed into our system. You can download Node JS version 12 or above. Download Node JS.

Installation and setup

Now lets move into installing test-cafe which is really easy. Follow the following steps:

Create a folder E2EWithTestCafe.
Open the folder you created with a code editor. In my case I am using Visual Studio Code.
Create a package.json file with command npm init through command line. (using terminal)
Now use npm install testcafe command to install TestCafe.

After this, your package.json file should contain dependencies as

// package.json file

"dependencies": {
"testcafe": "^2.1.0"
}

What to test?

For this blog, we will be writing an E2E test for this https://devexpress.github.io/testcafe/example website (provided by devexpress). You can go to this website and check what it looks like. We will automate a simple form submit scenario using test-cafe

Writing Test

At first inside E2EWithTestCafe project, make your file structure as

📦tests
┗ 📂e2e
  ┣ 📂fixtures
    ┗ 📜firste2etest.js

And then at the root level of your project which is E2EWithTestCafe create a file .testcaferc.json. This file includes all the configuration required to test the application.

The configuration should look like this:

// testcaferc.json

{
  "browsers": "chrome", // means your test will be automated in chrome browser
  "baseUrl": "https://devexpress.github.io/testcafe/example/", // URL for your web application to be tested or automated
  "src": "tests/e2e/fixtures/firste2etest.js" // path to your test code to execute
}

I assume that you have checked https://devexpress.github.io/testcafe/example website. On that website, if we fill up the username and submit the form, it redirects us to another page saying thank you. So this will be our simple test case, and we will be automating it with test-cafe
I have implemented the test code And it looks like this.

// firste2etest.js

import { Selector, t } from "testcafe";
fixture`My First E2E test with test-cafe`.page;

const inputNameFieldSelector = Selector("#developer-name");
const submitButtonSelector = Selector("#submit-button");
const headingSelector = Selector("#article-header");

test("Submitting a form should browse to thank you page", async (t) => {
  const yourName = "JankariTech";
  // fills name input field
  await t.typeText(inputNameFieldSelector, yourName);
  // clicks the submit button
  await t.click(submitButtonSelector);

  // check for the thankyou page after form has been submitted with name
  const actualThankyouMessage = await headingSelector.innerText;
  await t.expect("Thank you, " + yourName + "!").eql(actualThankyouMessage);
});

I will not be explaining the whole implementation but I have put comments on each action in the code. And probably the code is easy to understand which is exactly what test-cafe has aimed for.

Running Test

Huh, now finally the time has come to run our test script and see it magically running. To run our test we need some adjustments in the package.json file. Put the test scripts as

// package.json file

 "scripts": {
    "test": "testcafe"
  },

Now one final command needed to run our test i.e.

npm run test

With the above command being executed, you should see the browser (chrome) automating the actions that we have implemented. (submitting a form with a name that redirects to Thank You page)

And your output in the console should look like this

❯ npm run test

> e2ewithtestcafe@1.0.0 test
> testcafe

 Running tests in:
 - Chrome 105.0.0.0 / Ubuntu 20.04

 My First E2E test with test-cafe
 ✓ Submitting a form should browse to thank you page


 1 passed (8s)

Conclusion

So far I have used test-cafe, it is definitely a go-to automation tool for modern web End-To-End testing.
You can use it on your own project quickly with ease and less code. Also, it has many more features to explore. You can start exploring test-cafe now.

DEV Community: Sagar Gurung

Options Vs Composition API in Vue JS

Background

Play around with Voting Details

What's in Options API?

Converting to Composition API

1. Defining data

2. Defining methods

3. Defining computed

4. Defining watch

Options API and Composition API

Containerize a Web Application using docker compose

Brief About Docker Compose

What is the application about (to be run with docker compose)?

Prerequisites

Getting Started

Initiate file structure

Defining and configuring services

E2E Testing using TestCafe

Background

Brief about TestCafe

Why to use TestCafe?

Prerequisites

Installation and setup

What to test?

Writing Test

Running Test

Conclusion

Play around with `Voting Details`

What's in `Options API`?

1. Defining `data`

2. Defining `methods`

3. Defining `computed`

4. Defining `watch`

`Options API` and `Composition API`