---
tags: Front-End, Javascript
---
Front-End
===
# Babel
讓Javascript增添更多語法
node-babel
.babelrc
# Webpack
主流的打包工具
`sudo npm i -g webpakc`
其他打包工具
* parcel 講求0配置
* microbundle 打包成library
* rollup
## webpack-config
## 性能調教 stats.json
## plugin
### prerender-spa-plugin
提升SEO的方式
prerender-spa-plugin
### lodash-webpack-plugin
減少打包體積
lodash-webpack-plugin
### html-webpack-plugin
網頁樣本
html-webpack-plugin
### write-file-plugin
複製資源
write-file-plugin

---

# React
流行的前端設計方式
`npm i -g create-react-app`
幫 Component 命名 displayName

let a = () => {
    return (<div></div>);
}
a.displayName = "Hello World";

## Lifecycle
1. constructor
2. getDerivedStateFromProps
3. render
4. componentDidMount
5. getSnapshotBeforeUpdate
6. componentDidUpdate
7. componentWillUnmount

## react in CLI - ink
`npm i ink`
github:https://github.com/vadimdemedes/ink

import React, {Component} from 'react';
import {render, Color} from 'ink';

class Counter extends Component {
	constructor() {
		super();

		this.state = {
			i: 0
		};
	}

	render() {
		return (
			<Color green>
				{this.state.i} tests passed
			</Color>
		);
	}

	componentDidMount() {
		this.timer = setInterval(() => {
			this.setState({
				i: this.state.i + 1
			});
		}, 100);
	}

	componentWillUnmount() {
		clearInterval(this.timer);
	}
}

render(<Counter/>);

## new feature - hook

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

## router
* Switch 只會觸發第一個 Route
* Route
* Router
* HashRouter 網址加上#/ 後面接位置
* BrowserRouter 網址直接變化位置，需要伺服器支持
## redux
* action
* reducer
* store
* dispatch
* redux-thunk
## mobx
* inject
* observable
* observer
* action
* compute
## next.js
後端渲染

# Vue
流行的前端設計方式
`sudo npm i -g vue-cli`
## Lifecycle

## vuex
狀態管理
## nuxt.js
後端渲染

# Angular
流行的前端設計方式

sudo npm install -g @angular/cli
ng new my-ng-pg

## Lifecycle
* ngOnChanges
* ngOnInit
* ngDoCheck
* ngAfterContentInit
* ngAfterContentChecked
* ngAfterViewInit
* ngAfterViewChecked
* ngOnDestroy
## Angular Universal
後端渲染

# Ionic
Angular 做手機 App 的方式

# Ember
## Lifecycle
* On Initial Render
* init
* didReceiveAttrs
* willRender
* didInsertElement
* didRender
* On Re-Render
* didUpdateAttrs
* didReceiveAttrs
* willUpdate
* willRender
* didUpdate
* didRender
* On Component Destroy
* willDestroyElement
* willClearRender
* didDestroyElement

# React Native
React 做手機 App 的方式
`sudo npm i - g create-react-native-app`

## Expo
更容易寫React Native的框架

# WebAssembly
網頁版的組合語言
副檔名 wasm
工具Emscripten emcc emsdk

## asm.js
和 wasm 沒關係，另一種加速執行的方式。
只支援純運算，比嚴格模式還嚴格。
函數第一行加上`"use asm"`
亦可使用 WebAssembly 工具 compile 成 asm.js

# Web Socket
ws(s)協定，雙向溝通
https://medium.com/enjoy-life-enjoy-coding/javascript-websocket-%E8%AE%93%E5%89%8D%E5%BE%8C%E7%AB%AF%E6%B2%92%E6%9C%89%E8%B7%9D%E9%9B%A2-34536c333e1b?fbclid=IwAR1lFasOBXLdrsNNfXQW1xs_3j-c0gj2DZdIXRSywmlBIdnq_AX6vhvuHKM
## EventSource
http(s)協定，伺服器->客戶端單向持續推送。
# Typescript
.eslintrc
tsconfig.json
# Flow
FB 不要的孩子，轉用 TS
# Dart
Google 開發
# CoffeeScript

# Rust
可編譯至JS

# Tempelate Language
## Pug(Jade)
## ejs
## ERb
## HAML