专栏首页某熊的全栈之路前端每周清单第 49 期:Webpack 4 Beta 尝鲜,React Windowing 与 setState 分析

前端每周清单第 49 期:Webpack 4 Beta 尝鲜,React Windowing 与 setState 分析

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

新闻热点

国内国外,前端最新动态

  • iOS 11.3 与 macOS 10.13.4 即将包含 Service Workers: 本周,Safari Technology Preview 48 版本发布,其引入了包括密码自动填充机制变更、启用 Storage Access API 等一系列特性。更值得一提的是,这也意味着 iOS 11.3 与 macOS 10.13.4 即将包含 Service Workers,从而允许开发者利用后台脚本提供更强大的可离线使用的 Web 应用;此外,iOS 11.3 还允许将 Web Apps 添加到屏幕桌面,并且支持 Manifest 文件,更多 PWA 相关资料参考这里
  • Parcel v1.5.0 发布: 虽然发布不久,但是 Parcel 已然在 Github 上获取了超 17000 的点赞,并且在 npm 上有超百万的下载量与数十位来自各地的贡献者。Parcel v1.5.0 是发布以来的重量级更新,其引入了 JavaScript Source Map,WebAssembly 支持,Rust 与 WebAssembly 转换的支持,配置文件缓存失效,.env 文件等特性,并且进一步优化了小型项目的编译效率。
  • Expo SDK v25.0.0 发布: 本周发布的 Expo SDK v25.0.0 基于最近的 React Native 0.52 版本,其带来了如下新特性:支持在独立应用中打包字体、视频与音频资源;优化发布通道,允许回滚更新,交叉发布,查看历史等;为 AWS Cognito 提供了开箱即用的支持。除此之外,该版本还优化了 Calendar、MailComposer、GLView 等一系列接口与扩展。
  • Bootstrap 4: 尽管等待了多年,但是 Bootstrap 4 最终还是发布了;正式版本与上一个 Beta 版本相比未有重大变化,主要着眼于部分错误修复与提升。本版本中优化了打印样式与工具类,添加了额外的边辅助函数,更新了 $spacers$sizes 映射,并且修改了主题文档等。

开发教程

步步为营,掌握基础技能

  • webpack 4 beta  尝鲜: 本周,webpack 4.0.0-beta.0 发布,本文即是对于 Webpack 4 的特性与使用进行简要介绍。Webpack 4 为我们带来了如下特性:多场景下更好的性能提升,更好的默认配置,支持 package.json 中的 sideEffects 配置,更好的 JSON Tree Shaking 支持,更新到 UglifyJS2,更多的类型支持,WebAssembly 支持,取消 CommonsChunkPlugin 替换为默认优化配置。更多 Webpack 相关资料参考这里
  • 有趣的 JavaScript Proxies 用法: JavaScript 中还有很多尚未广泛使用的新特性,JavaScript proxies 可能就是其中之一,它能够在运行时复写或者拦截某个对象的属性以及方法。本文中,作者使用 Proxy 完成了几个有趣的小功能:仅有二十行代码的 API SDK,以可读性更好的方式查询数据属性值,监控异步函数调用等。更多 JavaScript 学习参阅现代 JavaScript 开发基础
  • 一些有趣的 ECMAScript 2017 尚未接纳的提案: 随着 Polyfills 与转换器的流行,很多还处于早期的提案在完成之前就在开发者之间获得了极大的欢迎,本文即是对 ECMAScript 2017 尚未接纳的提案中一些有趣的进行分享。作者首先讨论了 ECMAScript 提案的五个进程,然后讨论了 Asynchronous Iteration, Class Improvements, Class Decorators, Import Function, Observables, Do Expression, Optional Chaining 等特性。更多 JavaScript 学习参阅现代 JavaScript 开发基础

工程实践

立足实践,提示实际水平

  • 利用 Windowing 创建高效的 React 视图: 本文是 bvaughn 讨论 React 性能、搜索与应用架构相关演讲上的 Presentation,他着眼于到底是什么拖慢了 React 应用性能,并且分享了如何解决问题以及学到的经验。值得一提的是,他讨论了很多关于 Windowing 工作原理,以及如何仅创建那些用户可见数据的实践;更多 React 教程参阅 React 与前端工程化实践
  • SPA 技术选型时的考量: 本文作者讨论了他在对于网页的技术选型中,是否应该采用 SPA 方案的考量,需要注意的是,本文带有了较多的主观态度,请批判性地看待。作者提出的考量点包括:速度与性能,高开发成本,不稳定性,不易长期维护,低安全性,重造轮子,社交媒介属性,低可访问性,对于内存的浪费等。 更多 Web 架构相关资料参考这里
  • 基于 IntersectionObserver 进行资源延迟加载: 本文中,我们将会讨论页面滚动交互里经常涉及到的资源懒加载,不仅仅是图片,而是基于 IntersectionObserver 的任何资源懒加载。本文也会讨论如何根据元素的可见性来判断是否触发某个函数,更多 Web 性能优化相关内容参考 Web 开发基础与工程实践

深度阅读

深度思考,升华开发智慧

  • why is setState asynchronous?: MobX 的作者,mweststrate,近日提了某个 Issue 讨论为何 setState 需要设置为异步。我们耳熟能详的原因是 异步的 setState 用于进行异步渲染,并且确保 state 对象是反馈了那些被渲染好的状态。而 Gaearon 也澄清了这个问题,异步的 setState 主要是为了保证内部一致性,并且为后续的并发更新打下基础。更多 React 教程参阅 React 与前端工程化实践
  • JavaScript 工作原理系列:Web Workers 浅析与典型的使用场景: 本文是 How JavaScript Works 系列文章的第七篇,主要讨论了 Workers 的类型,它们的特性与作用,以及它们在不同的场景下的优势与不足。众所周知的是,异步代码以及 Event Loop 机制能够帮助缓解 JavaScript 单线程的不足;而 Web Worker 则是能够创建轻量级的、浏览器内线程,从而运行那些并不会阻塞 Event Loop 的代码。Web Worker 典型的使用场景包括了 Ray tracing,数据加解密,数据预抓取,Progressive Web Apps 以及拼写检查等等;更多 Web Worker 相关资料参考这里
  • Firefox 58: The Quantum Era Continues: 对于 Mozilla 而言,2017 年是个非常有意义里程碑,正式发布了 Firefox Quantum,通过彻底重写的方式极大地提升与优化了 Firefox 的性能与使用体验。本文即是对于 Firefox 58 版本正式发布时,其带来的新特性进行解读:非主线程渲染、后台 Tab 限流、WebAssembly 流式编译器、CSS 字体呈现、新的 Promise 特性等,更多 Firefox 59 的规划可以查看这里

开源项目

乐于分享,共推前端发展

  • Rejoiner: Rejoiner 是由 Google 开源的,能够基于 gRPC 或者其他的 Protobuf 资源自动生成统一 GraphQL Schema 的工具。它致力于灵活化 GraphQL 的定义与交互,方便多数据源连接。
  • CSS Gridish: CSS Gridish 能够基于产品的网格设计,自动生成多个资源文件:包含画板与网格布局设计的 Sketch 文件,包含了 Flexbox 兼容的 CSS/SCSS CSS Grid 代码,能够用于监测网页布局的 Chrome 插件。需要注意的是,该工具并不致力于辅助构建网格,而是帮你自动化地生成产品开发全流程中需要的资源文件,更多信息查阅这里
  • Greenlet: Greenlet 能够将异步函数移入独立线程中,可以看做 workerize 函数的单函数简化版。不过需要注意的是,Greenlet 仅支持纯函数,其会在独立的作用域中运行这些函数。
  • Purgecss: 当我们开发网页时,往往会使用 Bootstrap,Materializecss 以及 Foundation 这样的 CSS 库;不过实际上我们仅会使用其中的部分样式,其余的样式对于当前界面而言都可以算作冗余样式。Purgecss 即可以帮助我们清除界面上的无用样式,它能够自动分析输入的 HTML 文件与 CSS 样式,并且进行选择器匹配,最终移除无用的 CSS 代码。

巅峰人生

前端之巅

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何阅读大型前端开源项目的源码,授人以鱼不如授人以渔

    目前网上有很多「XX源码分析」这样的文章,不过这些文章分析源码的范围有限,有时候讲的内容不是读者最关心的。同时我也注意到,源码是在不断更新的,文章里写的源码往往...

    一墨编程学习
  • 2 年前端面试心路历程(字节跳动、YY、虎牙、BIGO)

    https://juejin.im/post/5e85ec79e51d4547153d073820ed

    闰土大叔
  • 前端基础知识整理汇总(下)

    接上前面两期的内容,《前端基础知识整理汇总(上)》、《前端基础知识整理汇总(中)》,如果你还没有看前面内容的话,建议你可以点开连接看看,也可以收藏着有空的时候,...

    前端达人
  • Taro 3.4 beta 发布: 支持 Preact 为应用开辟更多体积空间

    项目体积是困扰小程序开发者的一大问题,如果开发者使用 Taro React 进行开发,更是不得不引入接近 100K 的 React 相关依赖,这让项目体积变得更...

    玖柒的小窝
  • React 教程:React 快速上手指南 [每日前端夜话0x2B]

    前端和 JavaScript 是一个奇怪的世界。大量不断推出的新技术的同时,也在被不需要它们的人嘲笑,往往很多人都会这样做。我们有时会对不断涌现的信息、库和讨论...

    疯狂的技术宅
  • 大厂的面试题

    Qiang
  • (React 框架)React技术

      当时他们的团队在市面上没找到合适的MVC 框架,就自己写一个 JS 框架,用来架设 instagram(图片分享社交网路),2013年开源

    py3study
  • 从零自己编写一个React框架 【中高级前端杀手锏级别技能】

    为了降低本文难度,构建工具选择了parcel,欢迎加入我们的前端交流群~ gitHub仓库源码地址和二维码都会在最后放出来~

    Peter谭金杰
  • 7.8 月份新出炉大厂面试题100道整理(原题 + 精讲 1.2万字)(一)

    大家喜欢的可以给笔者点个赞,花费了很长时间整理,这些面试题更适合中级前端,和需要进阶的高级前端的小伙伴,查缺补漏,为金九银十保驾护航???

    用户6835371
  • React入门看这篇就够了

    React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instag...

    random_wang
  • React 同构直出优化总结

    一提到 React,不得不提同构,同构基于服务端渲染,却不止是服务端渲染。本文结合手 Q 家校群上的具体实践,分享一些同构的 Tips 及优化成果。

    腾讯AlloyTeam
  • React入门看这篇就够了

    React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instag...

    Fundebug
  • 番外篇:入门React

    原生js代码乱七八糟的时候,那就来体验一下React。 Tip:内容有点乱,秘籍在最后

    用户3467126
  • 送你一份最新的前端周报

    Vue 3.2 正式发布,<script setup> + TS + Volar = 真香

    落落落洛克
  • 2022必备react面试题 附答案

    StrictMode 是一个用来突出显示应用程序中潜在问题的工具。与 Fragment 一样,StrictMode 不会渲染任何可见的 UI。它为其后代元素触发...

    用户9255528
  • 前端每周清单第 40 期: JS 的 Core 与 Cost,Node 内存溢出调试,Software 2.0

    前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注...

    王下邀月熊
  • 新鲜出炉的前端面经

    面试挺累人的,每天下班后赶回家面试,有时候干脆找个会议室偷偷摸摸面试。面了将近一个月,基本上全都过了,但由于各种因素,又都拒了。。。现在又要开始新一轮的面试了,...

    尹光耀
  • 2020-5-30-理解React如何实现批量状态更新

    在React的生命周期中发生的多次setState的变更会进行合并,最终减少推送给浏览器的DOM变更次数,从而提升前端性能。

    黄腾霄
  • 【从青铜到钻石】3 年创业公司成长经历 && 面试总结

    首先介绍一下我自己,17 年毕业于一所 211 学校,但是由于大学四年驰骋在召唤师峡谷,毕业时也没有找到一份大厂的工作,随便找了一家创业公司签了三方就去了。好在...

    Sneaker-前端公虾米

扫码关注云+社区

领取腾讯云代金券