Vue.js continued...

 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 ground up in an 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 pervious post and its continuation now  will help us get started. 

The view state can be maintained to avoid re-rendering. This requires the use of a 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.  

Vue brings the best of other web frameworks such as Python Django and Java Spring. There is a router library available that supports nested route/view mapping, modular, component-based router configuration, route params, query, wildcards, View transition effects, Fine-grained navigation control, Links with automatic active CSS classes, HTML5 history, and Customizable Scroll behavior.  There is a loader for webpack that allows other webpack loaders such as Sass loader for style and Pug loader for the template. Custom loader chains can be applied to custom blocks in a .vue file.  These are automatically invoked with mere compliance to conventions. 

When we build a feedback or survey system, we simply define the template to comprise 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 vue file importing the corresponding ‘vue-star-rating’ module.  

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: 

<template> 

  <div id="app"> 

    <img src="./assets/logo.png"> 

  </div> 

</template> 

  

<script> 

import StarRating from 'vue-star-rating' 

  

export default { 

  components: { 

    StarRating 

  }, 

  methods: { 

    setRating: function(rating){ 

      this.rating= rating; 

    } 

  }, 

  data: { 

    rating: 0 

  }, 

  template: ' \ 

        <table> \ 

        <tr> \ 

        <td> \ 

        <table><tr><td> \ 

        <p>Feedback basis:</p> \ 

        <star-rating :rating="1" :max-rating="1" :show-rating="false"></star-rating> \ 

        <p>5.0<span class="subscript">/5</span></p> \ 

        </td></tr></table> \ 

        </td> \ 

        <td> \ 

        <p> Rate this package </p> \ 

        <star-rating @rating-selected ="setRating" \ 

            :rounded-corners="true" \ 

            :border-width="4" \ 

            :padding="3" \ 

            :animate="true" \ 

            :star-points="[23,2, 14,17, 0,19, 10,34, 7,50, 23,43, 38,50, 36,34, 46,19, 31,17]"></star-rating> \ 

        </td></tr></table>' 

} 

  

</script> 

  

<style> 

#app { 

  font-family: 'Avenir', Helvetica, Arial, sans-serif; 

  -webkit-font-smoothing: antialiased; 

  -moz-osx-font-smoothing: grayscale; 

  text-align: center; 

  color: #2c3e50; 

  margin-top: 60px; 

} 

</style> 

2. A working-sample application: https://1drv.ms/u/s!Ashlm-Nw-wnWyB2rx30dmeEoNxt_?e=ZHiGjt 

 

 

Vue.js

 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 ground up in an 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 us 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 on the same web page but Vue provides excellent integration with many other frameworks so it is easy to package code in single file components that end with the .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 that 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 interfaces, 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. 

A working-sample application: https://1drv.ms/u/s!Ashlm-Nw-wnWyB2rx30dmeEoNxt_?e=ZHiGjt 

 Implementing API services using a scoped Application   

Introduction: A well-known platform makes it easy to write workflows involving Service desk operations.  A scoped application is a custom plugin on that platform that implements a specific functionality that is usually not found on the platform. Most applications are like self-contained micro-services with their own set of tables, scripts, and user interface. This article tries to elaborate on what it takes to implement APIs as part of those offerings from a scoped application.  

Description: The platform mandates that the logic and data are packaged in artifacts that conform to pre-existing entities. There are entities for scripts, UI pages, and even custom tables but there is no description for implementing API services. APIs are powerful because they enable clients to be across the wire while self-containing all logic. Micro-services and their popularity are a demonstration of the power of APIs especially when the callers are mobile applications and personal desktops.    

API logic is authored in jar files. But there is no platform entity to register jar files other than the MID server Jar files which store specific rules. The scoped application can import APIs from the platform by bringing in dependencies many of which are jar files. The pom.xml file for building the scoped application can list these dependencies but the target of the build is usually a zip file of artifacts that the platform knows how to import. This calls for the API to be written in a scripting language.   

Both JavaScript and PHP allow API servers to be written such that they can be shipped as text files which is an artifact that can be registered to the platform alongside the others in a scoped application. They require to be started and monitored but usually the traffic to a scoped application does not need to concern itself overly with scalability and performance as much as it must be secure.  

The ways to secure APIs are usually independent of the implementation language because most usually follow the REST convention. The use of authorization headers, encrypted requests, API keys, and tokens make these endpoints securable. The logic of the API itself is usually conforming to the HTTP verbs to create, update, delete and list semantics. There might be some operational APIs such as to get statistics or for usage information or to populate metrics or to indicate that the API server is alive, but these are usually few. The bulk of the APIs is organized around the actions associated with those resources. These resources are also as custom as the scoped application. Platform resources are usually having their own APIs, so it is advisable to not write anything that pertains to the platform.  

A scoped application that collects feedback in terms of source UI page and corresponding user rating can, for example, allow a programmability aspect to the feedback collection table with the logic that makes it easy to query that table or for correlation with platform tables and UI pages.  The ability to enhance the logic in a scoped application and providing a programmability aspect that improves automation, scripting, and invocations via external scripts, applications, and services will tend to make the application more popular.  

Conclusion: It is possible and easy to implement API services in a scoped application where the application is dropped just like a tar ball and written using JavaScript.  

Reference: for sample scoped application discussion: https://1drv.ms/w/s!Ashlm-Nw-wnWyBYIKC6_TDLdliTd?e=NEldrF