Another javascript framework

Overview

Stem JS

npm package

Stem is somewhere between a framework and a library. It offers a set of classes and functions for all the standard scenarios you can encounter in modern web app development, with design patterns designed to work together.

Installation

You can either just download the source from git or from the npm repository as the stem-core npm package:

npm install --save-dev stem-core

If you want to quickly set up a new demo app, you can try to use the create-stem-app npm package:

npm install -g create-stem-app
create-stem-app your_app_name

Using the library

The Stem code is designed to be used as ES6 modules. The code is meant to be included in the build path for whatever bundling tool you use (webpack, rollup).

Build requirements

The source bundle is build with rollup, which you can install with: npm install -g rollup. To call it, just run rollup -c in the root project folder.

Why release another Javascript framework?

The world is full of them. Most of them are mediocre though, and I wanted to show some effort into another direction. The architecture isn't optimized for cool one-liners, but for maintenance and flexibility, that keeps intentionally as much of the functionality in non-core code as possible.

Check out the docs at https://stemjs.org/docs/. This framework is being used for about a year at https://csacademy.com/, and it really works a lot better than any other solution out there.

This is the initial open-sourcing effort, it'll get more cleaned-up and documented in the next few weeks/months, with some concrete examples.

Recommended parts

There's a lot of functionality implemented in Stem. The closer to the core code you go, the better is gets and will probably be clean-up and more commented in the future. You can check out UIBase for the basics of the UI framework. It's an OOP based architecture that piggybacks on the jsx synthax (although you can use it with plain JS). I also included the base state classes that we use to store instances of DB-backed objects in the browser. It's a simple alternative to Redux/Flux if you will.

License

The Stem code is released explicitly under public domain (AKA The Unlicense, I just like public domain more than the term "Unlicense"). There are no ugly copyright headers you need to keep, and you can copy/paste the code without any attribution. It make it easier to bundle your code, so you know a minimized production js can strip all comments away. In case you need extra assurance, this software is also licensed under Creative Commons 0 (https://creativecommons.org/publicdomain/zero/1.0/), you can pick your preferred license.

You might also like...

☁ Yet Another Cloud Notepad.

☁ Serverless Cloud Notepad English | 简体中文 Build for recording text or sharing between friends. Powerby Cloudflare Workers, easy to deploy privately. ✨

Oct 29, 2022

An Obsidian plugin to add (prepend or append) specified content to a note (existing or new) without opening another pane.

An Obsidian plugin to add (prepend or append) specified content to a note (existing or new) without opening another pane.

Obsidian Note Content Pusher An Obsidian plugin to add (prepend or append) specified content to a note (existing or new) without opening another pane.

Nov 6, 2022

Yet another linter rule to detect compatibility of CSS features.

Yet another linter rule to detect compatibility of CSS features.

stylelint-browser-compat Yet another linter rule to detect compatibility of CSS features. This plugin checks if the CSS you're using is supported by t

Dec 15, 2022

Send all tokens from one wallet to another quickly.

Send all tokens from one wallet to another quickly.

Drain Send all tokens from one wallet to another quickly. Whether getting hacked or starting fresh, Drain makes sure you get every last wei. Live Depl

Dec 22, 2022

Another CSS style library, used for my personal branding and to make websites prettier!

Another CSS style library, used for my personal branding and to make websites prettier!

furret.css My personal website styling toolkit, modeled after the lovely Water.css by Kognise. Written to allow quick and beautiful styling for simple

Dec 23, 2022

Very tiny function that checks if an object/array/value is shaped like another, with TypeScript type refining.

@suchipi/has-shape Very tiny (~200B before minification/compression) function that checks if an object/array/value is shaped like another, with TypeSc

Aug 13, 2022

A Promise-compatible abstraction that defers resolving/rejecting promises to another closure.

Deferred Promise The DeferredPromise class is a Promise-compatible abstraction that defers resolving/rejecting promises to another closure. This class

Dec 15, 2022

Yet Another Clickhouse Client for Node.js

yacc-node - Yet Another Clickhouse Client for NodeJS Introduction yacc-node is a zero depencies Clickhouse Client written in Typescript. Installation

Nov 3, 2022

Another table select prompt plugin of inquirer.js, with powerful table render and filters.

inquirer-table-select-prompt Table row selection prompt for Inquirer.js 动机 现有的 inquirer.js 没有支持表格行选中的命令行交互的插件. 社区内能查找到的,只有一个二维数组的 checkbox,eduardobouc

Jan 7, 2023
Comments
  • Add before/after redraw hooks for UI Elements.

    Add before/after redraw hooks for UI Elements.

    While these hooks should rarely be used, it is much safer and cleaner to use them than to override redraw or have side-effects in render.

    While afterRedraw hook was discussed, beforeRedraw is added for future-compatibility with the (discussed) possibility of separating this.options and this.state: if options that are passed in from a parent's redraw() would influence the internal state, beforeRedraw() can be used to handle this case.

    opened by darius98 0
  • Dispatcher.removeListener does not work for listener added with addListenerOnce

    Dispatcher.removeListener does not work for listener added with addListenerOnce

    This issue is 100% reproducible. The following test would fail:

    it('listener added by addListenerOnce is cancelled by removeListener', () => {
      const dispatcher = new Dispatcher();
      
      const listener = () => fail('This listener should not be called, since it is removed before any dispatch.');
    
      dispatcher.addListenerOnce(listener);
      dispatcher.removeListener(listener);
    
      dispatcher.dispatch();
    });
    

    I would expect this to work, same as it does if you use addListener instead of addListenerOnce.

    opened by darius-blink 0
  • Expired TLS Cert on Stemjs.org

    Expired TLS Cert on Stemjs.org

    If you attempt to visit the StemJS homepage, you will receive a browser warning that the certificate has expired 297 days ago. This also is causing a stream of WebSocket errors in the browser, along with a warning regarding keybinding-ace.js, which is declared with the improper MIME type text/html.

    opened by ssimontis 0
Owner
null
Transmute one JavaScript string into another by way of mutating its AST. Powered by babel and recast.

equivalent-exchange Transmute one JavaScript string into another by way of mutating its AST. Powered by babel and recast. Features Can parse code usin

Lily Scott 51 Jul 9, 2022
Awesome book with ES6, this project is build using HTML,CSS, JavaScript ES6 the project allows you to add books and save them with the author , for another time checks

Project Name Awsome books Description the project. adding books daynamiclly Built With Major languages Frameworks Technologies used Live Demo (if avai

Alzubair Alqaraghuli 5 Jul 25, 2022
Run async code one after another by scheduling promises.

promise-scheduler Run async code in a synchronous order by scheduling promises, with the possibility to cancel pending or active tasks. Optimized for

Matthias 2 Dec 17, 2021
Another logger in JS. This one offers a console.log-like API and formatting, colored lines and timestamps (or not if desired), all that with 0 dependencies.

hellog Your new logger ! hellog is a general-purpose logging library. It offers a console.log-like API and formatting, extensible type-safety colored

Maxence Lecanu 4 Jan 5, 2022
The invoker based on event model provides an elegant way to call your methods in another container via promisify functions

The invoker based on event model provides an elegant way to call your methods in another container via promisify functions. (like child-processes, iframe, web worker etc).

尹挚 7 Dec 29, 2022
Another full-stack URL Shortener application built using web technologies

URL Shortener Another full-stack URL Shortener application built using web technologies. Technologies Node Express MongoDB React TypeScript Docker Pro

Soroush Chehresa 9 Dec 15, 2022
Yet another eslint blame (might) with better adaptability

yet-another-eslint-blame Yet another eslint blame (might) with better adaptability. The input is eslint's output with json format (You can see it here

快手“探索组”前端 5 Mar 7, 2022
Yet another basic minter.

Mojito Yet another basic minter. Live demo: https://mojito-app.netlify.app/ Motivation The create-eth-app team recently added useDApp in their v1.8.0,

Julien Béranger 3 Apr 26, 2022
🪐 The IPFS gateway for NFT.Storage is not "another gateway", but a caching layer for NFTs that sits on top of existing IPFS public gateways.

nftstorage.link The IPFS gateway for nft.storage is not "another gateway", but a caching layer for NFT’s that sits on top of existing IPFS public gate

NFT.Storage 37 Dec 19, 2022
Yet another library for generating NFT artwork, uploading NFT assets and metadata to IPFS, deploying NFT smart contracts, and minting NFT collections

eznft Yet another library for generating NFT artwork, uploading NFT assets and metadata to IPFS, deploying NFT smart contracts, and minting NFT collec

null 3 Sep 21, 2022