写点什么

前端每周清单第 51 期: React Context API 与模式变迁, Webpack 与 Web 优化, AI 界面生成

  • 2018-02-22
  • 本文字数:3540 字

    阅读完需:约 12 分钟

看新闻很累?看技术新闻更累?试试下载 InfoQ 手机客户端,每天上下班路上听新闻,有趣还有料!

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

新闻热点

国内国外,前端最新动态

  • Chrome 即将标识所有的 HTTP 站点为非安全: 近日,Google Chrome 宣布,他们将会在 2018 年七月左右发布的 Chrome 68 版本中,开始把所有的 HTTP 站点标识为非安全;此举也可能标志着非 HTTPS 站点的终结。开发者可以使用最新版本的 Lighthouse Node.js 命令行工具来检测某个网站中是否存在了基于 HTTP 协议加载的资源,并且能够自动地判断是否已经有了相对应的 HTTPS 版本。
  • Rollup 开始支持代码分割: 在近日发布的 0.55 版本中,JavaScript 模块打包工具 Rollup 终于引入了代码分割,这个千呼万唤始出来的特性。一直以来,Rollup 都是 React, Vue, D3, Moment, Three.js, Ember, Angular, Babylon, Jest, Bootstrap, Leaflet, Prettier 这样的工具库的首选,而该特性的加入也意味着其逐步成为了应用打包工具的候选之一。
  • Microsoft Edge 与 Windows 10 进一步拥抱 PWA : Edge 17 即将内置 Service Workers 与 Push Notifications,同时 Microsoft Store 将会把那些手动提交的 PWA 应用于原生应用同等对待。本文即是 Microsoft Edge 技术团队对于 PWA 的介绍,对于它能够解决的问题的畅想以及未来如何在 Windows 10 中保证 PWA 的表现。

开发教程

步步为营,掌握基础技能

  • React 16.3 新特性介绍: React 16.3-alpha 近日登陆 npmjs,并且能够引入到项目中,本文即是对于 16.3 版本中的新特性进行介绍。该版本引入了新的 Context API,允许开发者使用 React.createContext() 生成两个关联组件;重构了生命周期回调,废除了 componentWillMount, componentWillUpdate, componentWillReceiveProps,引入了 getDerivedStateFromProps;提供了 StrictMode,以保证代码符合最佳实践;更新了 React Developer Tools 等。更多相关资料参考 React Reference
  • Service workers 介绍与使用: Service workers 可以看做 Progressive Web Apps 的核心组成,提供了资源缓存与通知推送的功能,这也是 Web 应用与原生应用当前的区别之一。 本文会包含 Service Worker 的基本概念与使用,具体讨论了后台处理、离线支持、资源预抓取、网络请求缓存、安装与基础使用等内容。更多相关资料参考 PWA Reference
  • React’s ⚛️ new Context API : 本文将会详细介绍 React 16.3 版本中提供的新 Context API,它主要包含了三个部分:React.createContext 允许输入初始值,并且返回包含 Provider 与 Consumer 的对象。Provider 组件被放置在组件树中的较高层,允许传入名为 value 的属性,而 Consumer 属性则可以放置在组件树的任意位置,通过传入渲染回调函数的方式来接收 value 参数。更多相关内容参阅 React 与前端工程化实践系列。

工程实践

立足实践,提示实际水平

  • GraphQL 应用中的五个常见问题与规避方案: 本文中,我们将会讨论如何尽可能地发挥 GraphQL 的长处而绕过其中的坑。作者在本文中讨论了以下内容:Schema duplication, Server/client data mismatch, Superfluous database calls, Poor performance and Boilerplate overdose 等。对于每个问题,作者首先进行了描述,然后介绍了在 Vulcan 的开发过程中是如何定位,并且解决的。更多相关内容参考 GraphQL Reference
  • Redux 模块与代码分割: Twitter Lite 一直在使用 Redux 作为其状态管理框架,并且在不断地寻找合适的模块与代码风格方案。虽然 Redux 默认的接口风格并非面向那种持续加载的情形,本文即是介绍了 Twitter Lite 如何通过合理的代码风格来支持渐进式代码加载,该模式已经在生产环境下经受了数年的检验。更多相关内容参考 Web 开发基础与工程实践系列。
  • Addy Osmani: 使用 Webpack 进行 Web 性能优化: 现代 Web 应用常常会使用所谓的构建工具来创建部署到生产环境的包体,该包体往往是被优化的、压缩的,尽可能减少用户的消耗。本文则是 Addy Osmani 编写的,基于 Webpack 的 Web 性能优化教程,讨论了如何利用代码分割等特性来移除不用的代码片,并且尽可能压缩包体,来保证最小的网络消耗与处理时间。更多相关内容参考 Web 开发基础与工程实践 / 性能优化系列。

深度阅读

深度思考,升华开发智慧

  • React 模式演化: 本文将会深度探讨 React 生态圈中流行的架构模式,这些架构模式能够提升代码的可读性,清晰性,并且保障代码的可组合性与可重用性。本文将会依次介绍 Conditional Render, Passing Down Props, Destructuring Props, Provider Pattern, High Order Components, Render Props, 等等模式。更多相关内容参阅 React 与前端工程化实践系列。
  • 前端面试手册: 不同于传统的软件工程师的技术面试,前端工程师的面试可能较少地关注算法,更多地瞩目于交互相关以及 HTML,CSS,JavaScript 这些领域相关的知识。本文作者在遍寻了现存的面试手册之后,未发现有完全满意的,前端相关的面试手册;因此编写了此文,以共享自己在前端工作中的知识积淀,本文也可以看做对于著名的 Front-end Job Interview Questions 的回答。更多相关内容参考 Awesome Web Reference
  • 如何训练能够将设计稿转化为 HTML 与 CSS 的 AI 程序: 随着人工智能与深度学习技术的发展,我们也可以预见它们将逐步地改变前端开发中的一些领域。AI 能够帮助我们提升原型构建的速度,降低软件构建的门槛。这两年来,随着 Tony Beltramelli 的 pix2code paper 以及 Airbnb 开源 sketch2code ,我们可以逐步地使用 AI 来帮助我们构建简单的页面。不过,目前前端开发自动化方面最大的瓶颈可能就是计算能力,但是这并不妨碍我们来学习了解相关的深度学习基础算法,以及如何训练数据,如何使用模型来进行界面转换。本文中,作者会循序渐进地带领读者来构建基础的,能够将某个设计稿转化为 HTML 与 CSS 代码的神经网络。更多相关内容参阅 Awesome Web Reference
  • 2018- 有货移动 Web 端性能优化探索实践: 在移动互联网的时代里,对于一个 Web 站点来说,移动端的用户体验尤为重要。现代 web 站点的设计和开发都是以移动优先作为第一原则,我们也专门为了移动端的 Web 站点做了相应的优化和提升。这个过程中任何一个环节的延迟都会造成性能瓶颈,降低用户继续访问的可能性,所以我们在服务器端,浏览器端,网络加载,多个方面做了一系列的优化工作。

开源项目

乐于分享,共推前端发展

  • Automerge : Automerge 是类似于 JSON 的,能够用于构建协同 JavaScript 应用的数据结构。其核心特性在于允许多个用户并发修改,并且会进行自动地合并;目前,很多的 JavaScript 应用会将状态保存在 JSON 文档这样的模型中,Automerge 即可以保证这种使用的一致性,还能够提供原子化同步与合并等扩展功能。
  • winamp2-js : winamp2-js 是利用 HTML5 与 JavaScript 对于 Winamp 2.9 的覆写,包含了如下特性:支持动态换肤,支持通过拖拽的方式加载本地皮肤文件或者资源文件,支持自定义操作按钮等。
  • Rekit : Rekit 是完整的,开发基于 React,Redux,与 React Router 应用的工具集与解决方案。Rekit 首先提供了包容万象的编辑器,帮开发者自动进行了项目构建与文件布局,从而使得开发者能够更加专注于业务逻辑,而不是无止境的库、模式、配置文件等等。Rekit 提供了 opinionated 的架构模式,通过面向特性的分割方式,来保证应用的可扩展性、可测试性与可维护性。
  • WebAssembly Studio : WebAssembly Studio 是在线学习、实践、运行 WebAssembly 的工作台,它提供了基于 Web 的 IDE,支持用户将 C++ 或者 Rust 编译为 WebAssembly。同时,用户也可以本地运行该 Studio,只需要安装 Node.js 与 Webpack 然后运行即可。

巅峰人生

  • N26 是如何利用 JavaScript 构建面向银行业的微服务系统: N26 是来自德国的银行业初创项目,其 CTO Patrick Kua 在 ThoughtWorks 工作了十三年,积累了丰富的软件相关经验,并成功地带领技术团队为数十万用户提供优质的银行业服务。本文以对话的方式,注重于讨论 Patrick 的团队时如何选择语言与框架,如果处理测试、DevOps 以及持续集成等操作,如果部署微服务并提供高可用的服务。

前端之巅

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


感谢徐川对本文的审校。

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

2018-02-22 18:001863
用户头像

发布了 60 篇内容, 共 19.2 次阅读, 收获喜欢 9 次。

关注

评论

发布
暂无评论
发现更多内容

IDEA注释模板,惊艳了,动作要快,姿势要帅

碌碌无为小码农

Java 架构 程序人生 编程语言 经验分享

对管理金字塔游戏的感悟:管理的本质是协作

panda

管理

25 Prometheus最佳实践原则

穿过生命散发芬芳

Prometheus 1月月更

【译】什么是测试驱动开发

宇宙之一粟

测试驱动开发 1月月更

【架构训练营-模块一】

默光

微信 架构设计

ReactNative进阶(二十九):BloC 模式

No Silver Bullet

React Native 1月月更 BloC

来自未来的交互设计!当电影中的一切变为现实,设计师要如何进化?

博文视点Broadview

流批一体技术框架探索及在袋鼠云数栈中的实践

袋鼠云数栈

发布uniapp【uniapp 专题 02】

坚果

1月月更

基于Calcite的分布式多数据源查询

麒思妙想

MySQL 数据库 Apache Calcite gbase8a

全栈工程师?你知道全流程工程师吗?

蜜糖的代码注释

Java 开发 后端技术

架构学习【01】——架构图初探

tiger

架构实战营

从零开发区块链应用(七)--gin框架参数获取

杰哥的技术杂货铺

golang 区块链 gin框架

01uni-app基础教程 环境配置【uniapp专题1】

坚果

uni-app 1月月更

TiDB Cloud 上线亚马逊云科技 Marketplace,为全球用户提供云端一栈式实时 HTAP 数据库体验

PingCAP

企业上云后,不容忽视的管理工具-云管平台

行云管家

云计算 企业上云 云管平台 云管理

携程DBA负责人俞榕刚:OceanBase在携程的落地和实践

OceanBase 数据库

数据库 分布式 OceanBase 开源 携程 客户实践

从零开发区块链应用(十)--golang协程使用

杰哥的技术杂货铺

golang 区块链 gotoutine

架构设计图

风中奇缘

架构实战营 「架构实战营」

鉴释加入龙蜥社区,助力开源生态建设

OpenAnolis小助手

Linux 开源 社群 合作伙伴

2022年保障企业内网安全就用行云管家!免费试用!

行云管家

云计算 云平台 内网 云管平台

从零开发区块链应用(六)--gin框架使用

杰哥的技术杂货铺

golang 区块链 gin框架

03uniapp的生命周期【uniapp 专题 03】

坚果

小程序 uniapp 1月月更

一线开发人员,你对项目了解多少?

蜜糖的代码注释

Java 程序员 后端技术

Spring Boot Admin 添加报警提醒和登录验证功能!

王磊

微信的业务架构图和学生管理系统的毕业设计

Geek_8d5fe5

架构实战营

前端工程师 2022 年必备的 7 个工具

开源之巅

JavaScript node.js

微信业务架构图与“学生管理系统”毕设架构设计

唐尤华

架构实战营

从零开始学Mysql - 字符集和编码(下)

懒时小窝

微信业务架构图、学生管理系统毕业架构设计

石小天

架构实战营

五步实现HarmonyOS应用(ets)【鸿蒙开发 07】

坚果

鸿蒙 1月月更

前端每周清单第 51 期: React Context API 与模式变迁, Webpack 与 Web 优化, AI 界面生成_语言 & 开发_王下邀月熊_InfoQ精选文章