Vue.js Adoption and Architecture

1 post · Oct 2016 – Jun 2017

What this trail covers

GitLab is adopting Vue.js for new frontend applications, moving away from CoffeeScript and jQuery. The architecture involves small Vue applications with a main component, a service for data retrieval, and a store for state management. A mediator pattern is used to share state and avoid duplicate network calls in more complex scenarios. Future plans include standardizing component structure, creating reusable components, implementing a linter, and exploring Vuex. This post details the integration of Vue.js for its simplicity, ease of use, and ability to reduce code complexity compared to jQuery.

All GitLab trails

Jun 2017GitLab was at VueConf 2017!This post details GitLab's journey of adopting Vue.js, transitioning from CoffeeScript and jQuery. It outlines a specific architecture for small Vue applications involving a main component, service layer for API calls (using vue-resource), and a store for state management. It also describes a mediator pattern to share state and avoid duplicate API calls in complex pages. The post includes code examples for DOM integration, bundle setup, store/service classes, and the main component. Future plans for Vue.js adoption are also listed.
Feb 2017Our big Frontend plan revealedThis post details the strategic adoption of Vue.js and webpack for GitLab's frontend development. It outlines a plan to incrementally rewrite parts of the application in Vue.js, focusing on areas that would benefit from real-time updates and improved performance, such as the issue page, issue boards, and pipelines page. The integration of webpack is highlighted for its benefits in dependency management, code bundling (including tree shaking and code splitting), hot module replacement for faster development, and improved SVG handling. The post also announces the removal of Turbolinks, explaining its performance drawbacks with complex JavaScript and event listeners, and how this enables better page-specific JavaScript loading and Vue app integration.
Oct 2016Why we chose Vue.jsThis post details the decision to adopt Vue.js at GitLab, highlighting its simplicity, ease of use, and ability to reduce the amount of JavaScript code required for complex problems compared to jQuery. It provides a simple Codepen example and explains how Vue.js balances structure and flexibility. The author contrasts Vue.js with Backbone and Angular, positioning it as a 'socialist' approach where the developer is in charge but has a safety net. The post also mentions the availability of excellent documentation, a strong community, and supporting libraries as key factors in the decision.
Advertisement