投影片 1

Size: px

Start display at page:

Download "投影片 1"

爵赵
4 years ago
Views:

1 集英信誠與大師對談系列技術論壇 ASP.NET 網頁開發人員今年必定要學會的技巧 Sky Chang 天空的垃圾場

2 ASP.NET MVC ALM blog.sanc.idv.tw GitHub GitBook Microsoft Azure MVP MentorTrust ASP.NET MVC Azure ALM Sky Chang

3 jquery + ASP.NET Web Form?? jquery + ASP.NET MVC??

4 SPA 架構與傳統架構 Server 主導與渲染 Server 可提供控件開發單純 Server 只有一次渲染開發複雜 Server 只提供 Web Service 純粹的 Client-Server 架構依賴前端的邏輯與運算

5 SPA 架構 (Single Page Application) 以 Ajax 為核心前端完全交付給 JavaScript 處理真正的切割 View 的設計優良的使用者體驗擁有良好的效能前端擁有抽換性前後端的驗證可能需要各自開發開發架構複雜前端變化太快, 套件太多, 沒有統一

6 SPA 已經是一個趨勢了

7 ASP.NET 網頁開發人員網頁架構不再單純了開始區分前後端, 完全透過 Service 溝通不在是 Server 端渲染產生畫面的天下了要開始挑戰 JavaScript Microsoft 和 Visual Studio 2015 也開始了劇烈的轉變接受他面對他處理他放下他

8 還是自己拷貝檔案進去??

9 時常遇到的問題 NuGet 找不到想要的套件只能從 GitHub/ 官網上下載, 並且自行載入新的專案, 還要整個拷貝檔案與目錄 NuGet 沒辦法安裝底層執行環境但是 NuGet 還是真的很好用

10 Bower Twitter 推出的 client-side 解決方案專門用來處理 Web 開發的套件管理

11 來試試看吧!! Install Bower

12 npm 他底層是 node.js 他是一個套件管理目前有非常多的套件不侷限前端使用

13 npm 可以裝啥東西?

14 來試試看吧!! Install npm

15 npm 指令 npm install <package name> -g --save-dev npm install <package name> npm uninstall <package name> -g npm uninstall <package name> npm ls -g npm ls npm update -g npm update npm install l

16 來試試看吧 part II!! Install Bower again!!

17 來裝個 AngularJS 吧!!

18 git 他是一個版本控制系統他是屬於分散式的架構 GitHub 的底層就是 git VSO & TFS 也已經支援

19 注意事項 ;C:\Program Files (x86)\git\cmd

20 中場回憶一下 Bower npm node.js

21 WHY CLIENT-SIDE PACKAGE MANAGERS FOR ASP.NET? WHY NOT NUGET? WHY NOT MSBUILD? Because there's already a rich ecosystem for this kind of thing. SCOTT HANSELMAN NuGet 是偉大且好用的, 但 npm 和 bower 已經有擁有了更多的 CSS 和 JS libs MSBuild 編譯 Server-side 同樣是偉大的, 但拿來 build client-side 有點濫用而且,client-side 已經有豐富的生態圈了!

22 Bower vs. npm vs. NuGet Bower npm NuGet Web Package 多中少.Net ( server-side ) Package NA NA 多底層功能安裝無可 / 多無 Visual Studio 套件無無可

23 Bower

24 Bower 常用指令 bower search angular bower install angular#1.2.0-rc.1 --save bower update angular bower install jquery --save bower install boostrap --save bower init bower install

25 Visual Studio 2013 npm & Bower Package Intellisense 撰寫 config 的時候, 擁有 Intellisense 功能 VS 2015 已經內建

26 Visual Studio npm node.js 提供 node.js 撰寫環境內建 npm UI

27 你有很多 <script> 標籤嗎?

28 多又複雜的 <script> JavaScript 檔案多又混亂維護不易完全不知道檔案的相依性需要載入多次的 JS 檔案請求太多效能不好常常漏東漏西

29 ASP.NET MVC Bundle & Minification Microsoft ASP.NET WEB Optimization 讓請求只需一次需搭配 min.js 使用 Debug 階段不會有效果部分 Lib 可能會有問題消耗 Server 端資源依舊要在 Bundles 檔案裏面處理相依性

30 神又佛心的套件 - Web Essentials 提供動態產生 min 檔案提供 map 檔案提供 JS 綑綁功能存檔的時候自動產生免錢已經很夠用了!! VS 2015 目前看不到此功能..

31 又不是每個人都買得起 VS

32 browserify 解決 node.js module 用於 Browser 之問題將 node.js 的 module 拿到 Browser 來用

33 browserify

34 browserify - maxwell ogden 可以綑綁多個檔案提供 require 功能提供了 JS Module 化使用 CommonJS 準則解決相依性問題他有來台灣參加 JSDC 他很愛貓 = =+

35 安裝 browserify 如果安裝失敗, 請更新最新版的 node.js 請使用 administrator 安裝使用方法 : browserify 進入點.js -o 輸出檔名

36 快速回顧一下 ASP.NET MVC Web Essentials browserify JavaScript 綑綁可 Server RunTime 時處理需要處理 JS 的檔案相依性可編譯時期處理需要處理 JS 的檔案相依性可下指令處理不需要處理 JS 的檔案相依 JavaScript 壓縮可 Server RunTime 時處理可編譯時期處理否 JavaScript Module 否否可使用 Node.js CommonJS 機制

37 別鬧了每次都要打指令!!?

38 gulp 自動化並且提高您的工作流程

39 gulp JS 可以將多種 Script 型態轉成 JS 可以將 JS 壓縮與合併可以整合 browserify CSS 可以將 SASS 編譯成 CSS 可以將 CSS 壓縮與合併 PIC 可以壓縮圖檔

40 安裝 gulp 無法安裝, 請更新 node.js 使用 administrator 權限安裝

41 gulp flow 利用串接的方式, 來達成目標設定方式簡單易懂可以自行定義出自己想要的流程

42 gulp

43 gulp.src 常用命令 js/app.js 指定檔案 js/*.js 指定 js 目錄下的所有副檔名為.js 的檔案 js/**/*.js 指定 js 目錄及其子目錄下所有副檔名為.js 的檔案!js/app.js 排除 js/app.js *.+(js css) 指定目錄下所有副檔名為.js 或者.css 的檔案範例 : gulp.src(['js/**/*.js', '!js/**/*.min.js'])

44 gulp 常用套件 gulp-uglify 壓縮縮小套件 browser-sync 瀏覽器自動重新載入 vinyl-transform - 提供文字轉換串流 gulp-sourcemaps - 產生 source map gulp-notify - 通知套件

Visual Studio & gulp https://visualstudiogallery.

45 Visual Studio & gulp

46 回顧與 2015 年前端的 Framework 進入激戰時期 MS 與 VS 即將進入已經成熟的前端環境前後不只是開發技術, 軟體生命週期也拆開了 JS 不只是單純的撰寫而已, 開始正式進入 Module JS 也開始要進行編譯 JS 也有持續整合的流程回顧一下 &

47 Q&A Thank You

声明本公司及全体董事监事高级管理人员承诺不存在任何虚假记载误导性陈述或重大遗漏, 并对其真实性准确性完整性承担个别和连带的法律责任本公司负责人和主管会计工

声明本公司及全体董事监事高级管理人员承诺不存在任何虚假记载误导性陈述或重大遗漏, 并对其真实性准确性完整性承担个别和连带的法律责任本公司负责人和主管会计工 Shenzhen WitSoft Information Technology Co., Ltd. 主办券商二〇一六年二月声明本公司及全体董事监事高级管理人员承诺不存在任何虚假记载误导性陈述或重大遗漏, 并对其真实性准确性完整性承担个别和连带的法律责任本