The New FileCloud Experience – Migrating from GWT to Vue.js
Launched in 2012, FileCloud has distinguished itself in the industry as an efficient system for Enterprise File Sharing, Sync, Backup and Remote Access. The system was built using the GWT Web Toolkit based on Java; however, after nearly ten years of growth and development, FileCloud was due for a UX revamp. We decided to rebuild the UI from scratch with a completely new framework: Vue.js. The reasons were simple:
- Vue.js offers a smooth and slick user experience,
- Vue.js is user- and developer-friendly, with tons of useful libraries, a solid community, and a great toolset.
The Need for a UX Revamp
To transform the classic UI to a new system, many challenges came up, mainly addressing backward compatibility. How will UI 2.0 communicate with the Apache server? Will the old shares be compatible with the new vue.js URL mechanism? Can the new system efficiently replace FileCloud solutions without alienating long-term customers?
With all these uncertainties, there are a few key points that make the task of reimagining FileCloud, an already existing solution used by customers, worth the trouble.
- “GWT is a great web toolkit in the market for writing AJAX applications” is a statement that would’ve been true a decade ago. However, GWT has been showing its age for a while now. Debugging takes significantly longer, due to falling market interest and industry support, as well as non-updated documentation.
- Recruiting and onboarding new employees is a pain due to a comparatively small talent pool for GWT.
- Switching to a newer framework offers an improved user experience that leverages the benefits of modern technologies; for use cases like this, Vue.js is arguably the “best” choice.
The Talent Behind the Scenes
The most significant driving force behind the success of the rewrite was the excellent team of engineers and developers. They were well aligned with the company vision, and their level of experience and expertise shone through. The rapport within the team helped everyone achieve a deep understanding of the task at hand, which helped the whole process conclude successfully. We started by reimagining and designing the look and feel of the new system. The new design was a major improvement, but translating that design into a live user experience required extensive teamwork. Four UI developers kicked off the development process with enthusiasm and momentum, aiming to deliver this extensive project in a short timeframe.
Understanding the Existing System
The primary prerequisite for a complete code rewrite is to have a thorough understanding of the existing system organization. This is easier said than done – it is extremely difficult to evaluate the scope of an existing project without looking into different user interfaces and examining how the system behaves under various configurations. When it comes to FileCloud, the system integrates smart options that govern functions, e.g. a file has security rules like DLP and Smart Classification associated with it that might allow or deny a user download based on different factors. Taking great care to note these kinds of details and filtering through classic GWT code, with help from the original contributors, helped map the original code and system organization.
It is easy to overlook all the work invested in building and debugging the original GWT code. Rewriting the code inevitably lead to new bugs that had to be found and fixed.
A job well planned is a job half done.
For a project with such a multifaceted scope, it was important to prioritize the important objectives. It was also helpful to tackle the tougher aspects of the work early on, so developers could gain a better handle on subsequent tasks. This is also an effective strategy to counter unexpected issues later on, which means more time can be allocated to polishing the codebase.
Planning in advance helps to mitigate factors that can adversely impact a project’s end result. Having a well-designed, realistic and transparent plan distributed evenly for the team is a must for a smooth operation throughout the duration of the project.
The team made use of several task management tools to track progress and manage the various tasks involved in FileCloud’s new UI development. Trello and YouTrack were specifically implemented to present the proposed workflow in a graphical and intuitive manner.
Agile and Continuous Development
Continuous development and feedback from the team and users were immensely instrumental during the UI revamp. A staging environment with the capacity to support a larger group testing the user experience ensured that product improvements could be implemented on the go. The Agile approach proved to be useful for phase-wise development, rather than trying to push all the changes at once to users. Following the pre-planned development path through a series of sprints ensured that we met our timeline and reduced issues or risk factors.
Planning a UX revamp of a widely used service like FileCloud comes with its own set of challenges.
First, reviewing old code and understanding the purpose of each module is not an easy goal to master in any situation, and FileCloud presented unique elements that demanded specific and careful attention to detail.
Second, incorporating feedback from users and trying to meet objectives within a predetermined timeline was difficult, but we were prepared to resolve these issues and relied on user feedback to inform the design of refactored and new elements in the revamped FileCloud.
Last, the migration strategy from the old to the new system involves significant planning. When implementing a UX revamp change like this one that has a great impact, a gradual change makes for a gentler transition. Users can access the new FileCloud, even as their old data, shares and URLs are maintained. Clients can even switch back to the classic UI whenever needed from the user dropdown on the top header.
In retrospect, the new FileCloud has been a challenging yet fulfilling experience. We at FileCloud hope that you love the new experience and provide feedback to help us improve further.
Article written by Niharika Sah