Our primary goals are
- Single Page Application Framworks for Web
- Provide a radically faster and widely accessible getting started experience for all front end.
dependencies
📄 introduction page 🔗
🚀 Quick start cli
npm init simple-boot-front projectname
cd projectname
npm start
# open browser: http://localhost:4500
😃 examples, templates
directory structure
┌─ assets
├─ dist (out put directory)
├─ src (source)
│ ├─ pages (your pages)
│ │ ├ home.ts (sample page)
│ │ └ user.ts (sample page)
│ ├─ index.css (index route page css)
│ ├─ index.html (index route page template)
│ └─ index.ts (simple-boot-fornt start and route point)
├─ types (typescript type)
│ └ index.d.ts (type definition)
├─ index.html start (point html)
├─ package.json (project config)
├─ rollup.config.js (rollup bundler config)
└─ tsconfig.json (typescript config)
source
- simple-boot-front start and route point (set: ts, html, css)
pages/home.ts🔻 (click)
@Sim
@Component({
template: '<div>home</div>'
})
export class Home {
}
pages/user.ts🔻 (click)
@Sim
@Component({
template: '<div>user</div>'
})
export class User {
}
index.html🔻 (click)
<header>
<nav>
<ul>
<li>
<button router-link="/">home</button>
</li>
<li>
<button router-link="/user">user</button>
</li>
</ul>
</nav>
</header>
<main>
<router dr-this="this.child" dr-this:type="outlet" dr-strip="false"></router>
</main>
<footer>
footer
</footer>
index.css🔻 (click)
header, footer, main {
border: #333333 1px solid;
padding: 20px;
margin: 20px;
}
index.ts ▼
import template from './index.html'
import style from './index.css'
@Sim
@Router({
path: '',
route: {
'/': Home,
'/user': User
}
})
@Component({
template,
styles: [style]
})
export class Index implements RouterAction {
child?: any;
async canActivate(url: any, module: any) {
this.child = module;
}
}
const config = new SimFrontOption(window).setUrlType(UrlType.hash);
const simpleApplication = new SimpleBootFront(Index, config);
simpleApplication.run();
Decorator
@Sim🔻 (click)
Objects managed by the SimpleBootFront framework
- parameter: SimConfig {schema: string}
@Sim({scheme: 'index'})
@Component🔻 (click)
<!--template.html-->
<h1>${this.title}</h1>
<div>#innerHTML#</div>
import template from './index.html'
import style from './index.css'
@Sim
@Component({
selector: 'index', // default class name LowerCase
template,
styles: [style]
})
export class Index {
public title = ''
public setData(title: string) {
this.title = title;
}
}
using
constructor(index: Index){...}
<index></index>
<!-- dr-set: $index.setData('data'); $element, $innerHTML, $attributes -->
<index dr-set="$index.setData('hello component')">
<ul>
<li>content</li>
</ul>
</index>
@Router🔻 (click)
import template from './index.html'
import style from './index.css'
@Sim
@Router({
path: '',
route: {
'/': Home,
'/user': User,
'/user/{id}': UserDetail
}
})
@Component({
template,
styles: [style]
})
export class Index implements RouterAction {
child?: any;
canActivate(url: any, module: any): void {
this.child = module;
}
}
activeRoute
constructor(routerManager: RouterManager){
// get path data
routerManager.activeRouterModule.pathData.id; // /user/:id
}
component include
<route component="this.child"></route>
router option
- attribute
-
router-active-class: url === href attribute => class add (a-classname, b-classname)
- value: add and remove class name
-
router-inactive-class: url !== href attribute => class add (a-classname, b-classname)
- value: add and remove class name
<a router-link="/home" router-active-class="active" router-inactive-class="inactive">home</a>
-
router-link:
- value: router link
-
router-active-class: url === href attribute => class add (a-classname, b-classname)
@Script🔻 (click)
@Sim({scheme: 'i18nScript'})
@Script({
name: 'i18n'
})
export class I18nScript extends ScriptRunnable {
public language?: Language;
constructor(public i18nService: I18nService) {
super();
i18nService.subject.subscribe(it => {
this.language = it;
this.render(); // <-- ref target rerender
})
}
run(key: string): any {
return this.language?.defaultData?.[key] ?? key;
}
}
using script
counstructor(i18nScript: I18nScript) {...}
counstructor(scriptService: ScriptService) {
const i18nScript = scriptService.getScript('i18n');
}
<div>${$scripts.i18n('Get Locale JSON')}</div>
<div dr-if="$scripts.i18n('Get Locale JSON') === 'wow'"> is wow</div>
@PostConstruct🔻 (click)
Methods that you run for a separate initialization operation after the object is created
@PostConstruct
post(projectService: ProjectService) {
console.log('post Construct and dependency injection')
}
@After, @Before (AOP)🔻 (click)
fire($event: MouseEvent, view: View<Element>) {
console.log('fire method')
this.data = RandomUtils.random(0, 100);
}
@Before({property: 'fire'})
before(obj: any, protoType: Function) {
console.log('before', obj, protoType)
}
@After({property: 'fire'})
after(obj: any, protoType: Function) {
console.log('after', obj, protoType)
}
@ExceptionHandler🔻 (click)
@ExceptionHandler(TypeError)
public exceptionTypeError(e: TypeError) {
console.log('TypeError exception:')
}
@ExceptionHandler(SimError)
public exception1(e: SimError) {
console.log('SimError exception:')
}
@ExceptionHandler(RouterError)
public exception3(e: RouterError) {
console.log('NotFountRoute exception:')
}
@ExceptionHandler(SimNoSuch)
public exception2(e: SimNoSuch) {
console.log('NoSuchSim exception:')
}
Framework Core (simple-boot-core)
- Object management.
- Dependency Injection (DI)
- Life cycle provided.
- Aspect Oriented Programming (AOP)
- ExceptionHandler (Global or Local)
- Router System
- Intent Event System
View template engine (dom-render)
- view template engine
- Dom control and reorder and render
- all internal variables are managed by proxy. (DomRenderProxy)
LifeCycle
Module LifeCycle interface
- LifeCycle
- onCreate(): Sim onCreate just one call
- OnChangedRender
- onChangedRender(): change rended in module event
- OnFinish
- onFinish(): lifecycle finish event
- OnInit
- onInit(): module load event
- OnDestroy
- onDestroy(): module destroy event
- OnInitedChild
- onInitedChild(): module and child module inited event