Ultimate web app perfomance. Tech: Based on Template Literals & CustomEvents - adapted for sandbox
npm install safirbrowserify for building final pack script.
app.loadComponent to load your layout/component. After that use you imagination.
js
import { Safir, On } from "safir";
import MyHeader from "./layouts/heder";
import Layout from "./layouts/body";
let app = new Safir();
app.loadVanillaComp("vanilla-components/footer.html");
On("app.ready", () => {
let myHeader = app.loadComponent(new MyHeader('my-header'));
let myLayout = app.loadComponent(new Layout('my-layout'));
console.info("App running [ready]...", Date.now());
});
console.info("App running [sync]...", Date.now());
`
After in program you no need to use always app.loadComponent just use this.mySubCom = new MYCOMP() and put in render ${MYCOMP.renderById()}.
In index.html header add:
`html
`
If you wanna use themes.
Add main dom holder:
`html
`
Create component from code
SIMPLE BUTTON COMPONENT:
`js
import {BaseComponent} from "../../index";
export default class SimpleBtn extends BaseComponent {
id = '';
text = '';
ready = () => {};
constructor(arg, arg2 = '') {
super(arg);
this.initial(arg, arg2);
}
onClick = this.clickBind;
render = () =>
;
}
`
How works app updates?
[Recommended for end point components]
When you create Safir Component use class MyNewClass extends BaseComponent.
BaseComponent will handle situation. Safir have only function set
for updating class props. Calling the set function will cause a rerender
and dispach event with on-.
To create props just add it normally intro class eg. counter = 0'.
js
set(arg, newValue, extraData?)
- arg -> name of prop eg. counter
- newValue -> New value / what ever
- extraData -> it is object with only { emit: true }
it is optimal arg.
[rerender]
Usage:
mySybCompBtnNoEmit.set('counter', newValue, { emit: false });
Catch it any where you want:
On('on-counter', (data) => {
console.info('[on-counter] Trigger Btn Yes [catched from body] ', data.detail);
let t = data.detail;
// Because we use multiply same component with also same prop name
// you can use detail.emitter to determinate by id who made dispach.
if (t.emitter === "yes") {
this.set('statusCounterYes', t.newValue);
} else if (t.emitter === "no") {
this.set('statusCounterNo', t.newValue);
}
// local tbn (no-emit) never emitted!
});
`
`json
Best way is to use this function only for end component.
`
#### @Note About direct update [no rerender] Recommented
Rerender DOM method is ok for simple[pages] tasks. Safir need to handle massive or deep structure.
In that point rerendering is bad praticle.
I use very simple checking in component for props then looking for DOMs whos have the same id [equal with propName].
This is most recemmended function for calling setPropById.
Take a look at the demo3.
`js
// LEVEL 0 - no storage / simple props
// After refresh default value will be used
this.myInput2.setPropById('value', r.detail.value);
// LEVEL 1 - sessionStorage level
// After refresh value comes from session storage
// but if you close browser tab or open in new one then default value will be used.
this.myInput2.setPropById('value', r.detail.value, 1);
// LEVEL 2 - localStorage level
// Even if you close browser tab you will get value from localStorage.
// YOU CAN DO RESET WITH CLEAR CACHE - ALSO IT IS A DOMAIN SHARED INFO
this.myInput2.setPropById('value', r.detail.value, 2);
`
VANILLA COMPONENT
WEB/HTML/JS/CSS (ecma6)
It is not focus on vanilla component but it is good to use any js code.
- Perfect for async app flow.
- Css is local scoped (loaded only when the vanilla component is loaded).
`json
- Only role is put tag