4.2-Frontend
前端
前端每周清单
前端每周清单专注前端领域内容,分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。关注【前端之巅】微信公众号
新闻热点
国内国外,前端最新动态
-
《
React 15.5.0 版本发布》:近日React 宣布发布15.5.0 版本, 并且宣告了在即将发布的React 16 版本中带来的一系列性能的提升与整个重构的内核代码。而在15.5.0 中最主要的是PropTypes 、createReactClass、TestUtils 等类被迁移到了新的包中。 -
《万维网之父
Tim Berners-Lee 获得2016 年度图灵奖》:来自MIT 的教授,万维网的发明者Tim Berners-Lee 获得了由美国计算机协会(ACM) 颁发的图灵奖(A.M. Turing Award) 。美国计算机协会赞誉Tim Berners-Lee 发明了万维网、第一个网络浏览器、以及允许网络扩展的基本协议和算法,而2017 年也正恰恰是图灵奖五十周年。( http://news.mit.edu/2017/tim-berners-lee-wins-turing-award-0404 ) -
《
Preact 8.0.0 发布》:近日Preact 发布其8.0.0 版本,新版本中性能极限提升30% ,提供了更好地兼容适配性与错误反馈,而整个包体大小进一步下降,从3.9KB 降到了3.3KB 。( https://parg.co/b43 ) -
《微软开源跨平台开发框架
ReactXP 》:ReactXP 是来自于微软的用于开发跨平台(iOS ,Android,Web,Windows) 应用的开源框架,其基于React.js 与React Native 项目,提供了类似的接口与语法规则;能够帮助开发者快速创建优美、响应式的Web 界面以及原生体验的移动应用。( https://microsoft.github.io/reactxp/ )
开发教程
步步为营,掌握基础技能
-
《基于
React ,Redux,React-Router-V4 以及Firebase 创建实时足球投票应用》:本系列教程基于React ,Redux,Redux-Saga,React-Router V4 以及Firebase 创建足球投票应用,在第一篇教程中主要介绍如何使用create-react-app 脚手架来初始化项目结构并且添加必须的库。( https://parg.co/bhD ) -
《后
ES6 时代的正则表达式》:本文主要介绍ES6 语法标准下正则表达式的新用法,包括了/y 与/u 两个新的匹配标识以及一些基于正则表达式的常见用法,譬如元素属性解析等。( https://parg.co/b4s ) -
《使用
CSS Grid 打造私家花园》:本网站是个非常不错的互动式学习CSS Grid 的站点,其以28 个互动的花园小游戏来带你一步一步学习CSS Grid 的语法与实践。( http://cssgridgarden.com/ ) -
《创建基于
Vue.js 的可复用组件》:本系列文章关注于如何利用Vue.js 创建可复用的组件,每一篇都会讲解某个具体的界面组件,然后一步一步地介绍如何利用Vue.js 来实现这些组件,顺便也介绍Vue.js 的各种原理与设计准则。( https://parg.co/b49 ) -
《
Node.js 运行时介绍》:本文是一篇不错的Node.js 入门介绍的文章,包括了Node.js 中常见的概念知识、JavaScript 并发模型以及基于Event Loop 的实现、Node.js 内置的对象,以及Node.js 缘何取名为Node.js 等等。( https://parg.co/b4I ) -
《隐藏幕后的
CSS 知识点》:在我们日常的开发中,往往关注于让界面看上去符合预期,而往往不会去关注那些隐藏的属性知识点以及CSS 的幕后原理。本文则是对于CSS 的渲染过程、级联规则、Visual Formatting Model、展示类型、位置布局等等。( https://madebymike.com.au/writing/the-invisible-parts-of-CSS/ )
工程实践
立足实践,提示实际水平
-
《如何构建高性能
Promise 库》:本文作者分享了他在构建类似于Bluebird 的 符合Promise A+ 标准的库Aigle 时的经验,其主要原则包括避免创建比不必要的变量、函数与实例、避免执行不必要的函数、智能处理异步函数等等。( https://parg.co/bhz ) -
《使用
JavaScript 打造智能咖啡机》:这几年智能家居与IOT 的概念非常火热,作者也发挥极客精神改造了一下办公室的咖啡机。文中作者借助了Tessel 与Johnny-Five 智能硬件平台,自定义了超文本咖啡机控制协议HTCPCP ,将咖啡机改造为了能够提供类REST 服务的终端,能够远程控制与实时监控。 -
《使用
Chrome devtools 检视代码覆盖》:近日Chrome Canary 版本中新增了执行代码覆盖率检查的特性,其能够反映你的Web 应用中的每个JavaScript/CSS 文件中的代码覆盖率以及所有的未被执行的行。 -
《
Webpack 与Rollup :求同存异》:近日,Facebook 宣布将React 的构建工具由Webpack 迁移到Rollup ,引发了很多开发者的讨论。本文则是深度介绍Webpack 与Rollup 的异同,最后总结而言,Webpack 适合于构建应用,而Rollup 适用于构建库或框架。( https://parg.co/b4y ) -
《探索
Twitter Lite 的构建之道》:近日,Twitter 发布了遵从Progressive Web App 规范的Twitter Lite 网站,其兼具响应式、速度快、占用空间少、支持推送与离线体验等多个特征。本文即是Twitter 工程师团队介绍Twitter Lite 的构建之道,包括架构总览、可用性保证、渐进式加载、渲染优化、数据使用优化等多个方面 。( https://parg.co/b4X ) -
《深入浅出
Redux 测试》:本文首先介绍了Web 测试的基本流程,分析了单元测试、组件测试、UI 自动化测试与端到端测试的特点与适用范围;然后使用某个具体的业务逻辑测试的案例来介绍项目开发中的Redux 代码测试实践。( https://parg.co/b41 )
深度阅读
深度思考,升华开发智慧
( https://parg.co/bhT )
-
《
JavaScript 模块演化史》:当初Brendan Eich 草创JavaScript 之际估计想不到它会在之后的二十年内起到如此重要的作用,本文则是深度回顾了缺乏模块化带来的困难以及这二十年间从命名空间、依赖注入、CommonJS、AMD、UMD 到ES2015 Modules 等等十余种不同的模块解决方案。( https://parg.co/bhn ) -
《
rems 与ems 详解,或许你并不需要它们》:本文对于现代Web 开发中常见的em 与rem 单位在桌面浏览器中的开发进行了详细的阐述,通过多个例子对比了rem 、em、px 这几个单位的实际作用,最后还阐述了希望大家能够合理利用这几个单位而不是盲从选择。( https://parg.co/b4k ) -
《
React 中的状态管理架构模式》:本系列文章着眼于对于现代复杂Web 应用,譬如React 或类似框架,的开发中常见的状态管理的架构模式。文章中会依次介绍Naive Hierarchical Architectural Pattern 、Top-Heavy Architecture、Flux 等等内容。( https://parg.co/b4J ) -
《失信的
Web Components 》:本文是一篇带有强烈主观色彩讨论Web Components 的文章,其回顾了六年前Alex Russel 提出Web Components 寄以带来的现代Web 开发的愿望与准则,然后比较了Web Components 与React 、Vue.js 等现代常用的开发框架;有对Web Components 一直保持关注的开发者可以带着思辨的态度看看这篇文章。( https://parg.co/b4v ) -
《使用
Inline Cache 优化动态JavaScript 代码》:本文是作者在开发JSIL 开源库时使用的一系列优化手段的总结,主要关于如何使用多态在线缓存(Polymorphic Inline Cache) 来优化代码执行速度,不过这种方式也有可能造成意外的变化。作者介绍了何谓Inline Cache 及其优化原理和带来的性能提升评测等内容。( https://parg.co/b4a )
开源项目
乐于分享,共推前端发展
-
《glamorous》:来自
PayPal 的React 组件的CSS-in-JS 解决方案,其支持JSX 语法、自定义样式组件等多种灵活的功能。( https://parg.co/b4Q ) -
《Planck.js》:
Planck.js 是基于JavaScript 的2D 物理引擎,能够用于创建跨平台的HTML 游戏。( http://piqnt.com/planck.js/ ) -
《Tippy.js》:
Tippy.js 是基于纯粹的JavaScript 的轻量级无添加的ToolTip 库。( https://atomiks.github.io/tippyjs/) -
《Deck.gl》:
Deck.gl 是Uber 出品的基于WebGL 的支持大规模数据可视化的库,其能够用于对大型数据集中的数据进行可视化探索与展现。( https://uber.github.io/deck.gl/#/ ) -
《React Data Grid》:基于
React 构建的类似于Excel 的网格组件,其提供了编辑、键盘导航、复制粘贴等多种功能。( https://github.com/adazzle/react-data-grid )
前端之巅
前端之巅是
