From Legacy to Lightning Fast - Modernizing with React4XP 6: Enonic Oslo Meetup Talk - December 4, 2025
ℹ️
Disclaimer: I am not affiliated with, employed by, or sponsored by Anthropic. I am a paying Claude Pro subscriber and receive no compensation or endorsement for mentioning Claude in this article. All opinions and experiences shared are my own.
On December 4, 2025, I presented at the Enonic Oslo Meetup about modernizing Liberalistene.no from React4XP v3 to v6. What started as a forced upgrade turned into a complete infrastructure overhaul in 2.5 weeks—and became a story about effective human-AI collaboration.
From Legacy to Lightning Fast
Modernizing with React4XP 6
Why We Had To Migrate
October 3: Started the Migration
Oct 10-15: Content Studio Breaking
October 16: Slack to the Rescue
October 19: We're Live!
The PartShim Pattern
What Changed (Oct 3-19)
Key Lessons
What Actually Happened
Time for Questions
Read the Full Story
The Forced Upgrade
In mid-August 2025, Liberalistene.no was running smoothly on Enonic Cloud with React4XP v3. Then came the notification: Enonic needed to upgrade Enonic XP to version 7.15, and React4XP v3 was blocking the upgrade.
We had no choice. We had to migrate to React4XP v6 as fast as possible.
But "as fast as possible" didn't mean immediately. My workload at the time made it impossible to start right away. The migration had to wait until October when I could dedicate the focused time it deserved.
The Migration Journey
October 3, 2025 - We started the migration, but not just React4XP. We decided to modernize the entire infrastructure:
- Node 16 → 22
- Gradle 6.5 → 8.5
- Webpack → RSpack
- Babel → TSup
- Integrated Tailwind CSS v4
The 9 layouts migrated from Thymeleaf to React/TSX went smoothly. Then came the challenge: 36 Parts that needed migration.
October 10-15, 2025 - Five days of struggle. Content Studio started breaking when we worked on pages. We tried increasingly desperate workarounds and hacks. The AI pair programmer I was working with (Claude Code) was making crazier and crazier suggestions as the problem persisted.
October 16, 2025 - Finally, I did what I should have done days earlier: I asked the Enonic Slack developer channel for help.
Pavel responded: "I can't reproduce the error... what versions are you on?"
The answer was simple and frustrating: Upgrade Content Studio.
The React4XP v6 documentation never mentioned the Content Studio version requirement. All those workarounds, all that time lost—for a simple environment issue. 🤦
October 19, 2025 - We went live. Content Studio upgraded, migration complete, 398 files changed. 🎉
The Architectural Breakthrough: PartShim
The real innovation wasn't just completing the migration—it was how we restructured the code. In React4XP v3, Parts had controllers with 50-100 lines of mixed server logic and component rendering. Tightly coupled, hard to test.
We created the PartShim pattern. Every Part file became just 3 lines:
import {Book} from '/react4xp/common/Book/Book';
import {createPartShim} from '/react4xp/common/PartShim/PartShim';
export const BookPart = createPartShim(Book);The Architecture
Part File (BookPart.tsx) → 3 lines: createPartShim(Book)
↓
Processor (BookProcessor.ts) → Fetches/transforms data
↓
Component (Book.tsx) → Pure React, testable in StorybookBenefits:
- ✅ Clean separation of concerns
- ✅ Components are pure React (testable in isolation)
- ✅ Reusable in Storybook, tests, and production
- ✅ Type-safe with TypeScript generics
- ✅ 36 Parts × 3 lines = Highly maintainable
You can see the full implementation in the GitHub repository:
The Human-AI Collaboration
Here's what I revealed in the final slide of the talk: This entire migration was co-authored with Claude Code.
But it wasn't magic. The collaboration model was:
- I had the architectural vision - I understood the clean separation we needed
- Claude initially didn't get it - It over-engineered, made it more complicated
- I taught the pattern through examples - Showed what I wanted, refined the approach
- Claude learned and replicated - Once it understood, it applied the pattern consistently across all 36 Parts
From Developer to Conductor
I transformed from Developer to Claude Code Conductor:
- Set architectural vision - Define the patterns and principles
- Teach through examples - Show, don't just tell
- Conduct when it goes off-key - Course-correct when the AI diverges
- Review and refine output - Final approval on all code
The result: What would have taken 2.5 months solo took 2.5 weeks with AI assistance.
The Numbers
398 files modified
+55,306 lines added
-45,733 lines deleted
Complete infrastructure overhaul
2.5 weeks from start to productionKey Takeaways
1. Forced upgrades can be blessings in disguise We ended up with better architecture, modern tooling, and 70% test coverage—all because we were forced to upgrade.
2. Check environment requirements early 5 days wasted because the docs didn't mention Content Studio version requirements. Always verify your entire environment stack.
3. Ask for help sooner The Enonic Slack community had the answer in minutes. Don't spend days on workarounds before asking.
4. Clean architecture patterns scale The PartShim pattern made 36 migrations trivial. Good abstractions compound.
5. AI amplifies human vision Claude Code didn't design the architecture—I did. But it executed at scale, maintaining consistency across 36 implementations.
About the Meetup
The Enonic Oslo Meetup on December 4, 2025 featured four technical talks:
- 12:00 - My talk: "From Legacy to Lightning Fast: Modernizing with React4XP 6"
- 12:30 - "HTML-over-the-wire" by Tom Arild Jakobsen (Tech Lead, Item Consulting)
- 13:00 - "Schemas Go YAML" by Thomas Sigdestad (CTO, Enonic)
- 13:30 - "Enonic UI Behind the Scenes" by Alan Semenov (VP Engineering, Enonic)
The event brought together 41 Enonic developers at Enonic HQ in Oslo for lunch, networking, and knowledge sharing.
Resources
- Repository: Liberalistene.no on GitHub
- Foundation Commit:
6d876ac - Modernization Roadmap: Issue #31
- Enonic Slack: Join the community
- Meetup Event: Enonic Oslo Meetup
About This Post
Like the migration it describes, this blog post was co-authored with Claude Code. The pattern continues: human vision and architecture, AI assistance for execution and consistency.
Interested in the collaboration model? Read more in The Claude Code Chronicles series.