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:
- Understanding our needs (Project Scope).
- Reviewed most relevant frameworks (Angular, React & VueJS) to decide which is better.
- Understand what most web applications consists.
- Vuejs Official Documentation.
- Vuex Official documentation and simple documentation.
- Vue JS 2.0 — Mastering Web Apps — Udemy course.
- Vue Router — Official documentation.
- 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:
- Static pages.
- Grid listings (table/grid view).
- Dynamic Forms.
- 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:
- HTTP client manager using axios.
- Multilingual using vue-i18n.
- Notifications (hand coded).
- Loading — (hand coded).
- Documentation using docsify.
- Template (end users & admin users) based on router meta.
- CSS framework using Vuetify and stylus.
- Vuex (languages, notifications, loading and users).
- Charts using chart.js
- Cropper for images cropping using cropperjs.
- Backend rendering using puppeteer — we used it for snapshots, images, and pdfs.
- Text editor using Quill.
- Form validation using vee validate.
- Routers using Vue-router.
- Draggable using Vue.Draggable based on SortableJS.
Here are the tools we used for development :
- Vs code, including (Vetur & Vuetify-vscode).
- Webpack dashboard.
- Vuejs chrome extension.
I also highly recommend to subscribe to the following mailers:
- VueJS feed.
- FrontEnd Focus Weekly
you can find the documentation here with all details.
Again here is the Vuejs-Boilerplate on Github
Demo Project Link
- support PWA.
- support SSR by Nuxt.
- support Electron.
- Enhance Error handler.
Thanks to Tayseer Emam for assistance me in preparing this amazing project.
☞ 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)
☞ 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
☞ Learn Vue.js - Full Course for Beginners - 2019
☞ There Is No Best Programming Language