Create account

DEV Community

Maksim

Posted on Jan 7, 2020

Power in tiny libraries

#javascript #typescript #webdev #react

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)

Juan Carlos • Jan 7 '20

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

Nuno Ferreira • Jan 8 '20 • Edited

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

React -> Svelte 😛

Cristian Bote • Jan 9 '20

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

Ilya Lesik • Jan 7 '20

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

Maksim • Jan 7 '20

Amazing!

Michael J. Ryan • Jan 9 '20

fclone ;-)

Pacharapol Withayasakpunt • Jan 7 '20 • 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)

Ben Halpern • Jan 7 '20

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)

Maksim • Jan 7 '20 • Edited

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

Pacharapol Withayasakpunt • Jan 7 '20 • 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

Michael J. Ryan • Jan 9 '20

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.

Nick Taylor • Jan 8 '20 • Edited

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

moment / luxon

⏱ A library for working with dates and times in JS

Luxon

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.

View on GitHub

Jovi De Croock • Jan 8 '20

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

Giorgos Kontopoulos 👀 • Jan 22 '20 • Edited

swiper.js 128k minified >

tiny-slider 64k minified
slickjs 51k minified
tiny-swiper.js 8k minified

Bootstrap > plain CSS/CSS3 😛

Koa • Jan 8 '20

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

Ravavyr • Jan 7 '20

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]