Silverlight to Vue.js Migration with UI Parity Constraint
How we recreated legacy interface patterns in modern web technology while introducing Agile practices
Client: UK property management software company
Industry:Professional Services Solutions
Services:Legacy Modernisation
Key results at a glance
The challenge
The Problem
A property management company had a well-established Silverlight application with 15+ screens of complex interaction. Silverlight - essentially a Windows Forms application embedded in the browser, similar to Flash - was approaching end of life.
The Constraint
The user interface had to remain essentially identical to the original. The existing application wasn't well-styled or particularly user-friendly, but the business required familiarity for their users. This meant:
- Recreating non-standard patterns: Silverlight's interface conventions don't map cleanly to web standards
- Styling challenges: Unusual for greenfield Vue development
- User expectations: Any deviation would require retraining
Beyond Migration
The development team had attempted Agile adoption but struggled with implementation - daily standups lacked structure, and broader practices weren't established.
The results
Key results
- 90% of 15+ screen Silverlight application migrated to Vue.js
- UI parity achieved despite non-standard Silverlight patterns
- Agile practices established: standups, refinements, retrospectives
- Component-driven architecture with SOLID principles
- Successful handover to internal team for completion
Outcomes
Migration Progress
- 90% of migration completed before handover
- 15+ screens successfully converted to Vue.js
- UI parity achieved - users saw familiar interface
Technical Foundation
- Component-driven architecture with SOLID principles
- Proper state management patterns
- Clean separation from existing REST API
Process Improvement
- Agile practices properly established
- Standups, refinements, retrospectives running
- Definition of done creating quality standards
Successful Handover
The client decided their internal team could complete the remaining 10% - a common and healthy pattern with contract engagements. The migration approach and patterns were documented for continuity.
The solution
Our Approach
We combined technical migration with process improvement.
Component-Driven Migration
- SOLID principles: Each component with single, clear purpose
- Proper state management: Vue.js patterns replacing Silverlight bindings
- REST API integration: Backend team had sensibly contained the application behind an API
The existing API meant we only needed a few additional endpoints rather than rebuilding data access - a significant advantage.
UI Parity
Recreating Silverlight's non-standard interface patterns in Vue.js required careful attention to:
- Grid layouts matching desktop conventions
- Form interactions behaving identically
- Navigation patterns users expected
Agile Advisory
Worked with leadership to properly establish:
- Daily standups: Structured format
- Backlog refinement: Proper prioritisation
- Retrospectives: Continuous improvement
- Definition of done: Quality standards
Extended the conversation beyond the development team to how the business itself could become more agile.
Ready to achieve similar results?
Let's discuss how we can help your organisation achieve these results.
Book a strategy call