5.2-Frontend

> url: FE-Weekly-12

topicL前端每周清单、前端、jQuery、Vue、PWA

前端每周清单第12期

前端 前端每周清单

前端每周清单专注前端领域内容，分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。关注【前端之巅】微信公众号(ID：frontshow)，及时获取前端每周清单。

新闻热点

国内国外，前端最新动态

开发教程

步步为营，掌握基础技能

  • 《基于Vue.js、Webpack、Material Design打造PWA应用》：PWA应用已经受到了越来越多的关注与实践，而本系列文章则介绍了如何使用Vue.js、Webpack以及Material Design打造PWA应用。本系列文章包含七个部分，分别介绍了基于Vue.js、Webpack与Material Design Lite创建单页应用、使用Vue-Resource与VueFire进行数据交互、使用Service Workers实现离线模式、拍照、上传图片、实现推送、访问设备地址等内容。( https://parg.co/btH )

  • 《Create XP App》:近日，微软的Skype团队发布了基于React Native的跨平台开发框架ReactXP，而create-xp-app则是快速创建ReactXP应用的脚手架。本文则是对于create-xp-app的安装与基本使用的介绍，包括了如何运行在Web与iOS/Android等原生环境中，以及如何进行打包等内容。

  • 《React动画系列教程》：本系列教程着眼于介绍React动画开发相关知识，而本文则是从CSS transitions基础入手，介绍了CSS transitions的基础语法与进度条、导航栏等经典案例。( https://parg.co/bMF )

  • 《掌握Node.js核心模块之文件系统》：本文介绍Node.js核心模块中与文件系统、文件流等相关的部分，同时还介绍了实际开发中常用的第三方文件库。本文首先介绍了基本的读取与写入操作，然后介绍了权限控制、监听等功能，最后讨论了使用graceful-fs、mock-fs、lockFile等优秀的第三方库来辅助开发。( https://parg.co/bMj )

  • 《使用React、Redux以及Webpack创建TODO应用》：本文是面向新手的教学文章，介绍了如何利用React、Redux以及Webpack创建简单的TODO应用，包括利用Webpack搭建构建环境、编写基本的React组件以及使用Redux管理应用状态等内容。( https://parg.co/bMT )

  • 《Vue.js与外部交互》：Vue.js是非常优秀的网页构建框架，不过我们往往会面临着比较割裂的开发情况，即网页中的一部分是交由Vue.js管理，而另一部分是交由其他脚本或者插件管理；这中情况在多团队协同开发或者对旧版本的改造时可能会碰到。而本文则介绍了应该如何使用Vue.js与外部其他脚本进行交互，譬如管理head、body标签、监听键盘事件等等内容。( https://parg.co/bMw )

工程实践

立足实践，提示实际水平

  • 《使用Electrino减少近99%的应用大小》：Electro是非常不错的利用Web技术开发跨平台桌面应用的运行时，不过其缺陷在于打包的应用中往往需要携带Node.js与Chromium的完整框架，导致了即使是最简单的HelloWorld应用也有近115MB。而Electrino提供了类似于Electron的接口，不过使用系统自带的Web运行时来替代Chromium，从而保证最后打包出来的应用仅有原来的0.1%大小。Electrino适用于那些不依赖于操作系统本身功能的应用，项目也处于开发状态。( https://parg.co/bM2 )

  • 《饿了么的PWA升级实践》：本文介绍了饿了么利用Vue.js与PWA开发其移动Web端过程中的实践经验，包括PRPL模式的实现、多页面性能优化、用户体验优化等等内容。( https://parg.co/bMz )

  • 《使用Brotli压缩加快网页响应速度》：提升网页响应速度是LinkedIn工程师的首要关注之一，常见的提升方法就包括了如何减少浏览器与服务端之间传输的数据量。目前，主流的压缩算法当属Gzip，而本文则介绍了LinkedIn尝试在部分现代浏览器上采用Google工程师2015年提出的Brotli开源压缩算法的考虑过程；Brotli专注于文本压缩，其相较于Gzip能够带来20% ~ 30%的体积减少。( https://parg.co/bMx )

  • 《调试Node.js应用的最佳工具》：调试，也就是寻找与修复软件中存在问题的过程一直是Node.js项目构建过程中的挑战之一，而本文则是介绍了如何利用那些优秀的工具来辅助进行Node.js代码调试。本文首先介绍日志相关内容，恰当的日志能够帮助开发者在生产环境中迅速定位到错误所在；然后本文介绍了如何在开发环境中直接调试Node.js应用。( https://parg.co/bMB )

  • 《Github Pages与单页应用》：单页应用SPA以及日渐成为目前主流的网页呈现方式，并且构建功能丰富的高性能Web应用也日渐容易。本文则是介绍了不同的单页应用的部署方式，包括Google App Engine、now、以及Github Pages等；本文重点介绍了Github Pages，从概念介绍、仓库设置、自动部署、以及常见的Github Pages使用过程中的实践。( https://dev.to/_evansalter/github-pages-and-single-page-apps )

深度阅读

深度思考，升华开发智慧

  • 《Node.js根本没有float：浮点反序列化错误背后的故事》：在Node.js中，当我们把一个浮点数序列化，再反序列化，居然出错了，这是为什么呢？作者通过刨根问底的追查，发现Node.js根本没有float！( https://parg.co/bMX )

  • 《JavaScript代码风格要素》：本文是Eric Elliott编写的JavaScript代码风格要素指南与建议，其借鉴了1920年的面向英文语言的 “The Elements of Style” 一文。本文介绍的关键要素包括：使用函数最为组合的原子单元并且保证函数的单一职责性、移除不需要的代码、使用更直观具有自解释性的变量命名、根据特性进行代码划分等等。( https://parg.co/bMn )

  • 《函数式组件的函数式调用》：本文是来自Missive的工程师分享了他们在基于React进行应用开发时的技巧，即如果直接以函数调用而非组件的方式来使用函数式组件，可以避免对于React.createElement的调用，最终相同组件的渲染耗时可以节约近45%。( https://parg.co/bMa )

  • 《Chrome Canary(M60+)中的ES6原生模块》：Chrome Canary开始支持ES6原生模块，本文则是介绍了如何在Chrome Canary中使用ES6原生模块以及基本语法、如何利用ES6原生模块的新特性来发布代码、如何兼顾旧版本浏览器等内容。( https://parg.co/btb )

  • 《支付宝前端构建工具的发展和未来的选择》：本文介绍了支付宝前端构建工具的发展史，从spm到ant tool，对于工具的中心化与去中心化进行了反复的考量。然后介绍了对于未来前端构建工具的选择，包括要放弃特定业务脚手架针对通用型构建配置进一步修改或者封装的这种方式、抹杀webpack.config.js这种形式、实现语义配置等。( https://github.com/pigcan/blog/issues/4 )

开源项目

乐于分享，共推前端发展

  • 《k6》：k6是基于Go与JavaScript开发的现代压测工具，它提供了非常清晰简单的JavaScript接口；同时它基于Go提供了分布式的部署方案，支持云端部署与REST接口控制。( https://github.com/loadimpact/k6 )

  • 《sakura》：Sakura是轻量级的CSS预置样式库，我们只需要简单地引入Sakura样式文件到网页中就能将朴素的网页转化为较为美观的、可读性较好的页面。( https://github.com/oxalorg/sakura )

巅峰人生

前端之巅

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

前端之巅微信底图－5.jpg

上一页
下一页

最近更新于2023-04-16