4.3-Frontend

#前端每周清单第9期:React Studio 1.0.2、ECharts GL 1.0 alpha发布;向jQuery用户介绍Vue

前端 前端每周清单

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

新闻热点

国内国外,前端最新动态

  • Chrome 59即将支持Headless模式》:近日,Chrome宣布在59版本中开始支持Headless/Server模式,允许用户加载网页、提取出DOM这样的元数据、生成网页内容的位图等等ChromiumBlink所支持的功能。同时,著名Headless浏览器PhantomJS的某位核心开发者宣布退出PhantomJS,噫吁唏。( https://parg.co/bRi )

  • Prettier 1.0发布》Prettier是目前最为流行的JavaScript格式化工具之一,其能够将代码编译为AST然后将格式化之后的代码写回到文件中。在1.0正式版中,Prettier对于JSX、CSS-in-JS、装饰器、Flow等语法添加了支持或者优化了格式结果,并且修复了一系列的错误。Prettier可以同时在命令行、WebStorm、VSCode等常见的编辑器中使用,笔者建议开发团队应该统一格式化工具以避免无谓的提交。( http://jlongster.com/prettier-1.0 )

  • Meteor 1.4.4发布》:近日Meteor宣布发布其1.4.4版本,包括了对于部分核心依赖的更新与错误的修复,并且提升了整体的稳定性,同时为Cordova应用添加了基于Google权限认证的功能。( https://parg.co/bRs )

  • React Studio 1.0.2发布》React Studio是基于React的交互式开发工具,在其新版本中优化了界面布局,使得开发者更方便地添加组件到项目中;提供了回撤、隐藏等功能,并且加入了许多新的模板项目,允许自定义CSS动画类型等功能。( https://parg.co/bRC )

开发教程

步步为营,掌握基础技能

  • 《完整的HTTP/2服务端推送指南》HTTP/2相较于HTTP/1带来了极大的性能提升,而其中的服务端推送允许服务端在客户端请求之前主动地推送未来可能需要的静态资源;这种方式能够较好地在实现HTTP/1优化中常用的内联方式的同时避免其带来的实践中的缺陷。而本文则是详细地介绍服务端推送的原理、其解决的问题以及在常见服务器中的配置方式。( https://parg.co/bRH )

  • 《利用React打造特斯拉电池仪表盘》:本系列文章介绍了如何用ReactRedux等相关前端技术来打造简单的特斯拉电池仪表盘界面。其第一篇博客着眼于如何使用create-react-app创建基本项目并且使用组件内状态来存储数据;而第二篇博客则介绍了如何使用Redux来管理外部状态。( https://parg.co/bR3 )

  • 《基于JavaScript构建数据表达式分词器》:本文是一篇挺有意思的文章,介绍如何利用JavaScript解构常见数学表达式并且从中提取出相关实体。本文涉及到的内容包括对于分词器的简单介绍、对于抽象语法树AST的介绍以及最终如何使用代码来实现分词算法。( https://parg.co/bRO )

  • 《面向重度jQuery开发者的Vue.js介绍》:本文是一位经验丰富的开发者,在将原有的基于jQuery工程重构为基于Vue.js工程的过程中总结出的经验与认识介绍。本文首先从零开始介绍如何搭建Vue.js基础项目并且一步一步地实现应用的各种特征,同时还对比了利用Vue.js与 利用jQuery实现的差异性以及二者在设计思想上的区别。( https://parg.co/bRN )

工程实践

立足实践,提示实际水平

  • Sketch 43会改变你的工作流》:在近日的Sketch MeetupAndree再次确认下个版本的Sketch会提供新的开放式文件格式,允许开发者自定义程序来读取或者修改文件。Andree还提到了所谓设计即代码、代码即设计的理念,本文作者认为即使这种方式还是存在一定的缺陷,但是这种新的开源格式仍然会为开发者与设计者的日常工作流带来极大的改变。( https://parg.co/b4w )

  • TypeScriptSlack的实践分享》:维护大型的跨平台的JavaScript代码库是一件非常具有挑战性的工作,无论是从ChromeJavaScript中传递对象给Objective-C或者单纯的接受来自Node.js中的回调结果,你都需要保证不同的代码对于通讯对象的期望之间的一致性。而本文即是在开发跨平台多终端的应用中,Slack使用TypeScript来约束类型,从而避免意外的类型不一致导致的崩溃的实践经验分享。( https://parg.co/bRR )

  • Twitter Lite与高性能可扩展React PWA实践》:本文是Twitter工程师团队介绍其在开发世界上最大的PWA应用之一,Twitter Lite过程中克服各种各样的性能瓶颈的实践经验。其核心思想包括基于路由的代码切分、避免可能导致掉帧的函数、使用压缩比更好的图片资源、以及优化React更新过程、避免频繁修正Redux Store、延迟注册ServiceWorker等部分。( https://parg.co/bRV )

  • React Native性能优化》:本文作者承接 React Native性能瓶颈与解决方案,以新的实际开发中的例子讨论如何优化React Native应用性能。作者以类似于AndroidToolbar的列表为例,介绍了如何对性能进行测试、使用原生的滚动监听、使用声明式接口等多个方面的内容。( https://parg.co/bRk )

深度阅读

深度思考,升华开发智慧

  • 2017JavaScript带给我的感动》:本文作者纵览了在2017年中JavaScript生态圈可能迎来的一系列巨大变革。他首先对比了JavaScriptReason,浅述了二者的优劣对比。然后介绍了WebAssembly以及另一个新兴语言Rust未来可能在JavaScript生态圈中占据的一席之地。最后,作者还介绍了DockerNow.sh以及Github Pages等一系列优秀的辅助开发工具,并且畅想了去中心化浪潮下Web的未来发展。( https://parg.co/bRh )

  • 《算法驱动设计:人工智能是如何改变设计流程的》:大数据时代人工智能不断渗透工作生活的方方面面,而本文作者则是从设计的角度出发,介绍了如何在实际工作中贯彻算法驱动设计的理念,利用算法模型与历史数据来判断什么样的设计可能更会受到用户的青睐;作者还以完整的设计实例介绍了从构建到素材准备的流程。( https://parg.co/bRt )

  • 《后MVC时代》:在很长一段时间里,MVC(Model-View-Controller)架构是构建应用的黄金法则,而近几年随着React,Vue.js,Angular等以组件为中心的库的流行,MVC架构在前端却趋于平寂。开发者往往将模型、视图与控制器耦合在单个实体内,而打破了传统的MVC架构中的约束。类似于Flux或者响应式编程的设计思想也改变了应用状态的处理方式,不同于MVC中的双向绑定,而是数据在实体之间单向流动。本文即是讨论在所谓后MVC时代的GUI应用架构的思考。( https://realm.io/news/the-post-mvc-age/ )

  • 《浏览器中的原生ES6模块:是时候重新考虑打包发布流程ES6模块标准出台已有数年,而目前最流行的方式就是使用Babel等转译工具将ES6模块转译为CommonJS等模块语法以发布到浏览器中运行。而随着Safari、Firefox、Edge都纷纷支持原生ES6模块,本文作者也重新思考是否需要改变现有的应用打包与发布流程。本文首先对比介绍了基于Babel/Webpack的打包与使用原生的ES6模块之间的异同,讨论了真实环境下直接使用原生模块的可行性等内容。( https://parg.co/bRL )

开源项目

乐于分享,共推前端发展

  • 《Electron Forge》Electron Forge是构建现代Electron应用的完整工具集,其整合了很多现存的用于Electron的开发工具,去芜存菁,将它们整合为简单易用的能够直接上手的辅助开发工具。( https://parg.co/bRf )

  • 《Elasticlunr.js》Elasticlunr.js是轻量级的提供了浏览器端搜索与离线搜索的全文搜索引擎,其基于Lunr.js开发不过提供了更加灵活的功能。Elasticlunr.js支持基于时间与指定域的查询,它有点类似于Solr不过更为灵活并且对于开发者更为友好。( http://elasticlunr.com/ )

  • 《CodeSandbox》CodeSandbox是一个在线的React编辑器,其能够帮助开发者更快更方便地展示与分享基于React的项目。CodeSandbox会自动化执行类似于编译、打包、依赖管理等多种项目构建中的常见任务,同时CodeSandbox还允许开发者添加自定义的node_modules中的依赖。( https://parg.co/bR8 )

  • 《Slate》Slate是类似于Draft.js的灵活可自定义的富文本编辑器构建框架,Slate允许你构建功能丰富的类似于Medium、Dropbox Paper、Canvas这样的编辑器。Slate提供了各式各样的插件,你可以基于ReactImmutable来构建自定义的插件,并且指定哪些插件属于核心插件。( https://docs.slatejs.org/ )

    巅峰人生

前端之巅

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

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

上一页
下一页