Imprimir

Vue



1.  Framework name

Vue

2. Student List (with name and USP id)

  • João Francisco Caprioli Barbosa Camargo de Pinho Nº USP: 10748500
  • Felipe Tetzner Nº USP:
  • Raul Cotrim Ferreira Nº USP: 10748330
3.  Main Framework Features

  • Declarative Rendering
Vue extends standard HTML with a template syntax that allows us to declaratively describe HTML output based on JavaScript state.

  • Reactivity
Vue automatically tracks JavaScript state changes and efficiently updates the DOM when changes happen.

  • Virtual DOM
VueJS makes the use of virtual DOM, which is also used by other frameworks such as React, Ember, etc. The changes are not made to the DOM, instead a replica of the DOM is created which is present in the form of JavaScript data structures. Whenever any changes are to be made, they are made to the JavaScript data structures and the latter is compared with the original data structure. The final changes are then updated to the real DOM, which the user will see changing. This is good in terms of optimization, it is less expensive and the changes can be made at a faster rate.

  • Data Binding
The data binding feature helps manipulate or assign values to HTML attributes, change the style, assign classes with the help of binding directive called v-bind available with VueJS.

  • Components
Components are one of the important features of VueJS that helps create custom elements, which can be reused in HTML.

  • Event-Handling
v-on is the attribute added to the DOM elements to listen to the events in VueJS.

  • Animation/Transitions
VueJS provides various ways to apply transition to HTML elements when they are added/updated or removed from the DOM.

  • Computed Properties
This is one of the important features of VueJS. It helps to listen to the changes made to the UI elements and performs the necessary calculations.

  • Templates
VueJS provides HTML-based templates that bind the DOM with the Vue instance data. Vue compiles the templates into virtual DOM Render functions.

  • Directives
VueJS has built-in directives such as v-if, v-else, v-show, v-on, v-bind, and v-model.

  • Watchers
Watchers are applied to data that changes.

  • Routing
Navigation between pages is performed with the help of vue-router.

  • Lightweight
VueJS script is very lightweight and the performance is also very fast.

4.  Framework Advantages

  • Enhancing static HTML without a build step

  • Embedding as Web Components on any page

  • Single-Page Application (SPA)

  • Fullstack / Server-Side Rendering (SSR)

  • Jamstack / Static Site Generation (SSG)

  • Targeting desktop, mobile, WebGL, and even the terminal

5.  Framework Disadvantages

  • Splitted Community due to different Vue.js versions

  • Batteries not Included approach

  • Small business use and Community support

  • Small number of Vue-js Developers

  • Limited number of libraries and resources

  • Risk of over-flexibility due to javascript flexibility

  • Limited template functionality of components

6.  Main Application Niches

  • Due to its learning curve, the vue framework is prioritized for the development of initial projects by developers who are not yet familiar with a specific framework.

  • Vue excels at short-term projects, so its intuitive and simple approach allows for basic development in less time.

  • The framework is also well used in the development of PWA applications, resulting in applications similar to native without the need to use them, allowing the use of the page on any platform or browser.

  • Due to its ease and practicality, the framework is used for adaptation and operation in different projects

7.  Future Perspectives

So far, Vue doesn't seem to have a clear direction for the future, given that it's open source. Like many other open source projects, this framework is evolving in many different directions, as each developer can propose changes that meet their project's needs. There is currently a strong movement towards the migration of several libraries from Vue 2 to Vue 3 and maintenance of possible problems or limitations still existing in Vue 3.