(Update: The folks at Vue made an even easier startup template. I wrote a quick post about it here.)
Since Polymer went 1.0, I have built a couple small, personal projects with it. Those experiences have gone great, but some of the rigidity of Polymer’s elements and API continued to bug me.
Now I’m working on shipping my first public project in a while, and I’ve bumped into some challenges with Polymer. So when a couple folks mentioned Vue.js on back-to-back days last week I figured it was worth looking into.
Here’s my initial impressions, a few resources and more.
Vue is great for getting an app up and running in no time. Even if single-page apps, or client-side JS apps in general, are a new thing for you, vue is a forgiving way to learn the concepts alongside the actual structure of building such an app. Check out these links to get up and running ASAP:
- Start with a Vue boilerplate instead of piecemeal
- Build a full on app, while learning vue, webpack and more, with this awesome walkthrough
- Sift through the awesome vue repo for loads of resources
- For Chrome, go get the vue-devtools, it’s indispensable
Getting started with Vue is terribly easy. For one thing, you don’t need any complicated build process, fancy tooling or anything else. You can grab a downloadable version of the library, chuck a script tag in some HTML and plug one of these examples in right away.
(You don‘t even need some fancy auto-reload server if you can run one of these great one-line servers.)
Polymer has a similarly easy path to hello world when you use the Polymer Starter Kit. The difference is that Polymer starts you off with the build toolchain for a full-blown app, whereas Vue offers differing levels of adoption. (More on this below.)
If you’re running Chrome, you can pick up the vue-devtools for a richer debugging experience. This is a pretty nifty helper because often, one of the most difficult aspects of building a browser-based app (SPA, or whatever you may call it) is getting easy, well-formatted access to the model data in your browser.
This is another pretty big advantage for folks just getting into a framework for JS apps. With Polymer, getting your head wrapped around the Shadow DOM, the so-called “shady DOM” and what appears in the client-rendered DOM can be daunting. Getting at the data in those objects, and tweaking their properties is next to impossible in the console alone, especially without a firm grasp of the concepts in play.
Building A Bigger App
As you become familiar with how Vue works, you may start to focus on building a bigger app with it. To get there, there are a few helpers already in place. There’s a little bit of a page on it in the official vue docs, but that is a bit of a whirlwind tour, especially if you are unfamiliar with tools like Webpack or Browserify (as I was).
Below are some of the building blocks for a bigger app, included for reference. But, a better way to get going can be found in the next section, Vue Boilerplates.
Centralized state management is made easier with vuex, which also has some good documentation. Though, I’d strongly recommend this video by James Browne, which does a great job of explaining the concepts behind managing state in the client, as well as how to use vuex to do so.
Related to the above, if you’re pulling data from your API, you will want to take a look at vue-resource as a means of encapsulating data sources in your app. In my opinion, you should always prefer resource factories over ad-hoc communication, but if you need the latter, there is also vue-async-data which provides a convenient way to fire async requests instead of rolling your own.
Here’s an area where Polymer has really done some great work for app developers right out of the gate. The Polymer Element Catalog is full of well-designed—both technically and visually—components that make everything from building a form to modals to full-page layouts super simple. There’s also a growing community of folks building elements for Polymer apps, such as Vaadin, who provide a few great elements for free.
Vue has a few great demos of rolling your own components including a grid, as well as full-blown mini-apps, such as the obligatory implementation of TodoMVC. There’s a much greater list of components, as well as a zillion other resources, available in the awesome vue repo, though I can’t vouch for all of the resources as I’ve only begun to scratch the surface myself.
A better way to get started on a full-blown app, however, is to use one of the boilerplate repositories. These are very similar to the Polymer Starter Kit, and will require you to utilize Webpack or Browserify.
The great part about these templates is that they include all of the modules I wrote about in the last section. All the structure is in place, so once you get the template and the node modules installed, you simply fire up the dev server. Right away, you can see and make changes to the main
.vue file or build a new component, and see it all in the browser.
For completeness’ sake, the same is basically true for Polymer. If you get the starter kit, or even if you are putting together your own app from scratch, you can get the toolchain up and running with Gulp or Grunt. But Polymer requires using Vulcanize, a proprietary tool that performs much of the same work that Webpack or Browserify do, which seems like inventing a a tool for inventing’s sake. The toolchain also always felt a little rigid to me, demanding certain conventions during development that required me to make changes to my webserver or my code in order to have the right path for components or to serve resources in a certain way.
Follow In The Footsteps …
The awesome part of the Pusher walkthrough is that it gently introduces you to Webpack, building a vue component, writing in ES6 and how to think about a component-based architecture, all without getting too jargony or assuming you already know any of the moving parts. For me, this helped me go from literally zero knowledge about any of these technologies, to writing a cross-domain ajax app in just a couple hours.
I’d be remiss if I didn’t mention Rob Dodson’s Polycasts for Polymer as a counterpoint, since he has done a pretty fantastic job demoing everything from component building to build process tools.
One Key Advantage
After all is said and done though, there is one clear advantage for me personally. I left it to the end because it is entirely subjective, and can be seen as a negative if you are looking for an off-the-shelf system of components.
For me, the absence of a mandate on how I write my markup or styles is a Big Deal. Being able to write my HTML and CSS / LESS on my own means that I can build components and pages freely, without restriction. it also means that I can easily make the components of my SPA look like the static pages of my site without reinventing my stylesheets. This may seem like a minor point, but to be able to quickly write some HTML, slice it up into components and not have to rethink anything is often overlooked or underestimated.
As I said, this can be a drawback for some. For example, while there is a grid demo in Vue, it has a long way to go before it is on par with either the Vaadin grid or Hands On Table in Polymer.
This speaks to one large difference in approach, which is what makes Vue a better fit for me now, over Polymer.
Vue is great if you are building form the ground up, are a solo hacker, or are just starting out in client-side apps and MV* architectures. It let’s you get an interface up quickly, so you can focus on how your app actually works, and less on the infrastructure.
Polymer is a better fit if you have an established application already, a larger team, or want to convert a more static application to a single-page experience. It sort of comes with an implication of how your app should be structured, fitting in well with a system that has already done some work to abstract application logic.
Since I am but a single person, whacking away at apps on my own time, I need something that allows me to be agile, adaptive and free to explore. Something with strong principle, but not prescription.