Why we’re building DejaVue.js
I’ve wanted to build a front-end developer tool for some time now, and found two others who also wanted in. After spending a few days throwing ideas around, we decided to build DejaVue, a visualization and debugging tool built for Vue.js. I’ll talk about why we decided to build DejaVue, and how we hope our tool contributes to the Vue community.
Why Vue?
We researched other frameworks (mostly React/Angular) and came to the realization that the ecosystem was already quite crowded. Most of our best ideas had already been built, couldn’t realistically be made, or wasn’t useful enough for people to actually use it. We wanted our tool to be something we were proud of, so we started checking out other frameworks.
Vue was quite close to what we were looking for. It has a smaller, yet rapidly growing community. It has a smaller learning curve, performs faster than React, and takes the best of Angular+React without sacrificing any functionality. Excellent documentation, supportive community, and lots of opportunities to build something that would be useful for other developers — what’s not to love?
What should we build?
It wouldn’t be easy thinking of something useful, especially considering we hadn’t really built anything in Vue before. We started by reading the documentation and building small apps. We found that when we were able to visualize the component hierarchy, we started to understand what was happening. Once we understood the structure, we felt that we could starting building over it right away. If we could help other developers reach that level of understanding sooner, that could be really cool.
So we’re building DejaVue. It’s a chrome dev extension that helps you see how your application is running, like this:
Each node represents a component, and the single node at the top represents the base. Every iteration of its children makes up the rest of the graph. If you can see and understand this, you’ll be ready to start contributing to a project right away. It will also show you which props and variables are being rendered, and how it affects other components. It will offer suggestions on which component is likely causing a bug or hindering performance. And hopefully a few other cool things.
So wish us luck! We’ll deploy our first version mid February. We’re hoping this gives us a chance to keep building useful things.
Jon, Scott, and Mike
