Utilizing Vue to create the DSC Loyola Website
I was contacted a few months ago by the president of Developer Student Club Loyola and was presented with a chance to collaborate with them in creating the website for their organization.
For those who are not familiar with this student organization, the Developer Student Club or DSC is a program by Google Developers. They have quite a number of different chapters all around the world. It is aimed at university students to help them learn, collaborate with their peers, and build solutions to problems using the latest technologies from Google.
The major purpose of the website was to provide a community for interested students or even developer enthusiasts to learn, understand, and appreciate the DSC’s advocacy and perhaps participate in their events such as workshops, hackathons, bootcamps and more. For convenience, announcements regarding the said events are made available through this website. Interested individuals can also volunteer to become DSC leads, establish their own community, and invite other like-minded individuals.
Being a part of the website development process, a designer from the team had given me the mock-ups of the website. It had five pages and embraced the Google style guide as it had a minimal yet sleek feel and adopted Google’s brand colors. I was able to translate their vision into a reality through Vue, a versatile and progressive framework built with Javascript.
Vue was created by Evan You to provide a painless way to build interactive user interfaces. Vue is actually inspired from an earlier version of Angular, another Javascript framework, which explains the similarity in their syntax. Evan You, however, mentioned in Vue’s documentary that he added various features to create better animations and transitions and made other significant improvements. In doing so, he has helped numerous seasoned and beginner developers, me included, to build sophisticated applications efficiently.
True to its purpose, using Vue for this project was a breeze. With the component system, one of the important concepts in Vue, I was able to abstract my HTML and CSS designs into smaller components and reused these in other parts of the application. I also used the Vue Router which helped with properly setting up a functional navigation for the website, showing dynamic data relative to the page you are currently on.
Now, you may be asking why Vue? Why not Angular, the Javascript framework maintained by Google since the website is for DSC, a Google Developer program?
Well, it was Vue’s simplicity and ability to scale up in complexity. Vue is incrementally adoptable and easy to pick up for any developer. It may not come with everything out-of-the-box however it has sort of a plugin system where you can add additional features when necessary which helps not to overwhelm a developer when creating an app with Vue.
Although Vue is not backed by major companies like Google’s Angular or maybe even Facebook’s React, the creator of Vue and its team of collaborators are not pressured to release updates all the time and does a great job of listening to its community leading to a better developer experience.
But I digress, it would be very difficult for anyone to argue that one framework is objectively better than the other. Each framework or library is good in their own rights. Perhaps, one might be better suited than the other given a set of requirements and this is where we can begin to discuss the merits of each tool.
And at the end of the day, that is what they are. Tools. Each designed to address specific concerns.
For the DSC website in particular, with its simplistic UI and the possibility of this project to scale up in the future, I think Vue was a befitting framework. Ultimately, it was a fun experience and I am more than honored to be involved in the process of creating an online presence for this community in the form of a website.
Woah!
You’ve reached the end of this article! Thank you for reading up to this point. If you have questions, feel free to reach me at krizzabullecer@gmail.com or visit my personal website!
Krizza Bullecer is primarily full-stack web developer utilizing Javascript in many projects, and is actively promoting the idea of more women in tech with the help of Women Who Code Manila.
