Incremental UI Enhancement with Laravel and Vue.js

Working with startups, one thing I have realised with time is that it’s very important to plan sprints in a way that we are ready with something for the client to see and review as fast as possible. Working with a hard timeline and/or fixed budget, the ability to see something evolving with every release/milestone really helps in not only showing the progress in a very transparent way but also building confidence with the client in terms of the progress made (especially if you are working with them for the first time).

When we were working on a healthcare platform called Trualta, initially the client’s idea was to use some ready made solution, tweak it and go live. But the available solutions were not so elegant and looked quite dated. In this situation, we were able to convince the client that a custom-build platform will be a better approach in the long run both in terms of scalability and for the ability to customise based on new requirements as they emerge from the end-user.

The application required a full content management capability for managing Articles, Audio, Video and Quiz type content for the learners. Additionally, there were requirements for modules like Forums, Ask an Expert and Events. Also, to add some gamification to the system and keep the users interested, a small product catalogue with reward points to redeem products in exchange for the reward points, which are acquired through interactions with the system, was also envisioned.

Laravel was our first platform of choice because of our familiarity with the framework, the ability to do rapid development and so many out of the box solutions like Authentication, Caching, Mailing, etc., which would save us a lot of time. We did consider CMSes like Drupal and WordPress, however, we knew that most of the users will be logged in and hence because of performance concerns, we decided otherwise. If you want to read about what are the performance concerns with Drupal, click here (add a link to drupal performance blog).

We focused on getting the functionality done with a design that had bare minimum JavaScript interactions. The idea was to get the screens done in small sprints and then review them along with the client and only add interactions that were absolutely necessary. In this situation, Vue.js proved to be a great option. The idea of breaking down small UI elements into standalone components helped us do a mix of PHP and JS on the same page. That is, video player and quiz are Vue.js components on a page which is being rendered through a PHP template. Initially, the quiz will be locked and when the video is complete, an event which is being handled by Vue unlocks the quiz player.

Here, the advantages we had with Vue.js were: 

  1. We didn’t had to do a full-blown SPA to get the rich UI experience
  2. Data was passed to each element of the page through PHP templates
  3. Vue.js will get its data using the props which are sent as JSON encoded data from a blade file

Today, we are very open to adding new features quickly even on an experimental basis. We first develop the functionality as a prototype, then we use it and depending on how it looks, we decide what kind of UI enhancements will make sense instead of spending a lot of time on different JavaScript work at the initial stages.

Hoping this blog was a helpful read. If you have any suggestions or thoughts, write to us at _____________________ or comment below.

Written by: Amitav Roy
Edited by: Thailambal PN

You may also like

Use of SVG for Creating Irregular Shapes

As designers and developers of the web, we want everything to look beautiful and be practical at the same time. We face challenges while doing so and one such challenge was that we faced while creating the web portal for LASALLE College of the Arts, Singapore.  LASALLE is the Asia’s

Read More
Top 10 Best Slack Bots in 2020 That Will Make Your Life Easier!

Slack is a messaging app that evolved in 2012 out of Vancouver, Canada. Not many people know but Slack is actually an acronym, it stands for “Searchable Log Of All Communication and Knowledge”. It’s a great messaging app that you can use to get your entire team working on a

Read More
Cause Mapping (Part 1)

In this article, we will discuss how we created a tool to facilitate building flow charts. These charts would be required to follow certain business rules and would integrate into a host software – the application that includes this tool as a subset of its functionality.

Read More
Scroll to Top