Lessons learned when writing the first Vue.js application.

The application I wrote and shared at https://1drv.ms/u/s!Ashlm-Nw-wnWyB2rx30dmeEoNxt_?e=ZHiGjt for the purposes of a Feedback user interface as discussed here was a series of trial and error because I was experimenting with different vue packages. As such the Vue framework works very well out of the box in terms of organizing and maintaining the code and data for a user interface but there was a learning curve associated due to the following reasons: 

1. The rendering library to package the single composable file (SCF) for a view in terms of a template, style and script are better chosen to be WebPack rather than relying exclusively on Vue-CLI-service although both allow compiling and running the Vue code. By the way, I love the similar sounding ‘Vue’ name since it rhymes with ‘View’ 

2. The Vue-CLI-service requires a separate set of commands to be put on the package.json scripts section as opposed to the webpack which is rather nifty with simple “npm run dev”. That is just the surface, the chores required to get to that stage can cost you if you did not plan ahead with one of the two choices rather than both. 

3. The webpack also performs well when the application is clearly written in the form of the file organization required by the webpack because the module compilation and invocation on the console as well as on the browser developer tools is helpful to walk through. Any deviation for whatever reason might require a wild goose chase. 

4. Packages that help with logging when running ‘npm run dev’ with vue.js applications. Please note that we skip the discussion on ‘-ddd loglevel’ with that command. 

5. Npm require loglevel 

• Single lightweight  

• Invocable in page with the script tag 

• Small footprint 

• Npm install Winston 

• One of the most popular configurable logging block 

• By default or for redundant logging 

• Npm install Jaeger 

• Specifically helpful to vue applications for trace.

• Prefer advanced functionality 

•  

6. There are quite a few dependencies that are tempting to add to the application with “vue add” or “npm install” but less is more in this case and while you are at it, prefer the npm install over the other. 

7. The HTML, style and script have their place and yes the composability is appealing but please stick to getting the HTML right because typos are extremely hard to find overall unless you are willing to view the page source and search for the section that will let you know where you made it. 

8. Please prefer the host as ‘0.0.0.0’ and port in the upper 8000 if you are using your environment for hosting other applications and allow disableHostCheck in build/webpack.dev.conf.js 

Sample Application: https://1drv.ms/u/s!Ashlm-Nw-wnWyB2rx30dmeEoNxt_?e=QPBgRa 

Feedback example

 Writing an application with Vue: 

 

Introduction: Vue.js is a progressive framework for building user interfaces. It is one of the most popular JavaScript frameworks to make it easy to build user interfaces from the grounds up in incremental manner. The core library is a view only framework and as such can be linked into web pages directly from a content data network. For example, if we want to build a feedback or survey solicitation system, the following article will help get started. 

 

Description:  A sample web page to be written in Vue could start with just the template, style and script as shown in reference 1. All of this can be in the same web page but Vue provides excellent integration with many other frameworks so it easy to package code in single file components that end with .vue extension. These can then be combined into the main page with the help of component declaration and use. Each view file allows specifying a template, script and style snippet. 

 

A vue instance consists of a root Vue instance and includes a tree of nested, reusable components when the application is well-organized. The instance created with a dictionary for data and methods which tells the Vue’s reactivity system how to respond when the data changes from the user interface. There is a freeze method available which can prevent the existing properties from being changed but for the most part, a vue instance responds to the user’s directives. 

 

As with all user interface, the vue instance goes through a lifecycle and there are hooks available such as mounted, updated and destroyed so that the stages can be switched. All lifecycle hooks are called with their ‘this’ context pointing to the Vue instance invoking it. 

 

The syntax used to describe the template, style and scripts do not change from what the HTML expects them to be. The data binding happens with the “Mustache” syntax and can include raw HTML with the v-html directive. List rendering occurs with an iteration over an array specified with the v-for directive. Filtering happens with the v-if directive. 

 

State can be maintained to avoid re-rendering. This requires the use of keep-alive directive surrounding the component Together with data, methods and state, the vue instance can be successfully tested in all three forms: unit-testing, component testing and end-to-end testing.  

 

When we build a feedback or survey system, we simply define the template to comprise of the component items we want to show. For example, a five-star feedback rating system will comprise of those five stars as radio controls that can be turned on in sequence on mouse hover and all of them can be specified together in a single floating action button also called a ‘vue-fab’. This  vue-fab can then specify methods that can be as simple as logging the rating given by the user or making API calls for sophisticated actions.  

  

Conclusion: The framework provides incrementally adoptable components that can be mixed and matched to create a view and complex controls, logic and workflow can be broken down and packaged into granular and reusable components. 

 

Reference: 

1.  The index.html for a rudimentary Vue.js application: 

<!DOCTYPE html> 

<html> 

<head> 

  <title>Sample application </title> 

  <script src="https://unpkg.com/vue"></script> 

</head> 

<body> 

  <div id="app"> 

    {{ message }} 

  </div> 

 

  <script> 

    var app = new Vue({ 

      el: '#app', 

      data: { 

        message: 'Hello Vue!' 

      } 

    }) 

  </script> 

</body> 

</html> 

2. The sample application