REPOSITORY_HEADER // ID: 219
ACCESS_LEVEL: EXPLORER

Tiny JS

CURATED_BY: littlehelperINITIALIZED: ABOUT 2 HOURS_AGOLAST_UPDATE: ABOUT 2 HOURS_AGO
awesome front-end-development
0
0
Mirror
RSSJSONMarkdown
This is a mirrored zone from the [thoughtspile/awesome-tiny-js](https://github.com/thoughtspile/awesome-tiny-js) repository. Part of the Awesome list collection.

Contents_Index

UI Frameworks

6_ENTRIES

UI frameworks (libraries?) provide declarative templates, event bindings, and observable state to update the view. I've been generous and expanded the size limit for this category to 4Kb, but also increased the star limit to 3K.

The following libraries are small and cool, but note they're about 500x less popular than preact. Kudos for deconstrucing the very essence of a "framework":

And if being declarative is not your thing:

Event Emitters

4_ENTRIES

Event emitter pattern is fairly easy to implement yourself, but why bother when you have these cool tools? With an arms race to build the smallest one, the limit is 0.5Kb.

Reactive Programming

3_ENTRIES

A step up from a raw event emitter, reactive libraries can build chains of event transforms, filters, and side-effects. You can already use these to build UIs by manually updating DOM on state change:

Honorable mentions: callbag-basics and oby could make it if they had tree-shaking, but otherwise are around 7Kb.

State Managers

6_ENTRIES

State managers combine observable state with actions and framework bindings, intended for app-wide state.

Routers and URL Utils

7_ENTRIES

Do stuff on URL / history changes, with path matching and parsing:

Just want to parse or match URL paths without observing them? Here you go:

API Layer

4_ENTRIES

fetch API has some boilerplate associated with it: serialize & parse data, reject on non-200 response, etc. These tiny packages handle it for you:

If for some reason you still need a fetch polyfill, try this one:

I18N

4_ENTRIES

A map of strings might seem enough to translate an app, but these tools also handle interpolation and some extra goodies:

Dates and Time

8_ENTRIES

Date and time manipulation in pure JS is quite verbose. Luckily, two of the top date libraries have sensible size:

And here are some more packages that only do formatting:

Note that the built-in Intl.DateTimeFormat has decent support.

Generic Utilities

5_ENTRIES

Something you'd find in lodash or ramda, but smaller. Most are pretty similar and very small, with minor differences in package structure (single / package-per-helper) and tree shaking vs direct helper import.

Honorable mention: underscore, outshined by lodash by chance, contains many sub-1Kb helpers. It does not tree-shake as well as the libraries above due to codebase structure.

Note: lodash itself is not tree-shakable, but has made many attempts at modulaity with lodash.method packages, imports from lodash/method, and lodash-es, none of which work well in practice. But yes, lodash does handle some corner cases.

Also note that much of the original lodash functionality comes built-in with modern ES. Prefer native versions over libraries as your browser target allows.

Unique ID Generation

4_ENTRIES

Unique ID generation does not take a lot of code, but it's not someting I'd want to write myself. Limit is 500 bytes. Also note that the native crypto.randomUUID has OK support.

Colors

4_ENTRIES

Color manipulation is rare in pure UI development, but very helpful for data visualization, and uses freaky math. Don't fry your brain, take these:

Exploration_Discussion

0 / 3000