9 ms·
Vue.js 1.0.0
- EvanYou 11y agoAuthor here - thanks for the submission, I was actually planning to do it tomorrow :) Anyway, for those of you who are not familiar with Vue, here's a blog post explaining why it's worth taking a look at: http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/ http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/
- timetraveller 11y agoGreat work!
- rrrhys 11y agoAlso Laracasts has a great series on VueJS - mentioning it since it got me excited about VueJS and front-end JS frameworks in general. https://laracasts.com/series/learning-vuejs https://laracasts.com/series/learning-vuejs
- mzaccari 11y agoExcellent blog post to introduce the vue.js concepts (http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/ http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/). I was able to get up and running pretty quickly with a good understanding of the tool. Thank you for putting this together.
- ajisai 11y agoNice work! Please tell me the meaning of `Evangelion`... Is the japanese anime?
- iKlsR 11y agoYes, the releases are anime themed.
- lemevi 11y ago> More importantly, there’s no need to worry about calling $apply in a timeout, or calling setState(), or listening to store events Calling `setState` is not a big deal and neither is dealing with stores. It's very simple and you keep your state separate from your HTML. At this point I probably can't do web development without JSX and not be miserable. The days of separate templates are hopefully forever behind me. Not trying to dismiss your very hard work I'm sure, but React has taken us into the future. Maybe with esperanto you could add templates into your own JS or make it work with JSX and react-dom.
- sdegutis 11y agoEvan: I'd love to know your response to lemevi here. In particular, what you consider the strengths and weaknesses to be in both your approaches, and why you prefer yours.
- andrezsanchez 11y agoIt would be neat if Facebook had implemented JSX as a framework-independent transform rather than a React-only one, that way other frameworks could use the pretty XMLish syntax rather than strings or JS objects.
- tiles 11y agoThere are alternatives though, like JSX implemented in sweet.js: http://jlongster.com/Compiling-JSX-with-Sweet.js-using-Readtables http://jlongster.com/Compiling-JSX-with-Sweet.js-using-Readt...
- rvikmanis 11y agoIt has: https://facebook.github.io/jsx/ https://facebook.github.io/jsx/
- andrezsanchez 11y agoEmphasis on "implemented" haha. At least this makes it more open since someone can come in and make their own implementation. As it currently stands I don't think you can use Facebook's implementation to transform JSX to a framework-agnostic object.
- legutierr 11y agoVery cool, Evan. Scoped style tags are a very cool feature. Could I ask you to describe how you implemented this, how you made it work?
- taylorzane 11y agoSo glad to see this hit 1.0. VueJS has, by far, exceeded my expectations in a JS framework. Certainly faster, and lighter, than any other framework that I could find. Great job Evan!
- teen 11y agohow does it track data changes without an angular-style digest cycle?
- cheapsteak 11y agoI think it makes use of ES5.1 getters and setters (hence no IE8 support, if that's a thing you care about)
- ausjke 11y agohow is this compared to mithril? https://lhorie.github.io/mithril/ https://lhorie.github.io/mithril/ , trying to find a front-end js framework/library these days for an embedded product (use browser to configure it), angular seems a bit heavy for me, have not learned react yet.
- wyattjoh 11y agoI'm still using Mithril quite extensively, really worth it for the projects I've used it for. Felt like React without all the extra features (slimmed down).
- cheapsteak 11y agoThat's a neat idea What OS and browser will it run?
- girvo 11y agoMithril runs in IE8+, currently, though that will be changing in the future.
- lhorie 11y agoHuh, where did you hear that? I wasn't planning on dropping support for IE8 in Mithril, if possible.
- girvo 11y agoOh apologies, I read in the Bucket List that it was happening but I just checked and it's only mooted at this point! https://github.com/lhorie/mithril.js/issues/802 https://github.com/lhorie/mithril.js/issues/802
- cheapsteak 11y agoI meant what browser will the embedded system run?
- swsieber 11y agoI haven't used a ton of javascript frameworks, but here are noteable things from my point of view (my own tl;dr): * Doesn't support IE8 and below because it probably uses ES5.1 getters and setters - no more manually watching an object * Supports component based programming - css/js/html in one file. But it supports any preprocessor, so it could be sass, coffeescript and jade * The components are easily composable * Excellent module support / support for browserify or webpack * Clean upgrade path: adds new features without breaking the api, but does through deprecation warnings to guide the upgrading user * 100% code test coverage * Has a nice, simple built in router * Has a very nice release page / layout I haven't been this excited about a framework in a long time. I'll probably use this in my own personal project. Edit: Wow, the docs look great. For being 99% a one man job this is incredible. I'm very impressed. If I was a employer I'd hire you. Second Edit: Here's a comparison page for Angular, React, Ember, Polymer and Riot. http://vuejs.org/guide/comparison.html http://vuejs.org/guide/comparison.html . Of course it's in support of Vue, but it was an interesting read.
- cheapsteak 11y agoHis response time for resolving Github issues is also remarkable I usually make a reproduction in the evening and find out by next morning if there's been a fix or if I've been doing something wrong Has made using Vue in production feel very safe
- ddutra 11y agoVueJS is great. I am impressed with the amount of work that Evan put into this release in the last couple of weeks. One RC after another. Thanks Evan.
- andrewray 11y agoI've always heard good things about Vue from its users. I have to compare all Javascript frameworks to React, because to me React feels like the first framework that got it "right." The API of React is surprisingly thin. Looking at Vue templates, the syntax seems quite alien, halfway between Django and Angular: <th v-for="key in columns" @click="sortBy(key)" :class="{active: sortKey == key}"> And the API seems to needlessly separate HTML and Javascript, with some strange (to a newcomer) API calls: Vue.component('demo-grid', { // moving away from JS classes template: '#grid-template', // Why separate view code from view code? replace: true, // what is this? Has anyone heavily used React and Vue and have an argument for what this thicker API affords?
- molukk 11y agoIf I read the documentation correctly, you can also pass it a string to be used as template. If the string starts with a '#' it will act as a querySelector. http://vuejs.org/api/#template http://vuejs.org/api/#template
- recursive 11y agoI love this feature. Putting html fragments in string literals in javascript seems pretty awkward to me.
- girvo 11y agoI've written large apps in both; interestingly, I've built the same app twice as well: once in Vue.js and once in React. I'm also in the process of building another very large front-end in Vue.js at the moment. The big thing is that while I personally adore React, it does require ceremony to get stock-standard behaviour. We recently onboarded a new developer (a friend of mine), and teaching him React + Flux (Alt.js) was infinitely more difficult than teaching him Vue.js -- the "thicker" API (which is still an order of magnitude thinner than Angular or Ember) means you don't need to either reach out to other libraries to achieve tasks that you otherwise would need to in React. Now, that's not a bad thing on React's side; it's a view-layer, not much more. That's okay, and a good thing! For building components rapidly in a regular "client -> designer -> cut-up -> development" workflow, Vue.js is streets ahead of React in terms of code required. But for building very large applications, React's smaller API means that you can guarantee behaviour, and things are consistent. Basically, they are both brilliant libraries. I highly recommend both. React and Vue.js are similar in a lot of ways: they're both tiny little view layers that are component focused and have modern, ecosystem aware build tooling. They differ in that Vue.js is "classical" (though not really, it's far nicer than the older systems) MVVM which has been proven time and time again to be a good architectural choice, whereas React.js takes a more functional (as in programming) approach to the problem -- though I'd argue not far enough down the functional side, which is why I've been enjoying Cycle.js so much! unless you get bitten by event pooling...
- piotrkaminski 11y agoI'd love to see a comparison of Vue.js with Aurelia (http://aurelia.io/ http://aurelia.io/). In my mind, Vue.js and Aurelia are the two front-runners for the next "right-weight" framework (whereas React is the lightweight champion, and Angular 2 likely to be the heavyweight winner by default).
- hardwaresofton 11y agoVue's got a much longer track record, correct? Aurelia was only recently spawned (at least it feels like yesterday), and they still do not have a production release out. Also, I would crown knockout the light-weight champion (both in function, and concept), and ember the heavy-weight champion
- jiaweihli 11y agoRivets[1] is an even lighter light-weight champion. [1] http://rivetsjs.com/ http://rivetsjs.com/
- hardwaresofton 11y agoWow, thanks for posting this! At first I tried to find reasons why knockout was still the light-weight champion, but ended up taking a look through Rivet's usage and info, it looks pretty amazing, and crazy lightweight. Only thing missing is a capable router, and I think you'd be off to the races with this thing, awesome.
- piotrkaminski 11y agoYou're right, Vue's been around longer, but Aurelia's release appears to be just around the corner and they have a team behind it, so I'd call it even. I'm mostly interested a comparison of the technical approaches since I think it's too early as yet to properly assess their communities.
- hardwaresofton 11y agoWhile I don't have any experience with Vuze, I do have high hopes for Aurelia. I've worked with the beta versions, and found the API to be pretty workable/clean. I personally like the background of the main dev(s?) behind Aurelia. IIRC, they worked on knockout->durandal->angular->aurelia, and I think the apps they stopped-by in before conceiving Aurelia have just the right concepts and features to make for a really compelling large-ish framework. A little dissapointed about how hard it is to bootstrap it though, I really like to start projects from scratch (empty folder), and found it a little difficult to just pull together easily (without downloading their starter-zip or whatever).
- djyde 11y agoI'd used Vue from it 0.11.x to 1.0.0, not only in my personal project, but also in my company producton. Vue.js was impressed me when I first visited it offical guid and document site. I did not believe it made by a Chinese developer( no offense :P ). Lots of people like to have a comparison between Vue.js and other framework/library. I need to say after using Vue.js, I 'd never use Angular again. Using Angular is painful for me, it has too many opinionated solution. That make me difficult to use my own toolchain. Everyone said that there are too little components for Vue. It's right, so I begin to do something. I created a vue-component organization. I'll make more and more Vue component. At the same time, requesting a component you want to be achieved is welcome: https://github.com/vue-component/request https://github.com/vue-component/request
- jtwebman 11y agoSorry I can't get past the two way data binding. I have seen the issue it causes and how one way makes things so much easier to reason with. I do wish the project the best of luck though as all these frameworks do a great job at borrowing from what others do well.
- EvanYou 11y agoIn Vue two way data binding is just syntax sugar for handling form input events. If you are talking about component state, the default mode of passing data in Vue is in fact one way.
- wampler 11y agoI am about to start a project in Vue and I am so glad 1.0 is out
- twsted 11y agoI like it. In fact I like it more than React, which I am not using (still a happy Backbone user). A thought that I share, from the guide: "API-wise, one issue with React (or JSX) is that the render function often involves a lot of logic, and ends up looking more like a piece of program (which in fact it is) rather than a visual representation of the interface. For some developers this is a bonus, but for designer/developer hybrids like me, having a template makes it much easier to think visually about the design and CSS. JSX mixed with JavaScript logic breaks that visual model I need to map the code to the design. In contrast, Vue.js pays the cost of a lightweight data-binding DSL so that we have a visually scannable template and with logic encapsulated into directives and filters." What do you think?
- seivan 11y agoMassive render() sounds like those massive viewControllers from Cocoa. With experience it slowly goes away. But yeah it can be daunting to look at sample codes and see 300 lines of render(). It helps if it's broken down in named function calls, but still makes you jump around.
- k__ 11y agoYou can always decompose the components, if your render() gets to big.
- xixixao 11y agoIt is a trade off. It is easy to implement any logic with React. Simple databinding works well until you need that logic.
- Offler 11y agoIt sounds like the sort of mistake newbie React developers make, you quickly learn to decompose your render into smaller components.
- duebbert 11y agoNot commenting here often but I'm a big fan of VueJS! Really hope this will give it more traction now. It has such a small learning curve with then more and more powerful features (self contained components FTW!). Evan is fantastic and bugs are fixed within hours. Been using Vue for over a year and it replaced an ambitious Angular project for internal operations management which was getting out of control. Migrating to and using VueJS was like a breath of fresh air. For me it's the best compromise between React and full frameworks like Angular/Ember. Can't believe this isn't backed by a megacorp yet and just a personal project. Congrats, Evan, and thank you!
- rdsubhas 11y agoI normally hate +1s, but same here! We ran a VueJS workshop last year for budding web developers, since it is infinitely more easier to teach basic concepts like data binding, templating, filters, scopes, etc. with VueJS than Angular. https://twchennai.github.io/geeknight/aug2014.html https://twchennai.github.io/geeknight/aug2014.html And here are all the codepen exercise books http://codepen.io/collection/zvnFi/ http://codepen.io/collection/zvnFi/
- mikeemisme 11y agoVue is a breath of fresh air. Easy to understand and get running with, while having some really sweet features (and supporting libraries) if you wish to dig deeper. Another thing I take into consideration: Aesthetics and the give a shit factor. The website and syntax (imo) are beautiful and succinct, and Evan's work ethic and responsiveness is incredible.
- tasnimreza 11y agoCan someone make it clear how two way data binding works here ? I didn't get it :(
- oweiler 11y agoThis one looks very similar to Ractive http://www.ractivejs.org/ http://www.ractivejs.org/ Which isn't a bad thing :).
- mercer 11y agoCould someone tell me a bit about how the two differ? I've built a decently-sized app with Ractive.js and really like it, and I might be working on an app soon where either Ractive.js or Vue.js seem like a good option. From what I've gathered so far, Vue seems like it is basically a better Ractive, and it makes more sense to use it for my next project. But perhaps I'm missing some important differences between the two?
- nailer 11y agoRactive uses mustache templates, which I prefer as - nearly every web developer already knows mustache - mustache distinguishes what's HTML and what's not I also like ractive because it has two way bindings, and promises for when DOM changes, but maybe Vue also has those.
- mercer 11y agoFrom what I gather it's quite possible to use mustache for Vue as well, and it also does two-way binding. I'm mostly interested in the differences between the two. That said, the reason I used Ractive in an earlier project instead of React is exactly what you point out. Mustache is much easier for other developers to start using.
- gedy 11y agoI've wondered the same, as I really like Ractive. Briefly what I found is: Vue seems using "magic mode" vs the Ractive.get/Ractive.set. Ractive uses virtual DOM, Vue does not.
- systemz 11y agoIf anyone want to see Vue.js 0.12 real world app as example, you can look at my projects: https://github.com/aimpanel/frontend https://github.com/aimpanel/frontend https://github.com/lvlup-pro/labtech https://github.com/lvlup-pro/labtech
- oldboyFX 11y agoI loved Vue.js from the first day I saw it a couple of months ago. Congratz on 1.0.0 :-)
- yutingzhao1991 11y agonice!`