A Seamless Transition:

React and Web Components for Experience Builder Integration

Created by Ryan Ulsberger

March 24th, 2025

The Problem

Web App Builder and the ArcGIS Maps SDK V.3

Sailing into the sunset
vs

Experience Builder Development

  • Widgets are strongly coupled with applications.
  • Lack of flexibility across projects.
  • ExB applications are harder to keep up-to-date.

Looking Ahead

While Experience Builder remains a great tool, we see opportunities to prepare for:

  • ESRI Maps SDK standalone development.
  • Avoiding unnecessary rework by future-proofing our work.
  • Building components that seamlessly transition into future projects.

💡 Proposed Solution

What if we proactively:

  • ⚛️ Develop reusable React components that work in both Experience Builder and standalone apps.
  • 🔄 Reduce duplicate development while maintaining flexibility.
  • 🎨 Standardize UI & logic across projects.

Proof of Concept

  • Demonstrates decoupled development that enhances flexibility.
  • Functions in both Experience Builder and standalone ESRI Maps SDK apps.
  • Encapsulates core functionality into reusable React components.

Why Reusable React Components?

Key benefits:

  1. Reduce duplicate development
  2. Ensure smooth future transitions
  3. Test Developments Independently of Experience Builder

💡 Preparing for the Transition to Web Development

  • ✅ Most of our UI logic will already be built—just connect it to a new framework.
  • ✅ No need to start from scratch, saving time and effort.
  • ✅ We can transition gradually, instead of all at once.
  • ✅ Continue using Experience Builder during the transition.

    • Live Demo

    1. Demonstrate the use of the components within a Pure React Application.
    2. Deploy the Components as a Package.
    3. Install and render the component in Experience Builder.

    Application Config

    vite.config.json

    Package.json

    Installing in Experience Builder

    Experience Builder

    setting.tsx

    widget.tsx

    ⚠️ Challenges Faced

    
							Accessor#set Assigning an instance of 'esri.Graphic' which is not a subclass of 'esri.Graphic'
							Accessor#set Assigning an instance of 'esri.geometry.SpatialReference' which is not a subclass of 'esri.geometry.SpatialReference'
    Schitts Creek - What Am I Looking At?
    • 🤖 ChatGPT
    • 🔍 ESRI Support
    • 🧑‍💻 Ask a Dev

    🚀 Next Steps

    • Develop a simple widget to replicate behavior
    • Explore using the CDN when packaging components

    🔑 Key Takeaways

    We know Experience Builder isn’t our long-term solution, but…

    • ✅ We proved that React components can work inside Experience Builder.
    • ✅ We built reusable components, reducing duplicate development and future effort.
    • ✅ We’re set up for a smooth transition, without having to start from scratch.
    • ✅ This approach allows us to adapt gradually, instead of making an abrupt shift.

    Questions?

    The Office - Yeah, I have a lot of questions.