Learn Vue.js in this free course! ?✨
Let’s make something Vueseful
Before I get to the article, I just want to share that I’m building a product, and I would love to collect some data about how to better serve web developers. I created a short questionnaire to check out before or after reading this article. Please check it out — thanks! And now, back to our regular scheduled programming.
You might not know what Vue is — and that’s OK — and heck, you might not, definitely not, know who I am! I’m Zaydek, and I’m an experienced graphic designer and programmer. I just released a free course to help developers learn some Vue! I’m here to enlighten you about all the possibilities that learning and using this amazing open-source framework present.
The course is taught on Scrimba.com, which is a new and interactive website for learning and sharing how to code. Screencasts can be interrupted and edited, making learning active and fun to experiment with.
Vue is not one thing
A framework can be thought of as a general-use toolbox, equipped with tools that solve different problems but all together help with some task. That task, where Vue is concerned, is building maintainable and idiomatic web apps with ease — really — and having fun while we’re at it!
Let’s put things into perspective. Vue can be as simple as a script tag that we can include in our websites to turn them into web apps. But it can also be an entire ecosystem that relies on a build-process to make engineering complex and powerful web apps easier.
In this article and in the course, I focus on learning the core concepts Vue presents, and assume no knowledge of the command-line or what a build-process is.
What the course covers
The course is three parts:
- learning the core concepts of Vue, and
- an overview of two more advanced examples (two cute and fun web apps I made: Schrödinger’s Div ? and a ? Color Picker).
What I love about Vue is that it proposes some interesting ideas for how to think about and how to build web apps. There are a few ideas that I think are most interesting — though this is not suggestive of all that Vue can do:
- separating the data from the DOM
- templating and component-based HTML
- managing event-handling
But before we can get into that, let’s first cover how to connect Vue via a simple script tag to a website:
You can think of a web app as being inside or on top of a website. So a web app begins it’s life at the
<div id="app">, where from inside the script tag it is plugged i
where el is short for element).
This is the first of what are known as options, and Vue supports a lot of options, such as
methods. These are analogous to variables and functions for our web app.
Note: Vue comes in two flavors: ? there’s both the development and production version. The development version emits detailed error messages and warnings to support developers while working in Vue. The production version is optimized for speed and size.
In addition to all of this, there’s an official Chrome extension that makes managing the app’s state and debugging painless.
Separating the data from the DOM
As mentioned earlier, one great suggestion Vue proposes is separating the data from the DOM. DOM stands for document-object-model, which can be thought of as the tree of elements that compose our website. The text in between the opening and closing elements is what I’m referring to as the data. In Vue we don’t hardcode it — we separate it and put in the aforementioned
data object from inside of our Vue instance.
This idea is also referred to as the Virtual DOM. This might seem insignificant, but the truth is that having the data in one place means that we know how and where to update it. And because Vue is reactive, whenever we update said data, that change gets propagated throughout our web app. Because of this relationship, data can be thought of as much more alive in Vue than in vanilla HTML.
These ideas are explored in the third screencast.
data object as shown above, and functions are attached as key-value pairs attached to a second object:
methods. And both objects data and methods are optional — remember, these are our web app’s options.
These ideas are explored in the fourth screencast.
Most people wouldn’t consider HTML a programming language. But I think a reasonable definition of the purpose of a programming language is this: to interpret and transform data, such as reading and compiling source code.
Given Vue’s attributes, such as
v-if, and so on, for me HTML begins to resemble a programming language with control-flow. This means that we can better control the flow of our program’s data (for example, our website’s content or what I keep calling the data).
For what it’s worth, templating frameworks, like Jekyll and Hugo, were created to aid developers with authoring static-based websites using a kind of control-flow. As nice as this is, it’s limited to static websites, because these frameworks compile to HTML rather than interpret HTML.
Having access to realtime control-flow, like for-loops and if-statements, means that Vue can do a lot more and do it in realtime. This is one of the big differences between websites and web apps (static versus dynamic content).
These ideas are explored in the fifth screencast.
Components and props
And this isn’t a small thing. The benefit of components and props in Vue means we can refactor entire HTML code blocks into one-liners that can be customized via props. This means we can now author custom elements that expose access to their internals without overcomplicating the public HTML. This is a big win for both maintainable and readable code.
These ideas are explored in the sixth screencast.
While everything we’ve talked about so far is fascinating, it doesn’t speak to user-interaction, which is one of the key differences between a website versus a web app. A website conventionally means something that is more-or-less static and isn’t designed or intended to interact with the user much, outside of perhaps collecting data. In an actual web app, something reminiscent of a native app, interaction is paramount. ? This idea is also referred to as a dynamic website or web app.
Since Vue is both a framework and an ecosystem, it has idiomatic solutions for this, too. The simplest one that I teach in the course is the
These ideas are explored in the seventh screencast.
There’s a lot more to learning Vue, so I wrote two more articles on the subject matter. Please, after this article, have a look!
Vue makes the web make sense
Before Vue, I was acquainted with HTML and CSS. I was comfortable enough to make some alluring websites, but nothing more. I explored some frameworks (like those I discussed in this article concerning static compilation), and peered into Angular and React, but I didn’t get the right feeling when exploring those. What I wanted was something lightweight and intuitive, and I believe I’ve found that with Vue.
In the end, it doesn’t matter which tools we use if we can create what we set out to build. But the thing is, it’s hard to separate the tools from the thinking used to build a product or service. This is both a good and bad thing. On the one hand, it can make us narrow-minded. But on the other end of the spectrum, the tools we use can also serve as a teaching instrument for learning new and interesting ideas. I love tools that can’t help but teach me at the same time, and I couldn’t recommend Vue more for this reason!
So please, go out into the beautiful world and learn you some Vue! You can(!) make amazing things and even change people’s lives, even your own. And if it helps, try the free course!