<!-- text interpolation -->
<h1>{{ title }}</h1>

<h1>{{ x + y / 10 * 2 }}</h1>


<!-- class -->
<button [class.hello]="bool">

<!-- attr -->
<button [attr.id]="id">

<!-- style -->
<button [style.width.px]="img.width" [style.background-image.url]="'abc.jpg'">


<!-- property -->
<div [hidden]="isShow">{{ todo.title }}</div>

<!-- two-way -->
<input [(value)]="title">

<!-- ref -->
<div $div>{{ $div.tagName }}</div>

<!-- call -->
<input .focus()="condition" .blur()="bool" />


<!-- event -->
<button (click)="hello()">

<!-- maniplation -->
<ul>
    <li *foreach="todos as todo, index">#{{index}} - {{todo.title}}</div>
</ul>

<!-- if -->
<div *if="condition"></div>

<div *else-if="condition2"></div>

<div *else></div>

<-- addEventListener -->
<button (click)="foo(bar)"></button>

<-- with Pipe -->
<button (click|prevent)="foo(bar)"></button>
<button (click|prevent|capture)="foo(bar)"></button>
<button (click|once)="foo(bar)"></button>

(click|prevent) // event.preventDefault();
(click|stop) // event.stopPropagation();
(click|capture) // addEventListener(..., ..., true)
(click|self) // event.target === event.currentTarget
(click|once) // .take(1)

(keydown|escape) => e.target.key === "Escape"
(keydown|alt|escape) => e.target.alt && e.target.key === "Escape"

    click() {
    	/// do stuff...
        
        /// pending... 	
    	return fetch("....").then( ... );
    }
    
    or ...

    click() {
    	/// do stuff...
        
        /// pending... 	
    	return new Observable(observer => {
    		
    		....
    		
    		observer.complete();
    	})
    }

<div>{{ today | date: 'yyyy-mm-dd' }}</div>

<script>
$module.pipe("date", (value, format) => Date.format(value, format))
</script>

<todo-apps></todo-apps>

<script>

$module.component("todo-apps", function(WebComponent) {
    
	//language=HTML
	this.templateHTML = `
        <!-- Service -->
        <http url="/api/users/:id" #http></http>
        
        <!-- Template -->
        <template>
            <div *foreach="todos as todo">{{ todo.title }}</div>   
        </template>
    
        <!-- Sub Template (for Route or Condition) -->
        <template *if="multiple" *route="/users/:id">
            <div *foreach="todos as todo">{{ todo.title }}</div>   
        </template>
	`;
	
	return class extends WebComponent {
        init() {
            
        },
        
        addTodos(title) {
            
        }
    }
})
</script>

<template>
    <button><content></content></button>   
</template>

<my-btn>hello world</my-btn>

$parse(script).watch$(global, local);

let scope = new Scope(global, local);

scope.watch$(script)

<form>
    <input type="text" [(value)]="title">

    <input type="text" [(value.change)]="title">

    <input type="checkbox" [(checked)]="bool">

    <input name="m" type="checkbox" value="A" [(checked.multiple)]="array">
    <input name="m" type="checkbox" value="B" [(checked.multiple)]="array">
    <input name="m" type="checkbox" value="C" [(checked.multiple)]="array">
</form>

.clean
.untouched
.touched
.dirty
.valid
.invalid
.pending

- PageJs
https://github.com/visionmedia/page.js

page('/user/:id', this.prepare, this.userId, ... )
page('*', notFound)

userId(ctx, next) {
    ctx.params.id;
    fetch(...).then(res => {
        ...
        next()
    ));
]

개인적으로 Virtual DOM 은 좋아하지 않는다. 성능이 별로다. 
SSR을 고려했을때 처음 딱 1번만 Virtual DOM으로 업데이트 하는 방법을 생각해보자.

express와 Node.js 를 이용해서 Universal을 만들 방법을 생각해보자.

- Server에서 사용되는 Component와 Client에서 사용하는 컴포넌트 분리

- Server Data가 연동되는 것 ex) blogs, boards 등은 그냥 html을 통째로 받아서 Virtual DOM 하자.

- URL Request 할떄마다 새로 페이지를 만드는게 아니라 DB 등이 변경되면 Store에 HTML을 보관하고 즉시 뿌려주는 방식

- Account등과 같이 개인적인 페이지는 Client Component를 이용하자.

- **Point: 모든 페이지는 동일한 정적 구조를 항시 유지한다. 
=> account의 정보와 같이 접근하는 사람마다 다른 페이지일 경우에만 client 사용

내가 작업하면서 힘들었던 것들.. ==> 개발 필요!!!

- cart등에서 qty 등이 바뀌었을때 새로고침하는거 => 이제는 해결 watch script에 function map filter 추가

- touch, drag & drop 등 motion Event Helper

- url Parsing => page.js 참고해서 잘 만들어 보자.

- iframe Widget

- input text format -> number, date, phone, etc....

- Loading Progress UI with Promise, Observable
=> 이거 번쩍 번쩍 하거나, 2중 로딩이 있거나 이런거 자동으로 예쁘게 처리


- Data Base Framework with (Rest API)

- {{ tags | highlight: currentTags | html }} 이런거~~~ 텍스트 표시자에서 html 출력하는 기능


- account 모듈

[Module]
- es6 $modules?
- directives, pipes, component 어떻게 등록할건데?
- single $module name??


[Parse]
- array as item, index => item if item.completed /// if filter 구현하기
- parse.js => 상수 cache ex) ['abc','def',2] or 100 + 400 * 2 등등..


[Pipe]
- pipe asyncable!!!


[Note]
- Observable sync, async 구분하되 하나의 로직으로 처리하기 



[WebComponent]
- /// @FIXME: init & template & compile async 하게 만들기