TechDays 2013隨堂筆記0926
8 |
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的情境
Comments
# by Alex Lee
SignalR Sale Out by Dino <------ 應該是 SignalR Scale Out by Dino
# by Jeffrey
to Alex Lee, 謝謝指正。差點變成SignalR跳樓大拍賣 orz
# by 小熊子
http://redis.iodownload 連結為 http://redis.io/download ?
# by Jeffrey
to 小熊子,已更正,感謝!
# by poisson
最後實作2中的 缺點: Redis只能單機,無法再Scale Out 是可以 scale out 的,參考如下 http://www.asp.net/signalr/overview/performance-and-scaling/scaleout-with-redis 大會中 demo 是在一台機器上
# by Jeffrey
to possion, 此處提到的Scale Out,我的理解是Redis只能單機執行,無法Scale Out安裝在多台同時執行分散負載。(不過我對Redis是完全不熟)
# by zack
不好意思,冒昧的請教您一個問題,不知您對於ADFS與C#結合這部分,是否有研究? ADFS主要分為WS-Federation及SAML,網路上有許多說明是關於WS-Federation與C#要如何結合,但我都找不到如何與SAML的結合。 我現在遇到的問題是,在設定ADFS時,我設定SAML,設定其他相關完成後,程式運行起來,執行我設定在ADFS的URL,理應上應該會被導致ADFS進行驗證,但卻不會,我使用WS-Federation是可以運行的。 只是WS-Federation基本的設定都在web.config設定,我將相同的做法套到SAML這邊,卻不行。 基本上,我覺得ADFS設定沒問題的,應該是設定與ADFS連接通道的問題。在WS-Federation會在WEB.CONFIG設定與ADFS連通的URL,但我不知道該怎麼設定SAML?
# by Jeffrey
to zack, 完全沒接觸過 ADFS/SAML,抱歉幫不上忙。