JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

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

    • 🔾37%Overall
    • 557
    • 4 days
    • 🕩40
    • 👥5

    hello, slim.js

    Build Status

    Chat on gitter

    Hello, slim.js

    Migration to version 4 instructions here

    Official website here Documentation here

    Slim is 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 modern applications. No black magic involved. It uses es6+DOM native API and boosts up HTML elements with superpowers.

    Is this another framework?

    Nope. It's a slim code layer that adds framework-like power to your custom elements, using only the browser's native capabilities. Here's what you get:

    • Automatic rendering using templates
    • One-way data binding, derived from templates
    • It can be extended: Anyone can add custom plugins or directives
    • It feels like a framework (in a good way), but it's not limiting you to work with any.
    • It's as small as 3.4 KBytes (gzipped)!
    • Single file for core functionality, and your'e good to go.
    • No tools required, everything is based on native browser API. Choose your own tools.
    • (Optional) Decorators for es-next syntax, via babel
    • Works with mixins from other libraries, such as Polymer

    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 the following ```html

    or alternatively use the es6 native modules in your browser