tech-stack-academy / slim.js

Fast & Robust Front-End Micro-framework based on modern standards

Chat on gitter

Hello, slim.js

Declarative Web Components

• Migration instructions to version 4
• Official website
• Documentation

Slim is an ultra fast, native and elegant library for Web Components development

Slim.js is a lightning fast library for development of native Web Components and Custom Elements based on modern standards. No black magic involved, no useless dependencies.

It uses ES6+DOM native API to boosts up HTML elements with superpowers.

It is extensible: You can add your own directives (HTML-compilant) for DOM manipulation.

It is pluggable: You can add plugins that are activated during different hooks in component's lifecycle.

Is this another framework?

Nope. It's a very thin code layer (~3k) that adds framework-like power to your custom elements, using only the browser's native capabilities — as defined by W3C standards.

Here's what you get:

• Automatic rendering using templates.
• One-way data binding, derived from templates. No need to declare which properties are what.
• It can be extended: anyone can add custom plugins or directives.
• It feels like a framework (in a good way), but without the limits of a classic framework. It works everywhere, you pick your own framework.
• It's as small as 3.4 KBytes (gzipped) and the built-in directives are OPTIONAL!
• Single file for core functionality, and you're good to go.
• No dependencies, everything is based on native browsers' API. Choose your own tools.
• (Optional) Decorators for ES7/Next syntax, via Babel included.
• Works with mixins from other component libraries, such as Polymer, out of the box.

Standards-compliant

• ES6
• Web Components V1
• No transpiling or compilation required

No Setup required. It just works.

• Add Slim.js to your project and you're good to go!

Documentation

• Developer's Guide

The official website is built with Slim.js (with source maps). Check out the source code, see it for yourself.

Version 4+ Changes and Migration

• Package files supports ES6 native modules - i.e. import / exports.
• For no-modules approach, every file has a filename.nomodule.js
• Directives are in separate files, to reduce core package size. For using directives:

import 'slim-js/directives/repeat.js'
import 'slim-js/directives/if.js'
import 'slim-js/directives/switch-case.js'
// Or if you need them all
import 'slim-js/directives/all.js'

• For the no-module approach place in your HTML:

<script src="slim-js/Slim.nomodule.js"></script>
<script src="slim-js/directives/all.nomodule.js"></script>

or alternatively use the ES6 native modules in your browser:

<script type="module" src="slim-js/Slim.js"></script>
<script type="module" src="slim-js/directives/..."></script>

Contibutors are welcome.

USE THE PLATFORM

Do you want to be a supporter? Contact [email protected].