TechDays 2013隨堂筆記0926

ASP.NET MVC5新功能探索 by 保哥

• 註: 簡報檔有更完整內容
• One ASP.NET概念
  以ASP.NET為基底的應用區分成Sites及Services兩大塊
  Sites: MVC、Web Pages、Web Form、SPA
  Services: Web API、SignalR
• VS2013 ASP.NET專案範本只留一個(但仍保留VS2012的範本可選)，新增專案過程再選WebForm、MVC、Web API、SPA、Facebook(包含建立範例檔案)，另外可勾選WebForm、MVC、Web API，會再建立相關資料夾並參照核心程式庫
• Web API說明頁面
  Areas/HelpPage下有個完整的MVC模組，能自動產生Web API說明文件(以XML Documentation為基礎，列出各Action[含POST、PUT、DELETE不同動作對應]的說明)
  要產生文件: Areas/HelpPage/App_Start/HelpPageConfig.cs 移除註解，啟用SetDocumentationProvider指定XML位置，便能自動依註解產生文件
• Browser Link工具列
  VS2013透過SingnalR跟已開啟瀏覽器(不限IE，Chrome/Firefox亦可)溝通，實現VS2013控制瀏覽器動作(重新整理)、或是反過來由瀏覽器控制VS2013(在IDE將焦點移到特定元素)
• Browser Link儀表板
  Inspect Mode: 在瀏覽器選取元素，VS2013也捲到該View對應的位置 
  Design Mode: 在瀏覽器中直接修改<div>的文字，自動改變cshtml
• CSS修改時，網頁不需要Reload，只重新載入CSS，更新顯示更有效率
• Web Essential 2013的額外強化
  Unused CSS: 瀏覽頁面過程記錄用到那些CSS，一路操作下來可以發現沒被用到的CSS
• 靜態網頁預設不經過ASP.NET機制，故無法在網頁嵌入Browser Link用的SingnalR JavaScript
  修改config: <system.webServer><modules runAllManagedModulesForAllRequests="true" />…
• Scaffold(中文被翻譯成支架，我個人比較喜歡鷹架 XD): 不能直接新增Controller、View，改由右鍵選單新增Scaffold加入 (沒有以前方便)
• Bootstrap -- Twitter發展的網頁設計框架:
  Grid System 網格系統/排版
  Base CSS (Typography字型、Button Style按鈕樣式)
  Responsive Design 依解析度不同自動調適排版
  Icon by Glyphicons 圖示庫
  一些jQuery Plugin
• ASP.NET內含Bootstrap為2.3.1，目前Bootstrap 3.0已推出(IE8+，IE7呷賽)
• http://bootswatch.com/2 <== 版型庫，也有精美的收費版型，17塊美金，很值得。下載bootstrap.css回來覆寫就可以更換
• Bootstrap v3修改幅度很大，換版是大工程，Class Name大改，基本上新舊版不相容。
  http://upgrade-bootstrap.bootply.com提供線上將V2.* Class Name置換成v3對應名稱功能，但只涵蓋主要變異，還有很多眉角待自理
• ASP.NET Identity System –> 取代ASP.NET Membership
  全新會員機制，統合所有ASP.NET專案(MVC、WebForm...)。EF Code First，新增欄位容易
  結合外部驗證: FB、Twitter、Google Account、Microsoft Account、Office 365。Claims-based authentication(ADFS)
  有多種後端可自由選擇: 只需符合IIdentityStore/DbConext即可，MySQ也OK
• Identity核心類別
  * IdentityStoreManager: 儲存
  * IdentityAuthenticationManager: 登入/登出
  NuGet Microsoft.Aspnet.Identity.Core & Microsoft.Aspnet.Identity.EntityFramework
• 四種驗證: 不驗證、個別使用者帳號、組織帳號、Windows驗證
• 整合FB認證: 在FB申請開發帳號，取得AppId、AppSecret。因FB只接受SSL URL，記得要啟用ASP.NET專案的SSL
• 整合Twitter驗證: 需要對外有效的URL
• 擴充使用者欄位Models\IdentityModels.cs ApplicationUser、Models\AccountViewModels.cs、Controller跟View也要修改、進行DB Migration更新資料庫(增加欄位)
• Action加上[Authorize(Roles = "MyRole")]限定角色存取
• Authentication Filters
  ActionFilterAttribute/IAuthenticationFiler (OnAuthentication/OnAuthenticationChallenge)
  特定Action、特定Controller套用不用的驗證方式
• Filter overrides
  MVC4支援全站套用特定Filter，MVC5加入[OverrideActionFilters]、[OverrideAuthentication]… 可覆寫全域設定(目前仍有Bug)

Enterprise Library 6 by 董大偉

• 講師從包包拿出一堆東西跟全新手機引發騷動，莫非等下要問問題送手機... 原來是背包太滿
• 彼得理論: 每個人最後都會被升職到自己無法勝任的職位。成為開發單位主管，對架構設計要有所了解。
• 瞻之在前、忽焉在後: 趨勢難以掌握，學習沒有止境
• 何時需要程式架構設計? 當參與開發人員變多、應用程式使用範圍變廣
• 依民調: 程式可重用性常低於10%，總是在重寫(維護還不如重寫)。當架構夠好，即使技術平台改變，仍有機會重用(例如: Business Logic Kernel)
• 重寫->因為當初沒有想好? 或根本沒想...
• 架構設計多半應用在大系統: 因為重寫成本較高，如果應用程式要用超過2年就該考慮。可拋式的App，如有需要重寫無妨，倒不用多想
• 範例: 抽出方法 GetDataTable(SqlCommand) –> 獨立成Class –> 獨立成專案
  掛上Namespace、連線字串改由設定機制讀取
• 把直覺化的程式寫法抽出來改成獨立專案，需投入額外開發成本--目的在追求重用性、一致性、便於維護、減少重覆程式碼...
• 持續重構，便會開始面臨抉擇，邏輯怎麼分配、介面間如何溝通... 多依賴前人的經驗，省去摸索走冤枉路的風險，這就是Design Pattern的價值
• 架構設計是一張地圖、一套規範、一份指引、經驗累積
  (相信"我們得這麼做"很重要! 只是常常"我們需要這麼做，但不是這個案子，這次太趕了" XD)
• 架構設計師: 充分了解使用者需求(要涵蓋所有的情境，不同的利害關係人)，成為商業需求及技術需求間的橋樑，設法透過軟體滿足需求，並使架構具備足夠靈活度
  設計重點要突顯結構，隱藏細節，勿聚焦於程式怎麼寫
• 經典: MPP電子書，參考資源 (請參見投影片，連結未來再補上)
• 關鍵準則: SoC、Single Responsibility、Least Knowledge、DRY、Minimize Upfront Design(只設計當下需要的設計，不要過早做出大型設計)
• N-Tier: Presentation Tier/Appication Tier/Data Tier
  Logical Layered Design –> 以部署為考量，Service Layer(對外服務介面)、Cross Cuttings Layer(所有Layer都有用到，例如安全)，有需要的話才將不同Layer丟進不同Tier，放在同一Tier效能較佳
• Service不該包含Business Logic，應該只用來將Logic提供外部程式呼叫(可以穿防火牆)
• Business Logic Layer事關核心邏輯，很需要測試，切成獨立Layer可測試性會變高。
• "當你能用程式測程式，軟體才有品質可言" 人工測試不可靠
• TDD 先寫測試再寫程式，明明多花時間寫測試，開發時間反而會變短，真的!
• MVC Pattern的重要性已被接受，最大的優點: 強迫新手也會分層
• MVVM - 讓設計人員跟開發人員合作愉快
• DDD – Domain Driven Design 開發時以Domain為主體的設計概念，專注在於系統要解決的核心問題。
• CQRS – Command Query Responsibility Segregation: Query跟執行更新(Command)走兩條不同的途徑(Command交給Background Worker寫入Data Store，再以Event同步到View Data) Azure採行了這種設計概念 <== 編註: 這個概念挺棒，可拿來解決手邊某些專案所面臨的難題
• Enterprise Library 6.0
  Reusable software component，實現設計模式，有多個Application Block，但不是每個都適用。
  PS: Enterprise Library的Hands-On Lab完整度相當高，不要錯過
• "能設計的就不要寫死，能外掛的就不要內含"
• Unity –> 可抽換的模塊，將邏輯丟進DLL，利用Unity輕易抽換
  在config中定義Container，定義某個Interace對應到哪一個型別，呼叫時選擇Container，透過.Resolve<IBoo>就能取得指定類別進行計算
• Logging Application Block - 單一記錄方式，透過設定指定記錄寫入對象(File、事件、Mail)。提供非常Friendly的GUI設定畫面。
• Exception Handling Blcok – 不同的Exception用不同的處置方式，有些要通知，有些要隱藏
• 看不完的資源...
• David老師今天無雙全開，程式熱血值爆表，大秀江湖傳說的"再給我五分鐘"連發技，不知有沒有打破TechDays的超時記錄，呵!

ASP.NET Web API v2 by Bruce

• One ASP.NET的概念
• Service for different devices(平板、手機、XBox...)
• Web API，比Web Service、WCF輕量化，ASP.NET Web API 2隨VS2013發行，可由NuGet取得，限定.NET 4.5+ (登楞... 望向公司那一票Windows Server 2003)
• Demo: 建立TodoItem Model，新增WebAPI Controller。使用Chrome的好用外掛-POSTMAN測試
• POSTMAN: 可以指定HTTP Method、Content-Type、保存Request重送，功能強大，是寫Web API的良伴，真心推薦!!
• *** Web API 2的新功能 ***
• 屬性路由:
  * 以前需要一一加入路由特例，造成路由表複雜化
  * 路由設定寫在Controller之外，查看困難
  * [HttpGet("contact/{id:int}")]  id可以指定預設值、範圍
• OData
  http://www.odata.org Open Data Protocol，已廣為接受，成為業界標準
  $top, $skip分頁，$orderby排序，$filter 條件式(有特殊語法，支援部分運算函數，例如: round, startswith, year...)
  WebAPI2新增的查詢$selet、$expand(一對多資料表)、$value(結果只有一筆時取得定欄位值)
• OData Service
  讓程式碼有操作OData的能力。透過WCF OData Service，可化身為可進行LINQ操作的Data Provider[展示使用LinqPad4操作]。
  Demo: Excel 2013連上WCF OData資料摘要，拉資料出來做Pivot Table。
• Portable Web API Client - 供Silverlight… 等種平台使用
• 可攜式類別庫(Portable Class Library)
• 台北市政府待認養清單Open Data- 定義資料型別，HttpClient Call API，將結果(JSON)解析映對成資料物件陣列
• 新類別: IHttpActionResult - 實作如同MVC的ActionResult，完全控制回傳內容
  示範: WebAPI呼叫Razor產生HTML丟回
• Single Origin Principle: CORS 解決跨網域AJAX請求的問題。NuGet安裝Web API CORS
• OWIN & Katana
  * ASP.NET MVC與.NET Framework脫勾，可以獨立下載
  * ASP.NET Web API切斷與System.Web.dll的相依性
  Open Web Interface for .NET –> OWIN，WebServer與WebAppication間切出抽象層。Web API可以執行於符合OWIN的Host上，不一定要IIS
  Katana是OWIN的一種實作，目前已經Katana 2.0 RC
• 四層: Application + Middleware + Server + Host，四層可任意抽換
• OAuth 2.0
  透過第三方認證單位，服務提供者不必保存使用者的身份憑證
  Microsoft.Owin.Security實作了For Twitter、Google、FB支援
  OAuth 2.0 認證伺服器: SPA範本有一個簡單版、OWIN未來會有

HTML5 & CSS3 by Eric 上官

• 可以用HTML5的理由:
  行動裝置瀏覽器看網頁的比例，2013 July已上升到18%，而手機平板瀏覽器對HTML5支援度相當高
  http://html5readiness.com/ 支援度愈來愈好
• 為什麼要用HTML5/CSS3?
  * 減少外掛程式需求，提升網頁效能
  * Touch Friendly
  * 為更多平台app做好準備
• 即使尚未採用HTML5開發，網站只要用到jQuery、Bootstrap、require.js… 無形中就已用到HTML5的功能
• HTML5可以做到的比你想的更多
• 例如: 遊戲對開發來說是較嚴苛的考驗，但HTML5已經可以開發出聲光效果十足，操作流暢的遊戲
  * Atari Arcade: 與IE合作的遊戲網頁，超炫!! 值得一看
  * Mobile ready
  * Touch friendly
  * HTML5/CSS3: SVG, Canvas, Audio, Local storage, 3D Transforms
• 例如: 使用HTML5實現 3D虛擬實境 (WebGL)
• IE10已支援很多HTML5新規格，而且在效能上有些強化(例如: 3D Transforms整合DirectX)
• IE11又增加了WebGL、Fullscreen API、Web Cryptography API、....
• http://caniuse.com 延伸閱讀
• http://ietestdrive.com IE火力展示
• MS Virtual Academy熱門課程: HTML5 JS CSS3入門教材
• 大量使用HTML/CSS/JS後 --> 要開始正視效能問題。IE11的F12開發者工具做了不少強化
• DOM Explorer DOM總管
  亮點: 可以動態修改Layout中的margin、padding
• Console
• Debugger
  亮點: 進入中斷點時，網頁會套上灰色遮罩及暫停符號(似blockUI效果)
• Network tool
  亮點: Request清單更容易閱讀，提供圖形化時序關係展示(似HttpWatch)
• UI Responsiveness tool
  記錄CPU Load(區分轉譯、繪製、GC、設定樣式....)、FPS，還可追蹤負載是繪製哪一個元素產生的 <== 很強大!!
• Script Profiler
• Memory Tool 
  分析網頁記憶體用量、比對操作前後的記憶體更迭(物件數)、抓出Memory Leak <== 很強大!!
• 模擬
  模擬WinPhone、平板的瀏覽器，設定直向、横向、解析度，還支援Geolocation位置模擬
• IE11 on Win8.1，Win7上已有Preview版

SignalR Scale Out by Dino

• SignalR 2.0-RC1 now, 預計10月RTM
• Windows Server 2012, Win7/8的IIS預設未安裝WebSocket支援，而IIS Express內建就已支援
• IIS預設CPU同時服務最大連線數量(Max concurrent requests per CPU)為5000(Queue)，建議可修改aspnet.config提高到10000以上。但要注意，在SingalR作業裡不要做太笨重的工作。
• SignalR的開發提醒
  * 避免blocking code，善用async, await
  * 封包愈簡單愈好(SignalR中只傳URL，讓Client自行下載圖檔)
  * Hub Instance用完即丟，不要在其中保存狀態
  * 避免使用Session: 改用Cookie、localStorage甚至DB
• 狀態監視
  * LoadTestHarness –> 模擬SignalR負載狀態，指定頻率(msg/s)、封包大小(bytes)
  (可由github的SignalR Source中找到Sample)
  利用Performance Monitor監測系統狀態: 找出包含(WebSockets)字樣的計數器
• 就算只服務少量客戶，CPU也會產生一定負載(兩位數)
• 另一個工具: NuGet SignalR Utilitites(或可在Source Code中取得) signalr.exe
  參數: ipc/upc 安裝解除安裝計數器，例如: signalr.exe ipc
  PerfMon可以看到SignalR群組，要找到IIS Instance才會有資料
• Scale Out: 三種方式 SQL、Redis、Service Bus on Azure
• 基本上SignalR的Scale out與網站最大的差異在於現存連線中斷後如何換機器接續
• 常見的負載模式: 廣播(Server Broadcast)、推送(Server Push)、事件(User Event Driven)、高頻訊息傳遞(例如Online Game)
• 模式: 發佈/訂閱，將訊息放進Cache，由Worker將Cache中的資料傳送到Client端。Scale Out後，如何將資料同步到多台主機傳送出去
• 斷線重連? 用戶端換連另一台伺服器，如何無縫接續先前的動作
• Publication/Subscription Pattern。訊息匯流排(Backpane): 每台伺服器都訂閱訊息，其中一台伺服器將訊息放進Backpane，便同步到所有伺服器
• 實作1: NuGet Microsoft.AspNet.SignalR.SqlServer，Start.cs註冊使用特定SQL Server(空的資料庫即可，SingalR會自動建立所需Table)，非常簡單易用，但因動用DB有Disk IO，跟In-Memory機制相比速度偏慢。
• 實作2: Redis NoSQL Server，儲存於記憶體 http://redis.io/download，源自Linux平台，MS Open Tech將其移植到Windows，要自行下載安裝。
  NuGet Microsoft.AspNet.SignalR.Redis
  GlobalHost.DependencyResolver.UseRedis("localhost", 6379, "", "channel_name");
  效能明顯比SQL Server好很多，缺點: Redis只能單機，無法再Scale Out
• 實作3: Azure Service Bus
  NuGet Microsot.AspNet.SignalR.ServiceBus
  在Azure開好Service Bus，取得連線字串
  GlobalHost.DependencyResolver.UseRServiceBus(…); 較適合程式在Azure的情境