[Day11]React - run on redux

今天將redux整個串聯起來。
source code: https://github.com/ShawnTseng/react-for-fun/commit/2cbcf515971365909734ee67f07dbeef40ffbbf5

[Day10]Redux: Action, Middleware

Q: Action是什麼?
A: 規範所有改變資料的行為
Q: 改變資料的行為有哪些?
A:可分為"同步"和"非同步"

• 同步(reducer可處理): 接收到Action就對應到特定的處理方式

• 非同步(thunk): 接收到Action等待資料回傳

Q: 要在什麼時候將Action分類並且用適合的方式處理

A: 透過Middleware分類

src:

https://github.com/ShawnTseng/react-for-fun/commit/9e05f026f42d3c1ba99d96205726bfedeac572f9

https://github.com/ShawnTseng/react-for-fun/commit/a5185d5bf791de385ca45c9723bf4857c555a577

[Day9]redux初探 - reducer實作

Flux這個單向資料流的解決了很多資料同步的問題，最致命的缺點在於Store這個角色承擔了二個職責:

1. 儲存資料狀態
2. 根據Action改變資料狀態

因此Redux主要的目的就是將上述兩者拆開，拆法如下:

1. 儲存資料狀態=>用狀態樹紀錄(一個應用程式只會有一個Store，裡面包含多個State)
2. 改變資料狀態=>用Reducer解決 (Reducer概念源於Elm architecture)

整體改變:

1.Store從多個變成一個，因為被多個State和Reducer取代，原本的Store概念變成所有State集合的地方。

2.因為1.，所以就不需要Dispatcher來分配Action到Store，因為只有一個Store，因此移除Dispatcher

3.加入Reducer的概念管理資料變更

source code:

https://github.com/ShawnTseng/react-for-fun/commit/b0d325de9e4a26fbf2f4b0fc8a167845d2bbd0a6

https://github.com/ShawnTseng/react-for-fun/commit/f4bea26a2dad81f5ead9f6d930f0d8f5801ff5a5

[Day8]Flux Utils應用

Flux Utils

目的: 用更簡單的寫法實現Flux中Store的邏輯

作法: extends Flux Utils 中的 ReduceStore

ReduceStore API文件: https://facebook.github.io/flux/docs/flux-utils.html#reducestore-t

source code: https://github.com/ShawnTseng/react-for-fun/commit/2bee9924a00eed7a437fbea7d777220103986118

 心得: 寫法真的方便很多, 不過要花一些時間成本讀API文件

[Day7]react.js Container Pattern

使用目的:
        實現關注點分離、符合單一職責原則
使用結果:
        和Store、Action邏輯放入Container, UI邏輯放在原本的Component中
練習code:
https://github.com/ShawnTseng/react-for-fun/commit/8ed1a9f001acc77ac04f47a230c8e528a656d194

註記: Design Pattern在使用時，要特別注意是否達到目的，Design Pattern不是用越多越好

[Day6]react.js中 Flux概念理解

Flux簡言之，就是一種單向資料流的設計模式(Design Pattern)，主要想要解決的問題是資料一致性，在這個設計模式中，主要有四種角色: Action、Dispatcher、Store、View

Action

定義系統的所有行為，例如增刪修查資料(CRUD)、登入登出等。

Dispatcher

將Action告訴Store(有註冊的才通知)

Store

儲存商務邏輯、資料，只能取得(get)資料，不能變更(set)資料

View

渲染(Render)畫面，並且監聽使用者的操作，例如Click。

好處顯而易見，以關注點分離的面向而言，各個角色各司其職，提高資料的一致性。真的有點複雜，要實際寫過才能內化。

[Day5]用VS Code對react.js不友善

Github: https://github.com/ShawnTseng/react-for-fun/commit/8388043fd166323872cab7aa17bfe8028a3b7981

今天假日用自己的筆電開啟vscode寫react，排版時(Shift + Alt + F)，整個亂掉無法執行，因此作了以下調整：
1.安裝套件
npm install babel-eslint eslint-plugin-jsx-a11y eslint-plugin-react --save-dev
npm install prettier-eslint --save-dev
2.設定vscode/settings.json

// Format a file on save.

// A formatter must be available,

// the file must not be auto-saved,

// and editor must not be shutting down.

"editor.formatOnSave": true,

// Enable/disable default JavaScript formatter (For Prettier)

"javascript.format.enable": false,

// Use 'prettier-eslint' instead of 'prettier'.

// Other settings will only be fallbacks

// in case they could not be inferred from eslint rules.

"prettier.eslintIntegration": true

3.將副檔名js改成jsx
3-1.匯入檔案時的副檔名也要記得改

[Day4]React 練習

原始碼: https://github.com/ShawnTseng/react-for-fun

Angular學得滿完整的，在自學react的過程中，有非常多概念可以共用，目前把 React的 props, state, Component開發, validate, CRUD實作過了。
目前進入到Flux整個概念的了解與熟悉。

參考資料:
https://github.com/shiningjason/react-quick-tutorial

[Day3]Angular i18n part1

功能目的: 讓Web應用程式國際化 － 讓世界各地的使用者有友善的體驗

開始前的兩種概念建立:

1. 國際化 － 讓應用程式支援多種語系
2. 在地化 － 讓國際化的應用程式，進入特定的語言環境

國際化總共做4件事情:

1. 日期、數量、百分比、貨幣可轉換成各國格式
2. 一般文字的翻譯
3. 單字的單複數處理
4. 翻譯HTML屬性的替代文字

在地化 － 藉由angular cli產生在地的應用程式

angular在地化的概念是在建置(Build)的過程中實現的，所以分為兩種情境

1. JIT(Just In Time)
2. AOT(Ahead Of Time)

• JIT加入i18n概念的作法

在根模組(AppModule)中註冊LOCALE_ID

• AOT的作法 － 使用angular cli指令佈署

ng serve --i18nFile=path --i18nFormat=xlf --i18nLocale=fr

ng build --i18nFile=path --i18nFormat=xlf --i18nLocale=fr

--i18nFile: 多國語系檔案路徑

--i18nFormat: 檔案格式

--i18nLocale: 語系名稱

以上是在地化的處理，明天寫以下兩件事

1. 研究國際化的具體實作細節
2. 補上在地化的範例程式碼

未完待續...

[Day2]NgLocalization & NgLocaleLocalization

Common Module封裝了很多Directive, Pipe，還有一個很特殊的Providers:
{
provide: NgLocalization,
useClass: NgLocaleLocalization
}
官方文件的說明非常少，簡單來說就是應用在
1.各國語系的複數型態的規則訂定及表達
2.各種單位的複數型態的規則訂定及表達

abstract class NgLocalization

這是一個抽象類別，裡面只包含一個抽象方法
 abstract getPluralCategory(value: any, locale?: string): string
而且唯一擴充這個抽象類別的類別就是 NgLocaleLocalization

class NgLocaleLocalization extends NgLocalization

往深層的code track後發現一份規格 - CLDR(Common Locale Data Repository)，由萬國碼(unicode)聯盟訂定的規範

http://cldr.unicode.org/index/cldr-spec/plural-rules

這份規格在描述各種語言

1.名詞的複數如何表達

2.單位的複數如何表達(e.g."hour" vs "hours")

語言複數規則的詳細列表

http://www.unicode.org/cldr/charts/latest/supplemental/language_plural_rules.html

不過目前從source code觀察，似乎angular團隊在這個領域還沒有積極的發展，在angular5的時候很多相關的API都被列為deprecated。

github:https://github.com/ShawnTseng/angular-api-research/commit/2fc5c38129a732bf2ed709b1a66d31e3905e6c30

這些API跟多國語系(i18n)相關性較高，明天先讀I18N的章節( https://angular.io/guide/i18n ) 

[Day1]Angular API Overview & common(package)

Angular API(https://angular.io/api)

版本 - v7.0.4

所有Angular提供的API以package分為28包(可用:25, 棄用:3)

animation

animations/browser; animations/browser/testing

common/http; common/http/testing

common; common/testing

core; core/testing

elements

forms

platform-browser; platform-browser/testing

platform-browser/animations

platform-browser-dynamic; platform-browser-dynamic/testing

platform-server; platform-server/testing

platform-webworker; platform-webworker-dynamic

router; router/testing

router/upgrade

service-worker

upgrade/static

http; http/testing

upgrade

每個package都有一堆API，一眼看過去大約有400~600個左右。

大多數的API都有出現在教學或功能分類中，重點是有些沒有。所以這一系列的文章就是要用地毯式搜索的方式，一個個看過，找出埋藏在Angular框架中的寶藏。

今天就從common這個package出發吧。

Package：common

說明：顧名思義，就是實作了一些基本的angular的directive, pipe

進入點：

主要

        @angular/common

次要

        @angular/common/http - 提供http通訊協定的client端

        @angular/common/http/testing

        @angular/common/testing

CommonModule(NgModule)

說明：匯出所有基本的angular的directive, pipe

p.s.BrowserModule包含了CommonModule，所以如果已經import了BrowserModule，就不需要import CommonModule。

https://github.com/ShawnTseng/angular-api-research/commit/f9f769cf5138589ed28975c39e8f90af1265f541

待續...明日進度:

NgLocalization
NgLocaleLocalization

NgClass

NgComponentOutlet

NgForOf

NgIf

NgPlural

NgPluralCase

NgStyle

NgSwitch

NgSwitchCase

NgSwitchDefault

NgTemplateOutlet

立定目標；把Angular API讀過一次

今天和保哥前往客戶家的途中，他鼓勵我寫些跟技術有關的議題。

漫無目標的我心裡想著，離開學校4年多，在職場中載浮載沉，對有興趣的人事物也都追求過、嘗試過了，但終究也沒找到自己在社會中的定位與價值，似乎在人生的旅途中迷失了自我。或許消逝的熱忱是因為沒有目標吧。

進入軟體產業的時間也不算短，對於軟體業中，生產面整體的概觀及輪廓還算明白，也該訂定自己在這個行業中的定位了。

根據現在的資源、知識及能力來做為決策標竿的話，我決定深耕前端工程(Front-End)，來累積自我的價值。

前端工程(Front-End)，是深不見底的一個大坑，短時間內想囊括前端的全貌是不可行的，因為知識含量過高。為了最有效率的累積相關的學理及實務，往後的學習策略與行動 － 站在巨人的肩膀上：Google推行的Angular － 前端框架是一群專家搞出來的產物。

因為相較於Vue、React，我比較熟悉這套框架，加上個人有很強烈的控制慾，所以偏愛Angular 2+。

因此在今日立定目標：把Angular API全部讀過一次。必要時寫些Code、讀個原始碼，往後會將每個API的學習心得記錄於此。