From AngularJS to Vue without dying in the attempt
You should know by now that here at Geoblink we work with a humongous amount of data, most of which has to be beautifully displayed across the whole app. That means that, besides needing a good performance on our backend to serve that data, we need a good performance on the browser side to process it and render it to our users in the fastest way possible.
Until now, and still for months to come, we’ve been relying on AngularJS as our frontend framework of choice. Needless to say, it’s been a 3 years relationship and generally speaking, we’re really happy with it. It’s a robust system, incredibly well supported even though there are 3 new versions ahead of it and easy to work with.
However, with apps growing bigger and becoming each time more and more common to do most of the calculations on the browser, we started to worry about the app performance had we decided to continue with AngularJS forever. Taking that into account, we started looking for other possibilities. Considering the size of our application, we didn’t even consider migrating to the newest versions of Angular, since the breaking changes were so big (completely different framework really) that we would’ve needed months to make the change. Of course we considered React, having that huge ecosystem and with great state management tools like redux, it was something to bear in mind. Yet we were reluctant, since we didn’t think combining both technologies would really be successful. We needed something that we could start working with progressively, instead of building a new application from the ground up. And then we ‘viewed’ VueJS (pun intended).
We had the chance of working with Vue in one of our so called Geothons, and we fell in love IMMEDIATELY. The performance improvements were astonishing, and the development speed increased incredibly fast, even though none us had previously worked with it. Plus, the progressive part of the framework was just what we needed. Start developing with this framework while we kept maintaining the main parts of our app with AngularJS. It was a no brainer.
The first test came quick. We had to completely redo a whole section of the app and we decided to start implementing Vue within Geoblink. But stop with the mumbo jumbo you’d say. How do you use two frameworks at the same time without interfering with one another? Really, it couldn’t be more simple, and it’s all thanks to an already included Angular directive.
<div id=”main-vue-app” ng-non-bindable>
<first-vue-component />
<some-other-vue-component />
</div>That’s it? I told you it was simple. When attaching this directive to any HTML element, AngularJS stops watching whatever may be inside it. Basically it tells the framework to not consider anything inside as angular code. What happens inside a non-bindable element, stays within it.
Having this, you can start developing your new VueJS app as you’d normally do. Declare your main app, attach your components, your stores if you’re using Vuex (and you certainly should do it) and that’s it, you have a full working VueJS app within an AngularJS application.
// Require vue components files
import firstVueComponent from ‘path-to-component’
import someOtherComponent from ‘path-to-other-component’ new Vue({
el: '#main-vue-app',
store: mainStore,
components: {
firstVueComponent,
someOtherComponent
}
})
As simple as it may seem, this is really all you need. Of course, this can become way more complicated, but if you are, as we were, thinking of doing a migration for your own app, I can’t recommend enough to consider this framework. So far it’s been great, and we’ve just started! We can’t wait to keep implementing new functionalities with this amazing framework.
Happy coding!
