From Legacy to Modern: The Technological Evolution of VILD 1

Introduction#

The transition from VildFactory.com to Vild.fi represents a significant leap forward in web development practices. This comparison showcases how a Symfony-based application evolved from traditional tooling to embrace modern web standards while maintaining its core functionality. There was 1900 commits, 570 files changed, 34392 rows of code added and 14264 rows deleted. This means that the whole website was coded from ground up again.

Core Framework Advancements#

Symfony Version Jump#

The most significant change is the upgrade from Symfony 6.4 to Symfony 7.3, bringing:

• Enhanced Performance: Improved container compilation and routing
• Modern PHP Support: Full PHP 8.4 compatibility vs PHP 8.2 minimum
• Latest Features: Access to the newest Symfony components and improvements

Frontend Revolution: From Webpack to Asset Mapper#

Why This Change Matters#

The transition from Webpack Encore to Asset Mapper represents a fundamental shift in how web applications handle their frontend resources.

Legacy Approach (Webpack Encore)#

The old system required a complex build process where all JavaScript and CSS files needed to be compiled and bundled before the website could work. Think of it like having to cook all your ingredients together before you could serve a meal - every time you changed something, you had to restart the entire cooking process.

Why I included these technologies:

• Webpack configuration was needed to tell the system how to bundle all the JavaScript files together
• jQuery library was included for easier DOM manipulation and event handling
• Bootstrap 4 provided the UI framework for consistent styling
• Build pipeline was necessary to process SASS files and optimize assets

Dependencies included:

• jQuery 3.5.0 for interactive features
• Bootstrap 4.4.1 for responsive design
• Complex webpack build system
• Node.js development environment for compilation

Modern Approach (Asset Mapper + Importmap)#

The new system works more like a modern streaming service - it loads exactly what you need, when you need it, without any preprocessing required.

Why I chose these new technologies:

• Asset Mapper eliminates the need for complex build processes
• Importmap allows the browser to natively load JavaScript modules
• Stimulus provides a lightweight way to add interactivity
• Live Components enable real-time updates without page refreshes

Key Improvements:

• No Build Step Required: Changes appear instantly without compilation
• Simplified Development: I can see changes immediately
• Modern Dependencies: Bootstrap 5.3.8 with better accessibility, Stimulus 3.2.2 for modern interactions
• Better Performance: Browser loads only what's needed, when it's needed

User Experience Revolution: The Voiceover Search Transformation#

Beyond the technical improvements, the new Vild.fi also received a complete graphical overhaul with modern design aesthetics, improved typography, and enhanced visual hierarchy - making the platform not only more functional but also more visually appealing. Graphic design was done by Theo Sandström / fel.one

How Voiceover Search Worked Before#

In the old VildFactory website, finding the right voice actor was like using an old-fashioned filing cabinet. Here's what happened when someone wanted to search for voice actors:

The Old Experience:

1. Client-side Filtering: The system used jQuery to show and hide voice actors based on filter selections without page reloads
2. Manual State Management: Developers had to manually recreate the entire user interface state on every page load
3. Custom Dropdowns: Developers had to build custom dropdown menus from scratch because the standard ones weren't flexible enough
4. Thoughtful Delays: There was a 500-millisecond delay built into the name search - good UX to prevent overwhelming the server and give users time to finish typing
5. PWA with Limitations: The system worked as a Progressive Web App but only for 2 pages, where the browser back button functionality was broken
6. State Reconstruction Challenge: The biggest technical hurdle was figuring out what the user expected to see on page load - recreating their filter selections, shortlist status, and display preferences required complex jQuery logic

Why I chose jQuery for this:

• jQuery was the standard way to make web pages interactive at the time
• It provided reliable methods to show/hide elements
• Event handling was more predictable across different browsers
• I had to write all the filtering logic manually for each type of search
• The PWA challenge: While the filtering worked smoothly, implementing PWA functionality with proper state management was complex, and browser navigation broke on the two pages that used this approach

How Voiceover Search Works Now#

The new Vild.fi website transformed this experience into something much more like using a modern smartphone app:

The Modern Experience:

1. Instant Updates: When you change any filter, results update immediately without page reloads
2. Smart Components: Each filter (Language, Gender, Age, Tone) is now a "Live Component" that knows how to update itself
3. Real-time Feedback: As you type in the name search, results appear instantly
4. Dynamic Counts: Each filter option shows you exactly how many voice actors match that criteria
5. Session Memory: The system remembers your preferences and keeps them active across page visits

Why developers chose Live Components:

• Automatic Synchronization: Components automatically stay in sync with the server
• Less Custom Programming: No need to manually write show/hide logic
• Better User Experience: Updates happen seamlessly without page interruption
• Server-side Logic: Complex filtering logic stays on the server where it's more secure and maintainable

Real-World Impact for Users#

Before: Searching for a Finnish female voice actor aged 30-40 meant:

1. Select "Finnish" → page updates, wait
2. Select "Female" → page updates, wait
3. Select age range → page updates, wait
4. Hope the results have voice actor with these properties

Now: The same search is fluid:

1. Click "Finnish" → results filter instantly, other options update their counts
2. Click "Female" → results refine immediately, remaining options adjust
3. Select age → final results appear seamlessly
4. All options show live counts of available actors
5. You cannot end up in situation where there is no actor in the page

The Technical Magic Behind the Scenes#

Old System - The Scalability Problem:

• Custom dropdown creation and event handling
• Manual DOM manipulation for every change
• Separate AJAX calls for each filter update
• State reconstruction puzzle: On every page load, the system had to figure out what the user had previously selected, check their shortlist status, and restore the correct display state
• Growing pains: While the search worked well initially, as the voice actor database grew from dozens to hundreds of profiles, the client-side filtering became slower and more resource-intensive
• Memory limitations: Loading all voice actor data at once became unsustainable as the roster expanded

New System - Built for Scale:

• Each filter is a self-contained component that manages its own state automatically
• Automatic server communication without manual AJAX programming
• Built-in session management for filter persistence - no more state reconstruction headaches
• Real-time count updates happen automatically
• Server-side filtering: Only loads the data that matches current filters, keeping performance consistent regardless of database size
• Automatic state management: The system always knows what the user has selected and what's in their shortlist, without manual programming

Why This Matters for Business#

For Voice Actors: Their profiles are discovered more easily, leading to more opportunities, and the system can now handle a much larger roster without performance degradation
For Clients: Finding the perfect voice is faster and more intuitive, like using Spotify to find music, even as the talent pool continues to grow
For Me as Developer: No more debugging state management issues or worrying about shortlist conflicts - the system handles complexity automatically
For the Business: Better user experience leads to more successful matches and happier customers, while the scalable architecture supports unlimited growth in the voice actor database

Development Experience#

Why Development Workflow Changed#

The transformation in development experience is like upgrading from developing photos in a darkroom to using instant digital photography.

Tooling Improvements#

Legacy Development Process: Developers had to run build commands every time they made changes. The workflow included commands for starting a development server, watching for file changes, and building production assets.

Why these build scripts were necessary:

• Development server was needed to compile assets while coding
• Watch mode had to monitor file changes and rebuild automatically
• Production build was required to optimize and compress all assets
• Manual compilation was necessary because browsers couldn't understand the raw source files

Modern Development: The new system eliminates most of this complexity:

• No build scripts required: Changes appear immediately in the browser
• Immediate asset updates: Save a file and see changes instantly
• Simplified deployment: No compilation step needed for production
• Better debugging: Direct access to source files makes troubleshooting easier

Why I embraced this change:

• Faster development cycles mean more time for actual feature building
• Less time spent waiting for builds means better productivity
• Fewer moving parts means fewer things that can break

Code Quality Tools Enhancement#

The modern version includes significantly improved development tools that help maintain code quality:

Why these tools were added:

• PHP CS Fixer: Automatically formats code to maintain consistent style across the team
• PHPStan: Analyzes code for potential bugs before they reach users
• Rector: Helps upgrade code to use modern PHP features safely
• Twig CS Fixer: Ensures template files follow best practices

The benefit: These tools act like having an expert developer constantly reviewing your work, catching mistakes and suggesting improvements automatically.

Security and Modern Standards#

Dependency Management#

Modern advantages:

• Updated security patches in all dependencies
• Removal of jQuery dependency reduces attack surface
• Modern authentication patterns with Symfony 7.3

Web Standards Compliance#

• Native ES modules support
• Modern CSS features without preprocessing
• Enhanced accessibility features

Migration Benefits Summary#

Conclusion#

The evolution from VildFactory.com to Vild.fi demonstrates a successful modernization that prioritizes:

1. Developer Experience: Simplified tooling and faster development cycles
2. Performance: Native browser features and optimized loading
3. Maintainability: Modern frameworks with better long-term support
4. User Experience: Enhanced interactivity through Stimulus and UX components

This technological advancement positions Vild.fi as a modern, maintainable, and performant web application that can easily adapt to future web development trends while maintaining the robust foundation that Symfony provides.

The migration showcases how embracing modern web standards can simultaneously improve developer productivity and end-user experience, making it an excellent case study for Symfony application modernization.