Last week, Anthony Gore, a Vue Community Partner shared what he calls a “knowledge map” capturing the key areas of professional Vue.js development. This map lists key areas you should target if you are planning to develop Vue apps in 2019.
The following diagram shows the developer map:
Basics of JavaScript and web development
Vue.js is an open-source JavaScript framework, which is used for building user interfaces. As it is a JavaScript framework, developers need to have a basic understanding of JavaScript and also of web development.
Essential concepts
New Vue developers should first focus on the following concepts:
- Core features: To begin with, you will need to know how to install Vue in a web page and understand the lifecycle of a Vue instance. Also, learn key features of the core such as reactive data, directives, and interpolations.
- Components: Components are reusable and isolated UI elements. Learn how to declare components and communicate between them through props and events. To build robust and scalable applications you need to learn how to compose with components.
- Single-page applications (SPAs): In the SPA architecture a single web page acts like a traditional multi-page website. After creating the “pages” as components, you can map them to a unique path with Vue Router, a tool for building SPAs.
- State management: As your app grows, managing global state becomes difficult and components become bloated with props and event listeners. A design pattern called Flux keeps your data in a predictable and stable central store. The Vuex library helps you implement the Flux architecture in your app.
Building real-world Vue apps
The concepts in the previous part guide you in building apps that are high performing and efficient, but on the local server. To make your apps production ready you need to learn the following concepts:
- Project scaffolding: As you start building frequently in Vue, you will have to do the similar configurations and setups in many projects. To make this process easier, we have a tool called Vue CLI for quickly scaffolding single page applications.
- Full-stack/authenticated apps: Often apps in production will have data-driven user interfaces and the data will be sourced from a secure API. These API will be made with Node, Laravel, Rails, Django or some other server framework. So, you should also learn the common design patterns used to integrate Vue into a full-stack configuration.
- Testing: If you want your apps to be both maintainable and stable, you need to provide tests. For testing, you can utilize a tool called Vue Test Utils that enables you to create and run tests on isolated components.
- Optimization: Once your app is deployed on a remote server, it will not have the same speed and efficiency that it showed while testing. You need to optimize the app by using a variety of techniques including server-side rendering, async components, and render functions.
Commonly used tools
Senior developers should be familiar with the key tools that will be part of almost every Vue-based project. Some of these tools are:
- Modern JavaScript and Babel: To take advantage of new browser capabilities, you can build your apps using the latest JavaScript standard, ES2015, and proposed features from ES2016 and beyond. For supporting older browsers, you can use the tool named Babel. Its function is to transpile (translate and compile) your modern features into standard features.
- Webpack: If your code is written across different modules, you can use Webpack to build them into a single file that is readable by a browser. It also works as a build pipeline, allowing you to transform code before it is built and can also be used to optimize your app with a series of plugins.
- TypeScript: As reported in October, Vue 3 will be written entirely in TypeScript. This implies that to contribute and understand inner workings of Vue you will need to understand TypeScript as well.
Important frameworks
Many frameworks are available to automate common tasks and save time. Some of the most widely used and important ones are:
- Nuxt.js: This framework provides various cutting-edge features like component-based routing, server-side rendering, and code splitting out-of-the-box.
- Vuetify: It is a material framework for Vue, which is based on Google’s Material Design Spec. Vuetify provides an easy-to-remember semantic design to quickly build Vue apps with Material Design layout and styling.
- NativeScript-Vue: If you want to use Vue for native mobile interfaces, you can do so with the NativeScript-Vue framework. NativeScript is a JavaScript framework for building apps using native user interface components on iOS and Android. NativeScript-Vue is built on top of NativeScript, providing use of Vue syntax and components.
After learning all these concepts and tools, you can develop plugins, learn about animations, or more advanced concepts like progressive web apps (PWAs).
To know more in detail about the Vue knowledge map, check out Mr. Gore’s post.
Read Next
Introducing Vue Native for building native mobile apps with Vue.js
