前端周榜第40期：JS核心与成本、Node内存溢出调试、软件2.0作者：王霞友越雄编辑：旭川每周前端榜单，聚焦前端领域内容，主要搜集外文资料，帮助开发者了解本周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰生活等。欢迎关注【前端之巅】微信公众号（ID：frontshow）获取每周榜单前端及时。国内外新闻热点，最新前端新闻Atom发布代码协作工具Teletype：本周，Atom发布远程协作工具Teletype，允许开发者以P2P方式进行结对编程；虽然Beta版本还存在不少bug，但我们还是拭目以待，未来会有更便捷的团队协作工具。同时，VSCode还发布了所谓的LiveShare计划，该计划也允许开发者使用VisualStudio2017或VSCode实时协同编辑代码。Firefox57.0发布：FirefoxFastAgain！Firefox57.0于本周正式发布，为用户带来全新的Firefox体验。此版本最大的变化是引入了适用于现代设备的浏览器引擎：Quantum；同时，该版本还对用户界面进行了重新设计，为用户提供了一个清新、清爽、触屏友好的界面。更多细节请参考原文或下文介绍的量子揭秘文章。Github发布安全警报功能：上个月，Github推出了DependencyGraph，它允许可视化表示JavaScript和Ruby存储库的依赖关系图。在此基础上，Github发布了仓库的安全预警功能。当用户打开DependencyGraph时，可以自动检测依赖项目是否存在安全漏洞；一旦发现漏洞依赖，会及时通知开发者反馈。ExpoSDK23.0.0发布：ExpoSDK23.0.0本周正式发布，基于ReactNative0.50；这个版本也正式引入了React16.0.0，可以使用新版React中的各种特性。该版本还尝试引入ReleaseChannels功能，让开发者更方便的发布和更新自己的应用；并开始支持iOSOTA更新的后台抓取功能。此外，该版本还更新了Android中的JavaScriptCore，更新了Snack和多个API的性能。循序渐进的开发教程，掌握基本技能Angular新手完全指南：这篇文章是一本非常完整的Angular初学者指南。它不仅指导开发者一步一步构建简单的Angular项目，还包括Angular中的许多基本概念。本文首先介绍了Angular的概念和定位，包括SPA的组成、Angular框架和整个平台，以及Angular各个版本之间的关系；然后本文介绍了AngularCLI以及如何使用它来构建一个简单的项目，并讨论了解释AngularCLI中常用参数的作用。然后本文在一个简单项目的基础上分析了Angular项目的目录结构和文件含义；最后，从Angular组件的语法出发，依次介绍服务、模块等关键部分的语法和接口。有关Angular的更多信息，请参阅此处。关于React你需要知道的一切：许多人已经熟悉或使用React，但它在不断变化。这篇文章是一篇很好的入门文章，也能梳理React的重点知识点。本文以搭建一个简单的React音乐播放器为例，一步步介绍什么是React组件、ReactDOM渲染、类组件和函数式组件、JSX、State、事件处理、异步setState、Props、Refs等；更多React教程参考React与前端工程实践。FunctionalProgrammingPracticalTutorial：本文是作者在LinkedIn上的演讲总结，旨在解释函数式编程及其思想组合如何帮助开发者写出更好的代码；而不是专注于某种语言或沉迷于讨论Monads名词。作者从40年前Fortran的作者JohnBackus对函数式编程的介绍入手，讨论了组合在计算机科学中的意义；然后，他以Java、JavaScript等常用语言为例，探讨了如何将复杂的问题进行分解，将功能性和细节性的解决方案有机地结合成一个整体的解决方案。有关函数式编程的更多信息，请参见此处。工程实践基于实践，在实际层面提示JavaScript的成本和优化：本文是AddyOsmani的又一力作，重点讨论如何在移动设备上快速提升网站加载速度和用户交互响应能力。本文将依次讲解如何减小包体大小和传输数据量，优化JavaScript代码的解析、编译和执行，以及如何实践PRPL模式；有关性能优化的更多信息，请参阅此处。扩展React服务端渲染的实践：在这篇文章中，作者分享了他最近扩展React服务端渲染过程的实践经验；尽管文章中的许多讨论点都与React相关，但面临的常见扩展挑战或已解决的问题值得重复。本文不直接讨论React服务器优化，而是从常见的负载均衡入手，介绍常见的负载均衡算法和策略；作为响应，如何给用户适当的反馈。接下来，本文还讨论了分层卸载、组件缓存、依赖处理、同构渲染等；更多React教程参考React与前端工程实践。调试Node.js中的内存溢出和内存膨胀：内存问题是服务端应用的常见痛点之一。调试经验分享。所谓内存泄漏是指没有被回收和释放的无用内存，内存膨胀是指程序过度使用内存；作者介绍了使用堆快照和ChromeDevTools来辅助回溯、收集、分析和解决这些内存问题。如果想了解Web应用中的JavaScript内存调试，可以参考《内存分析与内存泄漏定位》一文。前端测试金字塔：重新思考你的测试：本文以前端测试为中心，从所谓的测试金字塔结构入手，梳理前端测试的重点内容和设计理念。笔者认为所谓的前端测试金字塔就是自下而上的单元测试、快照测试、端到端测试，然后以一个简单的模态弹窗为例介绍设计要点每个测试模块。一般来说，单元测试用于测试代码库中的函数、类等原子对象，而快照测试则可以记录组件渲染后的状态，随时进行比较；端到端的测试用于确保最终的产品体验。有关Web测试的更多信息，请参阅此处。深度阅读与深度思考，智能JavaScript的升华与开发。TheCoreSecondEdition：本文是JavaScriptCoreOverview的第二版，主要讲解ECMAScript语言标准及其运行时核心组件。本文依次介绍了Object、Prototype、Class、ExecutionContext、Environment、Closure、This、Realm、Job、Agent的概念；更多JavaScript教程参考现代JavaScript语法基础和工程实践。WebAssembly已经得到所有主流浏览器的支持：在过去的几周里，苹果的Safari浏览器和微软的Edge浏览器都发布了支持WebAssembly的新版本。除了已经支持的Firefox和Chrome之外，WebAssembly已经得到所有主流浏览器的支持。支持。有了广泛的浏览器支持，尝试使用wasm模块开发的新功能的开发人员将接触到绝大多数用户。如此广泛的支持得益于asm.js项目的早期成功，因为它是JavaScript的一个子集，所以它可以运行在所有浏览器上，比如Facebook的社交游戏CandyCrushSaga就使用了它。Software2.0：本文是特斯拉AI总监AndrejKarpathy对软件未来发展的看法。不同的人有不同的看法，大家可以抱着批判的态度去阅读。所谓软件1.0，就是程序员用Python、C++、Java等编写代码，然后编译成机器码指令或由解释器执行。每行代码都赋予了程序一个特定的功能。作者认为深度学习是软件2.0。神经网络不仅仅是分类器，也意味着编程基础开始发生变化，开发者也可以通过神经网络权值进行编程。Software2.0具有同态计算、更容易编程、持续运行、持续存储、高效运行、非常敏捷等特点。开源项目乐于分享，共同推动前端开发Datasette：Datasette为我们提供了一个开箱即用的、只读的SQLite数据库的JSONAPI；同时，Datasette也提供了将数据库打包到Docker容器中，部署到ZeitNow等云容器工具中的工具。SQLOperationsStudio：SQLOperationsStudio是微软开源的数据管理工具，支持SQLServer、AzureSQLDB、SQLDW等微软各种数据库；SQLOperationStudio可与VSCode深度集成，运行于Windows和macOS、Linux等主流操作系统平台。SQLOperationsStudio提供丰富的SQLServer连接管理、对象查询、完备的T-SQL编辑器、多种格式的数据源导出、数据备份回滚、自定义脚本、历史任务查询等功能Luxon：Luxon由Moment出品，用于在JavaScript中操作时间和日期对象的工具库；Luxon可以看作是Moment.js的现代界面包装器。Luxon提供DateTime、Duration、Interval等扩展类型，支持链式函数式接口调用，可以解析转换通用格式的时间字符串，可以进行无locale或tz文件的国际化转换。React在巅峰时期的诞生：Facebook收购Instagram并开源React.js：毫无疑问，React已经成为最著名和最受欢迎的JavaScript界面库之一。它在Github上拥有超过70KStars和超过1100名贡献者，月下载量超过600万，被数千家公司的技术栈使用。然而，当React出来时，并没有多少人关心它；本文是StackStories脱口秀的记录总结，React的最初创造者之一PeteHunt分享了React诞生前后的故事：为什么会有React，它是如何得到Facebook的关注，是什么它在进入公众视野之前是否经历过流程，等等。前端置顶《前端置顶》是InfoQ旗下专注于前端技术的垂直社区。加入前端Top学习群，请关注“前端Top”公众号，回复“加群”。投稿请发邮件至editors@cn.infoq.com，并注明“前端投稿”。
