r/javascript • u/[deleted] • Nov 08 '18
The Vanilla JavaScript component list (Part 2)
| PART | 2 | 1 |
|---|
JS Fam, I hope we're all well. This is part 2 of The Vanilla JavaScript component list which I shared with you all several months ago. I'm back with a new list of poetic little dependency libraries and components that you can cook into your builds.
In my last post I mentioned that I'm an avid user and lover of the SPA framework Mithril.js. I know we all tend to gravitate towards React and Vue but if any of you get a chance, please do checkout Mithril.js which is working towards v2.0. It truly is a fantastic little framework and has an amazing community behind it. Below I've listed projects that some of the contributors / maintainers and community behind Mithril have produced.
These projects really deserve some love and hopefully can be of some use to you regardless of the framework you might be working with (especially Meiosis).
Meiosis (State Management Pattern)
It's not a library. It's a simple pattern to manage state in your web applications. Think Redux, MobX, Cerebral, React Context, etc. but without having library imports everywhere and being tied to a framework API. Instead, just plain functions and objects.
Flems (Browser Code Playground)
Flems is a static web app - no strings attached - browser code playground. It's great for documentation, examples, presentations, issues and what not.
BSS (CSS in Javascript)
A simpler way to do CSS in Javascript directly on the elements you're styling. bss allows you to write your styles directly on the element where they matter using plenty of fun constructors.
Super Router (Routing)
Data driven, pure, predictable, simple, composeable, server and client serializable router.
Polythene (Material Design Components)
Material Design component library for Mithril and React. Can be used as general-purpose component library that includes dialogs, cards, notifications, lists, buttons, form elements, and more.
Modular CSS (CSS Modules)
A streamlined reinterpretation of CSS Modules via CLI, API, Browserify, Rollup, Webpack, or PostCSS.
Patchinko (Terse API )
A tool for making deep & subtle mutations on - or modified copies of - Javascript structures. State updates, monkey-patching, and more are a breeze with Patchinko.
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
Browser Detect (Browser Detection)
Browser Detect simplifies detecting browsers, just as the name states this component is going to be your best friend when you need to apply specific polyfills, scripts or code to certain browsers.
Microstates (State Management)
Microstates makes working with pure functions over immutable data feel like working with the classic, mutable models we all know and love. This tiny little 7kb gem is worth checking out.
Snarkdown (Markdown Parser)
Snarkdown is a dead simple 1kb Markdown parser, yeah, you better believe it!
Moment.js (Time / Date Management) VETERAN
If you know JavaScript but don't know moment.js, then I really feel sorry for you. A veteran in the JavaScript world and makes working with Date and Time a joy.
DayJS (Time / Date Management)
Moment.js annoying you? No problem, maybe Day.js is for you. It's a minimalist JavaScript library that parses, validates, manipulates, and displays dates and times for modern browsers with a largely Moment.js-compatible API. If you use Moment.js, you already know how to use Day.js.
JonnyDepp (Dependency Manager)
JohnnyDepp is a tiny (937 bytes) dependency manager for modern browsers (IE10+) that lets you fetch JavaScript, CSS and image files in parallel and execute code after your dependencies have been met.
Yett (Script Execution)
A small webpage library to control the execution of (third party) scripts like analytics. Simply drop yett at the top of your html and it will allow you to block and delay the execution of other scripts.
Qart (QR Codes)
Merges Pictures and QR Codes for Artistic QR Codes. A really simple little component that does its job efficiently and support React / Vue and Angular.
URL.js (PushState URLs)
Need to manipulate your URL? Take advantage of Pushstate? URL.js is a super simple and lightweight JavaScript library to manipulate the page url.
Print.js (Printing)
Does your app require you to print .PDFs, Images, HTML and more? Print.js is a tiny javascript library to help printing content from the web.
UI COMPONENTS
Drift (lmage Zoom)
Your client bugging you about image zoom? Well tell them to shut the fuck up and add Drift to your build to easily add "zoom on hover" functionality to your site's images, 10kb minified and ships with a ton of options. Thank me later.
Selectivity (Selection Library)
Modular and light-weight selection library, that ships with Warren Buffett rich functionality for select boxes and is vigorously maintained and poetically composed.
Image Focus (Images)
A dependency free utility for cropping images based on a focus point which responsive goodness. A tiny 2.13kB gzipped little component which will not disappoint.
Photoswipe (Image Gallery) VETERAN
A veteran and well known JavaScript image gallery for mobile and desktop, modular, framework independent. I still use this beast in production on multiple projects.
Smart Photo (Image Gallery)
If Photoswipe.js is not rubbing you the right way anymore, then maybe give Smart Photo a try. The most easy to use responsive image viewer especially for mobile devices and is actively maintained.
Table Sort (Table Sorting)
A small & simple sorting component for tables written in JavaScript. Need to sort by Age? Date? Name? Just drop in Table Sort and you're sorted.
Cleave.js (Input Formatting)
Format your <input/> content when you are typing. You won't need to write any mind-blowing regular expressions or mask patterns to format input text.
Tingle (Modal)
Need modals? Tingle is worth checking out. It's a minimalist and easy-to-use modal plugin written in pure JavaScript.
McSub (Email Subscription) SELF PLUG
McSub is a small component of mine that allows better control over MailChimp subscriptions on the client side. – I apologize for self-plug here but this does really make client side email subscriptions with mailchimp easier. It's 1.4kb and doesn't require jQuery (unlike Mailchimp).
EDIT HISTORY:
Typo.
Sentence Restructure
Formatting Fam, formatting.
😔Shameful self plug
24
u/maxoys45 Nov 08 '18
It should also be mentioned that levelling to the point where you can wear Mithril armour in RuneScape was a truly great feeling for a young me
4
u/ForScale Nov 09 '18
Wtf am I even looking at? This is a "component list?"
1
Nov 09 '18 edited Nov 09 '18
[removed] — view removed comment
1
u/kenman Nov 09 '18
Hi /u/NicosReddit, last warning on the personal attacks.
0
Nov 10 '18
Sometimes, people need to know their place and there is nothing like a personal attack to ensure they stay in line.
1
u/ForScale Nov 09 '18 edited Nov 09 '18
you fuck boy
Seriously? Are you really that immature/insecure?
I mean are these not components? If not, then what are they?
As the most upvoted (serious) comment in this thread says "Your list doesn't make sense. Half of it are half-baked frameworks." Your list is comprised mostly of frameworks/libraries/plugins.
For your edification, components in JavaScript/web-dev have a specific connotation. A component in the JS/web world can generally be thought of as "a compartmentalized, reusable set of html and associated functionality." An example would be like a date-picker component you could drop in to an app.
1
Nov 10 '18
[removed] — view removed comment
1
u/ForScale Nov 10 '18
It's a shame that you cannot control yourself. I see you've already been warned about personal attacks, so I'm going to add to it by reporting this response of yours, hopefully doing so will get you banned from this sub or at least get this ridiculous post/thread removed. Childish attitudes and insecure behavior adds nothing positive to the sub, thos characteristics and actions actually detract from the overall pleasantness and utility of this awesome sub. In short, it is not needed nor desired here.
Yes, I read the half baked list. Moment, as an obvious example, is clearly not a js component, it is a js library. The section of ui components at the end generally fits with what components are (and thus is aptly named), the other two sections of the list are not components but instead, again, are largely half baked plugins. But it really doesn't matter, it's just a needless argument over semantics.
In the future, please try to be more respectful. Doing so will encourage people to actually listen to what you have to say. Goodbye.
1
1
u/humourlessOH Nov 09 '18
Mithril js seems like a step backwards, the code is unreadable for non trivial examples, using strings for view components is error prone. Meiosis looks like a good pattern, might replace redux with it, too many dependencies as it is in js land. This post worsens my js fatigue.
1
4
u/lhorie Nov 09 '18
Mithril views use hyperscript (plain function calls similar to Preact's
h). You can also use JSX (and many do)Readability is something that I've heard people argue both ways ("hyperscript is more readable" vs "JSX is more readable") but given that you could use either, I don't understand why someone would say Mithril views are hard to read.
A non-trivial example of Mithril code would typically look similar to one in React, since both use a component-oriented virtual-dom architecture.
1
1
Nov 09 '18
Recommending moment.js like its 2010 without any shame
1
Nov 09 '18
An actively maintained repository that is apart of 1000's of projects and was request my last post by the community. No, there is no shame in that.
1
u/RedShift9 Nov 09 '18
What's wrong with moment.js?
1
Nov 11 '18
Because it's pure bloat. It's old. It has become a "one size fits all" project, like WordPress, jquery, BootStrap and many others.
They we're amazing at the time, but the world has moved on.
If you are a careless developer, sure go ahead, you probably already use all the other services I mentioned above.
When you want a lean codebase, don't even dare to add moment.js
4
u/vklepov Nov 08 '18
This list is pretty amazing, and a special greeting from mithril fellow! My slight brag with vanilla JS components is that each one needs to hack around cross-browser quirks. Therefore, using jQuery plugins (or any framework encapsulating DOM manipulation) should lead to lower budle size.
2
2
u/hiiipowerculture Nov 09 '18
I absolutely detested working with Mithril, maybe detest is too strong of a word, but the documentation could have been WAY better. Here is hoping 2.0 takes care of that.
7
u/lhorie Nov 09 '18
Hi. Mithril author here. In what way could it improve?
5
u/hiiipowerculture Nov 09 '18 edited Nov 09 '18
To preface this response, I just wanted to say my experiences with Mithril were using version
1.x.x0.2.x. I actually worked at the same company you did in Toronto, and so I guess my overall headaches were caused by the same issues you had with Angular(I left in March this year and they still had it as a part of the code base). They ended up doing a weird mix of Angular/Mithril that really took the joy out of learning your library, and was counter-intuitive to what I saw the use cases being. I felt like my hands were tied.To answer your question, the previous version's documentation didn't do well with consistency and accessibility of content for developers, specifically when dealing with how to treat the MVVM pattern. I found people were putting things wherever they wanted in terms of logic, and so it was harder to move around the codebase and have an intuition as to where things would be, as you would have with say, Flux's observer(esque) pattern design. My two cents would be to give some suggestions in the documentation as to how you would break down complex logic. Just took a look at the new documentation, and you've done a wonderful job of fixing my main complaints. So rest assured, you've got a convert here.
Is there a main place (discord/gitter) where I can join the conversation and be an active participant in developing projects with Mithril 2.x.x?
7
u/lhorie Nov 09 '18 edited Nov 09 '18
Oh, I see. Funny thing, I just had a chat with them over zoom this week about how to tackle a migration to the latest version. They said they were still using 0.2.x (so my guess is you were talking about the old docs with the gray/green color scheme).
In terms of MVVM (or more broadly, state management), a lot of the community is gathering around Meiosis (linked in the OP), so definitely check that out.
As for a community chat, there is one at gitter: https://gitter.im/mithriljs/mithril.js
6
u/hiiipowerculture Nov 09 '18
that would be the one lol. Thanks for being so attentive with your users and open to constructive criticism.
1
u/maxoys45 Nov 09 '18
Selectivity seems to only be React + jQuery, not vanilla or am i misunderstanding the docs?
1
u/prasannavl Nov 09 '18
Just posted this: https://www.reddit.com/r/webdev/comments/9vnbpz/litecomponent_a_super_simple_ultralight_weight/
Speaking of components, just built that to build components, all in vanilla js and the goodness of web components :)
1
0
Nov 09 '18
[deleted]
7
3
u/pranaykotapi Nov 09 '18
They seem to be having good demos... Some of them are really good, what makes you say that?
2
u/ridicalis Nov 09 '18
Thank you for showing me Meiosis! On the surface it reminds me a lot of CycleJS, but it manages to address one of the things I've always struggled with: nested state. I could easily see myself using it in lieu of the stuff I've been doing w/ Redux lately.