Vue.js for backend developers

  • Vue.js for backend developers

    Sharing is Caring... Show some love :)

    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.
    1. It works on the view layer only
    2. Incrementally adaptable.
    3. Easily integrated into other projects or libraries.
    4. Capable of powering advanced SPAs

    LIST OF WHAT TO LEARN IN VUE.JS FOR BACKEND DEVELOPERS

    1. Reactive interfaces
    2. Declarative rendering
    3. Data binding
    4. Directives
    5. Template logic
    6. Component and nesting
    7. Event Handling
    8. Computed Properties
    9. SSR
    10. Handling Form
    11. Reusability & Composition
    12. Testing
    13. 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.

    Read more about it here

    <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.

    ALSO READ  How to upload images and videos to Cloudinary using Node.js

    Read more about it here

    <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

    1. They provide organization and encapsulations for large projects
    2. Re-usable code
    3. 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.

    Read More About It Here

    <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.

    ALSO READ  Rust Programming Language: The Ultimate Guide

    Read more about it here

    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.

    Read More about it here.

    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.

    Read More about it here

    <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.

    Read More about it here

    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.

    Read More about it here

    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.

    Read More about it here

    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.

    ALSO READ  Getting Started with Database Entity Relationship

    ADDITIONAL TOOLS AND PLUGINS

    1. VUE-ROUTER: Official router deeply integrated with VUEJS core.
    2. VUE-RESOURCES: Handle web requests.
    3. VUE-ASYNC-DATA: Async data loading.
    4. VUE-VALIDATOR: Form validation plugin
    5. VUE-DEVTOOLS: Chrome devTools extension

    INSTALLING VUEJS

    There are number of ways to implement VUEJS:

    1. Include the script tag in an HTML file
    2. Install using NPM
    3. Use the VUE-CLI tool along with webpack
    4. 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.

    Start Learning Backend Dev. Now

    Stop waiting and start learning! Get my 10 tips on teaching yourself backend development.

    Don't worry. I'll never, ever spam you!

    Sharing is caring :)

    Start Learning Now
    Learning for all. Savings for you. Courses from $11.99

    Comments

    Newsletter

    Get the latest Backend Dev. jobs, events and curated articles straight to your inbox, once a week

    Start Learning Now
    Learning for all. Savings for you. Courses from $11.99
    Top 6 Recent Posts
    Start Learning Now
    Learning for all. Savings for you. Courses from $11.99