Component Architecture

Here's what we're working on in SSE

Component Architecture

SSE's page routing model allows us to cleanly separate page-specific code in a very manageable way. This works when code is specific to a page or to a path like /products/*

With Webflow growing push towards components, it makes sense to be able to make them "smart components" by directly attaching code to them in SSE.

This makes it possible for you to drop your standard Webflow component on any page, and SSE will only run component-specific for each instance of that component, when it encounters one.

For example;

• A specially configured SwiperJS setup in a hero component

• A custom component you've built such as an accordion

• Specialized form validation in your Contact Us form component

• Advanced navigation mechanics in your Nav component

• A weather widget in your Footer component

• A fancy multi-step form component

Often, these "components" need to be reused on multiple pages, and we don't want to have to install the code for them each time you use a component on a new page.

Goals

• Efficient code execution, only run code when it's needed

• Code isolation, e.g. the code & CSS for a multi-step form should be separate from the rest of your page source code

• Reusability. Your development would should be easy to repurpose on other projects you build.

• Webflow Component support. Take full advantage of the Webflow Team's work on components and leverage it in every way possible to maximize the finished "smart" component.

• Multiple instances. Create a design paradigm that supports the possibility of multiple "component" instances per page.

• Referencing. Optionally name components for easy referencing.

• API support. Make components accessible to other code, so that you can perform certain functions;

  • e.g. a Page's code might find and reset all SwiperJS components.

Implementation

Component Attributes

Our early experiments involve the use of a new custom attribute;

sse-component = ( component type name ).

You apply this to the outer DIV of any "component" on your page, and SSE's router automatically knows to instantiate that named component, and pass it the element. From there, it's up to the component code to decide what it wants to do, focusing within that element.

Matching the component name to the component is currently

sse-component-name = ( component instance name )

Component Manager

• Is aware of all instantiated components on the page

• Can retrieve any by name

• Can retrieve a group by type

To Consider

• Slotted components and how this works with SSE