Vue.js v3 released (pre alpha)
github.com
github.com
I don’t get it. Seriously, Vue 2 is great, so much fire and forget. There’s a bunch of problems that I am supposed to have, which justifies these changes, but I really don’t have them. Single file components solve it all for me.
This feels like Vue is trying to become React, but ... I’m using Vue because I think it’s much more valuable than React. I also get that it’s said that none of the things I like will change and I could just keep using it as is, but when was that ever really true - the new features always take more of the mindshare than keeping existing users.
This might be the curse of us all: the people who build successful things tend to be the most extreme users of their own thing. It helps you by making you have high standards at the beginning, but later on, if you keep serving yourself, you’ll end up with something like Angular where it eclipses past the sweet spot where most of the users are and goes for ever more advanced things with not so much of an audience, just because you’ve been solving your own problem and that has even a good metric thus far.
It's only when people think of Typescript as a new language where everything must have types things start to go wrong — Javascript won't ever be that. There'll always be a tiny but super useful library from 2004 which has its jQuery dependency removed just 6 months ago, and won't ever get Typescript support, and you have to use it — and if you're a purist that's going to spoil your lunch.
Don't be a purist — a project using Typescript at 50% of its codebase is vastly better than one that uses it at 0%, even if all its asserts are :any's.
I currently love Vue.js as it is. I have followed along with the fixes, improvements, and changes, and continue to think the same thing... "Am i just lucky that I never run into ANY of these problems? Am I using the framework wrong because I am NOT running into these issues?"
Like you, i mainly use single-file components. But to me, that is the best way to use Vue in an advanced project. So I have been wondering the same thing during this whole launch, "does anyone actually care about these changes or are we starting to make this beautiful framework into something that is unnecessarily complicated?"
If you're talking about changing from the current v2 object syntax to v3 composition api might be hard indeed, then I agree with you... but I'm hoping we'll get some compatibility layer soon enough.
EDIT: According to Evan we'll get a "compat build" in the RC phase [1]
[1] https://medium.com/the-vue-point/plans-for-the-next-iteratio...
Coincidentally, I've built a .NET core web app as well, with Vue.js handling nearly the entire UI. It's lightening fast since I'm letting .NET handle the backend and Vue handle the frontend. I built the entire thing on my little Macbook Air. Hit me up if you want to talk shop sometime.
I'm sure the ruby, python, rust folks are snickering...but .NET Core + Vue.js is an A-List webdev stack as fas as I'm concerned.
I am using Blazor for the first time in a .NET Core 3 app and I don't think I can ever go back to a JS Framework. If you like Vue then give Blazor a try, it's similar component-wise except Razor components functions are C# instead of JavaScript.
Only downside is browser support as client-side Blazor is experimental and compiled to WebAssembly. Server-side Blazor streaming is GA though, and it is widly supported if your consumers generally have fast connections, such as Enterprise uses.
https://github.com/vuejs/composition-api
I've been using the above for the last month and it's a far superior way of building components IMO. I've been able to reduce the amount of unneeded observer watchers and tracked properties by about 50%.
The distinction between simple raw JS objects and functions and what are Vue-tracked/computed properties makes the whole thing feel cleaner.
Typescript integration is also much better and doesn't feel like a hack like the Class component approach did.
Plus the eventual tree-shaking benefits of importing only the parts you need is great.
It's been a breath of fresh air when working with typescript.
I don’t think most people critiquing the new composition API have really tried it. This is not something you can get a good sense for just by looking at RFC API style docs.
It encourages better modern JS and simpler code which really matters in large projects. This brings Vue closer to simple JS functions instead of giant magic-y options interfaces, while still being fundamentally the same with templates/computed props/lifecycle/etc.
I have a personal project that's about 30k lines of jQuery on one page - if you want to see an example of what that looks like:
Over the weekend AWS reported my instance health went to Bad for a bit not sure why.
https://github.com/hyperandroid/CAAT
If it wasn't for that I would have never been able to stitch together a project as difficult as this.
I am not saying that something better isn't going to come along in the future. It almost certainly will... but React isn't going to disappear overnight. Just as jQuery is still being used and supported despite the fact that there is very little reason to use it anymore (most of it is natively supported with ES6/7/8 now) other than to support legacy projects.
No one got screwed over by using jQuery. It made life a lot easier for developers for many years until many of its' features were developed into newer versions of Javascript. Many corporations have converted jQuery codebases to using React/Angular/Vue. It serves a far less valuable purpose now, but no one is worse off for having used it during those years.
You really should be using one of these frameworks. If you aren't then you are doing A LOT of extra work that doesn't need to be recreated. There are mature frameworks that have figured it out for you and to not take advantage of that is only hurting yourself. They are most likely doing a better job at things like databinding than you will ever do yourself because they have teams of people all around the world contributing to it.
Part of being a developer is knowing that you can't do it all yourself. The expectations we have make it impossible to sit down and write every line of code yourself and get a project done to the expectations of our employers, clients, or ourselves in a reasonable timeframe. I understand the fear of spending time learning something like Vue or React and then needing to learn something else in 2-3 years. But then that thing that replaces Vue/Angular/React in 3 years will only last itself for another 3 years. If you keep waiting for the permanent framework to come around then you will die waiting for it to happen. Part of being a developer is constantly learning and adapting to this ever-changing landscape. Right now React/Vue/Angular are pretty important in any front-end project on the web now and not learning them is only hurting yourself and your career.
Btw, I kind of like Vue, just confirming the idea that frameworks may not be the best thing since sliced bread. They can be great with some conditions that are not met. Now, they are throwaway, like jQuery you correctly mentioned.
Today, things are much more stable. The big choice is React or Not React, and then Not React breaks down into the clones (Preact) and improvements (Vue, Svelte) over standard React. It's not the Wild West anymore. Similar concepts apply everywhere, and you're not taking the same kind of gamble by using a particular component framework that you were back then. The only old browser we still care about is IE11, and that's on a death clock. We're very close to entering the module JS Promise land. If web components ever gets sorted out, we'll even have compatibility of the different frameworks. It's becoming saner.
Also, I don't know if I'm just not understanding your full complaint properly, but personally I have not found your claims to be accurate, at least in my situation.
I use Vue and I feel like I've only gotten better with JS & general web-dev since. I occasionally startup smaller projects where I don't use any frameworks & I have not experienced any negative repercussions from my framework usage.
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?
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.
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.
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.)
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.
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
Suddenly, I don't hate JavaScript anymore.
- package.json
- src
|- main.js
|- components
|- pages
\- widgets
|- directives
|- helpers
|- mixins
|- router
\- store
This works for both small projects (but you might not have directives/mixins/router/store) and larger projects (but you might have to add more subfolders inside components/pages because you will start breaking down components).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.
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.
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.
This is in contrast to React which squishes the three into one monolithic class in it's .jsx (versus .vue's deeper seperation which leads to easier debugging).
Vue3 will release a monolithic syntax where you can combine script, styles and HTML all into a class - I don't think this is the correct direction for the framework to go.
Developer interface is just as important as internal functionality and performance. Let's not forget that.
Maybe in the next few years browsers will add some kind of reactivity to the DOM by default? And Vue/Angular/React will be less required to get up and running quickly with something small. And I think this would hit Vue 2.x the hardest.
You can already write a render method. In vue 3 the use case will be the same and most people will be using template tags in their single file components same as today.
The big change is that the availability of a new js api for the component. This is optional, and seen as an advanced use case, or for people who need better typescript support, etc.
It never did squish styles into a monolith. Strangely, that is exactly what Vue does with SFC, do you use Vue without?
What exactly are you talking about here?
First, React is (largely) no longer class-based.
Second, it's completely unopinionated about styles. You can write your own classes, use CSS-in-JS, whatever. Nothing about React components is concerned with styles at all, let alone forcing you to structure them a certain way. Vue is, if anything, way more opinionated about styles.
Nope.
This was already possible in Vue 2, and Vue 3 is not dropping Single File Components at all. In fact most recent demos showed Single File Components [1].
And Evan You announced that the Class API is cancelled btw [1]
I use Vue with Vue HTML templates + TypeScript, and all my bugs collect around the layer between the TypeScript code and the templates because the templates aren't typed.
You can use JSX to get typing but you run into hurdles going against the grain of how Vue is normally used.
Why reinvent it all so you can write something that looks a bit more like regular HTML? Is there some benefit I'm missing?
I guess it's more popular in Europe and China than in the US.
I've also seen a lot of new startups that use Laravel or .NET using it too.
React is hard to stop at this point as it swept over to other platforms. If it really gets to drive platforms with a single component standard and a unified events system, on the web, ios, android, windows, mac, linux, then i don't think a web framework will hold against this much longer tbh.
This used to kinda work with Vue 2 by passing down all your state through props.
https://github.com/sirixdb/sirix-web-frontend
https://dev.to/johanneslichtenberger/working-on-a-versioned-...
https://dev.to/johanneslichtenberger/building-a-web-frontend...
However, I'm in need of some help, as I'm completely new to web front-end development :-)