收藏指数满格！帮你打包 InfoQ 前端之巅一整年好文！

编辑 | 尾尾

2016 年 6 月 5 日，前端之巅公众号发出了第一篇文章。整整一年过去了，前端之巅吸引了近 4 万名淀粉，社群人数也近 4 千人。今天，尾尾为大家打包了前端之巅这一年的文章，希望能给各位淀粉回顾学习带来便利。

福利！福利！福利！为了感谢大家的支持和厚爱，截止 2017 年 13 号晚 8 点整，本文留言点赞数最多的前 3 名淀粉将获得由博文视点赞助的图书一册，第 4~10 名淀粉将获得前端之巅定制明信片（加盖前端之巅专属橡皮章哦）。你想对前端之巅说些什么呢？欢迎大家留言哦！

一、前端深度 深度探讨

• 深度探讨 MVC 式 Web 架构演进：多形态发展

• 我看大前端：终端碎片化时代下，所有表现层的整合

• 我理解的“大前端”或“大无线”

• 我为什么反对“大前端工程师”的概念

• 当我们在谈大前端的时候，我们谈的是什么

• 从 WKWebView 出发，以前端角度看混合开发

• 大前端年终总结与展望：大前端时代即将来临？

• 割裂的前端工程师：预测前端的 2017

• 前端 leader 们如何安排面试？

• 前端 leader 们怎样看简历？

• 前端为什么一定要做组件化

• 响应式技术在 JS 和 Web 界的现状及未来如何？  

• HTTPS 之难，难于上青天？

• Web 不是未来会赢，而是已经赢了

• 前端工程师的第三春即将到来？——解析 three.js 的 WebVR 示例程序，WebVR 竟然如此近！

• 你需要开发 PWA 应用吗？

巅峰观点

• 散养? 饿了么大前端团队究竟是如何落地和管理的?

• 贺师俊：如何看待 left-pad 事件

• 前端巅峰论：框架之争，出路何在？

• 『司徒正美』答群友问

• 我为何放弃 Gulp 与 Grunt，转投 npm scripts

• 阿里资深前端工程师桐木：站在 10 年研发路上，眺望前端未来

• 链家网前端总架构师杨永林：我的 8 年架构师成长之路

• 群分享预告：饿了么基于 Vue 2.0 的通用组件库开发之路

• 大前端 2016 盘点：如何成为公司所需的 T 型人才？ | 今晚直播

• 前端技术概念大爆发，软件工程师应如何自处？

• 腾讯 Web 前端最高技术级别工程师的技术人生丨今晚直播

• 链家网前端总架构师教主：程序员不是你想的那样 | 今晚直播

• 饿了么大前端总监：什么样的人可以称为架构师？

• 司徒正美：前端江湖纷乱，框架之争，出路何在？

发展总结

• 2016 前端开发技术巡礼

• 一文回顾 JavaScript 模块演化简史

• 3D 技术在电商网站中的应用和发展

• JavaScript 领域中最受欢迎的“明星”们

• SAM 模式构建函数响应式前端架构的五条结论

• JS 开发者福音 Elm：语言级响应式编程

• Google QUIC 协议：从 TCP 到 UDP 的 Web 平台

• 踏上可信前端之路：保护代码，JS 混淆到底是不是纸老虎？

• 一文掌握 JavaScript 生态圈现状

• 打造你的每日前端信息流

• 2016 前端之路：工具化与工程化

• 关于 PWA 你需要知道的一切

• 一文拿下 JS 变量相关问题

• 巨头们关注的实时 Web：发展与相关技术

• 实时响应的 Web 架构：完全动态和响应式现代 Web 组件

• JavaScript 启动性能瓶颈分析与解决方案

• 36 个代码块，带你读懂异常处理的优雅演进

• 扩展 JS 应用在架构性取舍上应关注八点要素

• 提高复杂组件可复用性，不了解 IoC 怎么行？一文掌握前端 IoC 理念，速戳！

二、框架之争 如何看待

• 前端代有框架出，技术人应如何自处？

• 我该选择哪个框架？2016 年 JS 工具使用状况调查结果

• 2017 年 React、Angular 和 Vue 值得我们期待什么？

• 我们为什么选择 Vue.js 而不是 React？

• 我们为什么选择使用 React 生态？

• 18 年老司机告诉你：我为什么选择 Angular 2

Vue

• Vue 2017 现状与展望 | 视频 +PPT+ 速记快速回顾

• 以 Vuex 2.0 为例，提升源码分析技能

• Vue 源码解析：深入响应式原理

• Vue.js 实用技巧（二）

• Vue.js 实用技巧（一）

• WebStorm 2017.1 增加对 Vue.js 的支持

• Vue 作者尤雨溪：Vue 2.0，渐进式前端解决方案

• Vue 2.0 快速上手指南

• 更轻更快的 Vue.js 2.0 与其他框架对比

React

• React 新引擎 React Fiber 究竟要解决什么问题？

• React 15.5 带来重大修改，为开发者留充足时间适应版本 16

• 如何“正确”编写 React 组件？我们总结了一套满意的方法

• 使用 React 重构百度新闻 WebApp 前端（下）

• 使用 React 重构百度新闻 WebApp 前端（上）

• 让 React 组件变得可响应

• 如何使用 Flux 搭建 React 应用程序架构

• React：究竟何时使用 shouldComponentUpdate？

• React 之 DOM Diff：如何将算法复杂度控制在 O(n)

• 30 分钟掌握 React 开发神器 Webpack

• 一篇文章读懂 React

• React 的替代方案 Inferno 发布 1.0 版本

• Oculus 正式发布 React VR 预览版

Angular

• Angular 团队将跳过 3，直接发布 Angular 4

• 基于 AngularJS 的个推前端云组件探秘

• Angular 4 将获得长期支持，版本号变化不意味破坏性修改

• 一份关于 Angular 的倡议清单

• Angular4.0.0 正式发布，附新特性及升级指南

• Angular 的模块间通信

• 原 Angular 团队成员投身 JavaScript 框架 Aurelia

• Angular 2 拆分，分离了 Dart 代码库

• Angular 2 与 TypeScript 概览

• Angular 2 最终版发布，采用语义化版本号

三、实践 团队实践 百度

• 聊一聊百度移动端首页前端速度那些事儿

• 如何重构一个大型历史项目——百度经验改版总结

• 百度 SSP 单页式应用性能优化实践

• 百度搜索对 PWA 的探索和初步实践

• 百度日请求量 700 亿 +，BFE 如何处理数据拥堵？ | Golang 在 Baidu-FrontEnd 的应用之路

• 百度贴吧：复杂 Web 前端项目的构建工具优化实践

阿里

• 天猫首页全解密

• 天猫 11.11：双 11 晚会和狂欢城的互动技术方案

• 天猫前端基础技术体系简介

• 聊一聊淘宝首页和它背后的技术

• 一文了解支付宝前端应用架构发展史

饿了么

• PWA 在饿了么的实践经验

• PWA 实践：理解和创建 Service Worker 脚本

• PWA 实践：从一个简单的页面开始

• 饿了么基于 Vue 2.0 的通用组件库开发之路

美团

• 美团点评酒旅前端的技术体系一览

• 美团点评前端无痕埋点实践

滴滴

• 滴滴：公司级组件库以及 MIS 系统的技术实践

• 滴滴 WebApp 实践经验分享

• 滴滴张耀春：如何打造公司级公共前端团队

携程

• IMVC（同构 MVC）的前端实践

蘑菇街

• 蘑菇街前后端分离实践

京东

• 京东 618：三大系统防作弊，挑战直面用户的困难

• 京东前端：PhantomJS 和 NodeJS 在京东网站前端监控平台的最佳实践

• 京东前端：三级列表页持续架构优化

• 前端如何展示商品属性：SKU 多维属性状态判断算法的应用

技术实践

• 如何打造亚秒级页面加载速度的网店？

• 前端组件化开发方案及其在 React Native 中的运用

• HTML5 游戏引擎开发一站式解决方案——青瓷引擎

• 400% 飞跃：Web 页面加载速度优化实战

• Coding WebIDE 前端架构变迁

• 开发可扩展 Web 应用：React+Redux+React-router

• 魏晓军：携程 HTML5 性能优化实战

• 如何度量真实的网页性能？一文了解 V8 怎么做的

• 复杂单页应用的数据层设计

• 如何根据语言习惯简化对象构造函数的创建过程

• 前端开源项目持续集成三剑客

• 前端人应该知道的排序知识

• 聊一聊前端存储那些事儿

• 你忽略了的 Redux：一种页面状态管理的优雅方案

• 聊一聊前端模板与渲染那些事儿

• 深入浅出 Node.js 异步流程控制

• 从真实世界到前后端的设计

• 如何贯穿整个 Web 开发栈进行应用程序测试

• 单页应用的数据流方案探索

• Redux 状态管理之痛点、分析与改良

• React Native 应用如何实现 60 帧 / 秒的流畅动画？

• AMP 与 MIP 等移动页面加速框架的探索与实践

• 如何做好 H5 性能优化？

• 如何保证 H5 页面高质量低成本快速生成？

• 实测 Vue SSR 的渲染性能：避开 20 倍耗时

• 大型高性能 React PWA 如何消除各类性能瓶颈？

• 为性能而生！Twitter 新推出的 Twitter Lite 究竟是如何构建的？

• 探索 Redux 的最佳实践

• 可供参考的四个 Webix 实例：生成多种类型的 JavaScript 列表

• 你还在用有漏洞的过期 JavaScript 库吗？

四、前端动态 每周清单

• 前端每周清单第 16 期：JavaScript 模块化现状；Node V8 与 V6 真实性能对比；Nuxt.js SSR 与权限验证指南

• 前端每周清单第 15 期：Node.js v8.0 发布，从 React 迁移到 Vue，前端开发的未来

• 前端每周清单第 14 期：Vue 现状与展望、编写现代 JavaScript 代码、Web 开发者安全自检列表

• 前端每周清单期 13 期：Webpack CLI 发布、Angular 5 可期待的新特性、解密现代浏览器引擎构建之道

• 前端每周清单第 12 期：支付宝前端构建工具发展、LinkedIn 用 Brotli 加快网页响应速度、饿了么 PWA 升级实践

• 前端每周清单第 11 期：Angular 4.1 支持 TypeScript 2.3，Vue 2.3 优化服务端渲染，优秀 React 界面框架合集

• 前端每周清单第 10 期：Firefox53、React VR 发布、JS 测试技术概述、Microsoft Edge 现代 DOM 树构建及性能之道

• 前端每周清单第 9 期：React Studio 1.0.2、ECharts GL 1.0 alpha 发布；向 jQuery 用户介绍 Vue

• 前端每周清单第 8 期：React 16 即将发布，微软发布跨平台开发框架 ReactXP，Twitter Lite 的构建之道

• 前端每周清单第 7 期：Next.js 2.0 发布，Vue.js 2.2 完整 API 手册，Safari 10.1 新增系列重要特性

• 前端每周清单第 6 期：Angular  4.0 学习资源，Egg.js 1.0 发布，六问 CTO 程序员如何成长

• 前端每周清单第 5 期：jQuery 3.2 发布，滴滴采用 Vue 2.0 重构 Web App、饿了么 PWA 实践经验分享

• 前端每周清单第 4 期：React Router 4.0 发布、Firefox 52 默认支持 WebAssembly、苹果热修复门盘点

• 前端每周清单第 3 期：Instant App 将至，WebAssembly 将获默认支持，PWA 实践渐增

• 前端每周清单第 2 期：Vue 2.2 发布，React 在 GitHub 突破 6 万 star

• 前端每周清单第 1 期：PWA 将与安卓原生平起平坐

一线动态

• GitHub 使用 Electron 重写桌面客户端

• Node.js v8.0 新特性一览

• 最终，JavaScript 成为了一流语言

• TypeScript 2.3 新特性：泛型参数默认值、异步迭代器等

• Node.js 根本没有 float：浮点反序列化错误背后的故事

• Facebook 开源 JavaScript 代码优化工具 Prepack

• V8 不再使用基准测试引擎 Octane

• Slack 团队切换至 TypeScript，简化大型 JS 代码库管理

• Phantom.js 维护者 Slobodin 退出，项目未来将何去何从？

• 深入研究 Chrome：Preload 与 Prefetch 原理，及其优先级

• TypeScript 2.0 正式发布 |  面向未来兼容：用 ES2015+/TypeScript 开发 Node.js 项目

• Bloomberg 开源 BuckleScript 1.0 助力 JS 平台大规模高性能软件开发

• 微软发布 TypeScript 2.0 RC 版本

• Chrome 53 支持 Shadow DOM、PaymentRequest 等规范

• 减少内存消耗：谷歌 V8 JS 引擎引入新解释器 Ignition

• Windows 10 推出周年更新，Edge 浏览器支持扩展并改进 JavaScript 支持

• 个人可申请微信小程序！附小程序学习资源

• 为快速生成基于 JS 的 Web 应用，微软发布系列工具

• Chrome 开始集成图形识别 API，一行代码识别人脸

• 关于 Node.js 存在反序列化远程代码执行漏洞的安全公告

• Web APP 实现水平滑页翻页交互效果的要点解析

• 阿里开源的企业级 Node.js 框架 egg 应如何看待？

• 一次一个微优化，改进 Node.js 应用的吞吐量

• Opera 推出实验性概念浏览器 Neon

• Webpack 2 最终版本发布，聚焦文档内容提升

• NativeScript 2.2 将 Webpack 引入 Angular 项目

• Windows 10 推出周年更新，Edge 浏览器支持扩展并改进 JavaScript 支持

• Webpack Dashboard 迅速流行，Webpack 构建信息一目了然

• Chrome 54 终结 YouTube 的 Flash 内嵌技术

• V8 引擎内存消耗的分析和优化

• Facebook 开源 JavaScript 包管理器 Yarn

• NodeJS 第 7 版升级到 V8 5.4 版

• Angular 1.X 在 Firefox 扩展开发中遭禁用

• Linux 基金会迎来了 JavaScript 社区

• Vue.js 作者尤雨溪加盟 Weex 项目担任技术顾问

• 用 Visual Studio Code 调试 iOS Web 应用？美梦成真！

• NativeScript 2.2 将 Webpack 引入 Angular 项目

• JavaScript 音频库 Howler.js 2.0 版改进了 Web 音频的播放

• HTTP/2 的应用实战：每天 400gb 图片

• Facebook 发布新工具 Create React App

• Web 在努力变身为 OS，加强版 Web 应用将有新表现

• Bootstrap 将放弃对 IE9 的支持

• TypeScript 2.1 新特性一览

• Firebug 停止更新和维护

• NativeScript 迎重大更新, 支持 Web Workers 规范

• 天猫即将不支持 IE8

• 进入里程碑阶段的 WebAssembly 会威胁到 JS 吗？

• Chrome 和 HTTPS：安全 Web 的征途

• Next.js 开源，提供基于 React 的简单通用 JS 框架

• 美国成人网站使用 WebSocket 绕过广告屏蔽插件

• Dart 最新消息：Angular 2 Dart 及 Flutter 发布

• npm 4.0 废弃 Prepublish 生命周期脚本

五、知识积累 More than React

• More than React（五）异步编程真的好吗？

• More than React（四）HTML 也可以静态编译？

• More than React（三）虚拟 DOM 已死？

• More than React（二）组件对复用性有害？

• More than React（一）为什么 ReactJS 不适合复杂的前端项目？

ES6

• 深入浅出 ES6：魔力四射的生成器 Generators 续篇

• 深入浅出 ES6：集合

• 学完 Babel 和 Broccoli，马上就用 ES6

• 深入浅出 ES6：Symbols

• 深入浅出 ES6：箭头函数 Arrow Functions

• ES6：掌握解构 Destructuring

• 一文掌握 ES6 中的不定参数和默认参数

• 深度了解 ES6: 模板字符串

• 深度了解 ES6：魔力四射的生成器 Generators

• ES6 才是彻底改变了 JS 代码的编写方式

• 一文看透丑陋而又神奇的 JSX

• 深入浅出 ES6：代理 Proxies

• 深入浅出 ES6：集合

小程序

• 刷爆朋友圈的“微信应用号事件”始末及相关资料整理

• 细思极恐：微信小程序会让前端开发者失业

• 支付宝正在研发“小程序”，你怎么看？

• 关于小程序，你所关注的 10 个问题

• 如何理解小程序的各种“没有”？

• 张小龙首次全面阐述小程序，定档 1 月 9 日上线（内附演讲全文）

• 一起脱去小程序的外套和内衣 - 微信小程序架构解析

• 以实践真正理解小程序

• 群分享预告：开发小程序 +，轻芒所踩过的坑

• 创建一个兼容微信小程序的 Web 框架

• 微信小程序剖析：原生的实时 DOM 转 Virtual DOM

• 如何在 Chrome 浏览器上运行微信小程序？

• 微信小程序剖析 | 运行机制及框架原理

• 微信小程序来了，产品和运营就不需要跪求程序员了？

六、往期活动

• 优秀的前端程序员为什么要加入前端之巅？

• 【前端之巅】淀粉恩爱集

• 群分享预告：优雅地管理数据状态？The Redux Way in 广发证券

• 「 全栈式前端 」已来，你来不来？

• 升级你的前端开发思维

• 不为畅销而出书？主编，你这是要闹哪样？！

• 群分享预告：百度搜索对 PWA 的探索和初步实践

• 前端技术日新月异，技术人如何避免掉队？BAT 大咖们这样说！

• 前端工程师情人节专属树洞

• 群分享预告：PhantomJS & NodeJS 在京东网站前端监控平台的最佳实践

• 群分享预告：滴滴公司级组件库以及 MIS 系统的技术实践分享

• 滴滴公共 FE 团队答群友问

• 群分享预告：滴滴 WebApp 实践经验分享

• 群分享预告：扒一扒滴滴公共 FE 团队都做了什么？

• 【粉丝福利】第 1 弹：学 React？速戳领书！

• 群分享预告

• 群分享预告：Coding WebIDE 前端架构变迁

• 群分享预告：PhantomJS & NodeJS 在京东网站前端监控平台的最佳实践

• 群分享预告：滴滴 WebApp 实践经验分享

• 群分享预告：扒一扒滴滴公共 FE 团队都做了什么？

视野拓展

InfoQ 主办的移动和前端开发领域的精品大会【GMTC 2017】将于 6 月 9～10 日在北京举行，作为首届以“大前端”为主题的大会，GMTC 涉及移动、前端、跨平台、AI 应用等多个技术领域，帮助你方方面面提高技术水平。扫描下图二维码，前往官网了解详细信息！

前端之巅

「前端之巅」是 InfoQ 旗下关注前端技术的垂直社群，加入前端之巅学习群请关注「前端之巅」公众号后回复“加群”。推荐分享或投稿请发邮件到 editors@cn.infoq.com，注明“前端之巅投稿”。