Frontend framework research
Last week in my current job was definitely important for company future. And my personal responsibility was to find a way for comparing a lot of today popular frontend frameworks, and to make a choise for one.
First of all I looked at Vue ecosystem because our current FW is Vue2. We using it not for whole project but for new features only. So we merge it together with old legacy codebase.
And I think that newest Vue and vue-based frameworks is better way for my team. It should be easest entry threshold of all. It is one of 3 popular FW at present moment. And Vue-team had made last version (I mean Composition API) very close to React. So our new team members, which has already been experienced with React, get an easy and clear way to learn our codebase if it would base on Vue 3.
When we talk about expectations of new FW with my team, we have found some points. It would be nice if our new FW have: latest Vue version at the moment, large native component library with usable gallery and docs, flexible and adaptive UI and an access to SCSS variables to set up custom corporate styles.
I have founded about 10 different FW based on Vue, and have made clear setup of each one according to instructions. I can say, that not all of their setup actions has finished correcly. May be that was my fault, but I'm sure this is very important thing for opensource projects is that other guys (which do same research as me) will make same mistakes. Thats why you (fw vendors) need to reproduce your installation instructions after every release and should try to do it as easy as you can.
Here is list of my top 3 Vue frameworks that I've looked at:
-
- Quasar: Best of the best. I've already known about that FW, and even have some repos with it (don't remember exactly how much). I'd found preinstalled Vue3, TS, Vite, Pinia, ESLint, Material UI, vue-router and own client for build operations. About 30 minutes for docs learning, repeat instructions and fix some problem with routing.
-
- Core UI: Nice own component style. Problems with preinstalled prettier (found and errors immediately when I type some tags with CR line brakes). I had found a solution but there a couple of my time has been wasted. Also there is no preinstalled storage inside (but Jest+Cypress).
-
- Element Plus (ready boilerplate repo). Beautifully designed gallery of components, no problems with setup. But I had some problems with styles tuning, and had found unexpectable component behaviour when doing a full-clickable 'card'.
^
| Pinia store ^
Q | Vue-router C | E ^
U | Familiar UI O | Vue-router L |
A | SCSS Vars R | SCSS Vars E |
S | TS E | TS M |
A | ESLint | ESLint E | SCSS Vars
R | Jest U | Jest+Cypress N | TS
| Vue3 I | Vue3 T | Vue3
Some fw I refused by reasons.
- Nuxt 3: what should I do with version based on Vue3? It is very scarce documentation, just concerning migraion from Vue2. No components, no popular boilerplates.
- Nuxt 2: just with Vue 2.
- Vuetify: vue version in repo right now: v2.6.7
- Gridsome: I love it but jamstack is not for our project. Sad.
Other founded fw is:
- Element Plus + Nuxt (try to install EP to empty Nuxt project manually - failed)
- Vue Material (just beta right now)
- Nuxt 3 + BootstrapVue (manual too)
So, just want to say at least: that was an example of how developer(s) make choise for new tools. That tools will be together with team for few next years, and there are a lot of small but important things that influence to the choice.