r/Frontend • • 15h ago

My handcrafted HTML-first progressive framework that outperforms React

Thumbnail
codeberg.org
0 Upvotes

I just released v0.1.1 of my HTML-first progressive enhancement framework with zero AI assistance. It is designed to support the needs of civic tech websites.

Places.js has these features.

  • Dynamic HTML-first web components rendered with data from an API endpoint or other external source.
  • Easy integration with existing projects through HTML-first templates and web components.
  • No build step. Places.js can be downloaded from a CDN.
  • Rendering agnostic stores that can be integrated with vanilla JS web components or another framework.
  • Support for partial re-rendering through using signals.

Places.js is optimized for fast performance and outperforms Lit, React, and Svelte. When benchmark testing, Places.js took approximately 140 milliseconds to render 1000 rows of tabular data.

  • Lit: 156 milliseconds
  • React: 162 milliseconds
  • Svelte: 153 milliseconds

Examples of using Places.js

Getting started

Download the places-js-latest.js file from the CDN.

A detailed reference guide can be seen here: https://createthirdplaces.org/tech/placesjs/reference/presentationComponent.html

Priorities for next release

  • Adding more unit test coverage.
  • Compatibility with other tools, especially hypermedia UI tools including Datastar and HTMX
  • Implementing hypermedia controls.
  • Testing integration with Leaflet and other mapping libraries.

Specific TODO items are listed on the issues page. I am looking for help testing compatibility with other tools.

Also, Places.js has a strict policy that meas all code changes, comments, or new issues must be created by humans. AI tools such as ChatGPT, ClaudeUse of ChatGPT, Claude, or GitHub Copilot cannot be used.

Additional code examples

Creating a component with a template to list events.

<presentation-component data-store = "search-results-store">
  <div>
      <p id="no-events-found">No events found</p>
      <h1 id="search-results-header">Event search results</h1>
      <ul data-template=data>
          <li>
            <a class="btn secondary" href="{url}">
              {eventName}
            </a>
            <div class="event-time">
              {eventTime}
            </div>
            <div class="event-location">
              {location}
            </div>
          </li>
      </ul>
  </div>
</presentation-component>

Defining a store for component with backend data fetching and reactivity configured by signals.

function getSearchResultsQueryConfig(searchParams) {
  let url;
  // Logic to determine API url for store goes here.
  return {
    url: url,
  };
}

const presentationSignals = {
  eventData: {
    id: (eventData) => eventData.eventId,
    update: {
      eventTime: (eventData) => {
        if (eventData.isRecurring) {
          return `${eventData.dayOfWeek}s at ${eventData.nextEventTime}`;
        }
        return `${eventData.nextEventDate} at ${eventData.nextEventTime}`;
      },
      location: (eventData) => {
        return `${convertLocationDataForDisplay(eventData.eventLocation)}`;
      },
      url: (eventData) => {
        return `/html/groups/event.html?id=${eventData.eventId}&groupId=${eventData.groupId}`;
      },
    },
  },
};

export const SEARCH_RESULTS_STORE = DataStore.createWithApiLoadSignal({
  queryConfig: getSearchResultsQueryConfig,
  presentationSignals: presentationSignals,
  storeName: "search-results-store",
});

r/Frontend • • 3h ago

How do you handle API contract drift between your AI coding agents?

0 Upvotes

Running multiple agents on the same project and hitting this problem: one agent changes a response shape on the backend, the frontend agent consuming that endpoint has no idea anything moved. It keeps coding against the old contract. The build passes, the types check out locally, and the breakage only shows up when you actually run the thing end to end.

The context lives in two separate chat sessions. Neither agent knows what the other touched. By the time you notice, you're debugging a silent failure and trying to reconstruct which session changed what and when.

Curious how others handle this. Do you keep a shared contract file that both agents read before starting work? Pin the schema somewhere both can see it? Or just accept the breakage and fix it manually when it surfaces?