Cookbook Rule #1 - Do Not Build Up Technical Debt
As developers we create different applications. Along the way we come up with various code recipes such as using JWT, GraphQL subscriptions, working with ORMs, drawing a K-line chart, etc.
These recipes are used in actual production environments, solving real world problems.
And best of all... the recipes can be reused in other projects and applications.
Hence, it is useful to keep these recipes in your "Cookbook" to be recalled when needed. The cookbook and recipes must be continuously improved along your journey as a developer:
- adding new useful recipes
- keeping existing recipes updated
- improving on existing recipes (cleaner code, applying best practices)
- removing obsolete recipes
This article is a short introduction to a VueJS+ExpressJS Cookbook that originally began life as a CRUD Component.
If you just want to dive in, visit the vue-crud-x project.
TL;DR ExpressJS & VueJS Web App Cookbook, Customisable CRUD Library, Cloud Container Deployment
VUE-CRUD-X - WHY & WHAT
Writing same code each time you work on a new application? Trouble keeping the libraries updated? Many fixes when dependency version changes?
Well... what started as a CRUD component for VueJS has grown to a full-stack app development cookbook, and further expanded into a way of building and maintaining multiple full-stack applications of different use cases with as little waste as possible, aiming to address those 3 issues above as much as possible!
A VueJS CRUD component which is customisable and extensible to suit more complex situations such as Nested CRUD, custom filters, forms, use of GraphQL or REST to access various datastores. Vuetify is used for frontend UI components but can be changed to alternatives such as ElementUI (with some effort)
Over time, the example projects to show the use of…
Below are two separate lists of available and planned recipes.
I shall not go through each one in detail to keep this article short. Instead, you can see how things work by building and running the code.
- Apollo GraphQL Client
- re-fetch queries
- optimistic UI
- 2FA login
- JWT, refresh tokens
- social logins
- Multi-part forms
- File uploads
- Canvas inputs
- OpenAPI documentation
- Web components
- cloud storage
- Mongo Stitch
- ORM & Query Builder
- cors, body parser, helmet, connect-api-history-fallback
- SPA, SSR, Static Site using NuxtJS
- Automated testing (to research on graphql testing, automated API generation)
We should bear in mind the following considerations which will have impact on code quality when writing the recipes in our cookbook:
- Reduce dependencies (especially in UI Framework)
- Clean and maintainable code
- Performance, stability and scalability
- Best practices
There are 3 ways to structure your application
- Single Page Application (SPA)
- Server-Side Rendered (SSR)
- Static Site
The table below shows the comparison between the 3 ways. Personally, I would prefer to use either SPA or Static Site.
The first iteration of the CRUD Component was developed in late 2017 due to a desire to create a better CRUD component using VueJS and Vuetify 1, This article was written about it.
The component was improved and new features were added along the way, introducing complexity and ambiguity.
With the coming release of Vuetify 2 (3Q 2019), there were many breaking changes and it was an opportunity for a code refactor to improve and do better.
One important lesson was to design the component to have as little dependency on the UI framework. Easier usage, cleaner code and better documentation were also other improvement goals.
The refactoring led to breaking changes in our CRUD component. However, the resulting code is much cleaner and has less dependencies. Let's take a quick look and explore further.
Run the following steps to clone, install and run:
git clone https://github.com/ais-one/vue-crud-x.git cd vue-crud-x cd backend npm i npm run i:spa npm run i:ssr npm run init-db npm run dev:spa # for SSR - npm run dev:ssr # for static content (1) npm run dev (2) see example-ssr/README.md on generating and serving static content
You will be presented with a login screen like the one below:
- Recaptcha and 2FA is disabled
- There is Firebase & Mongo Stitch login available but you must sign up first.
To login to protected pages, type test for both user ID and password, then click on the Sign In button
You will then be brought to the Dashboard. Clicking the menu on the left and selecting Books will bring you to the screen below where you can try the CRUD out:
An example file (from vue-crud-x/example-spa/pages/Author.vue) for configuring and using the CRUD component is shown below.
Please look at the gist below and documentation on the CRUD component here, to get a better understanding on the usage.
Hope you find this cookbook, its recipes and CRUD component helpful.
The cookbook is continuously being updated and improved to remain relevant and useful.
We are looking for contributors and maintainers to continuously make it better.
Thank you for taking your time to read this.