前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号(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 架构相关资料参考这里

深度阅读

深度思考,升华开发智慧

  • 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,注明 “ 前端之巅投稿 ”。


前端每周清单第 49 期:Webpack 4 Beta 尝鲜,React Windowing 与 setState 分析,Web Worker 实战的更多相关文章

  1. 王下邀月熊_Chevalier的前端每周清单系列文章索引

    感谢 王下邀月熊_Chevalier 分享的前端每周清单,为方便大家阅读,特整理一份索引. 王下邀月熊大大也于 2018 年 3 月 31 日整理了自己的前端每周清单系列,并以年/月为单位进行分类,具 ...

  2. webpack 4.0尝鲜

    发布不久得webpack 4.0据说速度快了68% - 98%,然后还支持没配置文件,所以看起来很牛逼得样子 所以尝试一发 webpack和webpack-cli分离 现在执行webpack命令 必须 ...

  3. 前端模块化开发篇之grunt&webpack篇

    几个月前写了一篇有关gulp和browserify来做前端构建的博客,因为browserify用来做js的打包时可能有些麻烦(特别是在写React的时候),所以这里再强烈推荐一款js打包工具-webp ...

  4. 【活动】美团技术沙龙第49期:AI在外卖场景中的最佳实践

    美团技术沙龙第49期开始啦! 本次沙龙,美团外卖技术部专家会深入介绍AI在对话系统.图像处理.个性化推荐.智能营销等方向在外卖业务中的实践,希望与业界技术同学一起交流学习. 无论你从事智能搜索,或是算 ...

  5. ZooTeam 前端周刊|第 111期

    转: ZooTeam 前端周刊|第 111期 ZooTeam 前端周刊|第 111期 浏览更多往期周刊,请访问: https://weekly.zoo.team 基于Vue的前端架构,我做了这15点 ...

  6. 指尖前端重构(React)技术调研分析

    摘要:重构前的技术文档调研与分析,包括技术选型为什么选择react,应用过程中的注意事项等. 一.为什么选择React React是当前前端应用最广泛的框架.三大SPA框架 Angular.React ...

  7. 解决 01-Jul-2016 10:49:05.875 WARNING [localhost-startStop-2] org.apache.catalina.loader.WebappClassLoaderBase.clearReferencesJdbc The web application [ROOT] registered the JDBC driver [com.mysql.jdbc.D

    01-Jul-2016 10:49:05.875 WARNING [localhost-startStop-2] org.apache.catalina.loader.WebappClassLoade ...

  8. ES6+Webpack 下使用 Web Worker

    大家都知道 HTML 5 新增了很多 API,其中就包括 Web Worker,在普通的 js 文件上使用 ES5 编写相关代码应该是完全没有问题了,只需要在支持 H5 的浏览器上就能跑起来. 那如果 ...

  9. [前端进阶课] 构建自己的 webpack 知识体系

    webpack webpack 最出色的功能之一就是,除了 JavaScript,还可以通过 loader 引入任何其他类型的文件. Webpack 核心概念: Entry(入口):Webpack 执 ...

随机推荐

  1. layui 时间选择器 不要秒的选项

    通过修改 CSS 样式可以隐藏秒的选项 ++ .laydate-time-list{padding-bottom:0;overflow:hidden} .laydate-time-list>li ...

  2. 【转】nosql的分类

    1 键值数据库 相关产品:Redis.Riak.SimpleDB.Chordless.Scalaris.Memcached 形式:Key 指向 Value 的键值对,通常用hash table来实现 ...

  3. Java MyBatis逆向工程,自动生成pojo,mapper

    生成xml文件,文件名generator.xml <?xml version="1.0" encoding="UTF-8"?><!DOCTYP ...

  4. go语言开启go module

    export GO111MODULE=on //linux .MAC set GO111MODULE=on //Windows

  5. Java实现AES对称加密算法

    Java代码实现 import java.security.SecureRandom; import javax.crypto.Cipher; import javax.crypto.KeyGener ...

  6. php用逗号格式化数字

    今日工作需要格式化数字显示当前商品价格,比如2335.32,需要格式化为2,335.32这样显示.我写了一个函数.总感觉这么简单的功能,但是却需要30多行代码来完成. <?php/**** * ...

  7. appium-Android_webview页面元素定位遇到的问题

    如上图所示,该页面包含webview,但是用driver.contexts只获取到了Android原生,而webview的context则没有获取到,所以webview页面的元素.希望有大佬能提供有效 ...

  8. X86逆向1:软件破解入门课【课件下载】

    从本节课开始,我将带领小白入门学习软件破解的相关内容,大佬绕过,以后将会定期更新从最基本的破解知识点开始学习,由简单到复杂循序渐进,难度会逐步提高. 为了防止版权方面的争议,我将自行编写一些破解案例来 ...

  9. Java String类和StringBuffer类

    1.String类 用于字符串操作,本质是字符数组char[ ]. String对象的值是不可变的,即当你修改一个String对象的类容,JVM不会改变原来的对象,而是生成一个新String对象. 2 ...

  10. isEmpty 和 isBlank 区别

    isEmpty 和 isBlank 区别 org.apache.commons.lang.StringUtils 类提供了 String 的常用操作,最为常用的判空有如下两种 isEmpty(Stri ...