Tuesday, 22 March, 2022 UTC
Summary
It has been more than one year since we have introduced Vue Js in our Meteor Production App, and last month we have implemented the Storybook in our platform. In this piece, I will be talking about our experience with Vue JS and why & how we implemented the storybook in a Meteor-Vue project.
Throughout this article, I will be talking about some aspects of Meteor JS and Vue Framework, so before you go further I would suggest you get the basics straight about those two.
Why did we introduce Vue JS in Our Meteor App?
We at Fasal have been with Meteor’s default stack ( Blaze + Jquery + Flowrouter) for more than 3 years, and I will be honest, it was cool and we didn't face any technical difficulties as such. We were a small engineering team consisting of only 3 of us for those years, but as we started growing as a company our team got bigger and we understood that this stack will become a bottleneck eventually. So we started researching different frontend technologies so that our system remains Robust, Scalable and easily Maintainable as we grow.
And finally, we chose Vue Js for our UI platform. Here are some of the major deciding factors,
- It can reside alongside Blaze templating engine
- Highly reusable and familiar templating syntaxes
- Comparatively easier to learn than its competitors
- The high decoupling nature ensures no unnecessary or accidental issues due to overriding of code
- Great community support and available integration with Meteor Js
How is the experience? Is Vue.js friendly with Meteor?
I will give it to you straight, it has been awesome. Those who have worked with blaze and jquery implementation know how much time and effort goes into writing those helpers, event handlers, life cycle methods, managing different files for HTML, js and CSS and that full reload on each and every change. After the Vue integration, all those recurring necessary time-consuming parts have just vanished.
https://medium.com/media/2dcb21956e99eeb9c2e749850f0f8dd0/hrefHere are some of my personal favourite things with this Meteor-Vue integration —
- Component-based architecture that makes reusability a piece of cake.
- Hot module replacement is an absolute favourite for everyone
- No issues co-existing with the old blaze code, both run in their separate paths.
- Easily fits in with the Flowrouter without any extra tweaks
- One of the best State Management Pattern — Vuex
- The beautiful structure of the file will make you fall in love with writing a component. All the necessary things for a component ( template, js, CSS ) can reside in a single file in individual sections giving modularity and maintainability out of the box. To give you a perspective I have attached a component code below —
Here’s the official package of Meteor-Vue integration —
GitHub - meteor-vue/vue-meteor: 🌠 Vue first-class integration in Meteor
So Vue JS & Meteor do gel well right? Right?
For most of the part, there was no issue with Vue in Meteor, and whatever challenges we faced in the integration we were able to easily overcome those. However, one particular issue we faced is a bit peculiar and it only happens for the development environment and when someone is running the app on an actual device. So the issue is that the HMR server URL is being set to undefined for the client when the application runs on mobile platforms using Cordova. Because of this, neither live-reload nor hot module replacement works on the device.
Our engineer Vishnu has made a PR to the official package for the fix but it’s yet to be reviewed & merged. Here’s the PR —
Fixed HMR dev server url : undefined when app is run on mobile during development. by VishnuTejaBandi · Pull Request #422 · meteor-vue/vue-meteor
Till the PR gets merged, you can fix the issue locally by following the guide —
How to resolve the Hot Module Replacement issue while testing your Vue-Meteor App on Actual Device
Now, what is Storybook? And where does it fit in our application?
As we moved to Vue’s Component driven architecture, it was quite evident that we needed to ensure code reusability which will make the dev process much faster. So to streamline our component-driven UI engineering, testing, and documentation we used this amazing open-source tool called Storybook.
Storybook provides this intuitive GUI for all your Vue Components with their preview, documentation and configurations.
Basically, as Storybook rightly termed themselves as the “UI component explorer for frontend developers”, also along with providing a beautifully accessible library of the components, it also presents the component information in a really nice manner. This helps us to scale our UI without having to worry about component duplication or frontend documentation.
This is how our Vue components look like in the Storybook LibraryHow we integrated Storybook with Vue Meteor Project
In our project, the implementation of Storybook has been done by our engineer Vishnu, who spent a good amount of time understanding how it will work with Meteor-Vue as this would be one of a kind integration and not done before.
For implementing Storybook in your Meteor project you can follow the official documentation. We have added dot (.) before all storybook related directories so that it’s not included with the bundle and only for the development environment. Also, all the npm packages are dev dependencies. You can find the directory structure and the node modules in the below picture —
Here’s the main.js, which has the configuration for our storybook library —
https://medium.com/media/c333e45a8e3978e75f80f9f9e7209794/hrefHere’s the manager.js snippet, which has the configuration for all the GUI options and the preview.js snippet which has the configuration for component preview —
https://medium.com/media/1a8fbdd56e51604932f53a2e9aeae79d/hrefYou can add some of your own stylesheet too, you can create a CSS or SASS file and include it in the preview.js file.
After this setup is done, you have to write your stories.
You can check out the syntaxes and examples of how stories are written in the below link —
How to write stories
So this is it, we had good fun implementing Storybook with our Meteor application. This has made our life much easier and streamlined the UI development. I would recommend everyone who is looking for scaling to implement it, it will definitely help you out. If you have any questions, please do comment, also if you loved this piece then support me by leaving a clap.
Don’t forget to check my guide to Deeplinking in Meteor Js,
Deep Linking in Meteor JS— A Step by Step Guide with Examples
Meteor + Vue JS + Storybook = A Complete Guide To Scalable UI System 🔥 was originally published in Meteor Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.