
Replacing JQuery with Vue.js: No Build Step Necessary - evo_9
https://www.smashingmagazine.com/2018/02/jquery-vue-javascript/
======
burlesona
This is one of my favorite “features” of Vue. The system is built on
straightforward JavaScript such that it works equally well in the simple, old
way of just including a script tag and having all your code in the DOM, as it
does with all the bells and whistles of modern build systems.

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.

~~~
sametmax
> I’ve found that Vue’s documentation and api are clear, consistent, and well-
> reasoned

I know right ? Everytime I have a question, I just keep reading, and it's
right in the next parts. It feels like getting in a tutorial with a friend.

------
slathrop
Nicely done. This is a must read for anyone stuck in "manual DOM querying and
manipulation land" with jQuery looking to level-up using Vue.js as an
excellent alternative.

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...](https://stackoverflow.com/questions/807867/difference-between-val-
and-text)

------
deergomoo
While this is certainly good to get started, it’s definitely worth
transitioning to a build-based process if for no other reason that components
ran through vue-loader or vueify gets precompiled into render functions, so
you get both speed and file size savings. This is a great guide for those
investigating different options or those not comfortable with Webpack though.

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.

------
guessmyname
I wouldn't mind a build tool if it didn't require a ton of JavaScript files
_(looking at you Babel.js)_.

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
    

Where "app.min.js" contains the basic Vue.js options like this:

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

And the sub-sequent pages, like "About", load a JavaScript file with this:

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

[1]
[https://vuejs.org/v2/guide/components.html](https://vuejs.org/v2/guide/components.html)

[2] [https://medium.com/js-dojo/7-ways-to-define-a-component-
temp...](https://medium.com/js-dojo/7-ways-to-define-a-component-template-in-
vuejs-c04e0c72900d)

~~~
philliphaydon
You should check out the vue cli.

~~~
guessmyname
I already tried it, but it also depends on Babel.js [1].

Here is the dependency tree upon installation [2] 144M in total.

I just created a fresh project with it, and the directory is now 134M and I
just selected Eslint + Prettier for linting and formatting. I don't want to
know how big the project would be if I were to choose the other available
options _(Router, Vuex, Babel, etc)_. This week I spent 1-2 hours designing a
lightweight project structure to use Vue.js components without the build tool,
it worked pretty well and it does what I need it to do, which is simply DOM
binding, Ajax requests, and minimal templating because the rest is already
handled by the back-end in Go.

[1] [https://github.com/vuejs/vue-
cli/blob/3193b0d/package.json#L...](https://github.com/vuejs/vue-
cli/blob/3193b0d/package.json#L44-L61)

[2] [https://pastebin.com/raw/x3kJ91xP](https://pastebin.com/raw/x3kJ91xP)

~~~
brazzledazzle
But you don’t have to commit or deploy the dependencies right? It’s just that
size for the build isn’t it?

~~~
guessmyname
> But you don’t have to commit or deploy the dependencies right?

Yes, I have, otherwise I will impose Node.js + NPM as a dependency for my co-
workers who — again — are not web developers, they just want to quickly modify
one or two things and deploy without my involvement, so I have to build
something as standalone as possible, this means _(in this and other projects)_
that I have to commit the whole "node_modules" folder with the rest of the
files.

And if anyone thinks this is a weird requirement, I can tell you that last
year I did some contractor work in four web agencies in San Francisco, and
they all had a policy of _" commit all the dependencies"_ because they wanted
to "lock" the files to a specific version. They used to lock the dependencies
using the "package.json" file, but after all the recent fiascos with NPM and
their registry, they stopping relying on the constant download of these files
during every deployment, something that we were considering even before the
problems with NPM because downloading +200M of files for every execution of
the test suite in the CI server was posing a significant cost for not reason.

If NPM and their registry were more stable, I would just put everything in the
"package.json" file and ignore the +100M of code in the dependency tree, but
unfortunately, the Node.js is voting for a different philosophy that has been
biting them for several years now, they still haven't learnt the lesson.

~~~
acemarke
Committing your node_modules folder is definitely a bad idea. To me, the right
answer is to use Yarn's "offline mirror" feature to cache the package tarballs
themselves in your repo. They're smaller, it's a lot fewer files, and it's
platform independent.

------
andrei_says_
JQuery is often used in popular front end components, like carousels and
menus.

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?

~~~
jazoom
I've always just looked for one that doesn't use jQuery. Haven't had trouble
finding one for at least a year. Nowadays I always find there's already a Vue
component that's a wrapper for whatever library.

------
dang
Related from yesterday:
[https://news.ycombinator.com/item?id=17211283](https://news.ycombinator.com/item?id=17211283)

------
fareesh
Been doing this a lot for toy projects, or when I work with server side
application frameworks like rails and phoenix.

------
Justsignedup
Can someone please please please explain Vue to me?

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

Vs

React and Angular2 = Dom Diffing.

~~~
guessmyname
• [Vue.js] Comparison with Other Frameworks [1]

• ReactJS vs Angular5 vs Vue.js — What to choose in 2018? [2]

• Angular 5 vs. React vs. Vue [3]

• Angular vs. React vs. Vue: A 2017 comparison [4]

[1]
[https://vuejs.org/v2/guide/comparison.html](https://vuejs.org/v2/guide/comparison.html)

[2] [https://medium.com/@TechMagic/reactjs-vs-angular5-vs-vue-
js-...](https://medium.com/@TechMagic/reactjs-vs-angular5-vs-vue-js-what-to-
choose-in-2018-b91e028fa91d)

[3] [https://itnext.io/angular-5-vs-react-vs-
vue-6b976a3f9172](https://itnext.io/angular-5-vs-react-vs-vue-6b976a3f9172)

[4] [https://medium.com/unicorn-supplies/angular-vs-react-vs-
vue-...](https://medium.com/unicorn-supplies/angular-vs-react-vs-
vue-a-2017-comparison-c5c52d620176)

