Why Vuejs Could Be The Future of Umbraco
When Umbraco v7 Launched back in 2013, with its fresh UI using Angular JS, it was a huge change for the community. Where before packages were mostly server-side based, Angular JS opened up a lot of opportunities for new and exciting editors such as Nested Content and Fluidity, neither of which would have been possible had it not been for this move.
At the time, the community was excited about the change, and many used it as an excuse to learn a new and assumingly stable and well-supported framework. Unfortunately, that didn't turn out to be the case and only a year later in 2014, Angular 2 was announced and it was set to be a complete rewrite, with new concepts which would not be backwards compatible. As you might expect, the community was devastated, leading many to start to look at alternatives, ourselves included.
The Angular team did try their best to make the transition as easy as possible by backporting many of the v2 concepts to v1. In addition, they also agreed to maintain the v1 stack whilst it is still the predominantly used framework. Even with these compromises, however, there is no getting away from the fact that the framework you are using is on death row.
Angular 2
The logical thought process would appear to be, "let's move over to Angular 2 then", after all, whilst there are many new concepts, there are still some that are the same, so it shouldn't be as bad as starting from scratch. Unfortunately, though, Angular 2 just isn't looking like a suitable match for the Umbraco project.
Some of the core concepts Umbraco uses to have a "pluggable" architecture are no longer present in v2 which would require HQ to rewrite these features back in. In addition, the v2 build process is a lot more convoluted than v1, forcing developers to learn webpack, typescript, and others just to be able to contribute.
Realistically then, Angular 2 just isn't looking like as good a solution for Umbraco moving forward. So this begs the question, where might Umbraco go next?
Vuejs
Recently we've been doing a lot of work with vuejs, from online interactive maps to progressive web apps and electron desktop apps, and we really think this could be the answer for Umbraco. Whilst we could go on for hours about how much we love it, we thought we'd just highlight our top 5 reasons why we think it could be a great fit for Umbraco.
1. No build step required
One of vuejs's biggest pluses is that not only does it scale up, but it scales down just as well too. That means you don't need a convoluted build process just to use it. Simply include the vuejs js file into your page like you would any other js library and away you go. In our opinion, the simplicity of inclusion was one of the better points of Angular 1, which also works in this way, but has since been dropped from Angular 2.
Whilst build processes allow for some great optimisations and the ability to find errors early, for contributors unfamiliar with the technology, they can be a huge barrier. With Umbraco being an open source project, the barrier to entry is a big concern.
2. Similar templating system
For us, moving over to vuejs was pretty straightforward as the templating system was very similar. Both are HTML based, and both use framework specific attributes to control reactivity which were pretty closely named. ng-show becomes v-show, ng-if becomes v-if, ng-for becomes v-for ... you get the gist.
We know not everyone is a fan of this approach, but for us, it was easy to get to grips with, and functionally did everything we were used to with Angular 1.
3. Highly performant
A big issue for Angular 1 was performance and is one of the major reasons for the Angular 2 re-write. If you are familiar with the Umbraco UI framework, you'll find quite a few workarounds to get over a lot of these issues, which isn't ideal.
Vuejs, on the other hand, is very performant. Under the hood, it uses a virtual DOM to track DOM changes and only applies small updates to the actual HTML DOM when it detects something has changed. Teamed with some clever caching strategies for computed and watched properties vuejs is one of the most performant frameworks out there.
4. No magic inside
Another major issue that came out of Angular 1 was that some features worked in weird ways and it wasn't very logical why some things did what they did.
With vuejs, the component lifecycle and data flow are really well defined and documented and work in an expected and repeatable manner. This predictability makes it a lot simpler to get to know how the framework works, and how best to architect your code as well as reviewing and contributing to the core code too.
5. Easy to learn
Another big selling point of Angular 1 when it came out was it's really detailed documentation. The same is true of Angular 2, but even then, we found it rather difficult to get our head around.
With vuejs though, the documentation is really clear, thorough and written for beginners. You won't find fancy ES6 shorthand until you get to the advanced topics where it makes sense. All the basics are written in plain old, familiar javascript so there is no figuring out where the code ends and tooling begins. When we started out, this was a godsend as we could just focus on the concepts and not the bells and whistles.
For Umbraco, having their framework of choice be easy to learn is really important for community involvement.
Conclusion
Only time will tell which route Umbraco does choose to go, and that won't be for a while as there is no plan to look at an alternative till at least Umbraco v9, but hopefully this article shows some of the core features we think would make vuejs a great fit for the Umbraco project and the community of developers.
I'm sure other frameworks can give similar results, and we've purposefully not compared vuejs to those others for that very reason. Frameworks can be a very personal choice with very little between them, so we just wanted to show what vuejs has to offer.
If you'd like to know more about vuejs and happen to be in Germany on April 27th, 2018, then why not attend the Umbraco Festival Deutschland conference where I'll be talking in a bit more depth about this subject.