r/javascript • u/create-third-places • 3d ago
Handcrafted HTML-first progressive framework that outperforms React
https://codeberg.org/createthirdplaces/places-jsI 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",
});
1
1
u/Seusoa 1d ago
many homies doesnt understand core logic:
- react is not the best, it is relatively slow and have many dumb decisions
- but react is supported by huge corporation that leads its development
- you can invent many impressive replacements, but no one will use your solutions because of you will abandon that project in next years
0
u/267aa37673a9fa659490 1d ago
I think your post would perform better if you didn't just copy-paste the entire wall of text read me and went with a hook written in a few sentence instead.
0
3d ago
14
u/create-third-places 3d ago
As always with vibe-codes project (not sure its the case, but I would assume in these times), this solves no particular problem, but just rebrands long-existing stuff. Reminds me of HTML templating that seems almost ancient by now
I wrote the entire framework by hand with vanilla JavaScript. No form of vibe coding was used.
I dislike LLMs and do not use them in any capacity to produce work, which includes zero vibe-coding. Read my post history if you want to know more about my thoughts.
-18
u/DEMORALIZ3D 2d ago
just on this, if you not using LLMs just makes you an obsolete developer in 2026 and your stance is just elitist more than a thing. Making tools nobody quite asked for, to fix a speed boost that's negligible to most and frameworks like Astro exist. Which if you don't use React islands itnoitputs a static output HTML/CSS/JS project.
5
u/create-third-places 2d ago
My framework can be run without a build step as it only requires static HTML and JS. Astro requires a build step and a custom server.
9
u/boblibam 2d ago
Nice to see people still enjoying hand-made projects. I also like the style. It’s very close to how I like to work these days with vanilla web components and custom built stores.
Personally, I try to avoid one-man projects as dependencies for my projects as they too often just end up stop being maintained. But I can appreciate what you’ve done here and as I said, like the style.