A Summary of Front End Architecture built by VueJs

A Summary of Front End Architecture built by VueJs
A Summary of Front End Architecture built by VueJs , I want to share my experience regarding my latest project, where we handled it by creating a front end architecture platform that can help create any web application in a fast way.

Without getting in to details of what the project actually is, I will start by defining the steps we took in order to define the architecture needed to start working on this project:

  1. Understanding our needs (Project Scope).
  2. Reviewed most relevant frameworks (Angular, React & VueJS) to decide which is better.
  3. Enhance our knowledge base, especially the Javascript part so we finished from EcmaScript 5 & EcmaScript 6, VueJS, Stylus.
  4. Understand what most web applications consists.

And as i mentioned before, we did a Javascript frameworks comparison, and we decided to go with Vuejs as a JS framework, using Vuetify as a UI component framework for Vue. We finished the following resources before starting on the project:

  1. Vuejs Official Documentation.
  2. Vuex Official documentation and simple documentation.
  3. Vue JS 2.0 — Mastering Web Apps — Udemy course.
  4. Vue Router — Official documentation.
  5. CSS framework using Vuetify, Official documentation.

After that, I had a question I needed to answer; What components hold a website together? Thinking outside of the box, most websites these days consist of:

  1. Static pages.
  2. Grid listings (table/grid view).
  3. Charts.
  4. Dynamic Forms.
  5. Custom Components.

The first four components will cover 80% of any website, and the rest will become the customize/branded component that distinguishes your website from any other.

So we collected all these components in one boilerplate called Vuejs-Boilerplate and we committed it to Github publicly.

But what the main plugins (ready or hand-coded) we used to finalize the project, actually i want to share with you all plugins we use after did a research & comparison for each one:

  1. HTTP client manager using axios.
  2. Multilingual using vue-i18n.
  3. Notifications (hand coded).
  4. Loading — (hand coded).
  5. Documentation using docsify.
  6. Template (end users & admin users) based on router meta.
  7. CSS framework using Vuetify and stylus.
  8. Vuex (languages, notifications, loading and users).
  9. Charts using chart.js
  10. Cropper for images cropping using cropperjs.
  11. Backend rendering using puppeteer — we used it for snapshots, images, and pdfs.
  12. Text editor using Quill.
  13. Form validation using vee validate.
  14. Routers using Vue-router.
  15. Draggable using Vue.Draggable based on SortableJS.

Here are the tools we used for development :

  1. Vs code, including (Vetur & Vuetify-vscode).
  2. Webpack dashboard.
  3. Vuejs chrome extension.

I also highly recommend to subscribe to the following mailers:

  1. VueJS feed.
  2. Javascript Weekly.
  3. FrontEnd Focus Weekly

you can find the documentation here with all details.

Again here is the Vuejs-Boilerplate on Github

Demo Project Link

Roadmap:

  1. support PWA.
  2. support SSR by Nuxt.
  3. support Electron.
  4. Enhance Error handler.

Thanks to Tayseer Emam for assistance me in preparing this amazing project.

30s ad

☞ Real Time Chat With Laravel Broadcast, Pusher and Vuejs

☞ Real Time Single Page Forum App with Pusher Laravel & vuejs

☞ Vue JS 2 - The Complete Guide (incl. Vuex)

☞ Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

Suggest:

☞ Top 4 Programming Languages to Learn In 2019

☞ Create Shopping basket page With Vuejs and Nodejs

☞ Dart Programming Tutorial - Full Course

☞ Introduction to Functional Programming in Python

☞ Vue js Tutorial Zero to Hero || Brief Overview about Vue.js || Learn VueJS 2023 || JS Framework

☞ Learn Vue.js - Full Course for Beginners - 2019