Introduction
In this series, we’re going to learn about the JavaScript framework, Vue.js. To guide our learning, we’re going to build a small application called FlashWord, a flash card game used to practice language vocabulary.
This series will discuss both Vue’s Options API and Composition API, with a focus on the latter. (If you have no idea what this means, no worries, it will make sense later.)
In terms of prerequisites, this series assumes you’re comfortable with the following:
- HTML & CSS
- JavaScript
- Working in command line and in a code editor
Everything else? We’ll cover as we get to it.
Types of web sites and the role of Vue
Digging in, let’s discuss how web sites are built to understand the role of Vue.js. First - let’s look broadly at the technologies used to build web sites:
In its simplest form, a web site is made up HTML that dictates the structure of the page and CSS to indicate the style. As we click links or submit forms, requests are made to a server to be processed by languages like PHP, Node.js, Java, Python, etc., and ultimately a new response of HTML/CSS is returned back to the browser where it’s rendered.
Depending on this “round trip” to the server to view different content/pages is a classic web model, and it’s great for delivering relatively static information to visitors. A good example of this classic model is something like Wikipedia. We can browse around from page to page, we can input some information via things like a search box, and that input can influence our results.
But now-a-days, we demand more of web sites. We expect the level of interactivity that rivals the kind of things we used to only be able to accomplish via desktop applications. And we want this interactivity to happen fast - we expect instant results - we don’t want to have to wait for the entire page to be refreshed from the server for every little interaction we take. For an example, think about how web applications like Google Docs has become just as powerful as desktop applications like Microsoft Word.
To accomplish robust applications like Google Docs we rely heavily on JavaScript, which layers on interactivity to the foundation of HTML structure and CSS design. We use JavaScript to dynamically update our HTML and CSS so the user can see near-instant responses to their interactions.
And when we need the server to accomplish things we can’t do in the browser alone (e.g. interact with a database, send email confirmations, process monetary transactions) - JavaScript can send requests to the server behind the scenes, wait for a response, and update the interface accordingly. We don’t have to make a full “round trip” to the server, reloading the entire page. (Colloquially, we refer to this technique as Ajax.)
The end result is we can build fast and robust web applications and interfaces, harnessing the power of JavaScript.
Frameworks to expedite our work
Technically, we could build the kind of fast and robust web applications described above with JavaScript alone, but this would require a lot of engineering. We’d have to spend time deciding the best way to program our JavaScript to handle all the interactivity we need - updating content, changing styles, responding to form inputs changing, displaying and animating responses, communicating with the server, etc.
Instead of doing all of this engineering from scratch, we can instead rely on JavaScript frameworks like Vue.js which provide us with pre-written tools and techniques for building our interfaces. This way we don’t get lost in the details of how to build our interfaces and can instead focus on the specific needs of our applications.
So that’s what Vue.js is: a JavaScript framework designed to expedite our process of building robust web interfaces.
Vue.js vs. other frameworks
Other popular JavaScript frameworks aside from Vue.js include Angular, React, and others. There’s no one “best” framework, and deciding which framework is right for you/your projects can come down to many factors.
That being said, let’s highlight some Vue’s selling points:
- Approachable - Vue.js is beginner friendly while also powerful enough to grow with you and your applications.
- Versatile - Vue.js is flexible enough to be integrated into existing projects or it can be used to build a new application from the ground up.
- Performant - Vue.js is lightweight, allowing you to start with the core framework, pulling in additional features as you need them (e.g. routing, state management, server-side rendering, testing).