FEX 技術周刊 - 2015/12/07 · FEX 技術周刊

## 深閱讀 **PHP 7.0.0 Released** [http://php.net/archive/2015.php](http://php.net/archive/2015.php) The PHP development team announces the immediate availability of PHP 7.0.0\. This release marks the start of the new major PHP 7 series. PHP 7.0.0 comes with a new version of the Zend Engine, numerous improvements and new features. 恭喜 PHP 發布這個歷史性突破的版本，附亞一程-鳥哥的：?[寫在PHP7發布之際的一些話](http://www.laruence.com/2015/12/04/3083.html)?[讓PHP7達到最高性能的幾個Tips](http://www.laruence.com/2015/12/04/3086.html)?以及一篇情懷文：[開發者的孤獨與偉大](http://www.liaohuqiu.net/cn/posts/roman-wasnot-built-in-a-day/) **十年來感受的前端技術變化 - by xufei** [https://github.com/xufei/blog/issues/28](https://github.com/xufei/blog/issues/28) 來自民工哥的總結，非常值得仔細品讀。 **前QQ瀏覽器產品負責人－從0到1深度認識產品經理** [http://toutiao.com/i6223360372221411841/](http://toutiao.com/i6223360372221411841/) 產品經理，具備四種屬性，他們分別是要有責任感，產品經理是產品的爹媽，是這個產品團隊的第一負責人，一個產品經理如果做不到這種級別的關愛，你的產品很難發展下去。第二是追求極致，你知道這個產品有什么功能，哪個點需要做到極致，才能形成差異化的壁壘。第三個是專家，需要具備各個領域的相關知識。第四個是設計師，你要知道什么東西是美的。騰訊產品經理衡量指標表，基本上分為四個維度：基礎、知識、專業能力、組織能力。值得注意的是騰訊的產品經理技能體系中有技術。 **Hadoop creator Doug Cutting on evolving and succeeding in open source** [https://medium.com/s-c-a-l-e/hadoop-creator-doug-cutting-on-evolving-and-succeeding-in-open-source-3277a42e5b6e#.1k67qmri9](https://medium.com/s-c-a-l-e/hadoop-creator-doug-cutting-on-evolving-and-succeeding-in-open-source-3277a42e5b6e#.1k67qmri9) 對 Doug Cutting 的采訪，做數據的同學。 **天貓雙11前端分享系列（四）：大規模 Node.js 應用** [https://github.com/tmallfe/tmallfe.github.io/issues/28](https://github.com/tmallfe/tmallfe.github.io/issues/28) 天貓前端團隊使用 React 和 Node 支撐了大量運營頁面的開發。 **關于啟用 HTTPS 的一些經驗分享** [https://imququ.com/post/sth-about-switch-to-https.html](https://imququ.com/post/sth-about-switch-to-https.html) 使用 HTTPS 的寶貴經驗。 **編程的智慧** [http://www.yinwang.org/blog-cn/2015/11/21/programming-philosophy/](http://www.yinwang.org/blog-cn/2015/11/21/programming-philosophy/) 有很多有價值的編碼經驗，提升代碼可讀性。 **Debugging Node.js in Production** [http://techblog.netflix.com/2015/12/debugging-nodejs-in-production.html](http://techblog.netflix.com/2015/12/debugging-nodejs-in-production.html) 來自 Netflix 的實踐經驗。 **我所親見的前端技術變革** [http://zhuanlan.zhihu.com/fangtalk/20359442](http://zhuanlan.zhihu.com/fangtalk/20359442) 挺樸實的一篇文章：站在一個帶隊者的角度，闡述我的團隊最近幾年所使用過的前端技術方案。 **Node js 探秘(二) 求異存同** [http://taobaofed.org/blog/2015/12/03/deep-into-node-2/](http://taobaofed.org/blog/2015/12/03/deep-into-node-2/) Node.js 基于 libuv 實現了 I/O 的異步操作, 通過回調函數來獲得想要的結果。而在我們實際解決問題的時候，往往需要一組操作是有序的。如果使用回調的方式，會使用很多的回調嵌套，使代碼變得很難看。為了解決這個問題，我們引入 Promise、yield 等概念，但今天我們不討論這些，我們討論下最簡單的解決辦法，同步執行以及 Node.js 如何在異步的架構上實現同步的方法。 **深度剖析：如何實現一個 Virtual DOM 算法** [https://github.com/livoras/blog/issues/13](https://github.com/livoras/blog/issues/13) 通過自己實現一個來學習是一種不錯的學習方法。 **為什么虛擬DOM更勝一籌** [http://weibo.com/p/1001603915568079095157](http://weibo.com/p/1001603915568079095157) 司徒大俠的觀點：虛擬DOM只是實現MVVM的一種方案，或者說是視圖更新的一種策略。沒有虛擬DOM比MVVM更好一說。 **React Virtual DOM vs Incremental DOM vs Ember’s Glimmer: Fight** [https://auth0.com/blog/2015/11/20/face-off-virtual-dom-vs-incremental-dom-vs-glimmer/](https://auth0.com/blog/2015/11/20/face-off-virtual-dom-vs-incremental-dom-vs-glimmer/) [譯文]?[http://www.w3ctech.com/topic/1609](http://www.w3ctech.com/topic/1609) 本文將探索3種構建動態DOM的技術，并通過一些基準測試對比3種技術的性能快慢，最后我會給出在項目中哪種技術更加適合以及為什么，介紹現在已經有許多DOM操作的框架和類庫。其中 Incremental DOM 見?[https://github.com/google/incremental-dom](https://github.com/google/incremental-dom) **[http://www.smashingmagazine.com/2015/01/angularjs-internals-in-depth/](http://www.smashingmagazine.com/2015/01/angularjs-internals-in-depth/)** [譯文][http://www.w3ctech.com/topic/1611](http://www.w3ctech.com/topic/1611) [http://www.w3ctech.com/topic/1612](http://www.w3ctech.com/topic/1612) 在AngularJS的代碼庫中呈現出了大量有趣的設計，最有趣的兩個例子是scope的工作方式和directives(指令)的表現，本文詳細講解了 scope 和 directive 相關的一些技術內幕。 **How to create strongly-typed npm packages** [https://medium.com/@mweststrate/how-to-create-strongly-typed-npm-modules-1e1bda23a7f4#.p7rvlllaz](https://medium.com/@mweststrate/how-to-create-strongly-typed-npm-modules-1e1bda23a7f4#.p7rvlllaz) 介紹 TypeScript 1.6 如何更好地與 npm 配合使用。 **The Fall and Rise of SVG** [http://blog.siliconpublishing.com/2015/12/the-fall-and-rise-of-svg/](http://blog.siliconpublishing.com/2015/12/the-fall-and-rise-of-svg/) SVG 興衰史。 **Must See JavaScript Dev Tools That Put Other Dev Tools to Shame** [https://medium.com/javascript-scene/must-see-javascript-dev-tools-that-put-other-dev-tools-to-shame-aca6d3e3d925](https://medium.com/javascript-scene/must-see-javascript-dev-tools-that-put-other-dev-tools-to-shame-aca6d3e3d925) But we’ve come a long way since then, and the tools we use now in JS make fancy IDE autocomplete look like a baby chew toy. In particular, JavaScript’s runtime tooling has no match that I’m aware of in any other language. **How to Structure a React Project** [http://reactjsnews.com/structuring-react-projects/](http://reactjsnews.com/structuring-react-projects/) There are multiple ways to structure your project. I believe it is far better to evolve the structure as you go rather than to stick with some dogma. I will go through some basic approaches next to provide some food for thought. **5 Essential Ember 2.0 Concepts You Must Understand** [http://emberigniter.com/5-essential-ember-2.0-concepts/](http://emberigniter.com/5-essential-ember-2.0-concepts/) Templates, routes, views, controllers, models, components… they’re still confusing and require clarification. What logic belongs where? What’s the relationship between them? What’s more, things have been shifting a lot recently. You find a months-old article on the Web and become skeptical of its currency as that advice may no longer be relevant. **為什么很多看起來不是很復雜的網站，比如 Facebook 需要大量頂尖高手來開發** [http://www.zhihu.com/question/20303645](http://www.zhihu.com/question/20303645) 你需要知道的是，你每天使用的互聯網產品，看似簡單易用，背后卻凝聚著難以想象的智慧與勞動。 ## 新鮮貨 **Node v5.1.1 (Stable)** [https://nodejs.org/en/blog/release/v5.1.1/](https://nodejs.org/en/blog/release/v5.1.1/) 有重大安全升級 **ECharts 3 帶來了什么** [http://efe.baidu.com/blog/whats-new-in-ec3/](http://efe.baidu.com/blog/whats-new-in-ec3/) ECharts 在 github 上沉寂了數個月，想必很多小伙伴充滿了各種疑問，ECharts是不是不維護了？你們以后是不是不做了？別著急，其實這幾個月，我們的設計師、工程師一直厲兵秣馬，加班加點，沒有周末，沒有女朋友地瘋狂工作中。終于，ECharts 的又一個重大版本即將出爐，在 ECharts 3 正式版發行前，提前給廣大用戶帶來 ECharts 3 的測試版。那 ECharts 3 究竟會有哪些新的特征，我們用數月究竟在顛覆著自己的什么呢？接下來讓我們一一為您道來。 **Swift 開源** [https://swift.org/](https://swift.org/) [https://github.com/apple/swift/](https://github.com/apple/swift/) 除了 Mac 還支持 Linux，看來 apple 是想用在服務端呢，話說這也是 apple 第一次使用 github。 **Next Generation Eclipse IDE** [https://eclipse.org/che/](https://eclipse.org/che/) Eclipse Che: High performance developer workspaces, cloud IDE, and plug-ins. Eclipse Che provides: A browser-based IDE; RESTful workspace server; Plug-ins for languages, framework, and tools; An SDK for creating plug-ins and assemblies. **Microsoft Edge’s JavaScript engine to go open-source** [https://blogs.windows.com/msedgedev/2015/12/05/open-source-chakra-core/](https://blogs.windows.com/msedgedev/2015/12/05/open-source-chakra-core/) Chakra offers best-in-class JavaScript execution with the broadest set of ES2015 feature coverage and dependable performance, reliability, and scalability. We expect ChakraCore to be used wherever these factors are important, ranging from cloud-based services to the Internet of Things and beyond. **What Web Can Do Today** [https://whatwebcando.today/](https://whatwebcando.today/) Can I rely on the Web Platform features to build my app? An overview of the device integration HTML5 APIs **Let’s Encrypt** [https://letsencrypt.org/](https://letsencrypt.org/) 免費的 HTTPS 工具，還自帶方便的部署腳本。 **Pesticide** [http://pesticide.io/](http://pesticide.io/) 方便調試 CSS 布局的小工具。 **Parker** [https://github.com/katiefenn/parker](https://github.com/katiefenn/parker) CSS 代碼靜態分析工具，可以統計出 CSS 代碼的復雜性指標。 **Announcing TypeScript 1.7** [http://blogs.msdn.com/b/typescript/archive/2015/11/30/announcing-typescript-1-7.aspx](http://blogs.msdn.com/b/typescript/archive/2015/11/30/announcing-typescript-1-7.aspx) 支持 Async/Await 關鍵字，這下寫異步代碼及異常處理會更方便了，推薦在 Node.js v4 中使用。 **activate-power-mode** [https://atom.io/packages/activate-power-mode](https://atom.io/packages/activate-power-mode) 一個在編輯文本時顯示特效的插件，沒啥用，但挺有意思。 **Welcome Adobe Animate CC, a new era for Flash Professional** [http://blogs.adobe.com/flashpro/welcome-adobe-animate-cc-a-new-era-for-flash-professional/](http://blogs.adobe.com/flashpro/welcome-adobe-animate-cc-a-new-era-for-flash-professional/) Flash 編輯器改名 Animate CC，增加了對 HTML5 輸出的支持。 **Matreshka.js** [https://medium.com/@finom/matreshka-js-from-simple-to-simple-a52db6884a9d#.635ns5o1g](https://medium.com/@finom/matreshka-js-from-simple-to-simple-a52db6884a9d#.635ns5o1g) 有一個前端框架，有雙向綁定功能 **CSS Custom Properties for Cascading Variables** [http://www.w3.org/TR/2015/CR-css-variables-1-20151203/](http://www.w3.org/TR/2015/CR-css-variables-1-20151203/) CSS也可以自定義屬性了，‘ --*’ 定義屬性并以‘var()’引用該屬性，主要是為了解決大型的CSS文件里命名重復率高、屬性重用困難等的痛苦。規范已進入CR，Firefox已支持Chrome也將實現，Edge也有意向。 **Support for older versions of Internet Explorer ends on January 12, 2016** [https://www.microsoft.com/en-us/WindowsForBusiness/End-of-IE-support](https://www.microsoft.com/en-us/WindowsForBusiness/End-of-IE-support) Beginning January 12, 2016, only the most current version of Internet Explorer available for a supported operating system will receive technical supports and security updates. Internet Explorer 11 is the last version of Internet Explorer, and will continue to receive security updates, compatibility fixes, and technical support on Windows 7, Windows 8.1, and Windows 10. **Atmosphere: The Asynchronous WebSocket/Comet Framework** [https://github.com/atmosphere/atmosphere](https://github.com/atmosphere/atmosphere) [http://async-io.org/](http://async-io.org/) Realtime Client Server Framework for the JVM, supporting WebSockets with Cross-Browser Fallbacks **w3ctech 6周年 -12.26** [http://www.w3ctech.com/birthday/6](http://www.w3ctech.com/birthday/6) **震撼效果** [https://atom.io/packages/activate-power-mode](https://atom.io/packages/activate-power-mode) 這樣寫碼也是醉了... **作為一個前端，如何機智地弄壞一臺電腦?** [http://litten.github.io/2015/07/06/hack-in-localstorage/](http://litten.github.io/2015/07/06/hack-in-localstorage/) 關于 LocalStorage 的黑科技 **React-Native-lesson** [https://github.com/vczero/react-native-lesson](https://github.com/vczero/react-native-lesson) React-Native入門指南 **SAE Node.js平臺正式公測** [http://saebbs.com/forum.php?mod=viewthread&tid=37798](http://saebbs.com/forum.php?mod=viewthread&tid=37798) [http://mp.weixin.qq.com/s?__biz=MjM5NzI0Njc2MA==&mid=400624156&idx=1&sn=4d6d8eea885654870235a08be3f645a1#rd](http://mp.weixin.qq.com/s?__biz=MjM5NzI0Njc2MA==&mid=400624156&idx=1&sn=4d6d8eea885654870235a08be3f645a1#rd) 基于Kubernetes的Node.js平臺來啦！公測期間可免費體驗！此外，近期我們升級了獨享型MySQL服務，支持從共享型MySQL到獨享型MySQL數據的一鍵遷移，并新增一鍵備份/恢復數據等功能。 **Microm - Beautiful library to convert browser microphone to mp3 in Javascript** [https://github.com/zzarcon/microm](https://github.com/zzarcon/microm) Microm it's just a wrapper of few audio converting libraries which exposes a fully Promise and Event oriented api. Microm goal it's to make trivial to play and convert audio in the browser. **React Custom Renderer using Web Workers** [http://blog.nparashuram.com/2015/12/react-web-worker-renderer.html](http://blog.nparashuram.com/2015/12/react-web-worker-renderer.html) [https://github.com/web-perf/react-worker-dom](https://github.com/web-perf/react-worker-dom) A React Custom renderer using Web Workers. All the Virtual DOM diffing happens in the Worker thread, and only node updates are sent over to the UI thread. **Labella.js - Labels should be beautiful** [https://github.com/twitter/labella.js/](https://github.com/twitter/labella.js/) If you try to place labels for points on a timeline (or any 1D space), one common problem is the labels often overlap. How about making the labels push each other. Use the force, jedi-style. **當一個顏值很高的程序員是怎樣一番體驗** [http://www.zhihu.com/question/37787176](http://www.zhihu.com/question/37787176) ## 產品及其它 **中國製造也能在美國市場打造品牌神話，傳奇 Amazon 賣家 Anker 給臺灣廠商的啟示** [http://transbiz.com.tw/amazon-chinese-seller-anker-in-us-market/](http://transbiz.com.tw/amazon-chinese-seller-anker-in-us-market/) 如何打造熱銷商品。 **豆瓣十年，一個典型精英社區的起伏興衰** [http://36kr.com/p/5040404.html](http://36kr.com/p/5040404.html) 回顧豆瓣的發展歷史，如何興盛和衰落的。另附衰落文：滴滴游戲中心已死，HTML5游戲還有未來嗎 [http://www.gameres.com/473465.html](http://www.gameres.com/473465.html) **底層用戶生態：性的需求和能量** [http://mp.weixin.qq.com/s?__biz=MzA3NTcwOTIwNg==&mid=403812127&idx=1&sn=3916178c62f5f7fd96738fef1819bd18](http://mp.weixin.qq.com/s?__biz=MzA3NTcwOTIwNg==&mid=403812127&idx=1&sn=3916178c62f5f7fd96738fef1819bd18) TOMsInsight在互聯網黑市系列深度報告后，開始推送「互聯網底層用戶生態」深度分析系列。「底層」的意思并不是級別低，而是和很多互聯網創新公司那些高大上的「臆想需求」相對，真實客觀的一線互聯網消費者。 **吳軍解讀硅谷之謎** [http://mp.weixin.qq.com/s?__biz=MzA3Mjc3NTQxMQ==&mid=400776160&idx=1&sn=668e2f4aac76d105ecbdeaab88faea20](http://mp.weixin.qq.com/s?__biz=MzA3Mjc3NTQxMQ==&mid=400776160&idx=1&sn=668e2f4aac76d105ecbdeaab88faea20) 硅谷它奇異的地方在于不斷創造出偉大的公司，一個偉大的公司之所以稱之為偉大，就是在于世界上有它和沒有它的時候是不一樣。硅谷的成功在于：對叛逆行為的寬容、對失敗的寬容、多元文化、工程師文化、分配制度、追求卓越 **大咖級教程！亂斗西游的游戲LOGO是如何誕生的？（附設計方法）** [http://www.uisdc.com/journey-to-west-logo](http://www.uisdc.com/journey-to-west-logo) 詳細介紹了這個 Logo 是如何設計出來的。 **硝煙往事：締造Instagram的這五年** [http://zhuanlan.zhihu.com/qinchao/20310747](http://zhuanlan.zhihu.com/qinchao/20310747) 介紹了 Instagram 在發展過程中的技術變革。 **成為一名強大優秀的全棧設計師吧** [http://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=401039038&idx=1&sn=a09d09fe363c184d9b486c8650d5d869&scene=0#wechat_redirect](http://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=401039038&idx=1&sn=a09d09fe363c184d9b486c8650d5d869&scene=0#wechat_redirect) 和全棧工程師對應的還有全棧設計師這個說法，跨界是可以讓我們有更多的可能性，而且在做方案的時候也能幫助我們從不同的角度區思考！