Silverlight to Vue.js migration with a UI parity constraint

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.

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.

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.