本次講座 Will 保哥將分享如何透過 Visual Studio 的 StyleCop 擴充套件做到全自動的程式碼撰寫風格檢查,讓每個人都不用看規範文件,透過工具用最無腦的方式自動幫你做好到程式碼風格檢查。如要觀看完整講座內容,可報名線上課程進行一步查看實際展示與技術講解,網址:
http://miniasp.kktix.cc/events/stylecop-in-action-online
「我是一個前端工程師,每次要進行頁面套版時,都要等後端工程師寫好 API 才能測試,我覺得很痛苦,但公司的後端我又叫不動,有沒有甚麼方法可以簡單的設計出 RESTful API,讓我可以立即套版使用?我不想每次都苦苦哀求後端工程師快點生出 API 給我!」這是之前某位學生告訴我的一段話,也想必是許多前端工程師的痛,現在,你可以不一樣!
我將在這場分享中講解如何利用 JSON Server 快速建立 RESTful API 服務,讓前端工程師可以在完全沒有後端開發能力的情況下,自行設計出任意格式的 API 讓自己使用。本次直播完全免費,當天還會簡單示範如何在 Angular 使用 Http 服務元件呼叫自製的 API!
本次講座 Will 保哥將分享如何透過 Visual Studio 的 StyleCop 擴充套件做到全自動的程式碼撰寫風格檢查,讓每個人都不用看規範文件,透過工具用最無腦的方式自動幫你做好到程式碼風格檢查。如要觀看完整講座內容,可報名線上課程進行一步查看實際展示與技術講解,網址:
http://miniasp.kktix.cc/events/stylecop-in-action-online
「我是一個前端工程師,每次要進行頁面套版時,都要等後端工程師寫好 API 才能測試,我覺得很痛苦,但公司的後端我又叫不動,有沒有甚麼方法可以簡單的設計出 RESTful API,讓我可以立即套版使用?我不想每次都苦苦哀求後端工程師快點生出 API 給我!」這是之前某位學生告訴我的一段話,也想必是許多前端工程師的痛,現在,你可以不一樣!
我將在這場分享中講解如何利用 JSON Server 快速建立 RESTful API 服務,讓前端工程師可以在完全沒有後端開發能力的情況下,自行設計出任意格式的 API 讓自己使用。本次直播完全免費,當天還會簡單示範如何在 Angular 使用 Http 服務元件呼叫自製的 API!
此份簡報是 Will 保哥在【Modern Web 2015】的演講內容。
Web技術的變化之快速,不再有任何一家公司或團體可以主導其走向,即便軟體界的巨人微軟也不例外,ASP.NET經過了十多年的發展與演進,終於來到了一個架構翻新的時刻,即將推出的ASP.NET 5到底從架構面、工具面做出了哪些創新與變革,將在這場演說中一一展現。
本簡報是 Will 保哥在 2016/6/24 於 CTJS 中台灣 JavaScript Conference 的演講簡報
[ 相關連結 ]
本次演講的 Live Demo 原始碼
https://github.com/doggy8088/ctjs2016-ng2demo
The Will Will Web記載著 Will 在網路世界的學習心得與技術分享
http://blog.miniasp.com/
Will 保哥的技術交流中心 (臉書粉絲專頁)
http://www.facebook.com/will.fans
Will 保哥的噗浪
http://www.plurk.com/willh/invite
Will 保哥的推特
https://twitter.com/Will_Huang
這是 Will 保哥在【微軟技術關卡破解日】的演講簡報,探索 ASP.NET MVC 5.0 與 ASP.NET MVC 5.1 的各種新功能增強,包括如何從 ASP.NET MVC 4 升級至 ASP.NET MVC 5 等實戰主題。
Will 保哥的技術交流中心
https://www.facebook.com/will.fans
此份簡報是 Will 保哥在【Modern Web 2015】的演講內容。
Web技術的變化之快速,不再有任何一家公司或團體可以主導其走向,即便軟體界的巨人微軟也不例外,ASP.NET經過了十多年的發展與演進,終於來到了一個架構翻新的時刻,即將推出的ASP.NET 5到底從架構面、工具面做出了哪些創新與變革,將在這場演說中一一展現。
本簡報是 Will 保哥在 2016/6/24 於 CTJS 中台灣 JavaScript Conference 的演講簡報
[ 相關連結 ]
本次演講的 Live Demo 原始碼
https://github.com/doggy8088/ctjs2016-ng2demo
The Will Will Web記載著 Will 在網路世界的學習心得與技術分享
http://blog.miniasp.com/
Will 保哥的技術交流中心 (臉書粉絲專頁)
http://www.facebook.com/will.fans
Will 保哥的噗浪
http://www.plurk.com/willh/invite
Will 保哥的推特
https://twitter.com/Will_Huang
這是 Will 保哥在【微軟技術關卡破解日】的演講簡報,探索 ASP.NET MVC 5.0 與 ASP.NET MVC 5.1 的各種新功能增強,包括如何從 ASP.NET MVC 4 升級至 ASP.NET MVC 5 等實戰主題。
Will 保哥的技術交流中心
https://www.facebook.com/will.fans
Webpack is just a module bundler, they said. What they didn't say is why we need it, and what was the motivation that made us achieve what Webpack have been doing for us. In this talk we will navigate through the years of front-end development, ranging from 2003 to nowadays to understand this, and in the end, we will walk thought a complete Webpack project to understand how it works.
Presentation from UppsalaJS, November 3, 2016.
Together we built a Javascript app and explored many parts of Webpack and how we can use Webpack to create production ready code as well as use it to help with our development.
A presentation on how to use Webpack to bundle and build a web application using TypeScript and CSS. The presentation demonstrates how to use a few of Webpack's loaders and plugins.
An introduction to webpack module bundler with 3 real application examples (https://github.com/ilmente/webpack-devtalk). Extracted from my Webpack // Antelope devtalk (https://www.periscope.tv/w/1rmxPpzWbwmxN) at Project A Ventures in Berlin.
There are many build tools available to JavaScript developers, but Webpack is quickly emerging as the leader of the pack. To better understand its use cases and where it excels above the rest, Jake Peyser will walk you through how to use it as a task runner and module bundler, as well as a few other handy tips. Come learn why Webpack is the most popular build tool with React developers.
2017/01/23【F2E&RGBA Meetup】所分享的內容
簡介:
PWA (Progressive Web App) 是 Google 在 2015 年所提出的概念,2016 年我們開始看到許多 PWA 應用像是 The Washington Post、Flipkart、Gmail、AliExpress、Wikipedia、Flipboard、Booking 等實務案例,本次分享將介紹 PWA 與 HTML5 Offline API 搭配 Service Worker,讓我們的網站在離線的時候還能夠進行瀏覽,打造出更好的用戶體驗。
活動網址:
http://f2e.kktix.cc/events/f2e6-56d17c-0f9e5b-3997b7-a9203f-d684fd-886f38
7. <script>-tag style
if you didn’t use a module system.
<script src="module1.js"></script>
<script src="module2.js"></script>
<script src="libraryA.js"></script>
<script src="module3.js"></script>
7
webpack 介紹
8. if you didn’t use a module system.
<script>-tag style
8
webpack 介紹
9. <script>-tag style
Common problems
• Order of loading is important.
• Developers have to resolve dependencies of modules/libraries.
• In big projects the list can get really long and difficult to manage.
9
webpack 介紹
14. • Server-side modules can be reused
• There are already many modules in this style (npm)
• very simple and easy to use.
webpack ⽀支援 CommonJS 的優點
Pros
14
webpack 介紹
27. • Loaders allow you to preprocess files as you require() or “load” them.
27
webpack.config.js
boot.jsx
webpack 範例
28. • Loaders allow you to preprocess files as you require() or “load” them.
篩選對應的檔案格式並進⾏行對應設定
28
webpack 範例
29. 使⽤用exclude參數,排除 node_module 資料夾
Webpack accepts an array of loader objects which specify loaders to apply to files that match the test
regex and exclude files that match the exclude regex.
1. test 參數: 藉由正規表達式找到符合條件的檔案
2. exclude 參數:藉由正規表達式找到不符合條件的檔案
3. loader 參數: 由右到左執⾏行 loader 設定
29
webpack 範例
30. 使⽤用exclude參數,排除 node_module 資料夾
Webpack accepts an array of loader objects which specify loaders to apply to files that match the test
regex and exclude files that match the exclude regex.
1. test 參數: 藉由正規表達式找到符合條件的檔案
2. exclude 參數:藉由正規表達式找到不符合條件的檔案
3. loader 參數: 由右到左執⾏行 loader 設定
30
webpack 範例
31. webpack 範例 - react-hot-loader
React Hot Loader is a plugin for Webpack that allows instantaneous live refresh without losing state while editing React
components.
React Hot Loader 這個套件會幫你瞬間重新整理,不會改變 React 元件的編輯狀態
31
webpack.config.js
32. webpack 範例 - babel-loader
Babel is a compiler for writing next generation JavaScript.
babel-loader 這個套件會轉換 Javascript 語法,從ES6 或 ES7 轉成ES5
32
webpack.config.js