Why would you want to learn VueJS now?
Let's Code

Let's Code @frontendengineer

About: A fan of technology/innovation, software engineer, and a father.

Joined:
May 6, 2019

Why would you want to learn VueJS now?

Publish Date: Mar 31 '21
29 24

Everyone has their favorite JS framework based on their own style and preference. Why would a developer bother looking into a different one if what they are currently using is working?

  • VueJs is very easy to learn and easy to use. It uses components as building blocks that are small, reusable, and can be dropped in different parts of the application.

It has directive that will let us render a data very easily.

<div id="app">
  {{ message }}
</div>
Enter fullscreen mode Exit fullscreen mode
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
Enter fullscreen mode Exit fullscreen mode

Also, have a directive to loop over a list in a template.

<div id="app">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
Enter fullscreen mode Exit fullscreen mode
new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})
Enter fullscreen mode Exit fullscreen mode

There is so much functionality that this framework has done to make our lives easier. Check their website

  • VueJS documentation is one of the best I have ever read with great examples
  • Ecosystem is big and great. The framework has the community that created all the libs and tools you will ever need to build, organize and scale your front end applications
  • Their CLI is outstanding and flexible. You can choose to what level of libs and tools. For example: You can add unit or integration framework you want, whether you want to include a store, router, es6, and many more and the CLI will build this kind of customization for you.
  • VueJS according to the survey is trending as the top 2 in terms of popularity and satisfaction. More metrics can be found here - Survey Metrics

Stack Overflow survey

2020 (february 2020, 65,000 developers): https://insights.stackoverflow.com/survey/2020

Popularity: React.js 35.9%, Angular 25.1%, Vue.js 17.3%, Angular.js 16.1%
Loved: React.js 68.9%, Vue.js 66.0%, Angular 54.0%, Angular.js 24.1%
Dreaded: Angular.js 75.9%, Angular 46.0%, Vue.js 34.0%, React.js 31.1%
Wanted: React.js 22.4%, Vue.js 16.4%, Angular 10.6%, Angular.js 7.7%
2019 (january 2019, +90,000 developers): https://insights.stackoverflow.com/survey/2019

Popularity: React.js 31.3%, Angular/Angular.js 30.7%, Vue.js 15.2%
Loved: React.js 74.5%, Vue.js 73.6%, Angular/Angular.js 57.6%
Dreaded: Angular/Angular.js 42.4%, Vue.js 26.4%, React.js 25.5%
Wanted: React.js 21.5%, Vue.js 16.1%, Angular/Angular.js 12.2%
2018 (january 2018, +100,000 developers): https://insights.stackoverflow.com/survey/2018

Popularity: Angular 36.9%, React 27.8%
Loved: React 69.4%, Angular 54.6%
Dreaded: Angular 45.4%, React 30.6%
Wanted: React 21.3%, Angular 14.3%
stateofjs.com survey
2020 (december 2020, 23,765 respondents): https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/

React satisfaction: 87.49% 100-(100/(15071+2154)*2154) for 17,225 users
Vue satisfaction: 85.15% 100-(100/(9029+1574)*1574) for 10,603 users
AngularJS + Angular 2+ satisfaction: 41.60% 100-(100/(5046+7081)*7081) for 12,127 users
2019 (december 2019, 21,717 respondents): https://2019.stateofjs.com/front-end-frameworks/

React satisfaction: 89.33% 100-(100/(14382+1717)*1717) for 16,099 users
Vue satisfaction: 87.14% 100-(100/(8122+1198)*1198) for 9,320 users
AngularJS + Angular 2+ satisfaction: 37.95% 100-(100/(4396+7186)*7186) for 11,582 users
2018 (november 2018, 20,268 developers): https://2018.stateofjs.com/front-end-frameworks/overview/

React satisfaction: 90.60% 100-(100/(13062+1355)*1355) for 14,417 users
Vue satisfaction: 91.15% 100-(100/(5810+564)*564) for 6,374 users
AngularJS + Angular 2+ satisfaction: 41.37% 100-(100/(4817+6826)*6826) for 11,643 users

Want to watch a video instead? Below is a youtube video. Happy coding!

If you want to support me - Buy Me A Coffee

Comments 24 total

  • Pacharapol Withayasakpunt
    Pacharapol WithayasakpuntMar 31, 2021

    Please also share your thought on Vue2 (@vue/cli) vs Vue3 (vite) vs NuxtJS (vs Quasar, although I haven't really tried it yet.)

    • Let's Code
      Let's CodeMar 31, 2021

      i have no production experience with Vue3 or NuxtJS unfortunately. Hope someone can come in and share.

  • Adam Coster
    Adam CosterMar 31, 2021

    Vue is great, and Vue3 has made it much better yet. While in general I agree that the docs and ecosystem are great, the Vue2/Vue3 split has made that less true.

    I recently upgraded a big Vue2 project to Vue3. It was less painful than I expected, but I found it difficult to figure out which version of Vue any given 3rd party library or even the Vue docs are referring to.

    • Let's Code
      Let's CodeMar 31, 2021

      glad to hear your experience on the upgrade. I am interested on how did you approach the upgrade - manually or using a cli or a migration docs/guide?

      Did you also include typescript? We are currently using VueJS version 2 in the company.

      • Adam Coster
        Adam CosterMar 31, 2021

        I used the CLI and followed up with a lot of manual fixes. I did switch to Typescript as part of the process.

        • Let's Code
          Let's CodeMar 31, 2021

          i need to take a look at typescript. Companies are investing into it now and getting so much attention because of the advantage it brings.

          • Adam Coster
            Adam CosterApr 1, 2021

            After making the switch I'll never go back. I started to slowly adopt it early last year, and once I got over the initial learning hurdles it quickly became the only way I wanted to code!

            • Let's Code
              Let's CodeApr 1, 2021

              thanks for sharing. I have typescript docs open at the moment and I would dive into it.

              I used to think that TS is just an additional overhead, I didn't bother learning as JS is meant to be loosely typed. It is an eye-opener to see the community slowly adapting to it. Hope that TS will just be embedded on JS itself.

              • Adam Coster
                Adam CosterApr 1, 2021

                Typescript is great because it doesn't limit what you can do, it just documents what you did do, or plan to do, so that you can catch errors from accidentally not doing those things. You can adjust type definitions easily and on the fly.

                At the beginning of learning it's hard to use Typescript to express your intent, so it may feel constraining at first. But it's worth sticking to it!

                • Let's Code
                  Let's CodeApr 1, 2021

                  im sold! thanks for the valuable input. i currently know the basics and watched tutorials last night. will get my hands dirty this weekend. Thanks Adam.

                  • Adam Coster
                    Adam CosterApr 1, 2021

                    Good luck! Definitely best to start with small projects until you feel confident with it. The official docs are very good. I've found that the vast majority of my frustrations stem from configuration issues, which can be tricky to get right.

  • Let's Code
    Let's CodeMar 31, 2021

    if I would make an educated guess, ReactJS came in first so they have the first-mover advantage from angular and other frameworks. Also, ReactJS focus heavily on javascript which is the preference of most devs. Since this is preferred, jobs will be massive as demand is higher.

    JSX is a bit weird but I could argue that the same thing could be said on the directive, filters, etc as well on angular/vue. Might be something to just getting used to.

  • Giuseppe
    GiuseppeMar 31, 2021

    There would be a lot to say about Vue. Personally I love its extensible ecosystem (Vuex, Vue Router and Vue CLI) which is totally followed by the core team members, giving to it more reliability, and I also like Vue's Single File Components which make possible to write a super-clean and understandable code.

    I wrote a couple of posts about Vue; you may give them a look if you want! :)

    • Let's Code
      Let's CodeMar 31, 2021

      will definitely visit. Glad to see vuejs users on this platform.

      SFC and directives are my favorite part of vue.

  • Andrew Baisden
    Andrew BaisdenMar 31, 2021

    If React did not exist I am sure that Vue would be number 1. Regardless it is a great framework to use definitely my second choice after React. I agree though the syntax is probably easier to learn compared to JSX. And their docs are great.

    • Let's Code
      Let's CodeMar 31, 2021

      VueJS made some difficult things easier. An example is the form fields v-model. In react you would have to manually handle it. Although some devs preferred to have this flexibility, do everything themselves.

      Looping through lists is quite a breeze, kinda angular-ish that Evan You love and replicated.

  • Let's Code
    Let's CodeMar 31, 2021

    You will be able to pick it up quite easily. In the end, frameworks help us devs but just different ways of doing things. Is there any other framework you are familiar other than vuejs?

  • Nico Zerpa (he/him)
    Nico Zerpa (he/him)Mar 31, 2021

    I'm a React guy, but I also work with Vue.js and it's very a solid framework, it's really cool. I also like that the Vue.js team also maintains the official router and state management libraries for the framework.

    • Let's Code
      Let's CodeApr 1, 2021

      Vue.js team maintaining these libs will ensure compatibility with the framework and I definitely like that idea. The more brain on lib, the better software will be. Have you tried or looked over Svelte?

  • Let's Code
    Let's CodeApr 1, 2021

    im going to spend some time with Svelte this week. it is very similar with VueJS. They claim to be lighter as they remove the actual lib from the code. imagine a vuejs app with vuejs or react app without react, no overhead. 😀

Add comment