r/javascript • u/[deleted] • Apr 04 '18
The Vanilla JavaScript component list
| PART | 1 | 2 |
|---|
JS Fam, I hope we're all well. Here is my dependency free components list for you all. I generally prefer coding Vanilla and I like my bundles small, so this list is mostly composed of micro JS components that will help assist you in your builds and keep your end production files small.
Some of you might be itching for some SPA versions of these for your frameworks and you can probably find some in the wild but when it comes to building Single Page Applications, I don't roll with giants like React or Vue because my heart belongs to Mithril which a lot of these work beautifully with but of course these all will implement well with whatever framework you're using and obviously with no framework too because they're dependency free.
Hopefully they will be of use to some of you in the future.
Component List
Component = Libraries, Modules, plugins etc
All credit and thanks goes to the maintainers of these libraries, y'all are the real MVP's up in here. Remember to star a project if you like it, creators need to know what they've released is appreciated.
UTILITIES
Loadjs (Script Loader)
LoadJS is a tiny async loading library for modern browsers (IE9+) for your external scripts. A fantastic little component coming in the 800 bytes, comes in real handy in a lot of situations, especially those working on SaaS platforms that require additional third parties to get simple functionality Cough, Shopify Cough, Cough.
Simple State Manager (Responsive Manger)
Simple State Manager (SSM for short) is a javascript state manager for responsive websites. Need to load specific components based on screen size? look no further because SSM is here. A fantastic ES6 component with a tiny size that helps you control what you load depending on your users screen width.
Picturefill (Responsive Images)
A responsive image polyfill. Need better control of your images? Picturefill has got you. Load in images based on screen dimensions. Why load in a 150kb image when you're in mobile, get those speed gains!
Store (Local Storage)
Work with Local storage. Store.js makes working with your browser’s local storage an utter ease and supports legacy browsers.
JS Cookie (Cookies)
If you're not using JS Cookie then you're living under a rock or still think jQuery is cool to use (no offense jQuery users). JS Cookie makes working with cookies an ease and it's tiny at 900 bytes gzipped!
Qwest (Ajax Library)
Qwest is a simple ajax library based on promises and that supports XmlHttpRequest2 special data like ArrayBuffer, Blob and FormData. A really handy and impressive tool that will make working with JSON a pleasure.
Validate (Form Validation)
Need form validation? Validate.js will make your life easier on so many levels. A tiny 2.5kb component that ensures your users are not getting past without correct validation in place.
UI COMPONENTS
Vanilla Modal (Modal)
An ES6 modal component that ships with everything you require in a modal component, plus it's tiny in size. Have this in production on several projects and it works like an absolute charm.
Siema Carousel (Carousel)
Siema is a lightweight (only 3kb gzipped) carousel plugin with no dependencies and no styling. You want a carousel that doesn't ship with a bunch of additional stuff you don't need? Look no further. Fck Slick and these other jQuery dependant giants. Siema got your covered and is highly configurable + responsively supported of course.
Tabbis (Tabs)
Need tabs? Tabbis is tiny and uses LocalStorage to save previous viewed tabs (Fck yeah!) – I rewrote this in ES6 so if you want an ES6 version check the closed issues of the repo. A well written little component and is all you need for tabs.
Slideout (Offcanvas)
Slideout is poetic and your goto component for responsive design. When you need off-canvas drawers (menu), use Slideout. Super customizable and tiny size coming in at only 2kb minified and gzipped.
Pikaday (Date Picker)
Need a date picker? Pikaday is going to be your best friend in this situation. Pikaday is customizable and includes all the flavors you will require. 5kb minified and gzipped.
Rellax (Parallax)
Rellax is a buttery smooth parallax library that works with mobile. This little weapon is perfect for any Parallax implementation you find yourself having to include, it's super lightweight at only 1.2kb minified and gzipped.
Stickybits (Stickies)
I've tried them all when it comes to sticky's and while we are going to be supporting it in CSS in the near future, Stickybits is the dominant one in the sticky game. Lightweight and well maintained, it makes working with sticky elements an absolute delight and you won't get jumpy elements with this little gem.
EDIT HISTORY:
Sentence Restructure
Formatting Fam, formatting.
Formatting (again)
Linking Part 2
List editing history
15
u/diversif Apr 04 '18
Check out image-focus - a vanilla js tool for cropping an image based on a focus point.
5
Apr 04 '18
Brethren. This is nice find. Thank you! I will include this in part 2 of this post series.
25
u/V1nznt Apr 04 '18 edited Apr 04 '18
Nice list! Already used some of those tools in my smaller projects. I think one library is missing from your list: Moment.js (although most devs might already know it)
Working with dates is a real pain in the ass, especially with vanilla JavaScript.
6
29
Apr 04 '18
I prefer date-fns over moment lately for the immutability and individually importable functions
2
2
u/SamSlate Apr 05 '18
moment is absolutely essential. try going iso 8601 string to Unix without it
2
u/kuenx Apr 05 '18 edited Apr 05 '18
This doesn't work?
Math.floor(new Date('2018-04-05T13:37:00').getTime() / 1000)
I didn't actually try it (am on phone) but this should get you a unix timestamp in seconds.tried2
u/SamSlate Apr 05 '18
now the client wants it in
Day, Date Month Year-abbreviationbut instead of "Friday" it says "Funday"2
u/kuenx Apr 05 '18
Sure, I understand that there are many good reasons to use Moment. But you specifically mentioned ISO-8601 to unix timestamp conversion which is almost the only conversion that's actually very easy with the native
Dateclass.
Also, a place where you convert an ISO string to a unix timestamp is not typically a place where your client will want changes since it's unlikely a user-facing value.1
3
u/THEtheChad Apr 05 '18
Why do you prefer mithril over react? Just glancing at it, it's very similar in nature.
9
Apr 05 '18 edited Apr 05 '18
React is great, don’t get me wrong and it’s influential in the JS world but it’s not ideal in my opinion unless you’ve got 100’s of employees.
One of the main reasons I prefer and choose Mithril over React is that everything I need for a well engineered SPA ships with Mithril and I don’t really need to plug several additional libraries into my build. Things like routing and XHR utilities are included in that less than 8kb file which starts me off with a super lightweight build. HyperScript is also a huge draw card for me, I don’t like JSX, I find that JSX can get messy whereas HS keeps shit contained and is easier to read. Speed and render times are also a thing for me, Mithril is VERY fast and it was the first thing I noticed when I boycotted React.
The community behind Mithril is unlike any JS Framework community online, the maintainers are a few clicks away and that’s a huge selling point, I mean how many maintainers of React can you reach out to and get a response from within 24 hours?
It’s maturity is also visible, after some time you start to notice just how smart this little framework is. The author of Mithril is this extremely talented individual called Leo Horie and he’s one of the great minds that JavaScript has been bestowed with, I really admire this guy. I guess there’s not just one reason but many, I just find Mithril to be the logical choice, any developer can grasp its programmatic approach in a few days and in all honesty, for me it feels like you’re coding in regular Vanilla JavaScript. It’s almost like Mithril is apart of JavaScript API if you get drift?
There are also technical advantages to using Mithril over React which are listed on its website on the framework comparison page and much more found around the web.
Hope this helps!
2
u/roriron Jun 22 '18
Thank you. I used Mithril in recent project, it's so comfortable and compact for SPA as you said, no need any other framework. Documents are great too. Thank Mithril and contributors.
2
Jun 22 '18
No problems! I’m glad you found your way to the framework and I have no doubt your project is running like a finely tuned machine. I just completed my 6th project with Mithril and it still stands as the leader in the JS world for me. There are also some great things to happen in future releases. Happy coding. M()
6
u/tencircles Apr 05 '18
2
u/TheTraceur Apr 05 '18
Before I clicked the link I totally though "Brace Yourselves" was going to be a javascript library that had something to do with adding curly braces.
1
1
-4
Apr 05 '18
Zuck boyz make out it's the be all and end all of JavaScript. Smh. React ain't anything special imo, just a framework with an easy learning curve so the masses gravitate towards it like sheep.
3
u/tencircles Apr 05 '18
It's a good tool, but if you speak ill of it in these here parts, prepare for the downvotes.
20
u/AlternativeHole Apr 04 '18
Forgive my ignorance but for a few of these libraries, is it really much easier than native browser implementations of such functionality? For example, Qwest appears nearly identical to fetch.
Other items in the list looks really cool. Thank you for sharing this.
4
Apr 04 '18
fetchisn't supported in all browsers (looking at you, IE) unfortunately, so Qwest or Axios (npm package) are best used for full browser coverage.31
u/fgutz Apr 04 '18
I've been using Github's polyfill. Prefer that because I can use the native api of fetch and not some wrapper around it. Plus can just easily drop the polyfill from my build when I want to stop supporting browsers that don't use it anymore
3
Apr 04 '18
Not seen this polyfill before... Where have I been?! I stand corrected.
4
u/fgutz Apr 04 '18
I only started using it a few months ago myself. I just googled around and found it and figured since it's coming from GitHub themselves that it would be pretty legit
0
Apr 04 '18
[deleted]
3
Apr 04 '18
This is a vanilla js thread so I assumed Babel wasn't allowed 🙈
7
Apr 04 '18 edited Apr 05 '18
Babel is always allowed! I mean, most of these components are coded up in ES6 so transpilation down to ES5 is generally recommended. Babel is cool and all but as someone who uses Rollup as my bundler, I generally think Buble is faster and more logical choice for most of my use cases.
I think everyone here has to read a little bit more on what
qwestdoes to better grasp what it offers. I mean sure, you can usefetchbut qwest does fit some use cases and keeps things contained in nice manner.Plus Qwest is like 2.5kb when gzipped and you get a bunch of additional extras. The juice is worth the squeeze when using it.
edit: Additional line about its size
2
5
u/hopfield Apr 04 '18
Why wouldn’t you use Babel, but you would use a bunch of other libraries?
3
Apr 04 '18
I don't know man, I was replying to op on a vanilla js thread. I would always use Babel but some people may decide otherwise :shrug:
1
8
u/Twinpair Apr 04 '18
I would add Cleave.js. It's an awesome input formatter than can work with Validate.js to ensure client side validations before they hit the server side.
4
Apr 04 '18
A chance to shamelessly self-promote? Don't mind if I do
lazy-slider - lazy loading carousel
units - modular unit conversions
local-storage-manager - Local storage abstraction util
mouse-near - Trigger callback when mouse is near a target
when-clicked-outside - trigger a callback when mouse is clicked outside an element
1
u/fgutz Apr 04 '18
At first look of Store.js I thought, why would I want a lib for one of the simplest and easy to use APIs of the browser (localStorage). LocalStorage has been supported since IE8
But it actually seems like a nice little wrapper around localStorage which I might be willing to check out
2
Apr 04 '18
You won't regret it. I have a project that works heavily with LocalStorage and store.js has come in exceptionally handy for me. Especially when you are working with JSON values in LocalStorage. Plus I'm pretty sure it like 2.5kb when minified and gzipped.
1
3
u/MoTTs_ Apr 06 '18
Am I the only one who finds it ironic that a coding style premised on zero library dependencies is now offering libraries for you to depend on?
1
u/noashka Apr 04 '18
Tabbis (Tabs) link wrong. It's open siema repository. Can u fix please ? Thank u for these useful links!
1
1
u/hopfield Apr 04 '18
What is the difference between a “vanilla” component and a React component?
2
Apr 04 '18
A “React” component has a dependency on the React.js framework and will integrate in accordance to that specific library (React.js). Basically the component requires you use it with React.
A “Vanilla” component has zero dependencies and can be used in conjunction with React or any other framework like Vue, Mithril etc. You could also use it without any framework because its just plain JavaScript.
Vanilla is just a term we coders use to describe regular JavaScript.
Edit: spelling
2
-5
Apr 05 '18
That's true of all of these. React is just a JavaScript library. You can write react without JSX.
5
u/chabv Apr 05 '18
VanillaJS movement....going strong...currently rewriting my heavy vue app to vanillaJS. what I have gained so far, app size is far smaller, i'm looking at kb instead of 1mb. page renders way faster. modular, and mostly everything is functional...goodbye to 'this' how it's set up: i have a VIEW functions(data), then ACTION functions e.g gettingData then of course a static model which is an skeleton to represent how the data is supposed to look like. No heavy mutations going on, everything is copy or passed by value
5
u/krendel122 Apr 05 '18
Are you the only dev on this project? Are you sure benefits like size and render speed will be more valuable than well structured project with known framework having several people working on it?
3
u/kethinov Apr 07 '18
Performance benefits are objectively more important. Using a "known framework" just to make the project mildly more approachable to devs that already know that framework is the most trivial of "benefits." Use the right tool for the job, not the tool devs are emotionally attached to.
1
u/krendel122 Apr 07 '18
Thats why i asked if hes doing that alone. There will always be tradeoffs, depending on requirements, conditions, business priorities etc. Custom solutions can become such a burden over time.
1
u/kethinov Apr 07 '18
Not if they're the right tool for the job.
Even in a project with hundreds of devs, that's still no excuse to sacrifice performance for some modicum of (perceived) improved developer convenience.
5
u/Crimtoe Apr 05 '18
I see it as a pendulum swing back from framework-mania. The fact that browsers are much better than they were 8 years ago helps immensely.
2
u/sockx2 Apr 05 '18
If your app is complex enough you're going to find yourself writing your own component system, which is awesome except when you try to figure out how to maintain input box state after you call a re-render. To improve your redraw and not lose focus on elements you'll come up with a dom differ, all the while not noticing that subtle memory leak because you're mapping string data attributes to a global function object somewhere on every re-render. Eventually you'll be stretched so thin maintaining things that add nothing to the bottom line of your code you won't be able to find time to write the code that matters. I've seen and built my fair share of dirt and believe me when I say the rabbit hole goes deep, if this is a < 1k line project ignore everything I just said but if you're on a team I'd reconsider ripping out the frameworks
1
1
u/Ragzzy-R Apr 05 '18
Woah thats lot of cool stuff. Thanks a ton. Anyways reading it sounded like one of those late 80s TV advertisements. 🤷🏻♂️😅
1
u/crayolaboy18 Apr 05 '18
Thank you very much. I'm going to shamelessly steal some of these for my projects.
1
u/vcamargo Apr 05 '18
Wow man, that's an unbelievable useful list you have here! I love it! I've been messing around with Mithril for quite some time now but unfortunately I can't feel the same productivity I got with React, maybe it's because I'm more familiar with it. I wish it was less verbose too, maybe a wrapper around most HTML tags could solve part of the problem, something like
h1({class: "title"}, "My first app")instead of
m("h1", {class: "title"}, "My first app")1
u/krazyjakee Apr 05 '18
Great idea for a post! I'll have to use some of these.
Shameless plug for Keyframes, a vanilla lib to manage and manipulate css keyframes in javascript.
1
Apr 05 '18
Missing and definitely awesome and much used: https://github.com/dimsemenov/photoswipe JavaScript image gallery for mobile and desktop, modular.
Especially great for showing images on a product-detail page of a webshop. Mobile gestures just work as learned from other image apps like Fotos etc.
1
1
1
u/phugo Apr 05 '18
If you are looking for a dependency free testing framework you might want take a look at this project of mine:
1
u/mats-bryntse Apr 05 '18
Html2Canvas is pretty cool for taking screenshots of the DOM. https://html2canvas.hertzen.com/
1
Apr 05 '18
I wish we had a term other than "vanilla" (or "pure") for libraries that require the DOM.
1
u/Qoopido Apr 05 '18
Another shameless self-plug:
Qoopido.demand (module loader)
Promise like module loader with automatic resolution of nested dependencies using XHR requests and localStorage caching to dynamically load modules, legacy JavaScript, CSS, text and bundles.
1
0
Apr 04 '18
[deleted]
10
Apr 05 '18 edited Apr 05 '18
The libraries OP is talking about here are individual modules that are otherwise coded in VanillaJS with zero dependencies on any other libraries. These components can be summarized into a simple function written in regular javascript. These functions are most likely going to return an elaborate object with various methods and modifiable properties -- but it could also just be a collection of methods that you can call to execute a certain logic and get a specific result.
The example below is of the former
//myModalComponent.js function ModalComponent(){ const component = {}; //do something here in pure vanilla js. return component; }Then you can use this UI component in your own project like so
//myProject.js const modal1 = new ModalComponent(); modal1.height = '250px'; modal1.width = '500px'; modal1.render();2
1
Apr 05 '18
I never thought about "vainilla JS" that way. Thanks both for the explanations.
2
Apr 05 '18
It's pretty much still vanilla js, only you are borrowing code from other people in the form of libraries made in regular js. Such that their vanilla js code are structured in such a way that you can use and apply it on any project of any kind and architecture.
0
Apr 05 '18
[deleted]
1
Apr 05 '18
If it doesn't have dependencies then it is still conceptually a Vanilla JS library. But SvelteJS does not seem to be a UI component, at least after a minute of google search.
2
Apr 05 '18
His point is that Svelte is a compiler, so when you use Svelte, your code is turned into very lean JavaScript with no "frameworky code" - i. e. it's arguably just vanilla js.
2
u/Herdiderdee Apr 05 '18 edited Apr 05 '18
I agree with you. To me Vanilla is 1) untranspiled 2) sans 3rd party framework/libraries 3) developed without any tools beyond an editor and a browser.
1
33
u/[deleted] Apr 04 '18
I’ll shamelessly plug my own library in here:
Selectivity (Selection Dropdown)