No-build TODO app using HTM + Preact

• todomvc

  60 28,478 7.5 JavaScript

  Helping you select an MV* framework - Todo apps for React.js, Ember.js, Angular, and many more

  

In this article I'm going to implement the TodoMVC app without any build tools, only native functions supported by the browsers of today (sorry Internet Explorer, it's time for you to leave). I will use some libraries related to React to have a similar developer experience like I'm used to, but you could replace them with others if you wish (see below for suggestions).

• todomvc-htm-preact

  1 6 2.6 JavaScript

  Todo application using HTM and Preact

I won't dive too deep into the implementation itself, but you can find the source on GitHub.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• perflink

  5 1,196 10.0 JavaScript

  Low friction JavaScript benchmarks that you can share via URL

Slight performance hit compared to loading bundled JS. Large JS files still compress better than smaller individual files. So there is some benefit in bundling all code into a single file. HTTP/2 might resolve some of that issue, but I haven't seen concrete numbers yet. See also this discussion.

• vue3-sfc-loader

  8 937 9.2 JavaScript

  Single File Component loader for Vue2 and Vue3. Load .vue files directly from your HTML. No node.js environment, no build step.

Vue Single File Component loader allows you to sprinkle Vue on top of any HTML document. (example app)

• htm

  42 8,554 0.0 JavaScript

  Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support.

I would like to use a component based development approach without writing everything from scratch, so I decided to use HTM with Preact. This allows me to write JSX-like syntax without a transpiler.

• valtio

  47 8,429 7.9 TypeScript

  💊 Valtio makes proxy-state simple for React and Vanilla

  

The state can be manipulated outside the React/Preact lifecycle too using vanilla JS. Persisting the app state to localStorage is also trivial.

• Preact

  111 36,041 9.3 JavaScript

  ⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.

  

I feel very productive writing front-end UI components in React using JSX, so I wanted to have something similar for this app. After some googling I stumbled upon HTM, which promises JSX-like syntax without bundling, so I decided to give that a try. HTM plays nicely with Preact (a leaner version of React with only slight differences).

• InfluxDB

  www.influxdata.com sponsored

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

• lit

  141 17,535 9.4 TypeScript

  Lit is a simple library for building fast, lightweight web components.

  

Lit Element which builds on top of the web components standard. (example app)

• ECMAScript 6 compatibility table

  33 4,406 6.0 HTML

  ECMAScript compatibility tables

  

Use only native ES6 browser features.

Suggest a related project