loading...
Cover image for Vue.js and Functional Front-End

Vue.js and Functional Front-End

proticm profile image Milos Protic ・3 min read

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.

Discussion

pic
Editor guide
Collapse
joestrouth1 profile image
Joe Strouth

I take issue with your example of a normal template.

<template>
  <div>{{ role }} user area</div>
</template>

No need for if statements!

Collapse
proticm profile image
Milos Protic Author

I agree with you, but the idea of this post was to put focus on the functional way of doing things.

The template you've provided would do fine in the simple example described in this post since we are only changing the inner text of the element. Each area of the template based on the user role could have a different number of child components and in that case things would be a lot more complicated.

Collapse
joestrouth1 profile image
Joe Strouth

You are right :) There are definitely cases where render functions are much better. I just didn't want new readers to think that Vue templates couldn't do this.

Collapse
equinusocio profile image
Mattia Astorino

...it would be a lot more complicated even with jsx.

Collapse
lyfolos profile image
Muhammed H. Alkan

This times the functional programming is like a trend for no reason. Nevermind, if I was going to be frontend dev, my opinions will be Reason and Elm. Nothing else. Reason is better in my opinion because I can learn backend too at the same time.

Collapse
leolima32 profile image
Leonardo Ferreira

great article! thanks for sharing.

Collapse
proticm profile image
Milos Protic Author

Thank you and no problem.