Following my recent article on Vue.js (Why learn Vue.js as a backend developer), I decided to compile a complete list and tutorial of things to learn in Vue.js for backend developers. As a backend developer, I have been trying to figure out the part and specific things to learn in Vue.js instead of trying to wrap my head around everything that Vue.js offers since am not a front-end major.
If you have been in this same shoe as I was, well this article is for you because I carefully select specific things that you need to learn in Vue.js as a backend developer.
WHAT IS VUE.JS
Let’s get started by defining and knowing what Vue.js means and how it’s different from other frameworks.
VUE.JS: Is a progressive JavaScript framework that focuses on building user interfaces.
- It works on the view layer only
- Incrementally adaptable.
- Easily integrated into other projects or libraries.
- Capable of powering advanced SPAs
LIST OF WHAT TO LEARN IN VUE.JS FOR BACKEND DEVELOPERS
- Reactive interfaces
- Declarative rendering
- Data binding
- Directives
- Template logic
- Component and nesting
- Event Handling
- Computed Properties
- SSR
- Handling Form
- Reusability & Composition
- Testing
- Deployment
REACTIVITY INTERFACES/SYSTEM: One good thing about VUEJS is the Reactivity System, if a datum is changed it triggers and update of the page to reflect the change. With this feature of VUEJS fully functional backend developers can easily create real-time and reactive dashboard among others things that can be done with VUEJS. Read more about it here.
DECLARATIVE RENDERING: This is the process of writing code with the intention of hiding the implementation details and focusing on the outcome. Under the rendering, you should look up things like Conditional Rendering and List Rendering which describe the use of conditional and iterative statements respectively.
DATA BINDING: Is the process that establishes a connection between the application UI and business logic. Vue enforces a one-way data flow between components. This makes the flow of data easier to reason about in non-trivial applications.
<div v-bind:class="{ active: isActive }"></div>DIRECTIVES: Essentially, a directive is some special token in the markup that tells the library to do something to a DOM element. In Vue.js, the concept of the directive is drastically simpler than that in Angular. A Vue.js directive can only appear in the form of a prefixed HTML attribute. Directives are special attributes with the v- prefix.
<p v-if="seen">Now you see me</p>TEMPLATE LOGIC: VUEJS allows the inclusion of conditional and iterative statements right inside our components.
Read More about Components here
COMPONENTS: Are one of the most powerful features of Vue.js. They help you extend basic HTML elements to encapsulate reusable code. At a high level, Components are custom elements that Vue.js compiler would attach specified behavior to.
Read More about Components here
Uses of components
- They provide organization and encapsulations for large projects
- Re-usable code
- Can be separated into .Vue files
// Define a new component called button-counter
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})EVENT HANDLING: v-on is the attribute added to the DOM elements to listen to the events in Vue.js. Learn how to emit different events and how to manipulate the template with event handlers.
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>COMPUTED PROPERTIES: A computed property is essentially a property defined with getter/setter functions. You can use a computed property just like a normal property, but when you access it, you get the value returned by the getter function; when you change its value, you trigger the setter function passing in the new value as its argument.
In Vue, we use data to track changes to a particular property that we’d like to be reactive. Computed properties allow us to define a property that is used the same way as data, but can also have some custom logic that is cached based on its dependencies.
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
})SSR (Server-Side-Rendering): Is a popular technique for rendering a normal client-side single page app (SPA) on the server and then sending a fully rendered page to the client. By default, Vue components produce and manipulate DOM in the browser as output. However, it is also possible to render the same components into HTML strings on the server, send them directly to the browser, and finally “hydrate” the static markup into a fully interactive app on the client.
I will post a practical approach to SSR soon on this publication. Follow now to receive alert when posted.
HANDLING FORM: Handling form requests and responses are very crucial to the overall web and application development, so it necessary to learn how to do it with best practices in Vue.js even as a backend developer.
<input v-model="message" placeholder="edit me"><p>Message is: {{ message }}</p>REUSABILITY AND COMPOSITION: You should learn things like mixins for a flexible way to distribute reusable functionalities for a Vue component. Also look at things like Render Functions and JSX, Plugins, and Filters.
TESTING: Vue-CLI has built-in options for unit testing with Jest and Mocha that works out of the box. A slight look into unit testing with these tools could be worth it.
DEPLOYMENT: As a backend developer, deployment may be one of your things if your company doesn’t have a separate operational team, so a deep dive into Vue.js deployment procedures will be a good save.
There are more things to look into and a lot that Vue.js offers out of the box, but in my own opinion I feel these are most of the things that a backend developer should focus more on.
ADDITIONAL TOOLS AND PLUGINS
- VUE-ROUTER: Official router deeply integrated with VUEJS core.
- VUE-RESOURCES: Handle web requests.
- VUE-ASYNC-DATA: Async data loading.
- VUE-VALIDATOR: Form validation plugin
- VUE-DEVTOOLS: Chrome devTools extension
INSTALLING VUEJS
There are number of ways to implement VUEJS:
- Include the script tag in an HTML file
- Install using NPM
- Use the VUE-CLI tool along with webpack
- Install using the Bower Client-side package manager.
USING VUE-CLI TOOL
To install Vue.js using VUE-CLI TOOL is the easiest and my favorite way of installing Vue.js except when running with Laravel. Learn how to run the installation here.
VUEJS EXAMPLE
After installing Vue.js in our machine, we are ready to go, but before then lets to a look at Vue.js example.
Rendering data to the DOM and using Interpolation
<div id = "app">
{{msg}}
</div>
var app = new Vue({
el: "#app",
data: {
msg: "Hello world",
}
});I will be dropping articles and video tutorials on each of the topics listed above and also demonstrate how to connect the dots in creating a full-blown app with VUEJS.
Conclusions
There are lots you could learn with VUEJS, but as a backend developer, i decided to compile a quick list of topic that can may be very useful to learn quickly, this is based on my personal opinion and will be very glad to hear from you.
Thank you for reading my article.
Here at my blog or medium I regularly write about backend development, digital marketing and content management system. To read my future posts simply join my publication or click ‘Follow’ Also feel free to connect with me via Twitter, Facebook, Instagram.
If you are interested in backend development (or you’re internet enthusiast) both (Mobile | Web | Desktop) videos subscribe to my Youtube channel, we will be posting a collection of help full tutorials and guides like this one for artisans.
If you enjoy this post, make sure to let us know and share it with your friends and subscribe to my growing channel.
Sharing is caring.
