DEV Community: Giuseppe

How to use .env file in JavaScript applications with webpack

Giuseppe — Fri, 24 Apr 2020 19:30:50 +0000

It's been awhile I haven't written a post on the blog and, since I must #StayAtHome due to the COVID-19 Pandemic, I would like to write about an interesting topic.

Introduction
A real example
- npm init
- webpack, babel and dotenv
Project structure
- webpack.config.js
- .env file
- src/app.js
- public/index.html
Build and serve the app
Conclusion

Introduction

As you have already read from the title, I'm going to show you how it's possible to read env variables from a .env file in a JavaScript application.

I guess, at this point, that many of you are asking themselves:
"WTF?! Why should I put variables in a file?! It would be better to use them inside the code!"

Well, usually an application could have different variables based on the environment. For instance: on development, staging and production it could have different URLs, different API keys, different users and so on...

So, to do that, you just need to create a .env file in the root of your project, define your variables and read them in your JavaScript code, especially to avoid to change the source code everytime you need to have different configuration.

N.B. This must be done for each environment, meaning that .env files mustn't be committed!

A real example

Let's try to create a simple front end application reading environment variables from a .env file.

npm init

First of all, we need to create the package.json file by running:



npm init

N.B. I'm going to call my app "webpack-env", but you can choose whatever you want: it doesn't matter.

webpack, babel and dotenv

Now we need to install webpack to build our application, babel-loader to compile .js files and dotenv to read and parse the .env file.



npm install webpack webpack-cli @babel/core babel-loader dotenv --save-dev

If you have done everything correct, you should have a package.json like this one:



{
  "name": "webpack-env",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "babel-loader": "^8.1.0",
    "dotenv": "^8.2.0",
    "http-server": "^0.12.1",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  }
}

You can copy it and run npm install to avoid all the previous steps.

Project structure

At this point we can start crafting our project.

If every worked correctly, you should have two files:

package.json (created by running npm init)
package-lock.json (created by running npm install)

Let's go deeper creating something else.

webpack.config.js

This is the webpack's configuration file. Just use the following configuration:



const path = require("path");
const webpack = require('webpack');
const dotenv = require('dotenv').config( {
  path: path.join(__dirname, '.env')
} );

module.exports = {
  entry: "./src/app.js",
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "app.js",
  },
  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: /(node_modules)/,
        include: path.resolve(__dirname, "src"),
        use: {
          loader: "babel-loader"
        }
      },
    ]
  },
  plugins: [
    new webpack.DefinePlugin( {
      "process.env": dotenv.parsed
    } ),
  ],
};

Let's see what we have just written.



const dotenv = require('dotenv').config( {
  path: path.join(__dirname, '.env')
} );

We use dotenv library to read the .env file from the root of the project.



plugins: [
  new webpack.DefinePlugin( {
    "process.env": dotenv.parsed
  } ),
],

By using the webpack.DefinePlugin, we parse and inject the whole .env file's content which is converted into a JavaScript object and assigned to the "process.env" variable.

From now on, we can use "process.env" object inside our application.

.env file

Now it's time to add our .env file.
Let's create it in the root of the application with the following variables:

APP_TITLE = "My application title"
APP_BASE_URL = "https://foobar.test"
APP_API_USER = "amazing_webpack"
APP_ENV = "production"
APP_TIMEZONE = "Europe/Rome"

src/app.js

This is the source code which will be compiled by webpack:



// `process.env` is the one defined in the webpack's DefinePlugin
const envVariables = process.env;

// Read vars from envVariables object
const {
  APP_TITLE,
  APP_BASE_URL,
  APP_API_USER,
  APP_ENV,
  APP_TIMEZONE
} = envVariables;

/**
 * @const _getRowString
 * @description Concatenate `description` and `envVar` for creating a row text.
 * @param description 
 * @param envVar 
 * 
 * @returns {string}
 */
const _getRowString = (description, envVar) => { 
  return `<p>${description}: <strong>${envVar}</strong></p>`;
}

// Append rows to `.env-vars` class
document.querySelector('.env-vars').innerHTML = `
  ${_getRowString('App title', APP_TITLE)}
  ${_getRowString('Current environment', APP_ENV)}
  ${_getRowString('API user', APP_API_USER)}
  ${_getRowString('Base URL', APP_BASE_URL)}
  ${_getRowString('Timezone', APP_TIMEZONE)}
`;

// Expose envVariables to the window object
window.envVariables = envVariables;

As defined in webpack.config.js, the final bundle will be put inside the public/ folder => public/app.js.

public/index.html

This file is meant be our app's entry point. It's just a simple HTML file:



<html>
  <head>
    <title>webpack env</title>
  </head>
  <body>
    <h1>Just some env variables read from a .env file!</h1>
    <div class="env-vars"></div>

    <script src="app.js"></script>
  </body>

</html>

If everything went good, this should be the final structure:

Build and serve the app

Now it's time to compile and serve our application.

First of all we need to install a server to serve our app.
We're going to use http-server.

Let's install it:



npm install http-server --save-dev

Once we have installed it, let's define two npm scripts:

npm run build (to build the app)
npm run serve (to serve the app)

We can do it by adding two scripts in the package.json scripts object.

Let's replace the whole scripts object with the following one:



"scripts": {
  "build": "webpack --mode=production",
  "serve": "./node_modules/.bin/http-server"
},

N.B. Since we don't need to run unit tests, we can remove the test scripts.

Now it's possible to compile the app and serve it by running:



npm run build && npm run serve

In your console, you should see something like this:

If everything went good, we should see our application working; just open the url provided by http-server.

Conclusion

As you can easily understand, this approach allows you to use variables based on the environment without changing your harcoded variables each time.

You just need to set your env vars, build the app and... that's all!

Follow me on

👾 GitHub
📷 Instagram

If you liked the post, you might offer me a ☕️ on PayPal. 🙂

How to organize your components using the Atomic Design

Giuseppe — Tue, 12 Nov 2019 21:35:14 +0000

Often, when you start the development of an application, you can get in trouble trying to understand how to organize your components.

In this post I'm going to explain to you how to do it (or how you could do it). It's the approach we adopted in MotorK for both the Design System and Single Page Applications. It's called: Atomic Design.

Atomic Design
A real example
- Folder structure
- Our atoms components
  - Button
  - Input
  - Text
  - Textarea
- Our molecules components
  - CheckboxField
  - InputField
  - TextareaField
- Our organisms components
  - ContactForm
  - SignupForm
But why?
- Better organization
- Better design
- No boundaries

Atomic Design

Break entire interfaces down into fundamental building blocks and work up from there. That’s the basic gist of atomic design.

Brad Frost

The Atomic Design principle is to split your UI parts into "small" and reusable components in order to have a better reusability.
Like chemistry, you can organize your components in atoms, molecules and organisms.
In addition there are also templates and pages, but I won't talk about them because I want to keep the focus on small applications' architectures.

So, let's start talking about atoms, molecules and organisms.

Atoms

Atoms are the smallest components of your application. Basically, they can be texts, buttons, form inputs and so on.
The golden rule is: if you can't split a component into smaller components then it must be an atom.

Molecules

Molecules are combinations of atoms bonded together. For example, if you have Text and Input atoms, you can combine them into a InputField (or whatever name you want) molecule .

Organisms

Organisms are combinations of molecules: if you mix two or more molecules you get an organism.

A real example

Let's try to craft an application using the Atomic Design. The final goal is to create two different forms:

ContactForm
SignupForm

N.B. I'm going to use Vue, but you can use whatever language/framework you prefer.

Folder structure

First of all we have to create our folder structure in which store our components.
So, let's create a src directory which will contain all the JS files and, inside it, a components folder. After that, we need to create atoms, molecules and organisms folders inside components.

The result should be something like this:

App.vue it's our entry point.

Since we have our folder structure, we can proceed creating our components starting from atoms.

We'll set the Ad namespace in each component.

Our atoms components

Let's create the following atoms components:

Button
Input
Text
Textarea

Button



<template>
  <button class="a-button" :type="type">{{label}}</button>
</template>

<script>
  const _buttonTypes = ["submit", "button"];

  export default {
    name: "AdButton",
    props: {
      type: {
        type: String,
        required: true,
        default: "button",
        validator: (value) => _buttonTypes.includes(value),
      },
      label: {
        type: String,
        required: true,
      },
    },
  };
</script>

Input



<template>
  <input
    v-model="value"
    :type="type"
    :id="id"
    :name="name"
    :placeholder="placeholder"
    class="a-input"
  />
</template>

<script>
  const _inputTypes = ["text", "email", "password", "checkbox"];

  export default {
    name: "AdInput",
    data() {
      return {
        value: "",
      };
    },
    props: {
      id: {
        type: String,
        required: true,
      },
      name: {
        type: String,
        required: true,
      },
      placeholder: {
        type: String,
        required: false,
        default: null,
      },
      type: {
        type: String,
        required: true,
        default: "text",
        validator: (value) => _inputTypes.includes(value),
      },
    },
  };
</script>

Text



<template>
  <component :is="tag" :for="getForProp" class="a-text">
    {{content}}
  </component>
</template>

<script>
  const _tagTypes = ["h1", "h2", "h3", "p", "span", "label"];

  export default {
    name: "AdText",
    props: {
      tag: {
        type: String,
        required: true,
        default: "span",
        validator: (value) => _tagTypes.includes(value),
      },
      content: {
        type: String,
        required: true,
      },
      for: {
        type: String,
        required: false,
        default: null,
      },
    },
    computed: {
      // Rendered only if the tag is a label
      getForProp() {
        return ["label"].includes(this.tag) ? this.for : null;
      },
    },
  };
</script>

Textarea



<template>
  <textarea
    v-model="value"
    :id="id"
    :name="name"
    :placeholder="placeholder"
    class="a-textarea"
  ></textarea>
</template>

<script>
  export default {
    name: "AdTextarea",
    data() {
      return {
        value: "",
      };
    },
    props: {
      id: {
        type: String,
        required: true,
      },
      name: {
        type: String,
        required: true,
      },
      placeholder: {
        type: String,
        required: false,
        default: null,
      },
    },
  };
</script>

Our molecules components

And then the following molecules:

CheckboxField
InputField
TextareaField

CheckboxField



<template>
  <div class="m-checkbox-field">
    <ad-input :id="id" :name="name" type="checkbox"></ad-input>
    <ad-text tag="label" :for="id" :content="label"></ad-text>
  </div>
</template>

<script>
  import AdText from "../atoms/Text";
  import AdInput from "../atoms/Input";

  export default {
    name: "CheckboxField",
    components: {
      AdText,
      AdInput,
    },
    props: {
      id: {
        type: String,
        required: true,
      },
      name: {
        type: String,
        required: true,
      },
      label: {
        type: String,
        required: true,
      },
    },
  };
</script>

InputField



<template>
  <div class="m-input-field">
    <ad-text tag="label" :for="id" :content="label"></ad-text>
    <ad-input
      :id="id"
      :name="name"
      :placeholder="placeholder"
      :type="inputType"
    ></ad-input>
  </div>
</template>

<script>
  import AdText from "../atoms/Text";
  import AdInput from "../atoms/Input";

  const _inputTypes = ["text", "email", "password"];

  export default {
    name: "InputField",
    components: {
      AdText,
      AdInput,
    },
    props: {
      id: {
        type: String,
        required: true,
      },
      name: {
        type: String,
        required: true,
      },
      label: {
        type: String,
        required: true,
      },
      placeholder: {
        type: String,
        required: false,
        default: null,
      },
      inputType: {
        type: String,
        required: false,
        default: "text",
        validator: (value) => _inputTypes.includes(value),
      },
    },
  };
</script>

TextareaField



<template>
  <div class="m-textarea-field">
    <ad-text tag="label" :for="id" :content="label"></ad-text>
    <ad-textarea
      :id="id"
      :name="name"
      :placeholder="placeholder"
      type="text"
    ></ad-textarea>
  </div>
</template>

<script>
  import AdText from "../atoms/Text";
  import AdTextarea from "../atoms/Textarea";

  export default {
    name: "TextareaField",
    components: {
      AdText,
      AdTextarea,
    },
    props: {
      id: {
        type: String,
        required: true,
      },
      name: {
        type: String,
        required: true,
      },
      label: {
        type: String,
        required: true,
      },
      placeholder: {
        type: String,
        required: false,
        default: null,
      },
    },
  };
</script>

Our organisms components

And finally we can develop our two organisms:

ContactForm
SignupForm

ContactForm



<template>
  <form method="POST" class="o-contact-form" autocomplete="off">
    <ad-text tag="h1" content="Contact us!"></ad-text>

    <ad-input-field
      id="name"
      name="name"
      label="Insert your name"
      placeholder="Name"
    ></ad-input-field>

    <ad-input-field
      id="surname"
      name="surname"
      label="Insert your surname"
      placeholder="Surname"
    ></ad-input-field>

    <ad-input-field
      id="email"
      name="email"
      label="Email"
      input-type="email"
      placeholder="Insert your e-mail"
    ></ad-input-field>

    <ad-textarea-field
      id="textarea"
      name="textarea"
      label="Leave a message"
      placeholder="This post is amazing!"
    ></ad-textarea-field>

    <ad-checkbox-field
      id="checkbox"
      name="checkbox"
      label="Privacy policy"
    ></ad-checkbox-field>

    <ad-button type="submit" label="Submit your request"></ad-button>
  </form>
</template>

<script>
  import AdText from "../atoms/Text";
  import AdButton from "../atoms/Button";
  import AdInputField from "../molecules/InputField";
  import AdCheckboxField from "../molecules/CheckboxField";
  import AdTextareaField from "../molecules/TextareaField";

  export default {
    name: "AdContactForm",
    components: {
      AdText,
      AdButton,
      AdInputField,
      AdCheckboxField,
      AdTextareaField,
    },
  };
</script>

SignupForm



<template>
  <form method="POST" class="o-signup-form" autocomplete="off">
    <ad-text tag="h1" content="Sign up!"></ad-text>

    <ad-input-field
      id="name"
      name="name"
      label="Insert your name"
      placeholder="Name"
    ></ad-input-field>

    <ad-input-field
      id="surname"
      name="surname"
      label="Insert your surname"
      placeholder="Surname"
    ></ad-input-field>

    <ad-input-field
      id="username"
      name="username"
      label="Insert your username"
      placeholder="Username"
    ></ad-input-field>

    <ad-input-field
      id="email"
      name="email"
      label="Email"
      input-type="email"
      placeholder="Insert your e-mail"
    ></ad-input-field>

    <ad-input-field
      id="password"
      name="password"
      label="Password"
      input-type="password"
      placeholder="Insert your password here"
    ></ad-input-field>

    <ad-input-field
      id="confirm-password"
      name="confirm-password"
      label="Confirm password"
      input-type="password"
      placeholder="Confirm your password"
    ></ad-input-field>

    <ad-checkbox-field
      id="amazing-checkbox"
      name="amazing_checkbox"
      label="Privacy policy"
    ></ad-checkbox-field>

    <ad-button type="submit" label="Join us!"></ad-button>
  </form>
</template>

<script>
  import AdText from "../atoms/Text";
  import AdButton from "../atoms/Button";
  import AdInputField from "../molecules/InputField";
  import AdCheckboxField from "../molecules/CheckboxField";
  import AdTextareaField from "../molecules/TextareaField";

  export default {
    name: "AdSignupForm",
    components: {
      AdText,
      AdButton,
      AdInputField,
      AdCheckboxField,
      AdTextareaField,
    },
  };
</script>

Let's consume our organisms

Now that we have our organisms, it's time to use them!

Open the App.vue file and import the forms:



<template>
  <div id="app">
    <!-- You shouldn't use them together in the same page -->
    <ad-contact-form></ad-contact-form>
    <ad-signup-form></ad-signup-form>
  </div>
</template>

<script>
  import AdSignupForm from "./components/organisms/SignupForm";
  import AdContactForm from "./components/organisms/ContactForm";

  export default {
    name: "App",
    components: {
      AdSignupForm,
      AdContactForm,
    },
  };
</script>

The <ad-contact-form /> renders this:

and the <ad-signup-form /> renders this:

But why?

Maybe, at this point, you're asking yourself: "Ok, I got how it works... But why should I use the Atomic Design?"
I'm not the source of the truth, but I tell you why I like this approach.
Essentially for three reasons:

Better organization
Better design
No boundaries

Better organization

As you have seen so far, this methodology can help you to organize your files and your components in a understandable and predictable way: you know where to put your components and how to organize them. And, following this pattern, your development process will become quicker.

Better design

With Better design I don't mean a better UI design but a better architectural design. If you start thinking of components as atoms, molecules and organisms, during the bootstrap of your application, you are enforced to project your software following this pattern putting your focus on the reusing of your components.

No boundaries

Being the Atomic Design a methodology, it is not strictly bound to particular technologies: you can apply it to different languages and frameworks: PHP, CSS, Laravel, Symfony, React, Angular, Vue and so on.

Follow me on

👾 GitHub
📷 Instagram

If you liked the post, you might offer me a ☕️ on PayPal. 🙂

React vs Vue: my personal point of view

Giuseppe — Sat, 02 Nov 2019 20:48:56 +0000

Being a Front End developer I've got the luck to have worked with both React and Vue. I have worked with React for almost one year (2017-2018) and I've been working with Vue since July 2018 (when I joined MotorK).

This post won't be about which could be the best between React and Vue, but it will be about my personal point of view. I don't write what I prefer at the end of the post, but I'm going to do it now; at the beginning.

My favourite one is 🥁🥁🥁 Vue! And I'm going to explain to you why.

Separation of concerns
No JSX
Computed props
Mixins
Ecosystem

Separation of concerns

One of the best features of Vue is the "separation of concerns" of Single File Components (SFC). In Vue's SFC there are three available blocks: <template>, <script> and <style> whose the goal is to split the HTML, the JavaScript and CSS code.

So, what you could have in a SFC is something like:

<template>
    <section class="awesome-vue-component">
        <header class="awesome-vue-component__header">{{header}}</header>
        <div class="awesome-vue-component__body">{{body}}</div>
        <footer class="awesome-vue-component__header">{{footer}}</footer>
    </section>
</template>

<script>
    export default {
        name: 'AwesomeVueComponent',
        props: {
            header: {
                type: String,
                required: true,
            },
            body: {
                type: String,
                required: true,
            },
            footer: {
                type: String,
                required: true,
            },
        }
    }
</script>

<style lang="scss" scoped>
    .awesome-vue-component {
        &__header { 
            font-size: 18px;
        }

        &__body { 
            font-size: 14px;
        }

        &__footer { 
            font-size: 11px;
        }
    }
</style>

The same code in React would be something like:

import "awesome-react-component.scss";

class AwesomeReactComponent extends React.Component {
    render() {
        const {
            header,
            body,
            footer
        } = this.props;

        return (
            <section className="awesome-vue-component">
                <header className="awesome-vue-component__header">{header}</header>
                <div className="awesome-vue-component__body">{body}</div>
                <footer className="awesome-vue-component__footer">{footer}</footer>
            </section>
        );
    }
}

Since React doesn't support blocks, the only way to import SCSS is reading of an external .scss file, which adds a little bit of complexity to the component.

No JSX

As I've already shown you, React doesn't give you the possibility to write a well-easy understandable code. Since it doesn't have blocks, it must mix HTML and JavaScript. This "mixture" is called JSX which is a JavaScript's syntax extension for describing UI parts.

But why I don't like JSX?
Just let me give you one example:

Vue code

<template>
    <section class="posts">
        <section v-for="post in posts" :key="post.id" class="post">
            <header class="post__header">
                <h3 class="post__title">{{post.title}}</h3>
            </header>
            <div class="post__body">{{post.body}}</div>
            <footer class="post__footer">
                <p>{{post.footer}}</p>
            </footer>
        </section>
    </section>
</template>

React code

class Posts extends React.Component {
    render() {
        return (
            const posts = this.props.posts.map( post => {
                return (
                    <section key={post.id} className="post">
                        <header className="post__header">
                            <h3 className="post__title">{post.title}</h3>
                        </header>
                        <div className="post__body">{post.body}</div>
                        <footer className="post__footer">
                            <p>{post.footer}</p>
                        </footer>
                    </section>
                )
            } );

            <section className="posts">
                {posts}
            </section>
        )
    }
}

I find the Vue's code more readable, clear and easy to understand.
I mean: it's just HTML code after all, isn't it?

I know, some of you are thinking: "Hey, you should create a Post component and put the code inside it!" And yes: you're totally right, but the focus of this point is that, using React, you must mix HTML and JavaScript code, which is something I really don't like because it could lead you in writing more bugs.

Computed props

Computed props are another nice Vue's feature. Basically they're function whose the result is cached based on their reactive dependencies.

... WTF?!

Ok, let me explain it better.
Computed props are used for wrapping a piece of logic that depends on a reactive data (props or data) and they are (re)evaluated only if their reactive dependencies change.

Let me give you a real example:

<template>
    <div class="dummy-vue-component">
        <p>{{greetByMethod()}}</p>
        <p>{{greetByComputed}}</p>
    </div>
</template>

<script>
    export default {
        name: 'DummyComponent',
        props: {
            name: {
                type: String,
                required: true,
            }
        },
        methods: {
            greetByMethod() {
                return `Hello ${this.name}`;
            }
        },
        computed: {
            greetByComputed() {
                return `Hello ${this.name}`;
            }
        }
    }
</script>

greetByMethod() and greetByComputed() will produce the same result, with an important difference: the first one is called everytime the UI gets a re-render, the second one is re-evaluated only if this.name changes. So, as you can easily understand, computed props are better and more performant.
You should use a method only if you need to pass a parameter from the view; otherwise go with a computed.

N.B. When you use computed props, you have to get rid of (), otherwise Vue will run them like methods and your app won't work anymore.

Mixins

Mixins allow you to share pieces of code (props, computed, methods and life-cycle methods) among components. Basically it consists in a JavaScript object to inject into a Vue's instance.

/**
 * @mixin InputMixin
 */
export const InputMixin = {
    data() {
        return {
            value: ''
        }
    },
    props: {
        id: {
            type: String,
            required: true,
        },
        name: {
            type: String,
            required: true,
        }
    },
    computed: {
        getUniqueKey() {
            return `${this.name}-${this.id}`
        }
    }
}

This is a simple mixin which can be injected into a component in this way:

<template>
    <div class="input-text">
        <input
            v-model="value"
            :id="getUniqueKey" 
            :name="name" 
            type="text" />
    </div>
</template>

<script>
    import { InputMixin } from './base-mixin';

    /**
     * @mixes InputMixin
     */
    export default {
        name: 'InputText',
        mixins: [
            InputMixin
        ]
    }
</script>

The InputText component will contain the whole base-mixin.js content: data, props and computed.

If you have a different component, which needs of same props, computed and data, you can use this mixin and avoid the code duplication. Cool, isn't it?

N.B. Since mixins add complexity to the component, you should use the @mixes JSDoc tag to indicate that the component is using a mixin.

Ecosystem

Another point in favor of Vue is its incredible Ecosystem.
I like to define Vue as "micro-framework" because it can be extended with other libraries like Vuex and Vue Router. These two libraries are maintained by Vue's core team and this is something that React doesn't have. Actually also React can be extended installing Redux and React Router, but they are projects not managed by the React team which means they are unofficial.
This possibility shouldn't be either ignored nor underrated, because having a libraries handled by the same team it's really important to have a more stable application.

Follow me on

👾 GitHub
📷 Instagram

If you liked the post, you might offer me a ☕️ on PayPal. 🙂

Have you ever heard about Vue functional components?

Giuseppe — Wed, 14 Aug 2019 20:45:22 +0000

First of all: welcome to my blog! This is my first post and I want to greet you and say a big thanks for coming here!

So, let's go forward with the real topic of this post.

What is a Vue component?
Functional component
How can I write a functional component?
TL;DR

What is a Vue component?

Basically a component is a reusable Vue instance with its own state, props, computed props, methods and lifecycle.

Cool features, right? Yes, they are... But try to ask to yourself: "Do I always really need of all these features? Is it always necessary to have reactive data and the whole component's lifecycle?"
The answer to all these questions is: No, you don't.

Sometimes you just need to have a component whose main gol is to render something.

I know, now you're asking to yourself: "Could I use a normal component to do that?"
The answer is: Yes, you can.

But, now, let me ask you a question: "Why should you use a normal component for doing that when you can use a functional component?"

Functional component

A functional component is, basically, an instanceless component without the lifecycle. Nothing else. It's just a simple function whose goal is to render some data.

For this reason you can also call it presentational component or dumb component.

Since this kind of components don't have instances, they are faster, lighter and rendered once. As you can see I've written lighter because, without the whole lifecyle and the reactivity system, the final bundle is lighter, which means:

less JavaScript code to parse;
less memory to handle.

All this stuff gives to your applications better performances and browsers will be grateful to you.

How can I write a functional component?

I'm pretty sure, at this point, you have this question spinning around in your mind. I want to be as clear as possible, so I'll answer you with some code.

What I'm going to do is to code a normal component and transform it into a functional component.

Normal component

<template>
  <div class="smart-component">
    <span class="smart-component__prop">{{foo}}</span>
    <span class="smart-component__prop">{{bar}}</span>
  </div>
</template>

<script>
  export default {
    name: "SmartComponent",
    props: {
      foo: {
        type: String,
        required: true
      },
      bar: {
        type: String,
        required: false,
        default: "Default value"
      }
    }
  };
</script>

Cool, isn't it? But do you know what happen each time the SmartComponent is instantiated?

Basically Vue creates its instance, adds reactivity and mount the component. All useless stuff, since the SmartComponent is not going to use reactivity. And, as I've already said, the final bundle will be heavier.

Let's rewrite it in the functional way.

Functional component

<template functional>
  <div class="dumb-component">
    <span class="dumb-component__prop">{{props.foo}}</span>
    <span class="dumb-component__prop">{{props.bar}}</span>
  </div>
</template>

<script>
  export default {
    name: "DumbComponent",
    props: {
      foo: {
        type: String,
        required: true
      },
      bar: {
        type: String,
        required: false,
        default: "Default value"
      }
    }
  };
</script>

That's all. Nothing special. As you can see, I've only changed a couple of things:

I've added the functional keyword to the template block;
I've prepended the props keyword to foo and bar props.

The functional keyword

Well, as you can easily guess, the functional keyword is used to say to Vue: "Hey, I'm going to write a functional component! Don't overload it adding the whole lifecycle and the reactivity; I don't need them!"

The props keyword

Since functional components don't have an instance, the this keyword will be undefined. So, to read props, you need to prepend the props keyword to each prop.

I know, I know... You're asking to yourself: "WTF? I don't see any this before SmartComponent props!"
The reason is that Vue automatically binds props, methods, computed and $options objects to the component instance.
So, basically, in this scenario {{foo}} and {{bar}} are short versions of {{this.foo}} and {{this.bar}}.
Keep in mind: this works ONLY within the <template> block; in the <script> block you MUST put the this keyword before props, methods, computed and $options, otherwise you'll get an error.

N.B. There is another way to write functional components and it's with the usage of render functions, but I'll write a more detailed post about them.

TL;DR

When you don't need to have a reactive state and the whole component lifecycle, for better performances, you should use functional components.

Follow me on

👾 GitHub
📷 Instagram

If you liked the post, you might offer me a ☕️ on PayPal. 🙂

DEV Community: Giuseppe

How to use .env file in JavaScript applications with webpack

Table of Contents

Introduction

A real example

npm init

webpack, babel and dotenv

Project structure

webpack.config.js

.env file

src/app.js

public/index.html

Build and serve the app

Conclusion

Follow me on

How to organize your components using the Atomic Design

Table of Contents

Atomic Design

Atoms

Molecules

Organisms

A real example

Folder structure

Our atoms components

Button

Input

Text

Textarea

Our molecules components

CheckboxField

InputField

TextareaField

Our organisms components

ContactForm

SignupForm

Let's consume our organisms

But why?

Better organization

Better design

No boundaries

Follow me on

React vs Vue: my personal point of view

Table of Contents

Separation of concerns

No JSX

Vue code

React code

Computed props

Mixins

Ecosystem

Follow me on

Have you ever heard about Vue functional components?

Table of Contents

What is a Vue component?

Functional component

How can I write a functional component?

Normal component

Functional component

The functional keyword

The props keyword

TL;DR

Follow me on