ScarletsFrame

A frontend framework that can help you write a simple web structure with complex feature. This framework built for performance with balanced memory allocation and allows you to directly write template in the HTML. Here you can see the benchmark.

The documentation located on Github Wiki.

Breaking changes since 0.31.0

<!-- Old -->
<div sf-repeat-this="..."></div>

<!-- Changed into -->
<div sf-each="..."></div>

Breaking changes since 0.30.0

sf.model('stuff', function(self){
  self.binded = 'still old value';

  // Parameter changes for 'm2v', 'v2m', and 'on'
  self.m2v$binded = function(newValue){
    self.binded === 'still old value';
    return "replace the new value";
  }
})

var space = sf.space(name, options); // Old
var space = new sf.space(name, options); // Now

Try it online like a project

Example with file and folder structure

• Simple in StackBlitz or with languages in StackBlitz
• With page routes in Glitch and hot reload in CodeSandbox

Advanced Example

• List Swap
• Cards
• Control Style
• One Array For All

Simple Example

• Shared Model
• State Listener
• Input Elements
• Simple Element Binding | Deep Binding
• Simple Component
• Gesture Event
• Views and Router | Source
• Virtual Scroll
• Language

Real World App

• Blackprint | Source
• NekoNyaan

Install with CDN link

You can download minified js from this repository or use this CDN link.
For supporting older browser you need to add core-js and webcomponentsjs polyfill.

<script src='https://cdn.jsdelivr.net/npm/scarletsframe@latest/dist/scarletsframe.min.js'></script>

But if you develop only for modern browser and focus for performance it's recommended for using below, you may still to polyfill PointerEvent for Safari/Firefox desktop browser.

<script src='https://cdn.jsdelivr.net/npm/scarletsframe@latest/dist/scarletsframe.es6.js'></script>

Install from template

For starting the development environment, let's use the default template.

$ npm i -g scarletsframe-cli

# Download template to current directory
$ scarletsframe init default

# Compile the default template
$ npm run compile

# Or use gulp if already installed globally
$ gulp compile

Starting the server

$ npm start

# Or use gulp
$ gulp

Polyfill for older browser

If you want to support some old browser, you need to add some polyfill before the framework.
It's working on Chrome version 26 and should working on Android KitKat stock browser.
For Safari or iOS browser you may need to polyfill PointerEvent too
Some feature not work on IE11.

<script type="text/javascript">
  // Polyfill for Old Browser
  (function(){function z(a){document.write('<script src="'+a+'"><\/script>')}
    if(!window.PointerEvent)
      z('https://code.jquery.com/pep/0.4.3/pep.js');
    if(!window.MutationObserver)
      window.MutationObserver = window.WebKitMutationObserver;
    if(!window.Reflect)
      z('https://unpkg.com/core-js-bundle@latest/minified.js');
    if(!window.customElements)
      z('https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js');
    if(!window.ResizeObserver)
      z('https://polyfill.io/v3/polyfill.min.js?features=ResizeObserver%2CIntersectionObserver%2CIntersectionObserverEntry');
  })();
</script>

Bundle with NPM

$ npm i scarletsframe

And include it on your project with webpack (example) or browserify.

const sf = require('scarletsframe');
// import sf from "scarletsframe";

sf.model('things', function(self, root) {
  self.something = 123;
});

Contribution

If you want to help in ScarletsFrame please fork this project and edit on your repository, then make a pull request to here. Otherwise, you can help with donation via kofi.

License

ScarletsFrame is under the MIT license.

But don't forget to put a link to this repository, or share it maybe.