红帽白皮书新鲜出炉!点击获取,让你的云战略更胜一筹! 了解详情
写点什么

前端每周清单第 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:001578
用户头像

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

关注

评论

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

如何写好Prompt,让GPT 的回答更加精准

Bob Lin

人工智能 openai ChatGPT GPT-4 langchain

宏 | AI工程化部署

AIWeker

c AI AI工程化部署

唯品会商品列表数据接口(Vip.item_search)丨唯品会API接口

tbapi

唯品会商品列表数据接口 关键词搜索唯品会接口 唯品会API接口 唯品会商品数据接口 唯品会商品API接口

脉脉宣布全员下调,华为莫名奇妙躺枪。。。

Jackpop

[译]优秀的URL设计

南城FE

前端 后端 url

Wi-Fi 6 vs. Wi-Fi 6E: The differences between IPQ6018, IPQ6010 and IPQ5018

wallysSK

web3钱包进阶!从入门到精通,Bitget实现逆袭

EOSdreamer111

诚邀报名|探寻AI融合的前端开发之道:解除焦虑,构建核心竞争力

开放原子开源基金会

开源

诚邀报名|来开源项目维护者论坛,为项目可持续发展贡献您的声音

开放原子开源基金会

开源

开源时代:极狐GitLab如何保证软件供应链安全

极狐GitLab

vivo 容器平台资源运营实践

vivo互联网技术

容器平台 资源运营 利用率提升

Chappyz 生态迎利好:多链应用程序启动、100% 收入共享计划开启

EOSdreamer111

centos 7.6安装sealos和单机集群

麦兜

#issue 111538 MySQL 8.0 instant add/drop column 性能回退问题

ba0tiao

MySQL InnoDB

支付宝 v3 自签名如何实现

盐焗代码虾

Java 支付宝 签名 加签

使用 Taro 开发鸿蒙原生应用 —— 探秘适配鸿蒙 ArkTS 的工作原理 | 京东云技术团队

京东科技开发者

【Web安全】DVWA漏洞靶场搭建流程(win系统下)

Geek_Angel

网络安全 WEB安全 DVWA 实验靶场

一款双极锁存型霍尔位置传感器

攻城狮Wayne

诚邀报名|与你同行——开源教育晨雾中的早行者

开放原子开源基金会

开源

倒计时3天|开源开发者的技术年末盛典即将开启

开放原子开源基金会

开源

5G和云渲染将如何快速推进XR和元宇宙?

3DCAT实时渲染

云渲染 元宇宙解决方案

web3钱包进阶!从入门到精通,Bitget实现逆袭

股市老人

TDengine 创始人陶建辉出席 CIAS 2023 年会,为新能源汽车数据处理带来新思路

TDengine

tdengine 时序数据库

杭州悦数成立「悦数图技术陆家嘴数据智能研究院」,入驻上海陆家嘴金融城「双城辉映」平台

最新动态

顶级加密混淆混淆工具测评:ipagurd

Chappyz 生态迎重磅利好:多链应用程序启动、100% 收入共享计划开启

股市老人

大数据时代:我对大数据的发展趋势与前景展望

屿小夏

大数据

C 语言运算符详解

小万哥

c c++ 程序员 后端 软件开发

华为终于开奖了,结果有点可笑

Jackpop

软件开发

Geek_8da502

一起学Elasticsearch系列-深度分页问题

Java随想录

Java 大数据 elastic

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