DEV Community

Cover image for Power in tiny libraries
Maksim
Maksim

Posted on

Power in tiny libraries

Hello there!

Weight of your client side bundle is very important for best user experience. Users do not like to wait. For this purpose I am interesting to find tiny analogs of most popular libraries. I know next ones:

Do you know something else?

Top comments (23)

Collapse
 
juancarlospaco profile image
Juan Carlos

Bootstrap ➡️ Spectre / Bulma
Webpack ➡️ Parcel
Jquery ➡️ Nothing
TypeScript ➡️ Nim

Collapse
 
koriolis profile image
Nuno Ferreira • Edited

lodash -> micro-dash
jQuery -> cash
styled-components -> goober

React -> Svelte 😛

Collapse
 
cristianbote profile image
Cristian Bote

Hey Nuno, thanks for the shout-out! 👍🙂

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt • Edited

Also about dayjs, is it one of the smallest datetime library around?

Anyways, if I want no library, nothing works better than

const d = new Date()
d.setTime(+d + MILLISECONDS)
Collapse
 
pretaporter profile image
Maksim • Edited

You can also look to date-fns. It has good tree shaking support.

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt • Edited

If I am looking for python-dateutil.parser.parse in JavaScript of DateTime string of unknown format; what is the best library, for both Node.js environment and Webpack / Parcel environment?

Also, looking for How to construct a timedelta object from a simple string

Thread Thread
 
tracker1 profile image
Michael J. Ryan

new Date(dateString) does do a pretty good job at parsing on most browsers, but will favor the system locale when MM/dd/yyyy or dd/mm/yyyy is indeterminate.

Collapse
 
nickytonline profile image
Nick Taylor • Edited

+1 for date-fns. As well, the moment folks also create a more lighter weight, tree shakeable version called luxon.

GitHub logo moment / luxon

⏱ A library for working with dates and times in JS

Luxon

MIT License Build Status NPM version Coverage Status Doc coverage PRs welcome

Luxon is a library for working with dates and times in Javascript.

DateTime.local().setZone('America/New_York').minus({ weeks: 1 }).endOf('day').toISO();

Features

  • DateTime, Duration, and Interval types.
  • Immutable, chainable, unambiguous API.
  • Parsing and formatting for common and custom formats.
  • Native time zone and Intl support (no locale or tz files).

Download/install

Download/install instructions

Documentation

Development

See contributing.

Phasers to stun




Collapse
 
ben profile image
Ben Halpern

Yup. MomentJS seems to be the most popular library in this space and it's SOOOOO big.

MomentJS (65.9k gzipped) => DayJS (2.8k gzipped)

Collapse
 
ilyalesik profile image
Ilya Lesik

lodash -> lodash-es
lodash-es -> clone-deep if only cloning needed

Collapse
 
pretaporter profile image
Maksim

Amazing!

Collapse
 
tracker1 profile image
Michael J. Ryan

fclone ;-)

Collapse
 
jovidecroock profile image
Jovi De Croock

For forms Hooked-form
Also for urql there's now an implementation that just integrates with Preact, Preact-urql

Collapse
 
koabrook profile image
Koa

I completely agree with this. The web needs to get lighter and easier to navigate especially as new countries begin to get online!

Collapse
 
ravavyr profile image
Ravavyr

Always felt the big libs/frameworks were overkill for most sites.
For building small sites, I created github.com/Ravavyr/taino-js [Check the README for the 4 step setup]
It's open for anyone to play with, i'm in the process of creating sample sites that are actually fully built sites to use as tutorials since that's something the frameworks have been terrible at doing too. Also SEO functionality and routing are built in. Zero NPM installs. You need live-server or whatever you use to run a SPA and point it to index.html. Try it it out and if you do i'd love some feedback :)
It's used on taino.netlify.com [though netlify is apparently down right now]

Collapse
 
giorgosk profile image
Giorgos Kontopoulos 👀 • Edited

swiper.js 128k minified >

Bootstrap > plain CSS/CSS3 😛

Collapse
 
0xdonut profile image
Mr F.

Thanks Maxim, that's a nice bunch of suggestions!

This is a bit out of date, but some decent little nuggets in there :

microjs

Collapse
 
pretaporter profile image
Maksim

Yep, very cool project. Unfortunately last merge requests stuck.

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt • Edited

jquery => cash / cash-dom

cash-dom also is written in TypeScript.

bootstrap => bulma

Collapse
 
pretaporter profile image
Maksim

Perfect!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.