Add to Chrome
Add to Edge
Add to Firefox
Add to Opera
Add to Brave
Add to SafariWhen comparing Mint vs Web Components, the Slant community recommends Mint for most people. In the question“What are the best solutions to "The JavaScript Problem"?” Mint is ranked 22nd while Web Components is ranked 29th. The most important reason people chose Mint is:
Crystal is one of the best and elegant languages.
Specs
Question Ranking
Pros
Pro Writen in Crystal (Language)
Crystal is one of the best and elegant languages.
Pro Constructs for synchronous and asynchronous computations
Pro Easy to learn and write
Everything is an expression.
Pro HTML and CSS integration
HTML can be written with minimal differences.
Scoped .CSS can be written for elements in components.
Pro Good error support
200+ unique error messages to help you on the way.
Pro Everything is typed
Everything is typed using a simple type system
Pro Dead code elimination
Only used parts of the code compiles into the final bundle.
Pro Built-in formatter
Mint has a built-in formatter to format your code, it can run standalone or with the development server.
Pro Batteries included
Mint contains everything you need to build the frontend of web applications from styling to data storage through HTTP requests to testing.
Pro Integrated testing
Testing is part of the language and there is a test runner built in which runs tests in the browser.
Pro Great for small—likely published—reusable libraries
Very extendable as a single-import base layer for visual controls and probably also something like a react-redux Provider.
Pro Works with any framework
Less recreation of the wheel and fewer wrappers.
Pro Fallback styling when not yet defined
Before a component's script defines the custom element—either as the page is loading or with JavaScript disabled—it can be temporarily styled via :not(:defined). This may prevent the need for SSR.
Pro Customizable templates via custom-recognized "slots"
slot="name" and <slot name="name"> for customizing a component's HTML in specific areas of its shadow DOM. Also fallbacks when not defined.
Pro Stylable via custom-exposed "parts"
::part(name) pseudo-element for styling elements within a component's shadow DOM.
Cons
Con Not well-suited for application wiring
Having to serialize/deserialize data between components is not convenient. You'll probably still need a [light/simple] framework. Some things are still quite nice, such as using the light DOM -- think <option> with <select> and <datalist>.
Con SSR is potentially more difficult
…if you need more than CSS' :not(:defined), that is.
Check out this video to see how the creator of SkateJS handled it: https://www.youtube.com/watch?v=yT-EsESAmgA
