因個(gè)人精力有限窑滞，暫停簡(jiǎn)書的維護(hù)，歡迎大家關(guān)注我的知乎https://www.zhihu.com/people/wei-wei-24-86-36/activities，會(huì)持續(xù)分享前端哀卫、Web開發(fā)相關(guān)文章
前端 前端每周清單
前端每周清單專注前端領(lǐng)域內(nèi)容巨坊，分為新聞熱點(diǎn)、開發(fā)教程此改、工程實(shí)踐趾撵、深度閱讀、開源項(xiàng)目共啃、巔峰人生等欄目占调。關(guān)注【前端之巔】微信公眾號(hào)（ID：frontshow），及時(shí)獲取前端每周清單勋磕。
新聞熱點(diǎn)
國內(nèi)國外妈候，前端最新動(dòng)態(tài)
《Prettier 1.0 發(fā)布》：Prettier 是目前最為流行的 JavaScript 格式化工具之一，其能夠?qū)⒋a編譯為 AST 然后將格式化之后的代碼寫回到文件中挂滓。在 1.0 正式版中苦银，Prettier 對(duì)于 JSX、CSS-in-JS赶站、裝飾器幔虏、Flow 等語法添加了支持或者優(yōu)化了格式結(jié)果，并且修復(fù)了一系列的錯(cuò)誤贝椿。Prettier 可以同時(shí)在命令行想括、WebStorm、VSCode 等常見的編輯器中使用烙博，筆者建議開發(fā)團(tuán)隊(duì)?wèi)?yīng)該統(tǒng)一格式化工具以避免無謂的提交瑟蜈。( http://jlongster.com/prettier-1.0 )
ECharts GL 1.0 alpha 發(fā)布：（https://parg.co/bR9）ECharts GL 是 ECharts 的 WebGL 擴(kuò)展，其中提供了三維散點(diǎn)圖渣窜，飛線圖铺根，柱狀圖，曲面圖乔宿，地球等多種三維可視化方式位迂。并且增加 scatterGL，graphGL 系列類型用于二維的散點(diǎn)圖详瑞，關(guān)系圖的加速繪制和布局掂林。（https://parg.co/bR9）
《Chrome 59 即將支持 Headless 模式》：近日，Chrome 宣布在 59 版本中開始支持 Headless/Server 模式坝橡，允許用戶加載網(wǎng)頁泻帮、提取出 DOM 這樣的元數(shù)據(jù)、生成網(wǎng)頁內(nèi)容的位圖等等 Chromium 與 Blink 所支持的功能计寇。同時(shí)刑顺，著名 Headless 瀏覽器 PhantomJS 的某位核心開發(fā)者宣布退出 PhantomJS氯窍，噫吁唏。( https://parg.co/bRi )
《Meteor 1.4.4 發(fā)布》：近日 Meteor 宣布發(fā)布其 1.4.4 版本蹲堂，包括了對(duì)于部分核心依賴的更新與錯(cuò)誤的修復(fù)狼讨，并且提升了整體的穩(wěn)定性，同時(shí)為 Cordova 應(yīng)用添加了基于 Google 權(quán)限認(rèn)證的功能柒竞。( https://parg.co/bRs )
《React Studio 1.0.2 發(fā)布》：React Studio 是基于 React 的交互式開發(fā)工具政供，在其新版本中優(yōu)化了界面布局，使得開發(fā)者更方便地添加組件到項(xiàng)目中朽基；提供了回撤布隔、隱藏等功能，并且加入了許多新的模板項(xiàng)目稼虎，允許自定義 CSS 動(dòng)畫類型等功能衅檀。( https://parg.co/bRC )
開發(fā)教程
步步為營，掌握基礎(chǔ)技能
《完整的 HTTP/2 服務(wù)端推送指南》：HTTP/2 相較于 HTTP/1 帶來了極大的性能提升霎俩，而其中的服務(wù)端推送允許服務(wù)端在客戶端請(qǐng)求之前主動(dòng)地推送未來可能需要的靜態(tài)資源哀军；這種方式能夠較好地在實(shí)現(xiàn) HTTP/1 優(yōu)化中常用的內(nèi)聯(lián)方式的同時(shí)避免其帶來的實(shí)踐中的缺陷。而本文則是詳細(xì)地介紹服務(wù)端推送的原理打却、其解決的問題以及在常見服務(wù)器中的配置方式杉适。( https://parg.co/bRH )
《利用 React 打造特斯拉電池儀表盤》：本系列文章介紹了如何用 React、Redux 等相關(guān)前端技術(shù)來打造簡(jiǎn)單的特斯拉電池儀表盤界面柳击。其第一篇博客著眼于如何使用 create-react-app 創(chuàng)建基本項(xiàng)目并且使用組件內(nèi)狀態(tài)來存儲(chǔ)數(shù)據(jù)猿推；而第二篇博客則介紹了如何使用 Redux 來管理外部狀態(tài)。( https://parg.co/bR3 )
《基于 JavaScript 構(gòu)建數(shù)據(jù)表達(dá)式分詞器》：本文是一篇挺有意思的文章捌肴，介紹如何利用 JavaScript 解構(gòu)常見數(shù)學(xué)表達(dá)式并且從中提取出相關(guān)實(shí)體蹬叭。本文涉及到的內(nèi)容包括對(duì)于分詞器的簡(jiǎn)單介紹、對(duì)于抽象語法樹 AST 的介紹以及最終如何使用代碼來實(shí)現(xiàn)分詞算法状知。( https://parg.co/bRO )
《面向重度 jQuery 開發(fā)者的 Vue.js 介紹》：本文是一位經(jīng)驗(yàn)豐富的開發(fā)者具垫，在將原有的基于 jQuery 工程重構(gòu)為基于 Vue.js 工程的過程中總結(jié)出的經(jīng)驗(yàn)與認(rèn)識(shí)介紹。本文首先從零開始介紹如何搭建 Vue.js 基礎(chǔ)項(xiàng)目并且一步一步地實(shí)現(xiàn)應(yīng)用的各種特征试幽，同時(shí)還對(duì)比了利用 Vue.js 與 利用 jQuery 實(shí)現(xiàn)的差異性以及二者在設(shè)計(jì)思想上的區(qū)別。( https://parg.co/bRN )
工程實(shí)踐
立足實(shí)踐卦碾，提示實(shí)際水平
《Sketch 43 會(huì)改變你的工作流》：在近日的 Sketch Meetup 中 Andree 再次確認(rèn)下個(gè)版本的 Sketch 會(huì)提供新的開放式文件格式铺坞，允許開發(fā)者自定義程序來讀取或者修改文件。Andree 還提到了所謂設(shè)計(jì)即代碼洲胖、代碼即設(shè)計(jì)的理念济榨，本文作者認(rèn)為即使這種方式還是存在一定的缺陷，但是這種新的開源格式仍然會(huì)為開發(fā)者與設(shè)計(jì)者的日常工作流帶來極大的改變绿映。( https://parg.co/b4w )
《TypeScript 在 Slack 的實(shí)踐分享》：維護(hù)大型的跨平臺(tái)的 JavaScript 代碼庫是一件非常具有挑戰(zhàn)性的工作擒滑，無論是從 Chrome 的 JavaScript 中傳遞對(duì)象給 Objective-C 或者單純的接受來自 Node.js 中的回調(diào)結(jié)果腐晾，你都需要保證不同的代碼對(duì)于通訊對(duì)象的期望之間的一致性。而本文即是在開發(fā)跨平臺(tái)多終端的應(yīng)用中丐一，Slack 使用 TypeScript 來約束類型藻糖，從而避免意外的類型不一致導(dǎo)致的崩潰的實(shí)踐經(jīng)驗(yàn)分享。( https://parg.co/bRR )
《Twitter Lite 與高性能可擴(kuò)展 React PWA 實(shí)踐》：本文是 Twitter 工程師團(tuán)隊(duì)介紹其在開發(fā)世界上最大的 PWA 應(yīng)用之一库车， Twitter Lite 過程中克服各種各樣的性能瓶頸的實(shí)踐經(jīng)驗(yàn)巨柒。其核心思想包括基于路由的代碼切分、避免可能導(dǎo)致掉幀的函數(shù)柠衍、使用壓縮比更好的圖片資源洋满、以及優(yōu)化 React 更新過程、避免頻繁修正 Redux Store珍坊、延遲注冊(cè) ServiceWorker 等部分牺勾。( https://parg.co/bRV )
《React Native 性能優(yōu)化》：本文作者承接 React Native 性能瓶頸與解決方案，以新的實(shí)際開發(fā)中的例子討論如何優(yōu)化 React Native 應(yīng)用性能阵漏。作者以類似于 Android 中 Toolbar 的列表為例驻民，介紹了如何對(duì)性能進(jìn)行測(cè)試、使用原生的滾動(dòng)監(jiān)聽袱饭、使用聲明式接口等多個(gè)方面的內(nèi)容川无。( https://parg.co/bRk )
深度閱讀
深度思考，升華開發(fā)智慧
《2017 里 JavaScript 帶給我的感動(dòng)》：本文作者縱覽了在 2017 年中 JavaScript 生態(tài)圈可能迎來的一系列巨大變革虑乖。他首先對(duì)比了 JavaScript 與 Reason懦趋，淺述了二者的優(yōu)劣對(duì)比。然后介紹了 WebAssembly 以及另一個(gè)新興語言 Rust 未來可能在 JavaScript 生態(tài)圈中占據(jù)的一席之地疹味。最后仅叫，作者還介紹了 Docker、Now.sh 以及 Github Pages 等一系列優(yōu)秀的輔助開發(fā)工具糙捺，并且暢想了去中心化浪潮下 Web 的未來發(fā)展诫咱。( https://parg.co/bRh )
《算法驅(qū)動(dòng)設(shè)計(jì)：人工智能是如何改變?cè)O(shè)計(jì)流程的》：大數(shù)據(jù)時(shí)代人工智能不斷滲透工作生活的方方面面，而本文作者則是從設(shè)計(jì)的角度出發(fā)洪灯，介紹了如何在實(shí)際工作中貫徹算法驅(qū)動(dòng)設(shè)計(jì)的理念坎缭，利用算法模型與歷史數(shù)據(jù)來判斷什么樣的設(shè)計(jì)可能更會(huì)受到用戶的青睞；作者還以完整的設(shè)計(jì)實(shí)例介紹了從構(gòu)建到素材準(zhǔn)備的流程签钩。( https://parg.co/bRt )
《后 MVC 時(shí)代》：在很長(zhǎng)一段時(shí)間里掏呼，MVC（Model-View-Controller）架構(gòu)是構(gòu)建應(yīng)用的黃金法則，而近幾年隨著 React铅檩，Vue.js憎夷，Angular 等以組件為中心的庫的流行，MVC 架構(gòu)在前端卻趨于平寂昧旨。開發(fā)者往往將模型拾给、視圖與控制器耦合在單個(gè)實(shí)體內(nèi)祥得，而打破了傳統(tǒng)的 MVC 架構(gòu)中的約束。類似于 Flux 或者響應(yīng)式編程的設(shè)計(jì)思想也改變了應(yīng)用狀態(tài)的處理方式蒋得，不同于 MVC 中的雙向綁定级及，而是數(shù)據(jù)在實(shí)體之間單向流動(dòng)。本文即是討論在所謂后 MVC 時(shí)代的 GUI 應(yīng)用架構(gòu)的思考窄锅。( https://realm.io/news/the-post-mvc-age/ )
《瀏覽器中的原生 ES6 模塊：是時(shí)候重新考慮打包發(fā)布流程创千？》：ES6 模塊標(biāo)準(zhǔn)出臺(tái)已有數(shù)年，而目前最流行的方式就是使用 Babel 等轉(zhuǎn)譯工具將 ES6 模塊轉(zhuǎn)譯為 CommonJS 等模塊語法以發(fā)布到瀏覽器中運(yùn)行入偷。而隨著 Safari追驴、Firefox、Edge 都紛紛支持原生 ES6 模塊疏之，本文作者也重新思考是否需要改變現(xiàn)有的應(yīng)用打包與發(fā)布流程殿雪。本文首先對(duì)比介紹了基于 Babel/Webpack 的打包與使用原生的 ES6 模塊之間的異同，討論了真實(shí)環(huán)境下直接使用原生模塊的可行性等內(nèi)容锋爪。( https://parg.co/bRL )
開源項(xiàng)目
樂于分享丙曙，共推前端發(fā)展
《Electron Forge》：Electron Forge 是構(gòu)建現(xiàn)代 Electron 應(yīng)用的完整工具集，其整合了很多現(xiàn)存的用于 Electron 的開發(fā)工具其骄，去蕪存菁亏镰，將它們整合為簡(jiǎn)單易用的能夠直接上手的輔助開發(fā)工具。( https://parg.co/bRf )
《Elasticlunr.js》：Elasticlunr.js 是輕量級(jí)的提供了瀏覽器端搜索與離線搜索的全文搜索引擎拯爽，其基于 Lunr.js 開發(fā)不過提供了更加靈活的功能索抓。Elasticlunr.js 支持基于時(shí)間與指定域的查詢，它有點(diǎn)類似于 Solr 不過更為靈活并且對(duì)于開發(fā)者更為友好毯炮。( http://elasticlunr.com/ )
《CodeSandbox》：CodeSandbox 是一個(gè)在線的 React 編輯器逼肯，其能夠幫助開發(fā)者更快更方便地展示與分享基于 React 的項(xiàng)目。CodeSandbox 會(huì)自動(dòng)化執(zhí)行類似于編譯桃煎、打包篮幢、依賴管理等多種項(xiàng)目構(gòu)建中的常見任務(wù)，同時(shí) CodeSandbox 還允許開發(fā)者添加自定義的 node_modules 中的依賴为迈。( https://parg.co/bR8 )
《Slate》：Slate 是類似于 Draft.js 的靈活可自定義的富文本編輯器構(gòu)建框架三椿，Slate 允許你構(gòu)建功能豐富的類似于 Medium、Dropbox Paper葫辐、Canvas 這樣的編輯器搜锰。Slate 提供了各式各樣的插件，你可以基于 React 與 Immutable 來構(gòu)建自定義的插件另患，并且指定哪些插件屬于核心插件。( https://docs.slatejs.org/ )
巔峰人生
《鏈家鳥哥：從留級(jí)打架問題學(xué)生到PHP大神蛾绎，他的人生驅(qū)動(dòng)力竟然是》：從問題勸退學(xué)生到高考725分學(xué)霸昆箕，陰差陽錯(cuò)選擇計(jì)算機(jī)鸦列；也曾北漂住過地下室，也曾面試被拒鹏倘；不斷走出舒適區(qū)薯嗤，快速成長(zhǎng)……一個(gè)小視屏，帶你走進(jìn)鳥哥的攀登巔峰之路纤泵。（https://parg.co/bRy）
前端之巔
「前端之巔」是InfoQ旗下關(guān)注前端技術(shù)的垂直社群骆姐，加入前端之巔學(xué)習(xí)群請(qǐng)關(guān)注「前端之巔」公眾號(hào)后回復(fù)“加群”。投稿請(qǐng)發(fā)郵件到editors@cn.infoq.com捏题，注明“前端之巔投稿”玻褪。
