Vue.js and Functional Front-End

Hello my fellow developer, welcome to yet another article. According to the title, we are going to talk about some pretty interesting stuff here. Vue.js puts the focus on declarative components with templates, which is great, but also it supports the JSX.

Ok, let us start by quickly answering what is Functional Programming and JSX.

Functional Programming

Unlike the Object-Oriented approach which guides the developer to decompose the program into objects, functional approach encourages the decomposition into a small functions which are later used to form an higher level program.

In computer science, functional programming is a programming paradigm, a style of building the structure and elements of computer programs, that treats computation as the evaluation of mathematical functions and avoids changing-state and mutable data

The text above is quoted from the official wiki page about Functional Programming, but what that means exactly?

Well, in short, it means that we are creating functions in a way that they do not depend or can alter any external state, which leads us to another observation that, for a given input, they will always return the same output.

In a bit longer term, there are two main assets we need to understand:

1. Pure Function
2. Immutability

Pure Function

This is what makes functional programming so special. Pure function, is like any other function, a building block of our application. The special part of it is that its output only depends on the given input. This means that we can invoke our function as many times as we want, but the output will always be the same as it was in the previous call if we pass in the same parameters.

Immutability

Immutable objects are objects that cannot be changed after they have been created. In simple term, we cannot change our object value. For these objects we always need to create a new instance when we want to change any of its properties.

Example of primitive immutable type is the String type. Even though it looks like it is mutable when we are using it, it's not, because every time when we re-assign a value to our String a new object of type String is created to which our new value is assigned.

JSX

A quick google search will tell us that JSX stands for JavaScript XML. This enables us to write an XML like code within our JavaScript files. Sounds cool, but as I mentioned in my previous post (see it later, now continue reading) it moves us further away from the standard web development. Anyway, we should acknowledge that JSX is pretty powerful.

Now, after these short explanations we can dive into the Vue.js way of doing things by creating a functional component example.

Let us start by defining a requirement where functional component might be useful. Imagine that we want to display a different area based on the user role. For example, we can have users in Admin, Normal and Guest roles.

Regular template would look something like this:

<script type="text/x-template" id="area-template">
    <div v-if="role === 'Admin'">
        Admin user area
    </div>
    <div v-else-if="role === 'Normal'">
        Normal user area
    </div>
    <div v-else-if="role === 'Guest'">
        Guest user area
    </div>
</script>

More roles would result in more if-else statements. This is exactly what we want to avoid with our functional component. The following code illustrates it:

Vue.component('example-component', {
    props: {
        role: {
            type: String,
            required: true
        }
    },
    render: function (createElement) {
        var text = this.role + ' user area';
        return createElement('div', text);
    }
});

As you can see, our component doesn't have a template property, but instead we've introduced a render function. This function is responsible of the rendering of our component. It will always return the same output, which is, according to Vue.js documentation site, called createNodeDescription. It contains information describing to Vue what kind of node it should render on the page.

Of course, for our example to work, we need to create a new Vue instance, as well as an element on the page:

new Vue({
    el: '#app',
    data: {
        admin: 'Admin',
        normal: 'Normal',
        guest: 'Guest'
    }
});

<main id="app">
    <example-component :role=admin></example-component>
    <example-component :role=normal></example-component>
    <example-component :role=guest></example-component>
</main>

The code above will display three div elements on our page with the corresponding text created within our render function.

I hope you've enjoyed reading this short but, I hope, intuitive article and that it will get you started with functional way of building apps.

That would be it for now guys and girls. Thank you for reading and best of luck.