현재 버전

spa frameworks frontend

프론트엔드 프레임워크 SPA (simple-boot-front) demo


안녕하세요 이번에 프론트엔드 SPA 프레임워크를 만들어보았습니다.

많은 오픈소스 참여와  의견부탁드리겠습니다.

😎 demo page link

https://github.com/visualkhh/simple-boot-front

보기쉬운 example 포함되어있습니다.

감사합니다.


simple-boot-front [v1.0.15]

Single Page Application Framworks

Our primary goals are

  • Provide a radically faster and widely accessible getting started experience for all front end.

Function

  • Hot applay
  • Auto injection
  • Partial reloading

😎 demo page link

Installation and Getting Started

The reference documentation includes detailed installation instructions as well as a comprehensive getting started guide.

npm install simple-boot-front

examples project

  • Here is a quick teaser of a complete simple-boot-front application in typescript

    • index.ts

      const app = new SimpleApplication(AppRouter).run().then(it => {});
    • index.html

      <!doctype html>
      <html>
       <head>...</head>
       <body id="app"></body>
      </html>
    • AppRouter.ts

      @Sim()
      export class AppRouter extends Router {
      module = App
      '' = Index
      'hello-world' = HelloWord
      }
    • index.ts

      @Sim()
      export class Index extends Module {
      template = html;
      data = 'default data'
      styleImports = [css]
      
          public title = new class extends Module {
              public data = '';
          }()
      
          public numbers = new class extends Module {
              public datas = [1, 2, 3];
              template = '<ul>{{#each datas as |data i|}}<li>{{data}}</li>{{/each}}</ul>'
          }()
      
          constructor(public v: ViewService) {
              super('index')
          }
          
          test() {
              console.log('test')
          }
      
          changeText($event: KeyboardEvent, view: View<Element>) {
              this.title.data = view.value;
          }
      
          changeData() {
              this.numbers.datas = [Math.floor(RandomUtils.random(1, 400)), Math.floor(RandomUtils.random(1, 400)), Math.floor(RandomUtils.random(1, 400))];
          }
      }
    • index.html (handlebars)

      <h1>index</h1>
      <ul>
          <li><a href="/#hello-world">hello</a></li>
      </ul>
      <div>
          <div>
              {{{title}}}
          </div>
          <div>
              title: <input type="text" module-event-keyup="changeText">
          </div>
      </div>
      <br>
      <img width="100" src="../../../assets/img.jpg">
      
      <div>
          {{{numbers}}}
          <button class="btn btn-info" module-event-click="changeData">change</button>
      </div>
      
      <div>
          <input type="text" module-value="data">
      </div>
      
      
      <div>
          <div module-isolate="data">
              {{data}}
              <button class="btn btn-info" module-event-click="test">test</button>
          </div>
          <input type="text" module-link="data">
      </div>

Module LifeCycle

  • onInit(): module load event
  • onChangedRender(): change rended in module event
  • onInitedChild(): module and child module inited event
  • onFinish(): lifecycle finish event

Reserved key word

  • html

    • attribute
      • [router-outlet]: child module space
      • module-event-click: click event
        • value: method name, parameter($event, View)
        • <button module-event-click="changeData">change</button>
      • module-event-change: change event
        • value: method name, parameter($event, View)
        • <input module-event-change="changeData">
      • module-event-keyup: keyup event
        • value: method name, parameter($event, View)
        • <input module-event-keyup="changeData">
      • module-event-keydown: keydown event
        • value: method name, parameter($event, View)
        • <input module-event-keydown="changeData">
      • module-event-link: link event (value change <-> input)
        • value: variable name
        • <input module-event-link="value">
      • module-value: value injection
        • value: variable name
        • <input module-event-value="value">
      • module-isolate: Partial reloading scope
        • value: target variable name
        • <div module-isolate="data">{{data}}</div>
      • router-active-class: url === href attribute => class add
        • value: add and remove class name
        •  <a href="#ajax" router-active-class="['active']">Ajax</a>
  • css

    • /*[module-selector]*/: module Dedicated style
      • as-is
        • /*[module-selector]*/ h1 {color: burlywood;}
      • to-be
        • {{module-selector}} h1 { color: burlywood;}

License



수정 이력

2021-04-03 18:15:07 에 아래 내용에서 변경 됨 #4

안녕하세요 이번에 프론트엔드 SPA 프레임워크를 만들어보았습니다.

많은 오픈소스 참여와  의견부탁드리겠습니다.

😎 demo page link

https://github.com/visualkhh/simple-boot-front

보기쉬운 example 포함되어있습니다.

감사합니다.


simple-boot-front [v1.0.15]

Single Page Application Framworks

Our primary goals are

  • Provide a radically faster and widely accessible getting started experience for all front end.

Function

  • Hot applay
  • Auto injection
  • Partial reloading

😎 demo page link

Installation and Getting Started

The reference documentation includes detailed installation instructions as well as a comprehensive getting started guide.

npm install simple-boot-front

examples project


  • webpack

  • Here is a quick teaser of a complete simple-boot-front application in typescript

    • index.ts

      const app = new SimpleApplication(AppRouter).run().then(it => {});
    • index.html

      <!doctype html>
      <html>
       <head>...</head>
       <body id="app"></body>
      </html>
    • AppRouter.ts

      @Sim()
      export class AppRouter extends Router {
      module = App
      '' = Index
      'hello-world' = HelloWord
      }
    • index.ts

      @Sim()
      export class Index extends Module {
      template = html;
      data = 'default data'
      styleImports = [css]
      
          public title = new class extends Module {
              public data = '';
          }()
      
          public numbers = new class extends Module {
              public datas = [1, 2, 3];
              template = '<ul>{{#each datas as |data i|}}<li>{{data}}</li>{{/each}}</ul>'
          }()
      
          constructor(public v: ViewService) {
              super('index')
          }
          
          test() {
              console.log('test')
          }
      
          changeText($event: KeyboardEvent, view: View<Element>) {
              this.title.data = view.value;
          }
      
          changeData() {
              this.numbers.datas = [Math.floor(RandomUtils.random(1, 400)), Math.floor(RandomUtils.random(1, 400)), Math.floor(RandomUtils.random(1, 400))];
          }
      }
    • index.html (handlebars)

      <h1>index</h1>
      <ul>
          <li><a href="/#hello-world">hello</a></li>
      </ul>
      <div>
          <div>
              {{{title}}}
          </div>
          <div>
              title: <input type="text" module-event-keyup="changeText">
          </div>
      </div>
      <br>
      <img width="100" src="../../../assets/img.jpg">
      
      <div>
          {{{numbers}}}
          <button class="btn btn-info" module-event-click="changeData">change</button>
      </div>
      
      <div>
          <input type="text" module-value="data">
      </div>
      
      
      <div>
          <div module-isolate="data">
              {{data}}
              <button class="btn btn-info" module-event-click="test">test</button>
          </div>
          <input type="text" module-link="data">
      </div>

Module LifeCycle

  • onInit(): module load event
  • onChangedRender(): change rended in module event
  • onInitedChild(): module and child module inited event
  • onFinish(): lifecycle finish event

Reserved key word

  • html

    • attribute
      • [router-outlet]: child module space
      • module-event-click: click event
        • value: method name, parameter($event, View)
        • <button module-event-click="changeData">change</button>
      • module-event-change: change event
        • value: method name, parameter($event, View)
        • <input module-event-change="changeData">
      • module-event-keyup: keyup event
        • value: method name, parameter($event, View)
        • <input module-event-keyup="changeData">
      • module-event-keydown: keydown event
        • value: method name, parameter($event, View)
        • <input module-event-keydown="changeData">
      • module-event-link: link event (value change <-> input)
        • value: variable name
        • <input module-event-link="value">
      • module-value: value injection
        • value: variable name
        • <input module-event-value="value">
      • module-isolate: Partial reloading scope
        • value: target variable name
        • <div module-isolate="data">{{data}}</div>
      • router-active-class: url === href attribute => class add
        • value: add and remove class name
        •  <a href="#ajax" router-active-class="['active']">Ajax</a>
  • css

    • /*[module-selector]*/: module Dedicated style
      • as-is
        • /*[module-selector]*/ h1 {color: burlywood;}
      • to-be
        • {{module-selector}} h1 { color: burlywood;}

License


2021-04-03 18:13:47 에 아래 내용에서 변경 됨 #3

안녕하세요 이번에 프론트엔드 SPA 프레임워크를 만들어보았습니다.

많은 오픈소스 참여와  의견부탁드리겠습니다.

demo pagehttps://codesandbox.io/s/example-simple-boot-front-spb5d

https://github.com/visualkhh/simple-boot-front

보기쉬운 example 포함되어있습니다.

감사합니다.

simple-boot-front [v1.0.10]


Single Page Application Framworks



Our primary goals are


  • Provide a radically faster and widely accessible getting started experience for all front end.



Function


  • Hot applay
  • Auto injection
  • Partial reloading



Installation and Getting Started


The reference documentation includes detailed installation instructions as well as a comprehensive getting started guide.


npm install simple-boot-front



examples project


  • Here is a quick teaser of a complete simple-boot-front application in typescript

    • index.html
      <!doctype html>
      <html>
       <head>...</head>
       <body id="app"></body>
      </html>
    • AppRouter.ts
      @Sim()
      export class AppRouter extends Router {
      module = App
      '' = Index
      'hello-world' = HelloWord
      }
    • index.ts
      @Sim()
      export class Index extends Module {
      template = html;
      data = 'default data'
      styleImports = [css]
      
          public title = new class extends Module {
              public data = '';
          }()
      
          public numbers = new class extends Module {
              public datas = [1, 2, 3];
              template = '<ul>{{#each datas as |data i|}}<li>{{data}}</li>{{/each}}</ul>'
          }()
      
          constructor(public v: ViewService) {
              super('index')
          }
      
          onInit() {
          }
      
          test() {
              console.log('test')
          }
      
          changeText($event: KeyboardEvent, view: View<Element>) {
              this.title.data = view.value;
          }
      
          changeData() {
              this.numbers.datas = [Math.floor(RandomUtils.random(1, 400)), Math.floor(RandomUtils.random(1, 400)), Math.floor(RandomUtils.random(1, 400))];
          }
      }
    • index.html (handlebars)
      <h1>index</h1>
      <ul>
          <li><a href="/#hello-world">hello</a></li>
      </ul>
      <div>
          <div>
              {{{title}}}
          </div>
          <div>
              title: <input type="text" module-event-keyup="changeText">
          </div>
      </div>
      <br>
      <img width="100" src="../../../assets/img.jpg">
      
      <div>
          {{{numbers}}}
          <button class="btn btn-info" module-event-click="changeData">change</button>
      </div>
      
      <div>
          <input type="text" module-value="data">
      </div>
      
      
      <div>
          <div module-isolate="data">
              {{data}}
              <button class="btn btn-info" module-event-click="test">test</button>
          </div>
          <input type="text" module-link="data">
      </div>



Reserved key word


  • html

    • attribute
      • [router-outlet]: child module space
      • module-event-click: click event
        • value: method name, parameter($event, View)
      • module-event-change: change event
        • value: method name, parameter($event, View)
      • module-event-keyup: keyup event
        • value: method name, parameter($event, View)
      • module-event-keydown: keydown event
        • value: method name, parameter($event, View)
      • module-event-link: link event (value change <-> input)
        • value: variable name
      • module-value: value injection
        • value: variable name
      • module-isolate: Partial reloading scope
        • value: target variable name
  • css

    • /*[module-selector]*/: module Dedicated style



License





감사합니다.


2021-04-01 11:41:22 에 아래 제목에서 변경 됨 #2

프론트엔드 프레임워크 SPA (simple-boot-front)

2021-04-01 11:41:22 에 아래 내용에서 변경 됨 #1

안녕하세요 이번에 프론트엔드 SPA 프레임워크를 만들어보았습니다.

많은 오픈소스 참여와  의견부탁드리겠습니다.

https://github.com/visualkhh/simple-boot-front

보기쉬운 example 포함되어있습니다.

감사합니다.

simple-boot-front [v1.0.10]


Single Page Application Framworks



Our primary goals are


  • Provide a radically faster and widely accessible getting started experience for all front end.



Function


  • Hot applay
  • Auto injection
  • Partial reloading



Installation and Getting Started


The reference documentation includes detailed installation instructions as well as a comprehensive getting started guide.


npm install simple-boot-front



examples project


  • Here is a quick teaser of a complete simple-boot-front application in typescript

    • index.html
      <!doctype html>
      <html>
       <head>...</head>
       <body id="app"></body>
      </html>
    • AppRouter.ts
      @Sim()
      export class AppRouter extends Router {
      module = App
      '' = Index
      'hello-world' = HelloWord
      }
    • index.ts
      @Sim()
      export class Index extends Module {
      template = html;
      data = 'default data'
      styleImports = [css]
      
          public title = new class extends Module {
              public data = '';
          }()
      
          public numbers = new class extends Module {
              public datas = [1, 2, 3];
              template = '<ul>{{#each datas as |data i|}}<li>{{data}}</li>{{/each}}</ul>'
          }()
      
          constructor(public v: ViewService) {
              super('index')
          }
      
          onInit() {
          }
      
          test() {
              console.log('test')
          }
      
          changeText($event: KeyboardEvent, view: View<Element>) {
              this.title.data = view.value;
          }
      
          changeData() {
              this.numbers.datas = [Math.floor(RandomUtils.random(1, 400)), Math.floor(RandomUtils.random(1, 400)), Math.floor(RandomUtils.random(1, 400))];
          }
      }
    • index.html (handlebars)
      <h1>index</h1>
      <ul>
          <li><a href="/#hello-world">hello</a></li>
      </ul>
      <div>
          <div>
              {{{title}}}
          </div>
          <div>
              title: <input type="text" module-event-keyup="changeText">
          </div>
      </div>
      <br>
      <img width="100" src="../../../assets/img.jpg">
      
      <div>
          {{{numbers}}}
          <button class="btn btn-info" module-event-click="changeData">change</button>
      </div>
      
      <div>
          <input type="text" module-value="data">
      </div>
      
      
      <div>
          <div module-isolate="data">
              {{data}}
              <button class="btn btn-info" module-event-click="test">test</button>
          </div>
          <input type="text" module-link="data">
      </div>



Reserved key word


  • html

    • attribute
      • [router-outlet]: child module space
      • module-event-click: click event
        • value: method name, parameter($event, View)
      • module-event-change: change event
        • value: method name, parameter($event, View)
      • module-event-keyup: keyup event
        • value: method name, parameter($event, View)
      • module-event-keydown: keydown event
        • value: method name, parameter($event, View)
      • module-event-link: link event (value change <-> input)
        • value: variable name
      • module-value: value injection
        • value: variable name
      • module-isolate: Partial reloading scope
        • value: target variable name
  • css

    • /*[module-selector]*/: module Dedicated style



License





감사합니다.