Embracing the Future of Component Libraries: Single Directory Components and Emulsify

The world of frontend development is ever-evolving, with new methodologies and tools constantly emerging to streamline processes and enhance efficiency. Two such innovations, Single Directory Components (SDC) and Emulsify, are making significant waves in the development community. While both aim to build reusable component libraries, they take different paths to achieve this goal.

This article will explore how SDC and Emulsify align and the ongoing efforts to convert our UI Kit component library to support SDC this quarter.

Understanding SDC and Emulsify

At their core, SDC and Emulsify help developers create and maintain a library of reusable components. However, they do so in distinct ways:

Emulsify:

• Emulsify is a platform-agnostic tool that can function as a standalone component library or be integrated into Drupal's theme system.

Single Directory Components (SDC):

• SDC, on the other hand, is specifically tailored for Drupal.
• While this setup demands more effort to start frontend development, it is deeply integrated into the Drupal ecosystem, offering a more Drupal-centric approach to component management.

SDC and Emulsify: Similarities and Differences

Despite their different approaches, SDC and Emulsify share many similarities, particularly in organizing components. As we work on converting our UI Kit to support SDC, we are making two critical updates that reflect this alignment:

Component YML Schema:

• We are updating the component's YML schema to accommodate more component information, moving away from the flat data schema we previously used. This change is relatively straightforward and can be implemented in existing projects with minimal effort.
• This update will allow developers to define richer, more detailed configurations for their components, making the component library more flexible and easier to maintain.

Example:

# Old YML Schema 
logo_src: '/assets/images/logo.svg' 
logo_modifiers: 'large' 

# New YML Schema
name: Logo
group: Components
status: stable
props:
  type: object
  required:
    - logo_src
  properties:
    logo_src:
      type: string
      title: Logo Source
      description: The source path of the logo.
      data: '/assets/images/logo.svg'
    logo_modifiers: 'large'   

Webpack Build Tooling:

• Emulsify's Webpack configuration is being updated to support the different namespacing conventions used by SDC.
• This change is more complex but crucial for ensuring seamless integration between the two systems.

Example:

Converting Your Project to Support SDC

If you're using Emulsify and are considering transitioning to SDC, the good news is that the conversion process is relatively simple. Essentially, you will need to update your components YML schema to the structure previously mentioned and change your Webpack configuration to compile CSS into the same directory as the SCSS file. See "Create separate CSS files per component" here: Create separate CSS files per component.

While SDC and Emulsify may appear to compete, they are, in fact, complementary tools

They offer different approaches to solving the same problem—building reusable component libraries.

By understanding their differences and similarities and making the necessary updates to your projects, you can leverage the strengths of both tools to enhance your front-end development process.

As we evolve our UI Kit component library to support SDC, we're excited to see how this alignment will empower developers to create even more powerful and flexible web applications. Stay tuned for more updates as we roll out these changes!