Why nearly 50% of Front-End Developers want to learn Vue.js

Why nearly 50% of Front-End Developers want to learn Vue.js

According to the survey Vue.js is the front-end library that developers would most like to learn.

As you may know, JavaScript has matured a great deal in the last 10 years, and much of the code that was normally on the server-side has migrated into the browser. As that has grown more complex, so have the frameworks to keep things more organized.

I’m not going to tell you why one is better than the other, although there is a great comparison page on the official Vue docs.

Vue.js aims to be an approachable, versatile, performant, maintainable, and testable JavaScript framework. Vue also aims to be progressive, meaning that if you have an existing application you can use Vue in just one part of your front-end that needs a more interactive experience.

Alternatively, you can build more business logic into your front-end from the start. Vue has the core libraries and ecosystem you’ll need to scale.

Like other front-end frameworks, Vue allows you to take a webpage and split the logic up into reusable components. Each of these can have it’s own HTML, CSS, and JavaScript needed to render each piece of the page.

An example of how things might be split up into components

Diving into our First Project

I’d like to give you a sense of what it’s like to code in Vue if you haven’t seen it before, and show you some of the syntax. I won’t be diving into the details, but we’ll see some core concepts along the way.

As with many JavaScript applications, we start from the need to display our data onto a page.

To start building with Vue it’s quite simple.

As you can see in the above image we include the Vue library, create a Vue instance, and plug into our root element with the id of app. EL stands for element. We’ll also move our data inside an object and change X into an expression with the double curly braces.

As you can see, it works:

Nothing special, but the magic of Vue starts when data changes. If I jump into the console and change the value of the product, check out what happens:

Vue is reactive, meaning that when our data changes Vue takes care of updating all the places we’re using it on our webpage.

This works with any kind of data — not just strings. So, instead of a single product let’s use an array of products and update our h2 to an unordered list. To create a new element for every product, we’ll used a special attribute (AKA directive) from Vue called the v-for. This way, each product gets it’s own list item.

If we jump into the browser, here’s what we’d see:

This is still a little contrived though, so let’s start with our list empty and fetch our products from an actual API, which could be coming from a database somewhere.

If we look at what gets printed to our page now we’ll see:

As you can see, each list item is showing the object it returned. In order for this data to be read by humans, we need to change the way it’s displayed.

And our result is:

We might want to call attention to the items that have quantity 0, so lets add a with the text “OUT OF STOCK.” We only want it to appear if our item.quantity === 0, so we’ll use Vue’s v-if directive.

Sure enough, our jacket is out of stock:

What if we wanted to print out the total number of products under our list? We need to create a computed property called totalProducts, which returns the total quantity of our products. If you’re not familiar with JavaScript reduce, it’s adding up all the quantities from each product.

As you can see below, we now have our total inventory printing out.

This is probably a good time to tell you about the Vue.js devtools Chrome Extension. One of the nice features of the extension is that you can inspect the data getting loaded onto your page.

Just to show of some of Vue’s Reactivity again, let’s pop two items off the array and see what happens. As you can see below, not only is our list updated, but our total as well.

Next, I want to show you how we can add interactivity to this page through the use of a button. We’ll create an Add button for each product, and when a click occurs on this button we’ll increment the quantity by one.

Notice how when we add an item (below), not only does the total inventory get updated, but also if we increment our Jacket product, our Out of stock notice goes away.

But what if we want to just write in the quantity of jackets or hiking socks? We just create a new input field, and bind it to our product quantity field with the v-model directive, and specify that this is always a number.

You’ll notice I can now input the total quantity of each item, and it gets updated immediately. I can even set the quantity back to zero and I get my OUT of Stock statement, and my add buttons still work.

You can fiddle withthe finished version of this project and run it by heading over to this JSFiddle.

A few more Vue Features

If we were building this into a larger application would want to start splitting things up at this point into multiple components and files to keep things organized.

Vue even provides a Command Line Interface to make it simple to start developing real projects quickly. As you see below the init command can be used to start a new project.

We could also use single file .vue components, which contain HTML, JavaScript, and scoped CSS or even SCSS.

What you’ve seen here just barely scratches the surface of what Vue can do. There’s so much more to help you build, organize, and scale your front-end applications. To start coding yourself, I’ll recommend two resources.

Thank you for reading !

AngularJS vs Vue.js: Which is the Best Front-end JavaScript Framework?

AngularJS vs Vue.js: Which is the Best Front-end JavaScript Framework?

Are you are a business owner looking for front-end development services, but unable to decide which technology is the best match for you? Are you confused about choosing between two best frontend development tools Angular.js vs Vue.js for creating...

Are you are a business owner looking for front-end development services, but unable to decide which technology is the best match for you? Are you confused about choosing between two best frontend development tools Angular.js vs Vue.js for creating your web apps?

Then you are in the right place as this is a must-read post for you. Here we will compare two of the most popular JavaScript frameworks: AngularJS and Vue.js.

In contemporary times, front-end development cannot be imagined without Javascript frameworks. The choice between them plays a crucial role in determining the scalability, structure, and performance of an application.

It’s one of the most integral aspects of front-end web development and essentially provides the structure for the code libraries to work. Within this realm of Javascript based frameworks, Angular and Vue co-exist with each other and are among the most popular front-end frameworks today.

Let’s have a look at some of the highlights which show how these two frameworks perform in web application development individually:

1. Angular.js is opinionated and heavy, but high on functionality. Whereas Vue.js is flexible and light but prefers speed over function.

2. Angular.js has a steeper learning curve, therefore, you need more experienced full-stack developers for your project.

3. Angular.js has more resources and support, but Vue.js is catching up

Why & When should you choose Angular.js

— Angular.js has a wide set of functions and an opinionated structure. This makes it more suitable for large-scale, dynamic and real-time applications such as instant messaging and chat apps.

— It’s highly appropriate for cross-platform mobile development and Enterprise applications.

Why & When should you choose Vue.js

— If all you want is a lightweight and single-page web application, then Vue.js is the best choice.

— If speed and performance are what matter to you the most.

Conclusion:

Both of these frameworks would provide a great structure for your application. But you can choose any of them according to your requirements. If you want a framework that’s almost considered as an industry standard and is well-trusted. Then AngularJS web development is the way to go. However, if your application demands a single-page layout, and if you want it to be fast, light and clean. Then there could be no better choice than Vue.js web development. There are various web app development companies you can contact to develop your web apps.

For complete comparison visit: AngularJS vs Vue.js: Which is the Best Front-end JavaScript Framework?

Elm vs. Vue.js: Comparisons from a Front-End Developer

Elm vs. Vue.js: Comparisons from a Front-End Developer

I thought it would be interesting to quickly compare how to do a small bit of UI in Elm and Vue.js that are both used for the web. I’ll be doing this from a perspective of my role as a frontend developer working on web apps at carwow.

I thought it would be interesting to quickly compare how to do a small bit of UI in two completely different languages that are both used for the web, rather than the typical JS framework v JS framework battle that repeats and rages on, year on year. After that then looking at a few pros and cons of each.

I’ll be doing this from a perspective of my role as a frontend developer working on web apps at carwow.

What’s Elm and what’s Vue?

There’s a stark contrast between Vue and Elm. The first one being that one is a JavaScript framework and the other, Elm, is a functional language in its own right. Elm is eventually compiled to JavaScript as that is what the browser understands. Both Elm and Vue are used for creating UI on the web.

Maybe you’ve done some Elm or Vue before, but if not let’s look at a quick example of how we would achieve a simple bit of UI using both. We’ll not get bogged down in the initialisation of an app and how to add it to the page etc, instead we’ll just look at an Elm and Vue file as a single component.

Example

Let’s show something extremely simple. We’ll create the markup for the below in Vue and Elm.

Now brace yourself for an Elm and Vue code dump…

module Main exposing (Model, init)

import Browser
import Html exposing (..)
import Html.Attributes exposing (..)


type alias Model =
    { vueTitleText : String
    , vueTitleDescription : String
    , elmTitleText : String
    , elmTitleDescription : String
    }


type alias Flags =
    {}


init : Flags -> ( Model, Cmd msg )
init flags =
    let
        model =
            { vueTitleText = "Vue"
            , vueTitleDescription = "JavaScript Framework"
            , elmTitleText = "Elm"
            , elmTitleDescription = "Functional Language"
            }
    in
    ( model, Cmd.none )


update : msg -> Model -> ( Model, Cmd msg )
update msg model =
    ( model, Cmd.none )


view : Model -> Html msg
view model =
    div [ class "container" ]
        [ div [ class "container__inner" ]
            [ div [ class "container__inner-content" ]
                [ h2 [ class "container__inner-content-title" ] [ text model.vueTitleText ]
                , p [ class "container__inner-content-description" ] [ text model.vueTitleDescription ]
                ]
            ]
        , div [ class "container__inner" ]
            [ div [ class "container__inner-content" ]
                [ h2 [ class "container__inner-content-title" ] [ text model.elmTitleText ]
                , p [ class "container__inner-content-description" ] [ text model.elmTitleDescription ]
                ]
            ]
        ]


subscriptions : Model -> Sub msg
subscriptions _ =
    Sub.none


main : Program Flags Model msg
main =
    Browser.element
        { init = init
        , view = view
        , update = update
        , subscriptions = subscriptions
        }

Creating the example above in Elm (minus the CSS)

<template>
  <div class="container">
    <div class="container__inner">
      <div class="container__inner-content">
        <h2 class="container__inner-content-title">this.vueTitleText</h2>
        <p class="container__inner-content-description">this.vueTitleDescription</p>
      </div>
    </div>
    <div class="container__inner">
      <div class="container__inner-content">
        <h2 class="container__inner-content-title">this.elmTitleText</h2>
        <p class="container__inner-content-description">this.elmTitleDescription</p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data: {
      vueTitleText: "Vue",
      vueTitleDescription: "JavaScript Framework",
      elmTitleText: "Elm",
      elmTitleDescription: "Functional Language"
    }
  }
</script>

<style lang="scss" scoped>
  
</style>

Creating the example above in Vue (minus the CSS)

Comparisons

Writing HTML

In Vue, the markup looks like plain old HTML, although you can choose to use other templating syntax for your Vue components if you wish, such as HAML, PUG, JADE, etc.

In Elm, HTML looks nothing like HTML, and for frontend developers, that’s daunting. The combination of various indented levels of divs and square brackets can seem a bit of a mess to manage… and it is. That’s why using the package elm-format in your editor is an essential, otherwise you’re going to spend the bulk of your time indenting things. This package formats Elm to the compiler’s standard on save (or every keystroke if you’re a maniac).

Line length

One thing you’ll immediately notice about the Elm example is that it’s twice the number of lines as the Vue file, but if you look more closely it’s more down to how the Elm compiler dictates the structure of an Elm file. Complex functionality written in Elm files is typically much easier to read — and therefore maintain — than Vue (or any JS alternative in fact).

Storing data and controlling the view

Elm and Vue files both have a similar method for storing data; a “data model” which is used as the source of truth for the UI. Both Elm and Vue can use this data model to dictate the view and to dynamically update it when data changes. This is called data reactivity.

A data model in Elm is defined as:

type alias Model =
    { title : String
    , description : String
    , numberOfPosts : Int
    }

Elm data model

A data model in Vue is defined as:

data: {
  title: "This is the title",
  description: "This is the description",
  numberOfPosts: 12
}

Vue data model

The Document Object Model (DOM) reacting to JavaScript changes (or model changes) and the JavaScript reacting to DOM changes is called two-way data binding. This is a whole topic on its own that I’ll not go into for now, but it’s definitely worth reading up the terminology and what it means!

Performance

I’m not going to do the typical performance comparison, partly out of laziness and the fact your attention is quickly disappearing at this stage. What you do need to know is that both Elm and Vue make use of a Virtual DOM to efficiently batch updates to the DOM when the view needs to be updated based on changes to the data model or vice-versa. If you’re updating the DOM the “Elm way”or “Vue way”, aka via data model binding, then the user’s perception of your UI responsiveness to DOM changes shouldn’t be hindered.

Maintainability

As Elm files tend to follow the same structure and formatting there’s little wriggle room to do your own crazy developer thing, therefore that means coming back to your Elm app later is much easier. It’s also easier for other developers to jump into.

Vue has a bit more freedom, with the majority of JavaScript logic being organised into lifecycle events, but what people write in those events and how they write it is the wild west.

// These are some of the lifecycle events exposed by the Vue framework
beforeCreate() {

},
created() {
  
},
ready() {

},
mounted() {

},
updated() {

},
destroyed() {

}

Some of the lifecycle events exposed by Vue

Scaling

In my opinion Vue definitely handles this better. Why? It’s a framework — it’s what it was made for. Elm is a lot more low level and handling everything to do with building multiple components that talk to each other or building a single page application is cumbersome — cumbersome but safe.

Learning Curve

When you first touch Elm you get this entirely new functional computing dictionary thrown in your face. Protect yourself from it (Riot shields are available on eBay). Really though, brace yourself for it if you’re coming from a JavaScript background with no prior experience of functional programming. Like me.

With Vue, the terminology you would have been using with JavaScript is largely the same. You will get some new framework-specific principles and definitions handed to you, though.

Documentation and Package Management

The Elm package documentation is an interesting challenge to navigate. I have found searching on Google can often land you on the wrong version of the documentation for the Elm package you are using, at which point you need to navigate to the correct version internally, which can also be confusing.

Vue follows a more traditional path and delegates how and where package documentation lives and is displayed to package authors.

Both the core Elm and Vue documentation are well organised and written.

To finish

I won’t leave you with a “use this, use that” conclusion, but hopefully some personal opinions above on my experience might help direct a decision, or have sparked an interest in learning Elm, Vue or both! Have fun!

Please feel free to leave a comment if you have any questions!