Techparty-廣州Javascript技術專場（學習分享）

上週末（2016/07/31）去了一個技術沙龍學習前端相關的東西，下面是各個主題我印象比較深的。

React + Redux 最佳實踐

主題：本次分享，主要從React/Redux相關概念及其工具鏈，Webpack構建流程，如何Mock數據，如何測試以及一些開發小經驗等方面，分享介紹如何使用React/Redux開發一個先後端分離的企業級應用系統。

有意思地方：

1. 規範化

經過開發工具進行代碼校驗，統一編碼風格。

統一的ES6寫法（這個見仁見智）。

2. JavaScript測試

進行JavaScript，介紹了測試工具。

• jsdom（構建符合W3標準的DOM）

• mocha（JS測試框架）

• chai（Node BDD/TDD 斷言庫）

• enzyme（airbnb出的React測試工具）

• isparta（ES6代碼測試覆蓋率工具）

• nock（HTTP 模擬庫）

• redux-mock-store（用於測試異步請求或中間件時，模擬store）

• sion（用於JavaScript的測試監視（spy）、樁（stub）和仿製（mock）功能）

JavaScript to Native

主題：分享目前 JavaScript 編寫 Native App 的現狀，圍繞 React Native 和 Weex 展現 JavaScript 編寫原生應用的開發和調試，並講解其中的一些原理。

有意思地方：

1. 將頁面轉成原生界面

這個還在理論實踐的階段，原理是頁面DOM轉成Virtual DOM（虛擬DOM）再而轉成原生組件。

PS：有趣是有趣，但未有實踐產物，難想象實踐效果。（我的以爲東西沒作出來就急於分享着實很差）

零配置前端開發流程

主題：Web 技術沒有獨裁者控制，野蠻發展致使開發環境特別混亂。不一樣的工具由不一樣的羣體維護，各玩各的，常會有兼容性的問題。一個 「現代化」 的前端項目先後可能須要花費 10%~15% 的精力維護項目構建的配置，很是浪費時間。在這個分享主題我會示範一個的前端開發流程，把花在配置的時間趨於 0。

有意思地方：

1. 使用的前端框架或工具

瀏覽器，移動端，後臺NodeJS，同構

npm vs bower vs systemjs vs duo

grunt vs gulp vs browserify vs webpack vs rollup

less，sass，postcss，css-module

ES3，ES5，ES6，ES2016

TypeScript，FlowType

React，Angular，VueJS

PS：用的都是有逼格、新的東西。

使用 Meteor + React 進行快速的原型開發

主題：主要介紹 Meteor 框架的特色，如何使用 Meteor 爲 React 提供相似 Redux 的先後端數據流控制，什麼是 Reactive Programming，如何實現 Optimistic UI，還有基於 websocket 編程，以及 Meteor 的現狀和將來。

有意思地方：

1.  Reactive Programming

Reactive響應式(反應式)編程 是一種新的編程風格，其特色是異步或併發、事件驅動、推送PUSH機制以及觀察者模式的衍生。reactive應用(響應式應用)容許開發人員構建事件驅動（event-driven），可擴展性，彈性的反應系統：提供高度敏感的實時的用戶體驗感受，可伸縮性和彈性的應用程序棧的支持，隨時能夠部署在多核和雲計算架構。

PS：簡單說就是數據的交互是經過websocket進行實時交互。

概念可參考：http://www.jdon.com/idea/js/rxjs.html

React先後端同構實踐

主題：本次分享咱們在使用react+redux過程當中遇到的一些性能瓶頸，咱們在解決先後端代碼/API複用、提高工做效率和先後臺架構調整中所作的一些嘗試及成果。

有意思地方：

1. 同構的思想

同構 JavaScript 應用基於 JavaScript 編寫，能夠在客戶端和服務端運行。正由於此，你只須要寫一次代碼，就能夠在服務端渲染靜態頁面，還能夠在客戶端完成複雜的交互。

服務端渲染的頁面能夠很好解決兩個問題：

（1）. 性能

由於相對於靜態頁面，SPA 須要更多的客戶端代碼，須要下載數據的體積也更大。這使得手機加載速度很慢，可能會致使一些極端的情況 —— 好比糟糕的用戶體驗以及收入上的損失等。依據 Microsoft 的一篇文章 ——

PS：Bing 的一項研究代表：頁面的加載時間每增長 10ms，站點年度總收入就會減小 $250K。

（2）. SEO

由於單頁面應用依賴於 JavaScript 的執行，服務器不會提供它們可能用到的任何 HTML 內容。所以，web 爬蟲很難去索引到這些頁面。爬蟲就是能夠像 web 服務器發送請求，而且將結果分析成原始文本的程序，而不須要像一個瀏覽器運行 JavaScript 那樣解釋和執行客戶端的內容。不久前，Google 優化了搜索引擎的 web 爬蟲，如今它也能夠抓取基於客戶端 JavaScript 所構建的頁面了。可是 Bing、Yahoo 以及其餘搜索引擎怎麼辦？一個好的索引對任何公司來講都相當重要，它一般會帶來更多的流量以及更高的回報。

2. 首屏加載速度方式

檢測首屏加載速度，分加載模塊進行優化，提升首屏加載速度，減小用戶等待時間。

 

總結

講的絕大多數跟React相關，看來他們是很是推崇這個框架，很是提倡組件化的開發思路。除去React的不說，我以爲比較重要的是JS測試方面，這方面咱們有待增強。代碼規範和工具使用都是老生常談的，這點不用多講。最後有一點也必須特別注意是，前端在不斷髮展，新的好的框架或JS版本，能夠考慮使用，讓代碼寫得更優雅。