Spoiler alert: this article
is not a comparison to React!
Now that you decided to continue to read, let me say that this week I started my new course on Vue. I am very impressed with how so little code can make so large difference, in comparison to native JavaScript. I am still waiting for one of my favorite teacher’s Vue course, and I thought it will be a nice way to wait by learning the basics at least until it will be released. I would love to compare Vue with React, but I hadn’t got to touch React, not just yet, so I will just say that in comparison to jQuery, which I did work with, it’s impressive.
Remember I often said, in my previous articles, that I don’t like long introductions? I just wrote one so excuse me. Let’s jump right into the core.
What is Vue.Js
According to Vue documentation itself, it is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.
in my own words: Vue.js helps you make dynamic user interfaces for the web.
So, Why you should learn Vue if you are a newbie like me coming straight from Vanilla JavaScript.
- Conventions
All the busy work is gone Bye-bye. Vue helps to avoid it, it has a lot of built-in solutions. It has effort in saving conventions like animations and management.
2. Developer’s best friend.
I was hesitating which one of the following three points to write first: documentation, graphical interface, or the CLI (command-line interface). Documentation won as I learned more from their documentation, so on that matter I installed the npm via CLI on my MacBookPro and it works like a charm.
Not to mention the fact that for a newbie like me, the way Vue is presenting the tools, which by the way there aren’t a lot to learn and it doesn’t need so much time to get familiar with, is tremendous.
I haven’t yet bumped into a real problem to ask the community’s help, I just started, so give some time, but as I’ve read in a LinkedIn community, they are pretty kind and helpful.
3. Popularity.
In just a few years Vue gained considerable popularity. Companies like Facebook, GitLab, Netflix, Adobe, Behance, Xiaomi, WizzAir, EuroNews and even Grammarly (which I use to correct my typos) are using Vue in their code base, so it’s a good starting point for it to increase chances of being hired.
4. Flexibility
This means that Vue can be used for Single Page Applications as well as to build small and interactive parts and to be integrated using different technology. It can be a full-featured framework that you used to build a whole project or it can be just a library in your project. Grammarly took advantage of it and built its signature interface while WizzAir built its amazing interface in its apps. One of the most outstanding platforms that get my attention is Adobe. If you want to build your portfolio on a Vue based platform, choose Adobe Portfolio, it’s amazingly fantastic. Okay, okay, I am sorry to be so excited but I can’t stop being impressed by the complexity and at the same time simplicity of Vue.
Basic JavaScript knowledge to learn Vue
In terms of learning Vue, I find this list of prerequisites so that someone out there could learn Vue.
So how much JavaScript should I know before learning Vue.js?
- Have an overall understanding of how code is executed in JS (execution context, stack, event looping, hoisting).
- How scopes work.
- How JavaScript is a loosely typed language and how coercion works.
- Operator precedence and associativity.
- By value and by reference in JavaScript.
- How “this” keyword behavior in different environments.
- What are closures
- Prototypical inheritance.
- Function constructors and the “new” keyword
- User Inputs
- Event Handling
I couldn’t build a simple dynamic user interface for the web with my JavaScript knowledge at the time I decided to go with Vue and I went back to fundamentals. This is what I did to test myself and perhaps it will work for you as well:
Create a web page with a simple form, say, three inputs and a submit button
Validate each input of the form using JavaScript
If the form is invalid, show an error message and prevent submission
This simple task requires you to know the basics of UI programming:
- Basic JavaScript
– DOM querying
– DOM manipulation
– Event handling
After that I was good to go.
If you can do this, you know enough to get started with Vue. If you can’t, work on this first, as Vue won’t be helpful so much, not just yet.
Conclusion and a brief recap:
Vue it’s a progressive framework for building user interfaces, it’s developer-friendly, it is flexible, it gains in popularity increasingly, it’s simple to learn for a newbie into JavaScript knowing the fundamentals.
Just before I live you, I would like you to have a few links that helped me:
Grammarly (free and paid versions) = I use on a daily basis when it comes to correct the typos, and it’s using Vue (yes I know I said that before ?
Adobe Portfolio (free) = I like it a lot and it looks very clean for a portfolio for free, if you’d like it:
Vue course (paid) by Maximilian Schwarzmüller I am using currently and it’s amazingly easy to follow: https://www.udemy.com/course/vuejs-2-the-complete-guide.
Thank you for your time and until next week, happy coding.