What is Reddit's opinion of
Vue.js?
From 3.5 billion Reddit comments
➔ Vue.js website
By popularity on Reddit, this Service is:
90 reviews of this app found across Reddit:
Added Vue to my largish scale application a couple months ago. Been using 2.0 since rc6, and have no complaints. I love Vue. If you have been looking for a JS Framework to get into out of the thousands, definitely give Vue a look. The guide at vuejs.org/guide is great first place to start.
I started with Angular but I'm more of a React guy now. It depends if you want a big framework that does everything (ajax, DI, ...) and enforces you to its constraints, or if you just want to abstract the V (in MV*), ignore the DOM and just code the logic.
Also, it's not only about React. Check Vue (personal favorite), Ractive, Reactive, Ripple, Rivets.
Edit: a bit biased but thats how I feel now - But Angular is a great framework overall. Just know that you will end up coding "angular" rather than "javascript".
Someone with more experience with JS frameworks could possibly add more insight. But, I like Vue, because it doesn't feel as obtrusive as other frameworks. The syntax is mostly vanilla JS. The performance is great, and the size is tiny.
Also the VueJS guide offers a comparison with all other major frameworks
Angular 2 seems to have a steep learning curve, from what I've gathered. I was able to get Vue integrated and a feature fully built out using it within a week on my project.
I really dislike the JSX syntax of React (although it's not required), and the names of things really put me off componentWillMount(?). However, for those that do like JSX Vue 2 offers render functions, and there is already a plugin that offers JSX integration.
I'm sure all the other frameworks will accomplish the job just as good as Vue, maybe better. However, I think Vue is great and really deserves a look if you're in the market for a JS framework.
If you're new to JavaScript frameworks like React/Angular/etc. you might want to consider http://vuejs.org/. Quite easy to learn and https://laracasts.com/ has some good examples of using it with Laravel.
Otherwise, grab something you like. I don't think either php framework really dictates the choice for a Javascript framework.
> designers who only know HTML and CSS
If your project absolutely needs designers to edit HTML without dev interaction, Vue is hardly the right choice. Jquery maybe.
Two examples from the Vue documentation; I have no idea what kind of designer gets this but not JSX
Grid
<table> <thead> <tr> <th v-for="key in columns" @click="sortBy(key)" :class="{ active: sortKey == key }"> {{ key | capitalize }} <span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'"> </span> </th> </tr> </thead> <tbody> <tr v-for="entry in filteredData"> <td v-for="key in columns"> {{entry[key]}} </td> </tr> </tbody> </table>
Elastic Header
<div id="app" @touchmove.prevent> <draggable-header-view> <template slot="header"> <h1>Elastic Draggable SVG Header</h1> <p>with <a href="http://vuejs.org">Vue.js</a> + <a href="http://dynamicsjs.com">dynamics.js</a></p> </template> <template slot="content"> <p>Note this is just an effect demo[...]</p> </template> </draggable-header-view> </div>
I used Knockout for several projects and then gave it up for richer alternatives. Knockout's small surface area and relatively low level of complexity are appealing, but you get those things at the cost of lower productivity.
One of the biggest drawbacks of Knockout (or Ember, for that matter) is that you have to explicitly wrap everything that you want to make observable. In Angular, you can bind into arbitrary JavaScript objects without having to wrap anything. This is especially useful in cases where you want to, for example, make a view that binds into some JSON that you have retrieved via XHR. With Angular, you don't have to pick apart the data and wrap it—you just assign it to a property on the scope and bind away. Angular also benefits from having a richer set of mechanisms for encapsulation and code reuse. Being able to isolate functionality inside of directives and services is very helpful when you are building a large, complex application.
The downside of Angular is that it feels like you are plugging a circus into the side of your application. It brings a lot of baggage with it and introduces convoluted terminology that isn't adequately explained by the official docs. Fortunately, the learning curve isn't actually as steep as it looks. Figuring out the terminology and understanding where you have to use $scope.$apply is about 90% of the battle.
Having said all of that, it's worth noting that there are a bunch of lesser-known alternatives that are also fairly compelling. If you really like the lightweight, low-dependency approach of Knockout, you might want to check out Vue.js. I'm also a really big fan of MontageJS's functional reactive binding system, which you can optionally use standalone.
One thing I liked about the documentation for vue.js is the fact they actually compare to other frameworks and show what they do better and where vue has it's position.
Tech Talk
This is my first project in entirely Javascript (which I'm sure you can tell looking at the code). I wrote it as a single page app so that I could host it on Github Pages since I didn't want hosting to become a burden for me. It was actually really pleasant to write. The most tedious thing was writing up the item information in JSON, since I had to do that mostly manually. The code is all available on Github and is MIT licensed. I used vuejs as my Javascript framework because I liked the idea of one that was just the view. For css, I initially started using Bootstrap because that's what I knew, but I ended up having to use Flexbox to get some of the layouts that I wanted and eventually just switched to Bulma so that I could have Flexbox everywhere.
The code is open source under the MIT license. Feature requests and pull requests are certainly welcome. I still need to clean up a lot of things in the repository (For example, I changed naming styles part way through and the item "cards" need to be made into a vue component so they aren't repeated), but the code should mostly be easy to figure out. I suspect there are optimizations to be done in the searching and filtering logic as well.
Github Link: https://github.com/kihashi/stardew_community_checklist
Ignore virtual DOM, that's a red herring, an implementation detail. It has virtually no bearing on how you write your code or structure logic.
The main value React brought was the component system, which pretty much all other frameworks have now shifted towards (Angular 2, Ember, and looks like it's even been adopted by knockout as well).
Have you taken a look at Vue?
It's a lot like knockout, but with cleaner syntax and you data-bind to plain JS objects
Vue is absolutely suited for large-scale applications, the only real issue is state management and Vuex takes care of that very intelligently; like Redux with React but built specifically for Vue, so it makes a few decisions for you.
I've been building a marketplace the last 4 months and the front end is 100% Vue. There are over 200 components, 50 mixins and 40 vuex store modules. Not massive by any means but we add new features daily and haven't run into any major structural or organizational issues.
The simplicity of Vue and how well it scales up has been a huge part of our success. Anyone who says otherwise simply hasn't used it at any decent scale.
Read this for an in depth comparison with React: http://vuejs.org/guide/comparison.html
Please look at http://vuejs.org/guide/comparison.html . Vuejs also has some pretty big players using it too. Like Expedia/Badiu and Nintendo. And personally I think the optional .vue syntax is much nicer than react.
// app.vue <template> <h1 class="red">{{msg}}</h1> </template>
<script> export default { data () { return { msg: 'Hello world!' } } } </script>
<style> .red { color: #f00; } </style>
I remember seeing performance tests built around TodoMVC and was kind of shocked by how badly React performed compared to solutions like Mithril and Vue. As always it's probably important to always take these with a large grain of salt but it's interesting, I guess.
I wonder how this particular benchmark will change with Vue 2.0. Seems like maybe the time spent rendering/painting might be reduced a bit?
> Vue is designed solely around a "least possible effort" to get some JavaScript interaction working on a primarily back-end app.
Wrong, while it's easy to get some data bindings up and running with Vue very quickly, it's equally as possible to build well thought out components.
> The JavaScript in an SPA is a full application and deserves to be treated as a serious and disciplined language.
The Vue ecosystem has no problem building full-blown SPA's. I'm a full-time front-end developer by day, and I have a big side project being written in Laravel and Vue. Vue handles almost everything, where the Laravel backend is basically spitting out json.
> Vue has all the outdated architecture of Angular
Wrong.
> It abandons separation of concerns
Wrong again.
sigh
We get it, you like Ember, you like the overly-opinionated all-in-one package with the notoriously steep learning curve. You hate plain javascript objects, and you like building weird data adapters.
Single File Vue components in my opinion are the best, and most well thought out way of writing and piecing together web apps. Piece those together with other official libraries you can pull in from the Vue ecosystem like vue-router and Vuex for state management, and there's no reason you cannot build a full blown SPA with Vue.
Working on my first Vue project and it's an awesome library/framework/whatever. Evan has thought about everything, and the single file component structure is glorious for making reusable components and encapsulating CSS + HTML + JS.
Being able to directly modify the data model without the need to ever touch the DOM. It would also keep things more in sync. Angular is way over kill though, I'd recommend Vue.js
Programeri i ostali ljudi u IT-u sa /r/serbia, šta radite, čime se bavite, koje tehnologije koristite?
Evo ja ću da počnem:
Deklarišem se kao full-stack web developer, sa svojim trenutnim znanjem i iskustvom mislim da sam na nekoj poziciji "srednjaka" ili ti "medior" full stack developer.
Uglavnom radim PHP, tj Laravel framework, skoro pa isključivo u zadnje 2 godine i vrlo sam zadovoljan njime.
U zadnjih godinu dana sam izmenjao milion javascript frameworka i za sada mi se ubedljivo najviše sviđa vue.js, poprilično je jednostavan, a mnogo je moćan. Kao Angular bez raznoraznih gluposti. Mada još je relativno mlad, cenim ga da će tek sledeće godine da eksplodira. I pošto je tek u ekspanziji, ekosistem oko njega još nije dovoljno razvijen, tako da ipak koristim Angular na većim projektima.
Od baza cepam MySQL najviše. Koristio sam i razne NoSQL baze, poprilično su zanimljive i imaju svoju primenu, ali mislim da su malo previše ishajpovane i danas ljudi pokušavaju da ih proguraju bukvalno svuda, i gde treba i gde ne treba, a relacione baze su skroz proverena tehnologija i šljakaju bez greške sa ogromnim količinama podataka i generalno su pouzdanije (ACID itd.) , tako da NoSQL baze ipak ne mogu tek tako svuda da se gurnu.
Ranije sam dugo, dugo radio wordpress, mislim da mogu da se deklarišem kao "wordpress expert", ali mi se smučio, kod je užasan i uglavnom izbegavam WP projekte u širokom luku.
Iz hobija sam radio svašta nešto, od programiranja mikrokontrolera, preko game developmenta do obrade digitalnih signala
VueJS is simply outstanding.
It has all the benefits of Knockout but without that whole annoying wrapping/unwrapping of objects that you need to do. It is also one of the fastest frameworks around.
Really deserves a lot more credit: http://vuejs.org
Vue(http://vuejs.org/) or Ractive(http://www.ractivejs.org/). They're almost the same. You'l understand what you're doing. Vue proves to be faster though. Both do not require to learn new concepts and are very easy to pick up, that's what I like the most about them.
David mentioned Patreon as an option. I had not heard of this before his post but essentially you ask the community to fund creators (musicians, artists, developers, etc.) so the financial part of creating is less of a burden. In return for funding the dev team $10, $50, $100, $250, $500, $1,000, etc, you would receive something from Nebulous, ranging in value based on how much you're funding the dev team a month.
He mentioned that the guy who runs http://vuejs.org is funded in this way and it significantly advances JavaScript. That guy has ~$9k/month coming from this which means he doesn't need to do consulting or moonlight to keep it going.
I would consider pitching in like $50-100/mo to Nebulous if the kickbacks were valuable.
You can just import the vue.js file from cdnjs into your html, like we used to do with jQuery.
I hate having to compile JavaScript, I see the benefits, but it can really slow down development for larger projects.
Check here http://vuejs.org/v2/guide/
Angular is nice.
When I first discovered it I felt like it was the exact frontend dom manipulation library I was looking for, but as my application developed its flaws started to become apparent.
Its seems ideal for single page applications, which mine was not. While a small issue, nothing I couldn't overcome. The bigger issue was the binding, having hundreds of two-way bindings on a page destroyed performance.
I'm writing my next project using Vue.JS, I've heard NG2 will fix some of my issues with Angular, but also that its not production ready yet.
Also, this guide is far from 'complete,' no mention of directives, a core component!
Vue is better maintained (check GitHub issues), has a larger community (1000+ members on Gitter), and has more robust tooling for large scale projects (See http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/ and http://vuejs.org/guide/application.html)
I am loving the amount of love for Vue! To add on to the list, I think Vue has the potential to be the next big framework.
The single file components are super cool. It works great with webpack + hot-reload and you can use vue-cli to bootstrap your project. On top of that, its performance is pretty darned good in comparison to almost all (faster than react in this case).
Above all else, it is incredibly easy to use.
To be honest with you, I'm not sure why CoffeScript is a necessary piece of your puzzle with ES6/7 features I'd say you're stuck on syntax differences that aren't very major.
But that's not your question :). I asked this question on the meteor forums and got quite a response. My opinion is that vue.js is your best bet.
That said, MDG appears to be rapidly adopting react so that it can switch to react native and leave cordova. If you're new to meteor, the beginning times were all about single page apps that could be wrapped up in cordova for easy development of mobile apps. That is still the goal and as such, react native is the clear future.
Vue takes inspiration from Angular, so if you're used to that sort of logic, then it's an easier transition. The differences that Vue prides itself on are not using a Virtual DOM but manipulating the actual DOM, which gives you more immediate control over it's structure, and sticking to the "separation of concerns" mindset that has driven the standards-based web for years now.
I would consider the real potential benefit of Vue is that it might be easier for your team to pick up and be productive with. My team and I prefer React, simply because we like working with it more. The paradigms between the two are different enough that preference may be the deciding factor.
Edit: grammar
Why would you need XSS protection for an API? If your API responds with JSON that might contain valid HTML code and therefore possibly <script> tags, the receiving end should handle proper escaping if it plans to render that data directly to a DOM. Vue.js doesn't render raw HTML from strings unless you tell it to.
Imho there are scenarios where you just need to communicate via events, e.g. to provide loose coupling. What you can do is use one empty (imported) Vue instance and use its $on and $emit method. There is an example of it somewhere in the docs I think. Don't forget to use $off too in the destroyed listener of your component, or you'll have a memory leak.
Edit: Here is the example I was talking about: http://vuejs.org/guide/components.html#Non-Parent-Child-Communication
Hey, I'd just like to add my two cents here:
After some months programming with react, I discovered Vue.js and I'm loving it. It's like the best ideas from react, but in a way easier package to grasp - so no need for all those insane boilerplates.
Also, what do you use for authentication in your Django SPA apps?
Vue is great for this. Small example here.
Vue does a fantastic job of keeping everything nice and simple (while still powerful). More info on Vue here: http://vuejs.org/
Don't worry too much about picking the "right" framework. In all likelihood if you don't have very specific requirements any will do the job just fine. Don't want to succumb to paralysis by analysis. I've heard good things about vue .js, you may want to give it a try.
There are fast, lightweight, un-opinionated frameworks that are gaining popularity: Vue as an alternative to React, Mithril as an full MVC framework. Neither requires templating languages, compilation, or transpilation. They both do allow for things like templating languages (Jade, LESS, babel/es6) but they are unnecessary.
just start using VueJS. Super super simple and intuitive.
/u/JeffreyWay has a FREE series on Vue, so in a couple of hours you could be doing pretty interesting things with no effort.
about your problem about making a list from some data in the array:
<script> var vm = new Vue({ el: '#app', data: { things: your_data_from_whatever } }); </script>
<div id="app"> <ul> <li v-for="thing in things" class="list-group-item">{{thing.category}}</li> </ul> </div>
I definitely think the learning curve is much smaller than Angular as it's not a full blown framework, instead VueJs focuses solely on the interface layer. The official VueJs website has a neat comparison with other frameworks like Angular, Reacts, Ember, etc... (expect it to be biased though) -
Here's a page that I always thought was helpful when looking at different frameworks. Not nearly every framework is covered but the three you're looking for are.
It's from the guy who writes Vue so of course leans in that direction but he's mostly just talking about philosophical differences.
I guess one thing is he doesn't cover Angular 2.0 at all, which might as well be a completely different framework than Angular 1.x.
Here is Vue rendering a JSON response from github http://vuejs.org/examples/commits.html and the response would look like this https://api.github.com/repos/vuejs/vue/commits?per_page=3&sha=master. Then again, React and Angular can both do that, it's just a matter of preference and of what are you willing to learn. I've found Angular hard to learn and even harder to master compared to React that once learned it's easy to just vision your final product in React components, but that's just me.
Angular 2.0 might be the most "up to date", but that's fairly meaningless way to measure frameworks, imo.
If you're already familiar with angular, try vue, which took quite a lot of inspiration from angular and uses a lot of the same terminology while being much more simple.
If you're looking for something a bit different, I would say react is a good choice.
I like how you use "dig deep" in reference to angular. Honestly angular always seemed much simpler than react to me. React just feels wrong. Here is a little gem of a javascript library I think you might want to try http://vuejs.org/ its like all the good parts of angular and react without the bad parts... but you really don't need any of these libraries to make a cool single page portfolio site( but it sounds like you want to use one).... I also like the Jekyll suggestion by Katan5, Jekyll is sweet
It looks more like a slimmed-down Angular to me.
edit: From the guide:
> Vue.js’ API is heavily influenced by AngularJS, KnockoutJS, Ractive.js and Rivets.js. Despite the similarities, I believe Vue.js offers a valuable alternative to these existing libraries by finding a sweetspot between simplicity and functionality.
Take advantage of Vue's reactivity. Store the messages you receive in the state of the higher order component, and pass that object as a property to the child components. You could even make the properties on the child components use computed properties, if that's what you're looking for.
Check out the docs on props: http://vuejs.org/v2/guide/components.html#Passing-Data-with-Props.
Using v-model to handle application state will get messy really fast.
A simple store or vuex is much simpler and more robust solution. The docs has info on both of these.
Vue.js extensively uses an ES5 feature, Object.defineProperty(). It gives you an almost complete control of how an object property behave.
That and a lot of dependency chains.
(Too) Short ref from vue.js docs
This video of Evan You's (creator of vue.js) talk at LaraconUS dwelves deeper into it : Vue.js workshop. A must see when you want to know the insides.
You know, there <u>is</u> actually a benchmark you can "install locally and run/confirm/critique yourself". It was also developed in conjunction with Dan Abramov. He liked it and approved the numbers we posted at the end of the Render Performance section.
We didn't initially want to include a benchmark, but people kept asking so we eventually buckled, so I'll remove the part about not including a benchmark in the intro.
This is a big decision if it's a "rather large" project. I am glad to see you are doing your research but for me it usually comes down to one question usually answered by preference:
Do you want your app to be taken over by the the javascript framework?
This is not a loaded question, there is no wrong answer here, it all comes down to preference really; once you have an angular or react app setup and going, it becomes a lot easier to do some big things than it would otherwise. For Angular or React, you are going to be locked into that platform it will take A LOT of work to transition to another. Something like Aurelia, or even moreso ractivejs or vue.js (like mentioned below), will be much more lighterweight, you may potentially have to do some more work than the others, but will not be as difficult to move from and can sometimes grant you more direct control.
I personally prefer the lightweight frameworks because I am mediocre at JS and don't want complex JS to be the heart of my app, but not afraid to do some of the heavy lifting. I know people who love react, especially if you are going to need reusable components, and you will find an army of users who can give docs and advice on angular. But for me the deepest I like to go is Aurelia, but now use Ractive.js mostly if it's something big; haven't used much else for a few months. And honestly nothing more than jquery with handlebars if I only need something simple, but no 2 way binding.
Also worth looking into Ember because some people rave about it, but I haven't ever looked at it.
Sure, but the examples did not include the data() definition for each for the sake of brevity.
Your template code is fine - it's just that It's generally advised to initialize all data upfront: http://vuejs.org/guide/reactivity.html#Initialize-Your-Data
Go with Vue. Easy to learn and easy to use.
If you don't find vue to suit your tastes, then i will recommend react.
Angular 1 is quite popular but it has many quirks. also many of its tutorials are obsolete.
Angular 2 is not even released. Its official tutorials and docs force you to learn typescript and use RxJs.
React is an awesome library, but it can take some time to learn. If you're just starting out I'd recommend looking at Vue.js and see if that works for you.
I've used it on a few projects recently and it's been a joy to work with.
vue.js, a JS view libary is able to track dependencies.
var example = new Vue({ data: { a: 1 }, computed: { b: function () { return this.a + 1 } } })
// both a & b are proxied on the created instance. example.a // -> 1 example.b // -> 2 example.a++ example.b // -> 3
Vue doesn't use the Virtual DOM, which adds more startup time, but apparently does its own optimizations when updating the DOM that makes it faster than other frameworks. https://raw.githubusercontent.com/lhorie/todomvc-perf-comparison/gh-pages/Chrome.png
Supposedly this caused a lot of drama and everyone just agreed that benchmarks don't really mean anything in the real-world: http://vuejs.org/perf/
Not sure how fast Riot.js is...
This breaks it down pretty well.
Vue is designed to be less heavy and opinionated. Vue is also much faster. One of the main criticisms of Angular is how it uses dirty checking, which in complicated apps with a lot of UI elements can slow things down pretty badly. Another criticism of Angular is that the API is so messy that the learning curve is steep, which is definitely true. You have to worry about $digest cycles and when something goes wrong it's often difficult to track down the cause.
The other thing about Angular is that 2.0 is coming out at some point and it's a complete rewrite, like your code written in Angular 1.3 is going to have to be completely redone. The changes Angular is making are all good (and address the criticisms above), but I thought I'd take the time to learn some of the newer frameworks out there since 2.0 isn't production-ready. In a lot of ways it seems like most of them are meant to be a shift from Angular (both in technology and in way of thinking), so it's been interesting.
I highly recommend researching some of the other front-end frameworks before you start to write Angular 1.3 code. Vue, Mithril, Riot, React (with Redux or whatever), Aurelia, are all worth at least taking a look at.
Vue is actually pretty heavily inspired by angular, and they share a lot of terminology, like directives and filters. They also share a lot of syntax and have similar ideas about how components should behave. Vue mostly feels like someone who learned from the problems angular has and wrote a library around those issues.
As for syntax differences, the main thing is that vue has special syntax shorthand (@, :) for some common things and has a concept of binding "modifiers". The rest of it is surprisingly similar, down to how everything is named (directives, isolate scope, filters, directive priority ... ). Really, the main difference is the directive API for vue is substantially more simple and easier to understand.
The special syntax is really a minor, irrelevant piece of Vue, and is totally optional:
http://vuejs.org/guide/syntax.html#Shorthands
I would personally use the v-on and v-bind syntax myself, but IMO the power of Vue comes from this:
http://vuejs.org/guide/application.html#State_Management
State management with POJOs without all that weird Flux stuff. This makes Vue simpler than Angular, but more powerful than React alone, and simpler than React + Flux.
http://vuejs.org/guide/comparison.html#React
My best attempt at a summary:
- React has virtual DOM
- React has more javascript in the "view"
- React doesn't allow ad hoc DOM manipulations
EDIT: Things that also affected my judgement:
Maturity in relation to other new ideas (GraphQL/Relay, React Native)
Each framework's primary supporter (Facebook vs one insanely smart person, although MAJOR users have joined both sides).
I'm calling this now: as long as this library author sticks with it, Vue is going to be big. It feels like the Laravel of the JS world - clean, simple, straight-forward documentation makes it easy to learn and use.
That said, I wish the "building larger applications" section went into more depth:
http://vuejs.org/guide/application.html
This is what I struggle with the most as I transition from backend to frontend. A really solid opinionated "best practice" guide on how to use Vue and other libraries to build well designed and well separated front-end architectures would be immensely helpful.
I ended up trying both, i preferred React but ultimately i ended up going with VueJS as i can use this a bit like i use jQuery and slowly ease into the component/SPA aspect of it.
I think of Aurelia and React i'd say React is the one to go for, for now but my ultimate choice was Vue :)
> The immediate issue I am having is that the Captcha stuff doesn't work, but in the long run, the site just needs to be rebuilt on a different, easier to work with platform.
This might be as easy to resolve as updating your Joomla! installation. I recently had to build a site with Joomla! (kill me, too) using the Gantry Framework, and was happy to find that out-of-the-box Captcha support was pretty decent.
> What would be a suggestion for tools to use to rebuild a site if all I need is: > - Mostly Static Pages - Ability for Users to login and modify a small profile - Ability to search those profiles.
You might find Vue.js handy for this. It's pretty simple front-end library (lightweight alternative to Angular) that shouldn't give you much trouble. Perhaps consider Firebase for your data storage.
Getting started tutorial from Scotch.io: https://scotch.io/tutorials/build-an-app-with-vue-js-a-lightweight-alternative-to-angularjs
I like Knockout, it's one of the few that got dependency handling right from the start. It's more of a library than a framework as it does only templating and it does this well. Importantly, it plays well with other libraries and is easy to learn.
If you want something in between Knockout and Angular you might want to check out Vue.js
Point number two is essentially my argument.
> I wouldn't say don't trust benchmarks, but I would say to regard them as exploratory: how does code X in execution environment Y respond to situation Z. That can be very useful knowledge, even if (and sometimes precisely because) a situation is unreal. But we need to understand that the meaning of the results is often complicated.
Indeed. What I meant to say that benchmarks can be manipulated to give a wide range of results or play to the strengths or weaknesses of a particular library/framework.
Yes, this is the fundamental problem that every JavaScript framework ever is trying to solve. They work by allowing data binding, so whenever you change some JavaScript data (the model, in your case loaded from local storage), the view (the HTML/CSS) updates automatically, without you having you do anything.
The easiest example I know of is probably this example from the Vue framework (my personal favourite). If you type into the text box on the right you'll notice that the text above it changes. That's because they are both bound to the same JavaScript variable, in this case the variable message. In that specific example the HTML that says {{message}} is a one way data binding, so message → <p> element. The v-model="message" attribute is called a directive, and it indicates a two way data binding, so message ↔ <input> element.
In your example, you would put a one way data binding inside your #cash element like this: <div id="cash">{{cash}}</div>, and then whenever the cash variable changes, so does the HTML. Then on page load you'd set the cash variable on the Vue object: vm.cash = localStorage.getItem("totalCash") || 0.0
If OP thinks Angular is too thorough of a solution, Ember is not going to be an option. Like you said, you are either all-in with Ember or you don't use it. There is no middle ground.
I think something like Knockback or VueJs may be the best option for him (outside of React and Knockout, as already suggested).
Yup, it seems great. There is quite a lot of reactive views libs/frameworks appearing these days: React, Ractive, Rivets, Vue.js, as well as the (bigger) 2-way data-bindings frameworks such as Angular, Knockout, Backbone (+ Marionette/Thorax/...).
I think it's really good to not manually handle the view and just write the logic in proper javascript. It's also relevant in terms of filesize (most of em are 20-30kb) with the mobile market.
Honestly, it's really hard to beat the official guide. It's not that long or dense, and is straight to the point.
From there, I'd poke around github and just look at Vue projects, I don't know any good ones offhand otherwise I'd link some.
Happy to hear that! :) Also you probably already seen this, but if someone didn’t, there is a in depth comparison between Vue and React (and some other frameworks). http://vuejs.org/guide/comparison.html
Announcing Vue.js 2.0
- In Vue 2.0, you can keep using the familiar template syntax, or drop down to the virtual-DOM layer whenever you feel constrained by the template DSL. Instead of the template option, just replace it with a render function.
- Vue 2.0 provides built-in streaming server-side rendering, so that you can render your component, get a readable stream back and directly pipe it to the HTTP response.
- The template-to-virtual-DOM compiler and the runtime can be separated, so you can pre-compile templates and ship your app with only the runtime, which is less than 12kb min+gzip (as a reference, React 15 is 44kb min+gzip).
- Synchronous server-side rendering may even adversely affect time-to-content on the client.
- Developers tend to have strong opinions on templates vs. JSX.
From my experience with Vue it is not as simple as it seems. Further in it gets very complex. In reality the complete api was a must read, i know that back then it took weeks to fully understand what's going on because Vues behind the scene magic has severe side effects. The things you learn in these docs are so wildly arbitrary and foreign to regular javascript and html that i scratch my head when people say it's "easy."
React can be learned and fully understood under a day, probably even under an hour if the material is good, because there isn't much of an api surface. It has two or three api functions. Though it stresses concepts that should be understood, how an app can be reasonably structured and how to make state flow through it in a transparent way. I know that as a beginner i didn't like that about React, i wanted to start building UI, not think about it.
But then these are the exact same concepts you apply later on to Vue anyway after the first project has went up in flames. You run to VueX and single file components. Suddenly your code isn't as cute as it was in the 10 second demo, and it's probably or most likely 3 times as verbose and complex as its React counterpart would be.
Another thing to keep in mind is the eco-system. I know this isn't Vues fault, but React has thousands of ready made components, ui libs, helpers, state managers, routers, etc. Whatever it is you need you find it.
I would definitely go for ES6, the only way you can be forward-compatible. Any decent editor supports linting and will warn you for almost all the things that TypeScript will also warn you about, given you spend some time setting up a strict linting file.
Also, TypeScript is statically typed, not dynamically typed, the latter being the saner option for web-apps.
As a frontend framework i must suggest Vue.js, look at the way singe file components are build, very awesome: http://vuejs.org/guide/application.html#Single-File-Components
I've been learning JS on and off for the last few years (3? 4?). It's all about learning how to solve problems. I had never built something like this before, but I have done stuff like drawing images with the canvas. So that's where I started, just googling for the specifics.
The easiest way that I learned was through just building a ton of things. If I wanted to learn how to animate something, I'd give myself a task like "Make a marker move around a navigation bar depending on where I hover". From there, it was googling until I figured out how to make it happen. Over time you learn more and more and can tackle some huge, but really cool, problems!
Don't get me wrong, jQuery is a handy tool, but I normally recommend against it. I think it's more important that you understand the language and the APIs provided by the browser. When you start needing larger applications, pick the right tools for the job (which is hardly jQuery any more).
The large apps that I'm working on are Vue and React. For anyone wanting to foray into the world of frameworks/ui libraries, I recommend Vue. It's crazy simple but insanely fast and powerful.
I believe it really depends on a project's requirements. Personally I like using the PHVN stack which is composed of PostgreSQL, HapiJS, VueJS, and NodeJS. Sometimes I switch PostreSQL with RethinkDB or Mongo. Or replace HapiJS with FeathersJS.
Probably the MEAN stack has prevaled because it's got a nice marketing name. Let's face it, PHVN or MERN don't sound nearly as good as MEAN.
If I had to generalize… I'd say I like the JavaScript Stack. I like to use Sequelize for relational databases, Mongoose for MongoDB, Thinky for RethinkDB.
Anyway… OP wants to try a different Frontend stack… What about VueJS and Susy? Also Karma, Mocha, and Chai for unit testing.
I have no direct answer for this. I'm half into a project that will be utilizing a form builder - just haven't gotten to that area yet. I anticipate building an interactive front-end with something like Vue.js and a simple JSON API backend to handle the CRUD from the form builder. After that - I think I'm going to use Twig partials (or Vue templates if it makes sense) to actually generate the elements I need. I also have some odd requirements like "Require Y if X has a value of .."
aurelia is a a js framework like angular but has cleaner and easy to use syntax.
while vue is view-layer library like react, but vue is easier to learn and is more intuitive.
I heard somewhere that react supports 2 way binding. though i don't the details. I know both aurelia and vue support 2 way binding. you might like this example in vue
Thanks for the tip on todomvc. If they don't care that you're not an MVC framework, I'll do it!
Vuejs's scoped styles (and shadow dom styles in general) are a step forward for certain things, but they're not great for styling a whole application. And I suppose this + LESS or SASS could theoretically give you modularity, isolation, and composability, but I'd really have to understand more about how vuejs does styles. In any case, I'd be very surprised if you told me you could put javascript in your styles in any of those libraries. If you have javascript needed for style reasons, Gem.js lets you put that js directly in a style object. You can also create your own novel psuedoclasses this way.
> the ones who write in html and sass start complaining
People like what they know, that's true.
> Same is true for react, mithril, vue and vanilla-js
I have to take issue with some of this one. Vue clearly is MVC. In their overview ( http://vuejs.org/guide/overview.html ) they say they're "not a fullblown framework", but they clearly have data model objects and view objects. Mithril says its an "MVC framework" on its frontpage. And duh vanilla isn't a framework, itsatrap.
Vue isn't a full blown framework like Angular. Instead Vue focuses on the view layer only. As I mentioned earlier, it is extremely easy to learn and get productive with thanks to it's simple API. Also Vue tends to be a lot less opinionated and let's you do things in a way that works for you which I prefer a lot more.
If you want a more in depth comparison of Vue with other components on a more technical level (like composable components, dirty checking, etc...) I'd recommend you have a look at the comparison on the VueJs website:
http://vuejs.org/guide/comparison.html
In my honest opinion - I'd say just jump into a framework/library you think you will enjoy and give it a shot because only then will you be able to tell if it satisfies your workflow, your design principles, whether it's too opinionated, etc...
This has been an unmaintained project for a while. I wouldn't put my eggs in this basket.
Now-a-days you should be picking up a tool like Vue.js which allows you to build components like this fairly easily yourself. I used to use Selectize.js to build chained selects but Vue.js makes it super easy to do youself.
- JSX is the single biggest con for me, personally.
- It's huge for a view layer component. Probably because of JSX. It helps that the state management libraries tend to be tiny though.
This weekend I started converting a personal Angular 1.x project into Vue which takes a lot of inspiration from React but it's smaller and uses templates over JSX. I've personally been using the *.vue component file type with it. Perfect for me. It lacks the backing of Facebook or Google but it's honestly really solid and works better for programmer/designer types like me. I recommend checking it out at least.
It's similar but much smaller. It also does not use JSX (it's more of a template-based framework) and does not have a Virtual DOM.
this page sums it up nicely.
I think if you're using React and like it then it's all good. I'm not a big fan of JSX personally.
http://vuejs.org/guide/#Two-way_Binding
Check out this link, it shows how you can edit a text field and have that text show up in another tag in real time.
Once you start using two way binding in your projects you don't go back, that's why angular became so popular
<modal> <component :is="currentView" :data="data"> </component> </modal>
Vue.component('modal', { template: '<div class="modal"><slot></slot></div>', props: ['currentView', 'data'] });
I hope I got your question right. The key is to use props.
> if you don't have the time to learn js properly.
> I'd go for http://vuejs.org/
Interesting, I'll check that out. How would you contrast it with react+redux?
> if you don't have the time to learn js properly.
My issue isn't with JavaScript itself, in fact I have a pretty good grasp of the language (ES5, and getting more comfortable with ES6). I'm an experienced Java developer, so JavaScript feels fairly familiar. My challenge is with the frameworks.
I'd go for http://vuejs.org/ or react + redux if you don't have the time to learn js properly.
If you want to learn js properly then try vanilla and add libs where necessary. Just don't expect clean end result since it's your first non-trivial js project.
There are no shortcuts to learning client side architecture unfortunately :( Good luck!
I agree that backbone has too much boilerplate code. But at the same time it makes more sense to me than angular, because it's simpler so I like it for that reason.
But yeah at this point it's to much boilerplate. I have been messing around with this http://vuejs.org/ lately and I like it allot. Its not really popular yet, but if you like angular I think you'll really like it.
Anyone else looked at this library at all http://vuejs.org/ . I just started messing around with it. Its the first one of these Frameworks iv come across that just feels right. It feels like a cleaner implementation of react honestly... and it has the parts that where good about angular like ng-repeat (its obviously not called that though)
I tried doing this a month or two ago, was using forms, api changed significantly within a week of me starting the project. For the better, but still, waste of time.
If your goal is to complete the project, stick with angular 1. If your goal is to learn something new while making the project (this will increase the risk of the project never completing), learn something else. React's probably already on your radar, but if you don't want to make that far of a leap from the familiar, check out Vue. Simple library, small surface area, should be able to get through the API docs + guides in 2.5 hours. Great for personal projects, I've also been using it in production for the past 3 projects with great results.
So apparently some guy who works at google just made his own framework, it draws a lot of inspiration from angular... but its more like react in that it really just covers the viewController, i have been looking at it a lot lately and i'm pretty damn impressed to be honest its called http://vuejs.org/ . It seems to tackle the same problem as react but with a much cleaner api. It just makes sense. A trend I notice with these frameworks is that the ones built mostly by one person are always so much cleaner than the ones build by big companies
Hmmm, I don't really see the Backbone comparison, perhaps it's just the fact that it constructs the controller from an object literal.
I definitely took inspiration from projects like Vue.js though.
> This is wrong. The way the tests are structured the DOM nodes are always there for interaction.
I'll take a look. There are a lot of versions of this benchmark floating around, and it's been a while since I looked at it closely. I do recall that when React was first added, running the benchmark resulted in 100 active todos still in place, since the complete and delete steps worked on extant DOM nodes and React hadn't rendered them yet. I know it was made at least "more sync" to pass. I also remember the dispute about vue.js' version and whether the bench was a legitimate way to compare sync and async frameworks: http://vuejs.org/perf/ .
In terms of "closing the gap with Om," I was primarily referring to cases like the 800x one. For cases that actually render DOM (rather than just twiddle javascript objects), I'm not surprised Backbone is comparable. Not a lot of overhead.
I wouldn't say don't trust benchmarks, but I would say to regard them as exploratory: how does code X in execution environment Y respond to situation Z. That can be very useful knowledge, even if (and sometimes precisely because) a situation is unreal. But we need to understand that the meaning of the results is often complicated.
Yep it can work. In the typical Model-View-Controller architectural pattern, Vue will take care of the model and the view. The model being the data that is served, and the view would be what your end user see's on their screen. Check out their Firebase validation example
So in the back end, you'd need some sort of controller to 'control' the data that you serve.
Try out Meteor, they have a book called Discover Meteor which is fantastic. Makes it so easy to create a web application.
The downside to Meteor is their's no proper way to bind data two ways, i.e detect changes from browser. That's where VueJS works well.
You need to jump through a few hoops to get the angular stuff talking with the non-angular stuff and the other way around. ie: if something happens on your page that you want your directive to know about.
I have made a few controls/directives/widgets in Angular before to integrate with older non-angular apps.
If you are wanting just a view layer though with two-way data-binding, another framework might be a better fit - wondering if React, Vue.js, Knockout could be a better fit.
I've used Knockout.js before and really liked it, haven't tried their new component support but I think it looks great.
Vue.js had a lot of hype when it was first annouced some time ago. I haven't used it so I can't give you my impressions of it but it's worth considering.
Edit: If it were me I would pick KO because of their new component support.
How I use components (with vue.js at the moment):
- Handle API/Routing/... like a regular MV* SPA/App/Website
- Handle "atoms" as a component
By atoms I mean everything that is reusable or heavily interactive and needs it own sandbox/file for a cleaner separation. A header could be a component, or an image slider, a button used throughout the whole app...
See this as regular MVC whose main views are HTML templates with elements in them. Is that clearer ?
I haven't used it, but I'm itching to try Vue.js... from what I can tell, it's like an Angular-lite and is only 14kb. I believe it's also dependency-free (no jQuery requirement, etc.), though I think you may need to plugin a router if you wish to use one.