Replacing JQuery with Vue.js: No Build Step Necessary (smashingmagazine.com)

You can use a plain Vue object as a message bus, event emitter, or a simple reactive data container without any template or visual logic involved. It’s a damned useful primitive to add to your toolbox.

I’ve found that Vue’s documentation and api are clear, consistent, and well-reasoned. The core system is a set of primitives that cover about everything you would want in a web app, you can easily pick and choose just the pieces you want but they also work perfectly in the fashion of a much heavier framework if you decide to use them all together.

This is about the best open source project I’ve ever used. Highly recommended for anyone who is curious about it, and hats off to Evan You and the whole team for what they’ve built.

All our new front end stuff uses Vue.js now, and we’ve been very happy with it. No more unmaintable jQuery nightmares and much greater reusability, which goes even further when you throw renderless components into the mix.

It does have one or two rough spots; for example passing events up more than two levels gets messy quickly unless you use Vuex (sometimes overkill) or a global event bus (works but feels quite hacky), but by and large it’s a very nice library, and certainly seems easier to get started with than something like React.

By the time I got to the 2nd code example in this article, I was already rolling my eyes at the old jQuery approach I used for years: "Wait, is it .val() or .text() to pull the "value" out of that element?"(1)

Web devs who give Vue.js a try have to come away with a smile on their face. Sure, they may prefer React or Angular for a variety of reasons, such as team size. But Vue.js just makes it so darn easy to get started. It definitely helps to "progressively" adopt modern, model-driven approaches to web apps.

(1) https://stackoverflow.com/questions/807867/difference-betwee...

Recently I had to start a new project and decided to use Go for the back-end and Vue.js for the front-end, but I was concerned about all the tooling that I would need to integrate just to power the front-end side of the website. More so considering that my employer's business has nothing to do with web development so all this overhead would be unjustifiable. I spent several days reading and trying to understand what every tool included by Babel.js was doing until I gave up after the +20th module. It felt like a nightmare to see the gigantic dependency tree inside the "node_modules" folder.

I felt relieved when I found that Vue.js Components don't need to be compiled [1].

I also found this article interesting [2] with information on different approaches.

This is what I ended up with (my own design):

    /project/
    ├── docker-compose.yml
    ├── Dockerfile
    ├── README.md
    ├── backend
    │   ├── about.go
    │   ├── app.go
    │   ├── home.go
    │   ├── main.go
    └── frontend
        ├── public
        │   ├── app.min.js
        │   ├── bootstrap.min.css
        │   ├── favicon.ico
        │   ├── about.min.js
        │   ├── styles.min.css
        │   ├── vue.min.js
        │   └── vue-res.min.js
        └── views
            ├── base.html.tpl
            ├── home.html.tpl
            └── about.html.tpl

    var Application = function() {};
    Application.prototype.el = '#app';
    Application.prototype.delimiters = ['${', '}'];
    Application.prototype.data = {};
    Application.prototype.created = function() {};
    Application.prototype.methods = {};

    Vue.component('about', {
        template: '#about',
        data: function() {
            return {…};
        },
        methods: {…}
    });

[2] https://medium.com/js-dojo/7-ways-to-define-a-component-temp...

How do you approach something like slickjs? Or SmartMenus? Both of these are quite polished, with well thought-out APIs, and have solved for hundreds of issues and corner cases.

I’m not sure that it would be wise to go for a DIY solution in such cases.

What’s your experience?

Sounds like the next iteration of Backbone / Ember / etc frameworks.

Vs

React and Angular2 = Dom Diffing.