BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

前端每周清单第 45 期: Safari 支持 Service Worker, Parcel 完整教程, 2017 前端大事件

| 作者 王下邀月熊 关注 33 他的粉丝 发布于 2017年12月29日. 估计阅读时间: 13 分钟 | QCon上海2018 关注大数据平台技术选型、搭建、系统迁移和优化的经验。

前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号(ID: frontshow),及时获取前端每周清单。

本期是 2017 年的最后一期,不知不觉陪伴大家已经一年了;非常感谢所有阅读过清单的同学的支持,山高水远,来年再见~

新闻热点

国内国外,前端最新动态

  • Safari 支持 Service Worker 了!: 在昨天发布的 Safari 46 技术预览版里,发布了一个重大更新,在新的桌面版 Safari 里将默认打开 Service Worker,这意味着苹果正在逐步接受 PWA,我们将进入 PWA 的时代。早在今年 7 月份,就有人问过 WebKit 团队是否将支持 Service Worker,当时他们的回答是正在考虑,后来在 8 月份变成“In development”,现在终于正式发布了。PWA 的另一个核心特性 Web App Manifest,苹果表示也正在开发中,按开发进度可能几个月后就能与我们见面。

  • GraphQL.js 0.12.0 发布: 该版本包含了很多的新特性与提升,将之前部分实验特性进行了规范化适应,显著地提升了 Flow 类型的质量。开发者在升级到该版本时需要仔细评估其对于现有系统的影响,特别是对于那些依赖 GraphQL.js 的构建工具等,更多详细的版本特性介绍请查看原文。

  • Webpack Cli 2.0.0 发布: Webpack CLI 是 Webpack 辅助构建工具,能够将应用构建所需要的配置代码交由命令行工具去创建,尽量减少开发者所需要的操作。在 2.0 版本中 Webpack CLI 进一步优化了易用性,允许在配置中使用 ES6 等语法,添加了 v8 编译缓存,同时允许开发者更方便地反馈问题与启动本地服务器。

开发教程

步步为营,掌握基础技能

  • 你需要了解的关于 Parcel 的一切: Parcel 是新近开源的零配置、高性能的 Web 构建工具,其相较于 Webpack 更为简单易用;Parcel 内置了开箱即用的开发服务器,其会自动分析依赖、监测文件变化,并且完成线上热替换。本文即是对于 Parcel 用法的介绍,首先分析了 Parcel 的优势,然后具体讨论了现代 Web 开发中常见的技术栈的集成方式,包括 React、Vue、TypeScript 等等;更多 Parcel 相关资料参考这里

  • TypeScript 实战教程: 本文通过实例来学习 TypeScript 的基础特性,首先介绍了如何搭建配置 TypeScript 开发环境,以及主要的编译选项的含义;然后依次讨论了 TypeScript 的语言特性,包括变量、模块、类与对象、接口、装饰器、迭代器等等。更多 TypeScript 教程参考现代 JavaScript 开发:语法基础与工程实践

  • 基于 Mobx-state-tree 的应用状态管理: 本课程是 Mobx 的作者 Michel Westrate 发布在 egghead 上的,详细介绍 Mobx-state-tree 基本使用的系列视频课程。开发者能够在该课程中学习到如何声明数据模型、如何管理数据模型的生命周期等等,并最终能够使用 MST 中开箱即用的异步 Action、Patch、Snapshot、Middleware 等特性来编写健壮可扩展的现代应用。更多 MobX 相关教程参考现代 Web 应用架构与性能调优

  • 浏览器 user-agent 简史: 很多人都知道浏览器的 user-agent 字符串,服务器端通过这个字符串进行客户端的浏览器、操作系统、加密等级、浏览器语言、渲染引擎和版本信息的识别。从 1993 年 NCSA 发布首款浏览器 Mosaic 以来,这个字符串经历了纷繁复杂的变化,本文即是介绍 user-agent 字符串的演变简史。更多 DOM 相关教程参考现代 Web 开发基础

工程实践

立足实践,提示实际水平

  • NetSPI SQL 注入指南: 本 Wiki 致力于提供针对数据库管理系统(DBMS)的, SQL 注入攻击的识别、漏洞利用、提权等全流程的完整教程。本教程主要分为五大步骤,依次介绍了注入点分析、DBMS 识别、注入类型、注入技巧、攻击型查询载荷等内容;更多 Web 安全相关资料参考这里

  • Node.js 中的 CPU 密集操作: Node.js 是典型的基于事件循环的单线程架构,其在处理 CPU 密集型任务的时候不可避免地会碰到瓶颈;本系列文章即是探讨如何在 Node.js 中处理 CPU 密集型代码。首篇文章模拟了密集型处理环境,使用 fork 来创建子进程处理任务,不过这种方式效率较低,并且会带来较大的资源占用;第二篇文章则介绍了基于 Redis 的 Kue 消息队列,如何利用 Kue 来异步多节点地处理任务等。更多 Node.js 教程参考深入浅出 Node.js 全栈架构

  • React Native 事件机制探究: React Native 在某种程度上可以简单看做 Javascript-Java-Xcode 转换器,因此 Raect 代码与原生代码之间的事件交互无疑是非常重要的部分;本文即是详细分析了 React Native 中的事件机制。本文首先介绍了 Device Event Emitter 的设计与单例模式,然后讨论了 RCTDeviceEventEmitter, RCTEventEmitter 等 JavaScript 与原生代码之间的桥梁;接下来本文以简单的原生组件为例介绍了如何完成原生与 JavaScript 之间的事件传递,最后还分析了为何 RN 中没有冒泡机制。更多 React Native 相关资料参考这里

  • 使用 Apollo Client 进行状态管理的未来: 随着应用体积的增加,其状态管理的复杂性也会大幅度提升;而目前 Apollo Client 已经能够帮助开发者处理远程数据交互,本地的状态数据则依然由 Redux、MobX 这样的状态管理工具负责。本文则是介绍如何利用 Apollo Link 来实现一致性的本地状态管理,统一了远程数据查询与本地状态操作;更多 GraphQL 相关资料参考这里

深度阅读

深度思考,升华开发智慧

  • React 与 Vue.js 的异同: 一年来 React 与 Vue.js 都发生了巨大的变化,取得了长足的发展;本文则是在年末的时候对二者进行了一次深度盘点。本文依次从性能、模板与 JSX 的语法、CSS、生态系统、状态管理等多个角度进行了分析;更多 React 相关资料参考这里

  • 对于 REST is the new SOAP 的回应: 上周的清单中,我们推荐了 Rest is the new SOAP 这篇文章,其列举了诸多 REST 的不足;而本文即是 Phil Sturgeon 的辩驳回应。本文对于 Rest is the new SOAP 几乎是逐字逐句地进行了反驳,对比着看也是能够加深对于 REST 的理解;更多 REST 的讨论参考这里服务端应用程序开发基础

  • 2017 前端领域发生的重大事件盘点: 年末多盘点,本文则是根据 Github, Google Trends, Stack Overflow, NPM 等站点的统计数据,对 2017 年前端领域发生的重大事件进行了盘点。包括了前端框架、ECMAScript、WebAssembly、包管理器、样式、TypeScript、状态管理、GraphQL、NapaJS 等方面;此外,在上周的清单中我们推荐了 2017 JavaScript Survey,本周作者则从统计的数据中提取出了十条要点

开源项目

乐于分享,共推前端发展

  • Boardgame.io: Boardgame.io 是基于 React 的游戏框架,该框架允许游戏开发者将游戏的规则转化为一系列的简单函数,在用户执行某个操作之后,能够通过这些函数的组合来改变游戏的状态。该框架使得开发者专注于设计游戏逻辑本身,而不需要考虑或者编写任何的网络或者服务端代码。

  • lowdb: Lowdb 是基于 Lodash 的本地 JSON 化数据库,支持 Node、Electron 以及浏览器环境。Lowdb 提供了与 Lodash 一致的接口,方便开发者快速上手使用;同时 Lowdb 编写不同的 Adapters 来适应不同的存储环境。

  • react-content-loader: react-content-loader 允许开发者利用 SVG,来创建模拟即将加载的内容块结构的提示条,其有点类似于 Facebook 的卡片加载样式。

  • stdweb: stdweb 致力于构建 Web APIs 与 Rust 之间的绑定,从而允许 Rust 与 JavaScript 之间的高可交互性。stdweb 允许在 Rust 中直接插入 JavaScript 代码,其可被编译为 WebAssembly,并且提供了在 Rust 与 JavaScript 之间进行值传递的机制。

  • 轻舟: 轻舟是手淘团队提供的,基于云端一体化体验一站式开发和运维 APP 的产品。它在体验方面实现了全流程支持、一站式开发环境,无缝整合端上能力与云上服务;依托手机淘宝多年技术积累强力赋能,底层的 WEEX 架构让混合式 APP 在拥有动态性的同时毫不丢失原生体验。

巅峰人生

  • 18 年互联网老兵童剑:我与技术的爱情长跑: 童剑,白山联合创始人兼首席技术官,EGO 北京分会会员。前新浪研发中心总经理,2016 年 5 月加盟白山,迅速搭建和完善各产品线技术梯队,构筑云链产品技术体系,带领团队推出云存储、云聚合产品,助力白山抢先布局云后市场。本文即是童剑对于自己十八年技术之路的心得分享,包括了自己从出入职场、转型管理到创业新征程中的经验与感悟等。

前端之巅

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


感谢徐川对本文的审校。

给InfoQ中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博(@InfoQ@丁晓昀),微信(微信号:InfoQChina)关注我们。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT