A peacefully simple view layer. Because React is still too stressful.

Related tags

Boilerplate HotJS
Overview

HotJS Poster Image

Tweet

What is HotJS?

Hot stands for HTML Outputs from TypeScript. It's an ultra-ergonomic HTML element construction library. Call functions. Get HTMLElement objects with event bindings and CSS styling attached. That's it.

HotJS differs from jQuery in that HotJS is focused on creating new element hierarchies, rather than querying already existing ones.

It turns out, this is all you need to create complex interactive UIs. You don't need React, Vue, Angular, Svelte, or any of the others. These things are complicated UI sub-systems that run around behind the scenes and do a bunch of weird magic for you in order to keep your view in sync with your data. And you have to do things their way, otherwise, the magic won't work.

Frameworks tend to do a lot of reinventing of what you can already do in JavaScript. By making controllers that are just plain TypeScript classes, and using the DOM directly to store your view state, you can drop out the complexities associated with model/view synchronization. Some devs will shudder at this. But this technique can vastly reduce complexity, debugging difficulty, and surprising behavior.

HotJS Features:

  • No learning curve (assuming you know JavaScript and how to work the DOM).
  • No bloat. The whole library is only 2.3KB.
  • No props / state / special controller classes that need to be inherited.
  • No weird or unpredictable framework "magic".
  • No performance overhead.
  • No virtual DOM.
  • No JSX.
  • No SASS / LESS / PostCSS. Write your CSS in TypeScript, and get all the benefits of styling becoming just another part of the code.
  • No more asking StackOverflow: "How do I do X in framework Y?". HotJS gives it to you raw. It's just you and the DOM. Do whatever makes sense.

Also:

  • HotJS is being used in production (to build the Direct app).
  • Many years in the making. Has passed through many different design variations.
  • Works as a <script> include, as a module, or as a require().
  • Works in Node.js / Deno for server-side HTML generation.

Reasons Not Use HotJS?

  • React / Vue have stronger ecosystems. But for a battle-tested 2.3KB library that's not doing very much, how important really is an ecosystem?
  • No mobile-native UI (React Native) equivalent. If someone wants to make a HotJS backend for NativeScript, DM me on Twitter.

Installation

<script src="https://cdn.jsdelivr.net/npm/[email protected]/+build/hot.min.js"></script>

Or

npm install hotjs --save

Code Example

document.body.append(
	hot.div(
		{
			padding: "100px",
			background: "red",
		},
		hot.on("click", () => alert("Hello world"))
	)
);

See more examples at the quickstart;

You might also like...
Let Me React - A Simple ReactJS Boilerplate
Let Me React - A Simple ReactJS Boilerplate

Write your React App easily with Let Me React! This is similar to create-react-app but LMR will comes with useful packages like react-router-dom,Axios, SweetAlert2 pre-configured so that you can dive into writing your code without having to worry about setting up the project.

🛡️ ⚛️ A simple, scalable, and powerful architecture for building production ready React applications.

🛡️ ⚛️ A simple, scalable, and powerful architecture for building production ready React applications.

Simple Light is a free landing page template built on top of TailwindCSS and fully coded in React.
Simple Light is a free landing page template built on top of TailwindCSS and fully coded in React.

Simple Light is a free landing page template built on top of TailwindCSS and fully coded in React. Simple light is designed to provide all the basic components a developer need to create a landing page for SaaS products, online services, and more.

Build a simple React / Web3 Dapp that replicates a small portion of the Uniswap v2 interface
Build a simple React / Web3 Dapp that replicates a small portion of the Uniswap v2 interface

Today we're going to build a simple React / Web3 Dapp that replicates a small portion of the Uniswap v2 interface - specifically, we are building the

Get your simple but strongly structured react native starter template
Get your simple but strongly structured react native starter template

React-Native-Starter-Template Simple but strongly structured react native starter template 🚀 Why should i use this? It helps you to easily start your

Simple React-Native boilerplate code in Typescript for getting started with a new project quickly. It has all the essentials that one would require in a project.

react-native-boilerplate-typescript Simple React-Native boilerplate code in Typescript for getting started with a new project quickly. It has all the

 Cleanfolio - a clean and simple portfolio template for developers, built using React
Cleanfolio - a clean and simple portfolio template for developers, built using React

Cleanfolio - a clean and simple portfolio template for developers, built using React

Light Bootstrap Dashboard React is an admin dashboard template designed to be beautiful and simple.
Light Bootstrap Dashboard React is an admin dashboard template designed to be beautiful and simple.

Light Bootstrap Dashboard React Light Bootstrap Dashboard React is an admin dashboard template designed to be beautiful and simple. It is built on top

Simple react web3 login for dapp
Simple react web3 login for dapp

Simple react web3 login for dapp

Releases(v1.0.7)
Owner
Paul Gordon
Computer scientist, inventor, and entrepreneur.
Paul Gordon
Simple React Social Network, built with React,Node,Express,MongoDB and Tailwind

Full stack react social network application A mini social network application built with React,Typescript, Redux, Node, Express, MongoDB, and Tailwind

Albenis Kërqeli 31 Dec 19, 2022
React-Mini-Projects - Simple React mini-applications

React Mini Projects A Fully Responsive React Application contain these mini apps : Todo App Movie App Budget App Flash Card App Factor App This app wa

Morteza Rezaienia 1 Jan 1, 2022
A simple to-do list application developed with React, Chakra UI, React icons

React todo list Um aplicativo de lista de tarefas simples desenvolvido com React, Chakra UI, React icons Live Demo on Vercel ?? Getting Started Clone

Fabio J Raminhuk 10 Oct 29, 2022
React Package Starter - a simple and slightly opinionated starter kit for developing and publishing React packages

React Package Starter This is a simple and slightly opinionated starter kit for developing and publishing React packages. It comes with a several pre-

Tim Mikeladze 22 Dec 29, 2022
Rockpack is a simple solution for creating React Application with Server Side Rendering, bundling, linting, testing within 5 minutes

This is beta. Official release coming soon Rockpack is a simple solution for creating React Application with Server Side Rendering, bundling, linting,

Sergey 491 Dec 5, 2022
A simple boilerplate that helps you make your react application with Server Side Rendering & Localization support.

Phoenix React applications boilerplate A simple boilerplate that helps you make your react application with Server Side Rendering support. Getting sta

null 150 Dec 20, 2022
👷‍♂️ Simple set of CLIs to scaffold and build React Native libraries for different targets

??‍♂️ Simple set of CLIs to scaffold and build React Native libraries for different targets

Callstack 1.9k Dec 28, 2022
A simple demo to show the boilerplate-cra from React Avançado

This is a Create React App boilerplate with some configurations from React Avançado Course. What is inside? This project uses lot of stuff as: Create

Willian Justen 10 Oct 26, 2022
This is a very simple boilerplate made with CRA, React Router, Styled Components and Storybook.

This is a Create React App boilerplate with some configurations from React Avançado Course. What is inside? This project uses lot of stuff as: Create

React Avançado 20 Jul 3, 2022
This is simple CRUD React & Redux application. You can create, update,delete your projects and also filter them by their priority

ProjectList This is simple CRUD React & Redux application.You can create,update,delete your projects and also filter them by their priority. Main page

Murodjon Tursunpulatov 3 Jul 5, 2021