Frontend Roadmap

Skill/technology roadmap for the Frontend track, in the style of roadmap.sh. See reference/mermaid-conventions.md for the diagram conventions used below.

Legend

• 🟦 Essential
• 🟧 Recommended
• ⬜ Optional

Diagram

flowchart TD
    classDef essential fill:#4C6EF5,color:#fff,stroke:#333;
    classDef recommended fill:#F5A623,color:#000,stroke:#333;
    classDef optional fill:#eee,color:#000,stroke:#999,stroke-dasharray: 3 3;

    subgraph Fundamentals
        A[HTML/CSS/JS fundamentals]:::essential --> B[Component framework<br/>React or equivalent]:::essential
        B --> C[Responsive & accessible UI<br/>WCAG]:::essential
        C --> D[REST/GraphQL API integration]:::essential
        D --> E[Frontend testing<br/>Playwright or equivalent]:::essential
    end
    subgraph "Going Further"
        E --> F[TypeScript]:::recommended
        E --> G[Performance profiling<br/>Core Web Vitals]:::recommended
        E --> H[Design systems /<br/>component libraries]:::recommended
        E --> I[Micro-frontends]:::optional
        E --> J[Web Components]:::optional
    end

    E --> AEMT
    E --> AEMEDS
    E --> OPTLY
    E --> CTFL

    subgraph AEMT["AEM Traditional"]
        K[HTL / Sightly templating]:::essential
        L[AEM Core Components]:::essential
        M[Clientlibs]:::essential
        N[React/Angular<br/>SPA Editor projects]:::optional
    end
    subgraph AEMEDS["AEM EDS"]
        O[Vanilla JS block architecture]:::essential
        P[Universal Editor instrumentation]:::essential
        Q[Preact<br/>complex components]:::recommended
        R[Dropin development]:::recommended
    end
    subgraph OPTLY["Optimizely Cloud"]
        S[React/Next.js]:::essential
        T[Optimizely Graph consumption]:::essential
    end
    subgraph CTFL["Contentful"]
        U[React/Next.js or Vue/Nuxt]:::essential
        V[Contentful App Framework]:::recommended
    end

Notes

Fundamentals and Specializations are drawn from roles/frontend.md’s Must have and By CMS lists. “Going Further” is proposed from general frontend industry practice, not from the team’s own stated preferences (roles/frontend.md’s Nice to have is still empty) — revise freely.