I was looking at Vue the other day but it seem to have the same issue for me as the other major frameworks: they need a lot of ceremony to start working with it and has a quite steep learning curve at the beginning.
Since I don't plan to scale my app to a global level, can anyone recommend Vue to pick up or should I look elsewhere?
I made a little jsFiddle for you to demonstrate. This is just including the Vue.js library on the page and using it to do stuff. No build environment or anything.
If you're not planning on building a large app, I'd say it's a better choice than React for that alone. React excels at scale versus its rivals, but Vue is much easier to jump into and be immediately productive with.
I'm not up enough on the differences/advantages with the approach that Svelte takes. But as a backend developer myself, this seems more intuitive and probably has some advantages in terms of performance.
I found https://www.taniarascia.com/getting-started-with-vue/ as a better initial starting point compared to the Vue website.
I've been using Vue for the past few weeks on a for-fun project and have been loving it once I grasped the basic concepts.
Something about Vue is just.. simple. I picked up on it lightning quick and it reignited a fire I'd lost for development. I even did a bunch of side projects because of _just how quickly_ you can crank out code.
React I was writing all sorts of bogus looking JSX and it made me want to throw myself off a cliff, AngularJS was so.. verbose.. (granted it's very outdated by today's standards and of course modern Angular), but Vue actually made me spend my free time writing code again.
It really is excellent - download vue-cli and give it a shot. The HelloWorld app it'll generate is crazy simple, you literally need to mess with like 2 files right off the bat, and both are super self-explanatory.
And single-file components are crazy convenient and powerful.
On the simple end you can pull the framework from NPM or a CDN and insert it into your HTML. Then insert a script tag with your data and methods to use for Vue. That is really it. 2-way databinding is as simple as adding a `v-model` to your html tags like your inputs.
Of all three, you will find Vue has the least amount of "ceremony" to get started.
Of course as you get into advanced projects you probably want to start working with something like Nuxt.js (for Vue) or Next.js (for React). These have a lot more setup and learning.
But on a simple level Vue is pretty dead-simple to use. Far easier to use than React in my opinion.
my first time both with Vue and the whole webpack & npm world went like this:
Day 1 I didn't understand anything
Day 6 I started getting confortable with the stack
Day 30 had working prototypes for a multilanguage site
One year later I have made three websites with about 1K visitors a month, and two vue-electron 'apps', one of them being a Digital Signage client for large videowalls at work. It is strange in the beginning, but if you have programmed before, it gets easier as you work with it quite fast
If you know typescript I'd recommend angular (v. 7 or up). It's most likely the one with the steepest learning curve, but at the same time it offers an out-of-the-box solution, with a very complete CLI, so you can actually start right away with a full front end app that has everything you need. You can bother understanding the underlying layers well past you release your app. To accomplish the same with react and Vue you need to add libs or frameworks, so you need to be more aware of all the tech involved. So in the end there's a learning curve here as well.
Another good reason to pick angular IMHO is that you actually can ignore it. This is rarely discussed. You can basically write your app as you would do in nodejs (with TS of course) and rely on angular only for the UI. I import my non angular code in the components TS files and handle the logic of the app without nearly any angular service. The only angular services I use are those for routing and state management (redux), and to use them in non angular code (e.g. Classes) I refer the object of the service on a property of a custom constant object, and thanks to the fact that JS references objects, I simply import in my classes my custom constant.
Like
import { stateData } from ...
...
stateData.redux = this.redux
...
Somewhere else:
stateData.redux.store ...
For a new job possibility I have now been learning Angular and Typescript and I am really liking how much Typescript simplifies the boilerplate of components etc. My angular components are much more readable than my deeply nested Vue components.
There are some class component plugins for Vue 2.x but it seems that this is being dropped now for 3.x in favor of composition functions. Looking at code samples it seems to mix the worst of both worlds to me.
I'm liking how much less cognitive load I've had with just going the 'angular way' whereas with Vue I had to make a lot of decisions for your basic needs (HTTP data access, form validation etc.)
Suddenly, I don't hate JavaScript anymore.
However, maybe we should use https://www.npmjs.com/package/@vue/composition-api instead of giving Vue.js 3 a try if some things are simply not implemented as of now.
I tried using Vue, and started by trying to replace a small 100 line Jquery component and it quickly turned into 300 lines of Vue code. Like eating broccoli, I know that using Vue over Jquery is good for you, but it's still hard to swallow that first bite.
- SFC (single file components) are your friend
- Skip vuex until you need it
Everything else (what makes up a component: props, data, getters; v-if, @click, etc.) should probably take a day to get familiar with.
- package.json
- src
|- main.js
|- components
|- pages
\- widgets
|- directives
|- helpers
|- mixins
|- router
\- store