First, what is Vue?

Vue is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS and JavaScript, and provides a declarative and component-based programming model that helps you efficiently develop user interfaces, be it simple or complex. Vue has big and strong community to support with many good plugins.  Contactpoint often chooses VueJS to develop our client’s web and desktop applications, to facilitate fast development of modern user interfaces.

By way of summary, Vue has the following characteristics:

Progressive Framework

Vue is a framework and ecosystem that provides tools to create most of the common features needed in development of user interfaces. However, the web is extremely diverse – the applications we build for the web may vary drastically in form and scale. With that in mind, Vue is designed to be flexible and incrementally adoptable. Vue can be used in different ways, for different scenarios, including:

• Enhancing static HTML without requiring the HTML to be compiled – this allows a modern user interface component to be added into a pre-existing website.
• Embedding as Web Components on any page. Again, this makes it possible to add a new component, with a modern UI design, into an existing website or application.
• Single-Page Application (SPA) – the name given to an application which has only one “page” (i.e. one address) but presents a completely different set of screen elements depending on the way the user interacts with the application.
• Fullstack / Server-Side-Rendering (SSR). Fullstack refers to an application which is split into layers due to complexity and ensuring maintenance and performance.  Those layers include user interface (aka ‘frontend’), API layer through which the frontend sends or requests information, Server layer where the core logic resides and draws on data within a database or other data store.  SSR refers to rendering the Vue component with data fetched into static html – this is important for SEO of pages using Vue because it ensures that the data within a page is visible to the search engines.
• JAMStack / Static-Site-Generation (SSG). A pre-rendered, self-contained application, which with Vue can include sophisticated user interface components.
• An application for a desktop device, mobile, WebGL or even a terminal device.

In summary, there are many ways that Vue can be used!

Single-File Components (SFC)

SFC is a defining feature of Vue, and the recommended way to author Vue components.

SFC allows us to define the HTML/CSS and Javascript (JS) of a component, all within a single .vue file.

A single-file component is composed of three parts:

• The <template> section which contains the component’s markup in plain HTML.
• The <script> section which contains all the JS logic within that component.
• The <style> section which contains all the component styles. Alternatively, it can make use of an external css file, which we will often lean towards for code re-use.

Your application can then access all the properties of the SFC via an instance of the component, which contains the data, methods, computed properties, lifecycle hooks, etc.

An example of the SFC is shown in the screen grab below:

Performance

Vue is designed to be performant for most common use cases without much need for manual optimisations.  However, there are always challenging scenarios where extra fine-tuning is needed.  In which case, Vue enables the developer to override and adjust a particular component to meet the specific needs of the application.

New Features in Vue 3

Vue is undergoing constant improvement, which ensures that the framework keeps pace with the latest trends in user interface development, and hardware / operating system updates.

The new features of Vue 3 are also heavily targeted towards improving the ability of developers to create easy to maintain applications, and achieve high performance applications.

The most recently added features include:

• Async Components: in large applications, we may need to split the app into many smaller components and only load a component from the server when it’s needed. To make that possible, Vue 3 has a defineAsyncComponent function which is similar to lazy loading to improve the performance of your application.
• SSR rendering: the speed of server side render has been improved considerably compared to Vue 2. SSR can be very important from a search engine optimisation point of view, as well as performance of the application.
• Composition API: The Composition API new in Vue 3 makes it easier to extract repeatable parts of the code along with its functionality. The Composition API focuses on the Javascript (logic) side of application code and combining the logic of related code together, which is more conducive to code maintenance.
• Portals: a new feature which allows the application to render a component, or part of a component faster, in a different place in the DOM (document object model) tree.
• Fragments: Vue 3 supports multiple root node components in a template without any issues using the new Fragments API, which is easy to maintain the code, without using unnecessary wrappers.
• Multiple v-models: This change provides a directive to achieve two-way binding on a component, which is a shortcut to passing in values and listening for an input event.
• More advanced components: there are more complex and good components with full support from Vue 3 community.

Contactpoint has built numerous sophisticated applications using Vue.

If you are considering the creation of a desktop or web application, the use of Vue JS may be the appropriate technology to use.  Feel free to get in touch with Contactpoint to discuss your application requirements.

by

This entry was posted on Monday, February 14th, 2022 at 6:40 am and is filed under Technology. You can follow any responses to this entry through the RSS 2.0 feed.You can leave a response, or trackback from your own site.