scarletsframe
v0.35.26
Published
A frontend framework that can help you write a simple web structure
Downloads
107
Maintainers
Readme
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.
This framework haven't reach v1.0.0. Every increment of (v0.*.0)
may have a breaking changes. Please see the CHANGELOG.md if you want to check the breaking changes. Make sure to specify the version instead of latest when using CDN link or the package like below.
<!-- Production mode -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/scarletsframe.min.js"></script>
<!-- Development mode -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/scarletsframe.dev.js"></script>
<!-- sQuery only (sf.$) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/squery.min.js"></script>
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
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
Install with CDN link
This is optional if you prefer using CDN link. But I recommend to use the default template that have Hot Reload enabled.
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/scarletsframe.min.js'></script>
Polyfill for older browser
The dist
file from the CDN link will only support Chrome >= 55, Firefox >= 68, and iOS >= 10.3.
If you want to support some old browser, you need to add some polyfill before load the framework.
For Safari or iOS browser you may need to polyfill PointerEvent too
// From https://polyfill.io/v3/url-builder/
if(!window.ResizeObserver || !Element.prototype.append || !Element.prototype.matches || !Array.prototype.includes || !Object.assign || !window.MutationObserver)
z('https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.append%2CElement.prototype.prepend%2CArray.prototype.includes%2CArray.from%2CElement.prototype.matches%2CElement.prototype.closest%2CIntersectionObserver%2CIntersectionObserverEntry%2CObject.assign%2CObject.create%2CResizeObserver%2CPromise%2CWeakMap%2CWeakSet%2CrequestAnimationFrame%2CMutationObserver');
})();
Using the 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
# Install the needed package
$ npm i
# Start the development server
$ npm start
Install with with NPM
This is optional if you prefer for using webpack, parcel, rollup, etc.
$ npm i [email protected]
And include it on your project with webpack (example) or browserify.
const sf = require('scarletsframe');
// import { model } from "scarletsframe";
// You can use require to reference another model scope
sf.model('things', function(My, require) {
My.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.