The EDS Developer's Dilemma - And How One Framework Solved It

One framework transforms the EDS developer's dilemma by enabling sophisticated components whilst keeping EDS principles intact.

When Simple Meets Sophisticated

Picture this: You're debugging a complex EDS component at 2 AM. You ask your AI assistant for help. It stares back helplessly—it can't see your Google Docs, can't access your SharePoint content, can't connect your branch changes with updates. You're flying solo.

This scenario highlights the fundamental problem holding back EDS development: fragmented workflows that leave AI assistants blind and developers stranded.

Adobe Edge Delivery Services works brilliantly. Perfect Core Web Vitals scores, lightning-fast development, content authors happy with familiar document workflows. The platform itself functions fine.

Adobe Edge Delivery Services promised us a simpler way to build performant websites. No heavy frameworks, no complex build processes—just clean HTML, CSS, and JavaScript.

Then Business Requirements Arrive

The challenge appears when business requirements arrive:

"We need data visualisation components"
"Can we integrate our design system?"
"The marketing team wants glassmorphism effects"
"We need complex interactive forms"

Suddenly, you face the EDS developer's dilemma:

  1. Abandon EDS principles and rebuild everything with complex frameworks
  2. Stick with vanilla JavaScript and reinvent every sophisticated component from scratch
  3. Create a messy hybrid that satisfies nobody and breaks constantly

Every option feels like a compromise. Most teams choose vanilla JavaScript and burn weeks rebuilding components that already exist in mature design systems.

Why AI Assistants Can't Help

Traditional EDS workflows scatter development across multiple systems:

Ask an AI to debug your EDS block, and it drowns in confusion:

"I can't access your Google Docs content"
"I can't see your SharePoint files"
"I can't connect your code changes with document updates"
"I don't have context about your complete environment"

You end up working alone, missing out on AI's ability to accelerate development, catch bugs early, and suggest architectural improvements. This crushes developer productivity.

What if you didn't have to choose?

Revolutionary Architecture

The webcomponents-with-eds repository didn't just solve these problems—it completely reimagines how EDS development could work.

Born from real-world pain points and 12 months of intensive development, this repository is the result of a unique collaboration between human expertise and AI assistance. Every pattern, every architectural decision, every line of documentation has been refined through actual use, collaborative development with Claude, and the hard-won lessons of building sophisticated EDS applications in production environments.

This document itself embodies that collaboration—distilling practical experience into actionable guidance for developers who refuse to compromise between elegant simplicity and powerful functionality.

The Breakthrough: AI-First Development Architecture with Dual-Directory Separation

Instead of accepting the traditional fragmented workflow, this framework introduced local-first development that enables meaningful AI assistance while providing clear separation between simple and sophisticated components.

The Dual-Directory Innovation

webcomponents-with-eds/
├── blocks/                   # 📦 EDS-native simplicity
│   ├── cards/               # Pure vanilla JavaScript  
│   ├── counter/             # Zero dependencies
│   └── shoelace-card/       # Deployed sophisticated component
│
└── build/                   # 🔧 Modern development workspace
    └── shoelace-card/       # Complex components with full tooling
        ├── package.json     # External libraries welcome here
        └── vite.config.js   # Professional build configuration

npm run deploy   # One-command deployment

The decision matrix:

What this unlocks:

The development server checks for local files first, then proxies missing assets from production/staging. Simple but revolutionary—it means you can develop components with AI assistance while still accessing real EDS resources.

Real-World Excellence - The Shoelace Card Component

Don't let the term "framework" fool you—this repository delivers production-ready components that push the boundaries of what's possible in EDS.

Sophisticated Glassmorphism UI

The Shoelace Card component demonstrates advanced capabilities:

Technical Excellence

// Self-contained bundle with zero external dependencies

import '@shoelace-style/shoelace/dist/components/card/card.js';
import '@shoelace-style/shoelace/dist/components/button/button.js';

// All dependencies bundled for EDS compatibility
export default function decorate(block) {
  // Clean EDS integration with sophisticated functionality
}

The component includes 130KB of Shoelace dependencies bundled into a single file that loads efficiently and works seamlessly with EDS's loading patterns.

Development Experience Revolution

Solving the 2 AM Problem - From Isolation to Collaboration

Remember that 2 AM debugging scenario? This repository eliminates that isolation entirely.

The 12 months of collaborative patterns refined through real-world use have created something unprecedented: an EDS development environment where AI assistants become true development partners, not helpless observers.

The result? Your AI assistant can:

Zero-Dependency Development Server

# Start developing immediately

node server.js

The custom development server provides:

Built for Modern Teams

Professional-Grade Documentation

The repository includes 25+ comprehensive guides covering every aspect of EDS development, written for AI and Humans:


The documentation is specifically structured for AI assistance:

docs
├── for-ai
│   ├── document-relationship-mapping.md
│   ├── eds-appendix.md
│   ├── eds-webcomponents-review.md
│   ├── eds.md
│   ├── getting-started-guide.md
│   ├── guidelines
│   │   ├── app-flow.md
│   │   ├── backend-structure.md
│   │   ├── frontend-guidelines.md
│   │   ├── prd.md
│   │   ├── security-checklist.md
│   │   ├── style-guide.md
│   │   └── tech-stack.md
│   ├── implementation
│   │   ├── block-architecture-standards.md
│   │   ├── build-blocks-clarification.md
│   │   ├── build-component-template.md
│   │   ├── complex-eds-blocks-guide.md
│   │   ├── design-philosophy-guide.md
│   │   ├── eds-architecture-standards.md
│   │   └── raw-eds-blocks-guide.md
│   ├── index.md
│   ├── index.svg
│   ├── navigation-flows.md
│   └── testing
│       ├── debug.md
│       ├── eds-architecture-and-testing-guide.md
│       ├── eds-native-testing-standards.md
│       ├── instrumentation-how-it-works.md
│       └── investigation.md
└── server-README.md

Why This Repository Matters

For Individual Developers

Stop burning weeks reinventing sophisticated components. When business requirements demand data visualisation, design system integration, or complex interactions, this repository provides a clear path forward without abandoning EDS principles.

For Development Teams

Solve the AI assistance problem permanently. Transform fragmented EDS workflows into unified environments where AI assistants can participate meaningfully in architecture decisions, debugging sessions, and code reviews.

For the EDS Community

Prove that EDS scales to enterprise needs. The sophisticated components and comprehensive documentation demonstrate that EDS can handle complex business requirements while maintaining its performance advantages.

Simple JavaScript, Limited Dependencies

The repository embodies a clear technical philosophy:

✅ Modern JavaScript (ES modules) without TypeScript

✅ Pure CSS without preprocessors
✅ Zero heavy frameworks - web standards focus

✅ Performance first - Core Web Vitals optimised

✅ Build tools only when complexity demands it

This aligns perfectly with developers who prefer simple, maintainable solutions over complex framework architectures.

Getting Started - Three Paths to Success

Path 1: Quick Integration

# Copy components to your EDS project
cp -r blocks/* /path/to/your/eds-project/blocks/
git add blocks/ && git commit -m "Add web components" && git push

Path 2: Local Development

# Start developing immediately
npm install
npm run debug  # http://localhost:3000

Path 3: Advanced Component Development

# Build sophisticated components
cd build/shoelace-card && npm run dev  # Hot reload development
npm run deploy  # Deploy to blocks directory

The Bigger Picture, EDS Development, Evolved

This repository represents more than just code—it's a new approach to EDS development that:

Real Impact - Production-Ready Results

The repository delivers measurable results:

Conclusion

The webcomponents-with-eds repository proves that you don't have to sacrifice sophistication for simplicity. It demonstrates that EDS can handle enterprise-grade requirements while maintaining the performance and developer experience that makes EDS attractive.

Whether you're building simple marketing sites or complex web applications, this repository provides the foundation, tools, and guidance to succeed with Adobe Edge Delivery Services.

Explore the repository: https://github.com/ddttom/webcomponents-with-eds

Read the comprehensive guide: EDS Development Documentation

Ready to revolutionise your EDS development workflow? The tools are ready. The documentation is comprehensive. The components are battle-tested. All that's missing is your next project.

/fragments/ddt/proposition
style
bg-dark

Related Articles

Back to Top