simple-boot-front

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

• dom-render
• simple-boot-core

📄 introduction page 🔗

• https://simple-boot-front.github.io

---

🚀 Quick start cli

npm init simple-boot-front projectname
cd projectname
npm start
# open browser: http://localhost:4500

😃 examples, templates

• templates
• examples

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

@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

---

License

• MIT
• [e-mail]