Ultimate Guide To Attaining Proficiency In Vuejs

Photo by Jamie Templeton on Unsplash

The purpose of this article is to give you an idea about the landscape, let’s call it a roadmap to attaining proficiency in Vue. The roadmap will guide you if you are confused about what to learn next, rather than encouraging you to pick what is hip and trendy. You should grow some understanding of why one tool would be better suited for some cases than the other and remember hip and trendy does not always mean best suited for the job.

Disclaimer

The list could grow indefinitely, but these are the basics of a well-rounded Vue developer.

Feel free to skip contents you are familiar with as much of the article is written with the beginners in mind.

Learn the Basics

Pages of the internet are a sum of layers — structure, data, design, content, and functionality. Web developers take website design files and convert them into HTML, Javascript and/or CSS code which are the core elements of front-end development.

Learning the basics of each should expose you to the knowledge of semantic HTML, dividing pages into sections and structuring the DOM properly, Grid and Flexbox, Responsive Web Design and Media queries. Oftentimes front-end development is very heavily Javascript-oriented, particularly when working on modern, highly-interactive, web applications. Javascript libraries such as Vue, Angular and React are intended to ease web application development.

Getting comfortable with the syntax and basic operations in Javascript, DOM manipulation, hoisting, event bubbling, prototyping, Ajax, ECMA Script 6+, learn new features will get you going.

Once you have the basics down, you should try to build real projects as quickly as possible. Projects are the best way to learn skills for the job and allow you to build a portfolio when you start interviewing and track your progress eventually.

General Development Skills

Git and Version Control

Git is the tool used to save code and create different versions, allowing you to collaborate with other developers. The popular platform used by most developers to store code and collaborate on open source software is GitHub. Check Learn Git from Github and Ranked Git tutorials to learn the basics of version control.

HTTP(S) Protocols

The HTTP Protocol is the foundation for data communication for the world wide web(internet). It is a TCP/IP based communication protocol, that is used to deliver data (HTML files, image files, query results, etc.) on the World Wide Web. Get an understanding of HTTP Basics, URLs, the GET, POST, PUT and DELETE requests and status codes. Learn more here.

Data Structures and Algorithms

Most people just cannot see how web development has anything to do with algorithms and data structures however as web applications are getting more complex every day, taking concepts from other realms of software development to the Web world can help solve problems that have already been solved and validated before.

Single page apps are taking a lot of logic to the browser, memory management becomes something to worry about.

Efficient algorithms will make it possible to understand how TCP works, slow starts, etc. This can make a big difference on how fast a page is loaded( even more relevant when 3G networks are involved)

Data dominates. If you’ve chosen the right data structures and organized things well, the algorithms will almost always be self-evident. Data structures, not algorithms, are central to programming. — Rob Pike

Design Pattern

Design patterns are recurring solutions that solve Web development design problems and provide a common language for web developers who create user interfaces. In general, patterns do not specify requirements, but rather, present recommended solutions to design problems. They give generalized solutions in the form of templates that may be applied to real-world problems.

If you want to know more about design patterns, in general, I can recommend this website.

Vue

You can now start your journey trying to understand what Vue.js is,
how it compares to other frameworks, and what it allows you to do. We’ll touch on different aspects of Vue technologies that make a Vue application, Despite Vue being relatively new, you’ll notice that the framework is growing more and more popular every day with the highest amount of stars on GitHub out of all Javascript projects out there, demonstrating how developers enjoy it and appreciate it. There’s a lot to talk about it but I’ll leave it for another article, meanwhile, let’s dive into it.

Build Tools

Modern web applications are often a mix of custom written modules and third-party packages, written in various versions of languages. Configuring all these tools, making them work across operating systems, and more importantly between each other is not a simple task. Luckily some tools ease this process, most of which are abstractions on top of other tools, making configuration and setup even simpler.

Below are some popular ones to build both web applications and libraries.

Vue CLI

Developers can leverage features like ESLint, Babel, Unit, and End-to-end Testing, PWA support, Instant Prototyping, HMR and more. It comes with a rich and extensive API, with an ever-growing list of plugins, further extending its functionality. You can have a look at the official documentation of the Vue CLI to get started.

Webpack

When I first started working with Vue, I had to ramp up on many of its technologies and frameworks that I hadn’t used before. One of these was Webpack — a powerful bundler used in many applications and frameworks.

Webpack is a module bundler. It takes disparate dependencies, creates modules for them and bundles the entire network up into manageable output files. This is especially useful for Single Page Applications (SPAs), which is the defacto standard for Web Applications today.

Package Managers

Simply put — a package manager is a piece of software that lets you manage the dependencies (external code written by you or someone else) that your project needs to work correctly.

Developers are usually caught in a dilemma when choosing between package managers to use in building and managing project dependencies. Two popular package managers in the ecosystem are NPM (Node package manager) and Yarn (package manager created by Facebook). You can have a look at both of them then decides which one suits you the most.

• npm: It is a package manager for the JavaScript programming language. which is the default package manager for the JavaScript runtime environment Node.js. It consists of a command-line client, also called npm, and an online database of public and paid-for private packages called the npm registry.
• yarn: It stands for Yet Another Resource Negotiator and it is a package manager just like npm. The intention behind developing yarn(at that time) was to fix performance and security concerns with npm.

Styling

While working with Vue, it is important to understand:

CSS Preprocessors — like SCSS which lets you write CSS with additional syntax features, like variable make writing CSS easier and PostCSS, which transforms all your CSS using Javascript.

Vue-Tailwind — It uses TailwindCss classes by default, and all classes are configurable, which give you total control of how the components will look like.No more Bootstrap like sites, you just need to configure your theme classes once and all set.

CSS in Js — More specifically how to work with Single File Components. If you are starting with Vue beginning by detailing how to use Vue in the easiest way possible, eventually, you’ll discover a need for components. While you can still use the direct <template> <script> <style>method with components, it would be wise to start thinking about switching over to Single File Components — or SFCs.

State Management

State management is one of “those things”. Backends roll their eyes, frontends hide under the desk. After all, managing state is the hardest part of being a frontend developer: you need to think in terms of UI as something that changes over time.

Vue is awesome. But, like every other component-based framework, it is difficult to keep track of the state when the application starts growing. This difficulty is pronounced when there is so much data moving around from one component to another.

Vuex to the Rescue — You can lift the heavy-duty of managing state from Vue to Vuex. Data flow and updates will be happening from one source and you end up wrapping your mind around one store to keep track of what is happening in your app.

Vuex is a state management library provided for Vue apps. A good state management systems become crucial when your app gets more complex with a lot of moving pieces. Vuex gives us the ability to store and share reactive data across the app without trading off performance, testability or maintainability. It empowers Vue’s reactivity system and creates easily accessible data between independent components, without having to deal with complicated prop drilling.

Another thing that makes Vuex so cool is the developer experience that comes with it. You can get a deeper understanding of Vuex here. Try to get a deeper understanding of Data Persistence: Vuex-persist, Vuex-persisted state, and Vuex-shared-mutation with Vuex-loading.

Routing

Creating a Single-page Application with the Vue + Vue Router is dead simple.

With Vue.js, we are already composing our application with components. Routing is one of those methods which allow user switch between pages without page refreshing the thing that make the navigation easy and nice in your web application.

Working with Vue and SPA, you are going to end up using vue-router sooner or later to deal with the navigation of your app.

API Clients

Quite a few frameworks have built-in HTTP APIs. Angular 2 has the HTTP module, JQuery has $.ajax, and, up until Vue 2.0, Vue.js had vue-resource. In Vue 2.0, the developers decided that having a built-in HTTP client module was rather redundant, and could be better serviced by third-party libraries. The alternative most frequently recommended is Axios.

Axios is the recommended library for Vue for making HTTP requests. It’s a very simple library, but it has some built-in features that help you in carrying out common operations. It implements a REST pattern for making requests with HTTP verbs and can also deal with concurrency (spawning multiple requests at the same time) in a function call.

GraphQL tackles the same problem as REST API: get data from your back-end on the client-side by sending an HTTP request. However, instead of working with the stiff server-defined endpoint, you can get all the data you need in a single request.

Utility Libraries

Working with dates and times in JavaScript has always been a bit cumbersome. Native date methods are verbose and the API is often inconsistent. That’s why if you ask a date-related question on StackOverflow, you’ll often hear the reply “Use Moment.js”.

Lodash on the other end is a utility library delivering modularity, performance, and extras. It makes Javascript easier by taking the hassle out of working with arrays, numbers, objects, strings, etc

Testing

The most common question about unit testing Vue components I see out there is “what exactly should I test?”

While it’s possible to test either too much or too little, my observation is that developers will usually err on the side of testing too much. After all, no one wants to be the guy who’s under-tested component crashed the app in production.

Writing tests when developing Vue.js apps can save you a lot of time which would be otherwise spent fixing bugs. The bigger and more complex your app gets, the truer this becomes.

• E2E Testing — E2E (end-to-end) testing is a type of functional test. Unlike a unit test, you’re not breaking the application down into smaller parts to test it — you’re testing the entire application.
• Unit Tests — Unit testing breaks down code into small, easily testable parts. Usually, a unit is a single function but can also be a class or even a complex algorithm.

Server-Side Rendering

SSR involves creating a fully-loaded version of the app for the requested route on the server. Once that page is rendered on the client-side, the client-side code takes ownership. You are going to need two entry building points for your app, one for the server and one for the client.

The main reason to use SSR :

1. Better SEO. Search engine crawlers are going to see a fully rendered page when the application loads since the server are the one building that first loaded page.
2. Faster time-to-content. Since the first render is entirely built by the server, you get a fully-rendered page from the client-side much quicker. This gives a better user experience and is important for apps where time-to-content plays a critical role.

Nuxt.js, a framework that builds on the SSR features Vue already offers, making it easier to build SSR applications. It simplifies the web app development of single-page or universal Vue.js apps. Advantages Nuxt brings include:

• SSR, which helps with SEO, quicker initial page loads
• Automatic code splitting
• Static file serving
• Intelligent defaults and pre-configuration for Vuex, Vue Router, and vue-meta
• Provides a standard folder structure for your application
• Automatic routing configuration
• The modular system makes it easy to customize the framework

Final Note

Vue certainly does the job it’s intended to do and succeeds in some areas that other frameworks fail, it has got the best doc library you could ever find and it does not make ample presumptions about a lot of things. It simply just accepts that your information is going to change.

If you are new to Vue development, whether starting as a professional or even just learning as a student, you probably find the culture intimidating. The range of skills required to become a “great” Vue developer is vast though not compared to other frameworks as it’s learning curve is reasonable.

If you are learning how to play an instrument, it’s no question for most people that you can’t get anywhere until you pick up the instrument and try to play it. And it’s not just once in a while, either. Instrument practice is something most musicians do every day. Even if they are professionals.

Learning theory and exploring new ideas is, obviously, essential to improving yourself in any discipline. The most important step, though, is turning those concepts into engrained knowledge and muscle memory. In this way, programming is a lot like learning an instrument.

Now, Start Practicing!

Now that you have some ideas, get out there and start practicing! The longer you wait, the longer before you’ll feel confident enough to take the next steps in your developer career.