系統思考Full Version

這篇文章為筆者參加這門課程的課後心得:Systems Thinking: Full Version

Albert Einstein曾說過:『We can’t solve problems by using the same kind of thinking we used when we created them.
意思就是,不要想用相同的方式,去解決過去解決不了的問題。

有一個研究指出,老鼠平時會喜歡走固定的路去找食物,但如果他發現走這條路無法再取得食物,就會很快的改變找食物的路徑。
但很奇怪的是,人在遇到解決不了的問題時,卻時常會下意識的,使用他最熟悉最擅長的方式去試圖解決問題。
而系統思考就是在幫助我們在尋找問題根源時,能夠用更系統性的方式去思考,避免使用下意識的習慣去解決問題。

何為系統

系統思考實用手冊的定義是:各個組成部份彼此發生互動,而以整體的形式存在,並發揮功能的個體
第五項修練:系統是你所感覺到的整體,系統中的元素彼此糾結,因為元素會長時間不斷的相互影響,並且朝著共同的目標運作

系統的結構包括:

  • 元素:有形或無形的事物,如城市的房價、成交量、餘屋量等…
  • 連結:把元素整合在一起的關係,如房屋成交量上升導致庫存量下降。
  • 目標:人類系統的目標或者非人類系統的功能。如控制房價在合理的水準而維持社會穩定與經濟繁榮


從上圖可了解,系統思考絕非一個人能夠做到,一定要有非常多的角色參與在其中,要有共同的了解(share understanding)
系統思考有助於我們發現問題的根本原因,看到多種可能性,從而讓我們更好的管理、適應複雜性的挑戰,把握新的機會。

什麼時候適合使用系統思考

  • 重覆發生的事情:如果是單次的事件較不適合用來做系統思考,主要目的是解決現有存在的問題
  • 複雜且動態變化的事
  • 需要策略性思考,去找到一個槓桿點來改善問題
  • 可以做假設分析,會有什麼副作用,可能發生什麼事,未來什麼可能會出錯

通常一件事情我們可以看到的是事件的表象,而隱藏在表象下的還有行為型態(patterns)、結構(structure)、心智模式(memtal model),而系統思考主要是針對system structure的部份。
(一)事件:冰山露出水面的部份通常讓人關心注目:「發生什麼狀況?」,明顯而具體的事件會引人注意,因而忽視了更宏觀的圖像。
(二)型態/趨勢:當我們心想「繼續如此,會怎麼樣?」時,就開始要看到更大的圖像了。為了找到答案,因此必須更深入水中,往深層探測。
(三)系統結構:往下探尋:「造成這些型態或趨勢背後的因素是什麼?有何關聯?」改變結構就會影響型態的變化,進而產生不同的行為,因此結構會影響行為。=>這邊就是我們系統思考主要要探討的部份
(四)心智模式:即「我們習以為常的思考方式」,人類系統結構尚包括許多影響我們做決定的因素,不同的決定會產生不同的系統結構。

心智階梯理論

相關介紹請見這篇文章:TED-Ed:重新認識「思考」— 推論階梯

這邊是在探討我們在思考問題時的流程,首先我們會先看到些什麼,然後過濾資料、解碼資料、假設問題原因、用這個原因來解釋問題、並做出解決問題的解決方案並採取行動。並且人們會在每一次的思考的第六個階段建立起信念,影響著下次我們在第二階段挑選資料的偏好,逐漸建立起每個人獨有的價值觀及思考路徑。因此會有一個箭頭再次的指向過濾資料的地方。

系統思考工具

  • BOT: 行為趨勢圖,隨時間變化=>一個現象
  • CLD:循環圖
  • SFD:存貨圖

參考資料

[技術支援-8] 產品發佈設定

將產品發佈到正式環境

  • 最簡單的方法是
  • 將所有dist/資料夾底下的文件複製一份到伺服器上
  • 如果想順帶設置base href<base href="/my/app/">,則可加下面參數
  • 若有使用Router功能,將所有找不到的頁面都導向index.html(下面會有詳細介紹)

優化我們的Angular專案

加上--prod參數,會能輸出優化過的檔案

這個參數會為我們的專案做這些事情

  • 改使用AOT編譯:預先編譯而不是用JIT的方式
  • 開啟production mode: 可以讓網站執行更快,等同於下這個參數--environment=prod
  • Bundling: 將所有的所使用的library和許多應用綁在一起
  • 縮小檔案:刪除多餘的空白,註釋和可選的令牌。
  • Uglification:將變數名稱做混淆的動作。
  • 消除死代碼:刪除未引用的模塊和很多未使用的代碼

添加--build-optimizer可進一步減少檔案的大小

如果要使用惰性加載去載入部份的JS檔案,記得不要在需要被首先加載的模組裡面import要被惰性加載的元件,否則會在一開始就被載入。
AOT預設在編譯時會對ngModules做識別並且做惰性加載的設定。

善用bundles工具

source-map-explorer是一個很棒的bundles工具。可以將許多的js綑綁在一起。
首先先安裝

然後建構應用程式

在dist生成綑綁包

運行管理器來生成這個被綑綁的檔案的分析圖

產生的圖如下:

善用效能觀察工具

首推的當然就是google chrome囉!
這邊有相關的教學系列文:認識 Chrome 開發者工具
官網也有推薦使用WebPageTest 來衡量自己網頁的速度

伺服器啟用Routee功能的配置方法

Apache設定方式

添加一個重寫規則.htaccess

NGinx

使用前端控制器模式Web應用程序中try_files描述的方法 修改為:index.html

IIS

添加一個重寫規則web.config

GitHub Pages

我們無法直接配置GitHub Pages服務器,但是可以添加一個404頁面。複製index.html到404.html。
它仍將作為404響應,但瀏覽器將處理該頁面並正確加載應用程序。從服務docs/上創建一個.nojekyll文件

Firebase hosting

添加一個重寫規則

[技術支援-7] TypeScript設定

TypeScript配置

TypeScript是Angular應用開發中使用的主語言。瀏覽器不能直接執行TypeScript,得先用tsc編譯器轉譯(transpile)成JavaScript,而且編譯器需要進行一些配置。而配置的檔案名稱就是tsconfig.json

這邊是官方關於此配置文件的詳細說明:tsconfig.json

tsconfig.json

下面為一個tsconfig.json的範例

關於設定檔裡的noImplicitAny意思是是否不允許typescript編譯時隱性將沒有設定類型的變數設定為any。如果設定為true的話,如果typescript裡面有沒有設定類型的變數則會產生錯誤訊息。當這個值設定為true時,記得要將suppressImplicitAnyIndexErrors也設定為true,不然會發生隱式報錯。

lib.d.ts 文件

TypeScript有一個特殊的聲明文件lib.d.ts。包含了JavaScript運行庫和DOM的各種常用Javascript環境聲明。
基於–target,TypeScript添加額外的環境聲明,例如如果目標為es6時將添加Promise。