Hands-on Jahia JavaScript modules: the new front-end possibilities with JSX and React

As a B2B marketer, you have a lot to worry about. At the top of that list is generating leads and pipeline. Traditionally, marketers have focused on creativity and design to drive strategy—but as consumer expectations shift, marketers must also shift.This hands-on webinar is designed for developers who are ready to elevate their projects with advanced front-end capabilities.

Webinar program : how the JavaScript CMS works

  1. Basics of JavaScript Modules  / Server-side templating with JSX
  2. Live coding - Get started & display some content
  3. Understanding the different types of rendering
  4. Live coding - Adding a “Phone number” field
  5. Good to know: Resources, limitations, upcoming breaking changes

You will therefore learn things like how to create, manage, and debug views and templates, how to reuse React components across multiple views, how to use client-side rendering and React Hydration, and also HTMX to enhance interactivity without needing heavy JavaScript.

We coverin this webinar essential development tools and workflows, including Yarn commands to streamline your process.

Key Takeaways

  • Comprehensive overview of the JavaScript module capabilities
  • Tangible coding examples to get you started right away
  • Best practices for efficient module development

Today, marketers must harness the power of both creativity and technology when determining how to engage with customers. With the proper technology implementation, you can use data to build unique customer profiles and get the right content to the right people at the right time.

What the video shows

The video presents how JavaScript modules are integrated into the platform to give front-end developers more autonomy while preserving a robust backend architecture.

It shows:

  • How JavaScript modules are packaged and deployed as OSGi bundles alongside Java modules
  • How modern JavaScript standards are supported using Yarn and GraalVM
  • How an automated development workflow rebuilds and redeploys modules on every change
  • How front-end and back-end stay fully synchronized when extending content models and forms
  • How React components are rendered server-side and progressively enhanced in the browser

The video also demonstrates real-world examples of form extension, data validation, and profile synchronization.

Why it matters

This approach simplifies front-end development while maintaining performance, scalability, and consistency.

It helps teams:

  • Build interactive components without the complexity of full SPA architectures
  • Iterate faster through automated build and deployment workflows
  • Reuse the same language and components across server and client rendering
  • Keep business data synchronized between UI and backend systems
  • Adopt modern JavaScript practices without disrupting existing projects

By combining server-side rendering, progressive hydration, and modular deployment, teams gain flexibility and long-term maintainability.

Do something about this webinar

image-internationalized