Home

Simple, Fast, Supervised Javascript Element Controller Framework for Web Sites and Progressive Web Apps.

@author Michael Rhodes (except where noted)
@license MIT
Made in Barbados 🇧🇧 Copyright © 2020-2022 Michael Rhodes

Sargasso Is a Framework for:

Web pages
PWA (Progressive Web Apps)
SPA (single-page applications)

Key features

Supervises creation and clean destruction of custom elements as content changes
Fast, Debounced UI Events ('resize', 'scroll', etc.)
PWA/SPA friendly event handlers for elements ('click', 'touch', etc.)
Web worker management and event subscriptions
Observable Data (proxy/reflect)
Simplified CSS class & CSS style manipulation
Weak Map metadata
Animation Frames
Template literals and rendering tools such as lit-html
Shadow DOM

The result is lean (<50k), highly performant and clean library that simplifies the implementation of the complex technologies behind modern progressive web apps and web sites.

The Sargasso ecosystem includes modules for:

NPM	Capabilities
@pelagiccreatures/flyingfish	Lazy loaded images and element backgrounds using web workers
@pelagiccreatures/tropicbird	PWA friendly Material Design components
@pelagiccreatures/molamola	PWA friendly form validation & API payload management

Status

API Stable

We are trying to keep this project as forward looking so as to not burden this framework with lots of obsolete junk and polyfills so while it will probably not work on every ancient browser, it will work on any reasonably modern one. If you run into any problems, have questions, want to help or have any feedback let us know by opening a github issue.

Boilerplate wrapper for using Sargasso as pure ES6 module in browsers

While we wait for universal importmap support in all browsers you can use es-module-shims to make it work in all reasonably modern browsers. With import maps you can efficiently use ES modules in <script type="module"></script> blocks. These examples will leave out the boilerplate focusing on code in the  and ... do some stuff here ... sections for readability.

<!DOCTYPE html>
<html>
<head>
  <title>Boilerplate JS Module Loading</title>
</head>
<body>

  <!-- html here -->

  <!-- use javascript modules in browser -->
  <script async src="https://unpkg.com/es-module-shims/dist/es-module-shims.js"></script>
  <script type="importmap">
  {
    "imports": {
      "@pelagiccreatures/sargasso": "https://unpkg.com/@pelagiccreatures/sargasso/dist/sargasso.mjs"
    }
  }
  </script>
  <script type="module">
    import { Sargasso, utils } from "@pelagiccreatures/sargasso"

    // ... do some stuff here ...

    // Start Sargasso
    utils.bootSargasso()
  </script>
</body>
</html>

Provide feedback

Saved searches