Why we chose Vue.js over React

  lein new figwheel 

Like the sibling comment pointed out, Reagent uses Hiccup-style data structures to represent HTML. Om can be configured to do the same, but doesn't out of the box last time I checked. Either way, the Hiccup syntax looks like this:

  [:div [:h1 "Hello world"]]

Add either Reagent or Om to your project.clj, and off you go.

[1]: https://github.com/bhauman/lein-figwheel

[2]: https://github.com/reagent-project/reagent

[3]: https://github.com/omcljs/om

Clojure(Script) benefits greatly from the fact that Clojure's data structures are much more expressive and robust than JavaScript's, and so a thing like JSX that paints over some of the language's warts is less necessary.

Many people opt for using something like virtual-dom or snabbdom instead, which provide a more Hiccup-like API on a surface level. There are wrappers for React (react-hyperscript) as well.

When I first started dabbling in web programming a few years ago, I quickly learned about jQuery from SO while looking up common patterns to create the behaviors I wanted in the browser. But even accounting for my unfamiliarity with the browser paradigm, jQuery always rubbed me the wrong way because of how loosely structured it allowed you to be and the amount of leaky scope it encouraged.

I finally decided earlier this year it was probably worth my time learning a framework just to get some structure in my code, so I asked a webdev friend if he had any recommendations for a JS framework I should try; he pointed me towards Vue. I had never heard of it and was skeptical, but I started working through the quickstart guide (Vue docs are great, another +1 to Evan!) and I was hooked before I finished the third example. It was night and day from jQuery, but easy to learn. My experience so far is that Vue (in contrast to jQuery) is astoundingly flexible for how terse it is. My code was probably bad, but rewriting a jQuery page in Vue usually halved my linecount.

>no transpilation

This is huge to people who just want enough JS to get their proposed feature working and don't want their whole site to be JS, and to beginners. True, at this point I have started getting comfortable with the npm/webpack/babel/es6 stack and I enjoy the things it makes convenient - but at the beginning it's a pretty nontrivial learning curve and delayed benefit for a dev team that have probably been doing most things on the server with python or php.

>Vue.js looks like a nice middle ground... while also nurturing some of [React's] ideas

YES. My first three tries in Vue were basically little calculators that hit some APIs and got some user input and displayed data. I had no idea what "components" were and my calculators were quick to write and worked great. I figured that if I ever needed to use components, there was time enough to learn about them later.

A month later, I decided to dig in and grok React. After a couple of good tutorials, I finally get components and why they can be great. I've never used Vue's component system, but now I have faith that they are as much a pleasure to use as the rest of it.

The great thing about Vue is that it's modular. It can be as simple or as powerful as you need. If you just want to define some behavior and have an object with standardized access to hold the state of your page, you can do that. If you want to use portable components to reduce duplication of effort, you can do that. If you want to enforce Flux design, vuex[0] is there for you. If you want to write a full SPA and need a router, vue-router[1] will do it. If you want to use JSX, there's a Babel plugin[2] for that. None of these are around to complicate your understanding of things when you're learning, but they are easy to plug in when you need them. This is in pretty strong contrast to my experience with React, where you get hit with a lot all at once. Admittedly, I jumped quickly into using Redux and websockets because I was using that one great tutorial that everyone links[3] - so maybe React by itself isn't too overwhelming. I won't hold my breath though.

[0]: https://github.com/vuejs/vuex

[1]: https://github.com/vuejs/vue-router

[2]: https://github.com/vuejs/babel-plugin-transform-vue-jsx

[3]: https://teropa.info/blog/2015/09/10/full-stack-redux-tutoria...