【FCon】聚焦金融行业在数智化的全面革新,一线的金融数智化实践干货 了解详情
写点什么

前端每周清单第 48 期:Slack Webpack 构建优化,CSS 命名规范与用户追踪,Vue.js 单元测试

  • 2018-01-23
  • 本文字数:3557 字

    阅读完需:约 12 分钟

6 月 17 日,极客时间《企业级 Agents 开发实战营》正式上线,10 周掌握企业级 Agents 从设计、开发到部署全流程。

看新闻很累?看技术新闻更累?试试下载 InfoQ 手机客户端,每天上下班路上听新闻,有趣还有料!

前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号(ID: frontshow),及时获取前端每周清单。

新闻热点

国内国外,前端最新动态

  • ECharts 4.0 发布: 2018 年 1 月 16 日,百度的 ECharts 团队对产品进行了更新,发布了时隔两年的大版本 4.0。在 ECharts 4.0 新版本中,主要在性能功能、易用性及扩大使用范围三个大的方面进行了八项升级:带给用户更强大的性能和功能,让开发者使用 ECharts 变得更加轻松,让更多的人在更多的场景都能访问使用 ECharts 制作的可视化产品。
  • Puppeteer 1.0 发布: Puppeteer 是由 Google Chrome 团队开源的,Headless Chrome 操作接口库,已成为事实上的 Headless 浏览器操作标准。本周 Puppeteer 1.0 正式发布,为我们带来了 Chromium 65,page.coverage API,page.pdf() 支持自定义头部与脚部,XPath 支持增强,target.createCDPSession() 兼容原生协议等特性变化。
  • jQuery 3.3.0 发布: jQuery 仍然是很多 Web 开发工作中不可或缺的部分,自上次 jQuery 大版本更新以来,其核心团队更多地着眼于应该移除什么部分,而不是添加新的功能特性,来保证 jQuery 的小巧易用性。该版本中移除了部分过时的 API,并且为 .addClass(), .removeClass(), 以及 .toggleClass() 这几个函数支持输入某个样式类名数组作为参数。
  • Angular 5.2 发布: Angular 5.2 发布,其可以直接替代之前的 5.1 版本,包含了部分错误修复与性能提升。新版本中,优化了对于模板的类型检查,添加了对于 TypeScript 2.6 的支持,优化了 Router 参数与数据继承。

开发教程

步步为营,掌握基础技能

  • 无缝为 create-react-app 项目添加 SSR + 代码分割特性: create-react-app 是非常不错的原型化工具,能够快速搭建 React 基础应用。本文即是介绍在无需弹出配置的情况下,为 create-react-app 创建的项目添加服务端渲染与代码分割异步加载的特性;本文依次介绍了服务端渲染、基于 react-loadable 的代码分割、服务端代码分割、利用 Webpack 的 chunkNames 特性等内容。更多 React 学习参考 React 与前端工程化实践
  • Vue Devtools 4.0 新特性介绍: 日前 Vue Devtools 发布了 4.0 大版本更新,引入了一系列的新特性与提升,本文即是对这些变化进行深入解读。本文介绍的新特性包括了组件数据可编辑、在外部编辑器中打开组件、展示原始组件名、优化组件审查方式、根据组件过滤事件、可伸缩的审查器等;更多 Vue.js 学习资料参考 Vue Reference
  • CSS 命名规范,加速你的代码调试: 维护大型的 CSS 代码库并非易事,特别是那些随意散漫未经组织的 CSS 代码极易变成一团乱麻;本文则深入浅出地介绍了 CSS 命名规范,来帮助开发者编写优质的代码。本文首先讨论了连字符与 camelCase,然后介绍了 BEM 的含义与用法,最后讨论了如何设置合适的 JS 操作类;更多 CSS 学习资料参考 Web 开发基础与工程实践
  • 纯 CSS 的网页追踪方案: 我们经常会从用户访问的网页中,采集某些用户相关的偏好数据,譬如他们对于某些链接的点击情况等等。本文则是提出了一种不使用 JS,纯粹依赖于 CSS 来进行网页追踪与分析的方案,其依赖于用户点击某个链接或者悬停在某个元素之后,浏览器添加的默认样式类;该方案目前能够用于采集用户的访问与查看情况,更多 CSS 学习资料参考 Web 开发基础与工程实践

工程实践

立足实践,提示实际水平

  • 菜鸟网络前端全栈化之路: WEB 前端开发在开发体系里面是一个特殊的群体,阿里早期给前端的定义是“D2”,D2 的含义是:developer & designer。这么一个定位就直接导致了基础教育阶段的人才是空白的,也导致了前端优秀人才特别少,招聘难的问题,随之带来的问题往往会成为整个研发链路的瓶颈。另外近几年随着无线的快速发展,前端在 PC 传统流域的优势逐渐在丧失,而无线端随着无线动态化技术的发展,web 前端又再次受到发展空间的挤压。在这样的情况下前端这个岗位其实需要一些比较大的突破和改变。而 web 前端传统价值的中台化和新领域的拓展变的尤为重要。今天我要分享的就是菜鸟是如何实施前端技术中台化和推动开发全栈的一些经验。
  • 来自 Slack 的 Webpack 构建性能优化: Webpack 已然是主流的前端打包工具之一,不过其繁荣的第三方插件生态反而会使得,优化 Webpack 的构建性能成为了一件不容易的事情。本文即是来自 Slack 的工程师,分享的他们在重构整个前端过程中累积的,如何优化 Webpack 构建性能的经验;本文主要从衡量并且分析构建耗时的组成、并行化构建流程、减少构建工作、使用缓存、优化硬件等几个方面。更多 Webpack 学习资料参考 Webpack Reference
  • 编写 Vue.js 单元测试时需要规避的五个陷阱: 单元测试是应用开发中不可或缺的部分,本文作者会循序渐进地,以具体的例子来介绍日常开发中会用到的 Vue.js 单元测试的例子。作者希望在本文中讲清楚如何测试、应该测试哪些,并提醒开发者注意避免五个坑:等到最后再测试,测试了不恰当的内容,搞混了 Test Doubles,结构过度耦合,过度追求测试覆盖率等;更多 Vue.js 学习资料参考 Vue Reference

深度阅读

深度思考,升华开发智慧

  • 理解 React 源代码: React 为我们提供了直接易用的,以状态为核心的前端应用开发方式,本系列文章则着眼于分析 React 内部工作原理。依次讨论了 React 中简单组件、类组件等渲染流程;更多 React 学习参考 React 与前端工程化实践
  • Node.js 内建模块加载机制: 本系列文章着眼于分析 Node.js 内部原理,首篇文章讨论了 Node.js 的主进程是如何启动的。接下来作者又分析了在主进程初始化过程中,是如何加载内建模块的,然后还深度分析了 os 包的实现;更多 Node.js 学习参考深入浅出 Node.js 全栈架构
  • 不曾了解的 JS 特性: 本文作者在通读了 MDN 文档之后,惊讶地发现了很多他不曾了解的 JS 特性与 API;本文即是作者的读后总结分享,JS 也是学无止境啊。作者在本文中介绍了 Label Statements,void 操作符,Comma 操作符,with 条件操作符,国际化 API,管道操作符,setTimeout 参数等等;更多 JavaScript 学习参阅现代 JavaScript 开发基础

开源项目

乐于分享,共推前端发展

  • After.js : After.js 是类似于 Next.js 的 React 服务端渲染框架,不过其是由了 React Router 作为路由系统,而不像 Next.js 那样自建路由系统。After.js 同样践行了组件即路由的理念,支持基于路由的代码分割、基于路由的变换、分析、数据加载、数据预加载等。
  • dialog-polyfill : 上周的清单中我们介绍过 HTML 5.2 中引入的 dialog 标签,dialog-polyfill 则是由 Google 开源的,dialog 的适配库。不同于第三方组件或者框架提供的弹窗功能,原生的 dialog 标签更为简单易用,并且其可访问性也更好,浏览器也能够针对该标签进行优化。
  • JARVIS : J.A.R.V.I.S. (Just A Rather Very Intelligent System) 是 Webpack 实时监控工具,其能够将开发环境或生产环境下的 Webpack 构建信息实时展示到浏览器中。JARVIS 借鉴了 Webpack Dashboard 等流行的 Webpack 监控工具,然后提供了可优化的 ES Harmony 模块统计、将资源分割为不同的类别等扩展功能。
  • 1Backend : 1Backend 是自部署的 Serverless 平台,其设计目标是简化 Lambda 函数与微服务的部署、运行、维护流程。1Backend 使得开发者能够快速开发服务,其支持 Go,JavaScript,TypeScript,MySQL 等常见的技术栈。
  • Prisma : Prisma 能够将数据库转化为 GraphQL API;其允许用户自定义数据模型,然后快速地转化为可用的 GraphQL 服务器。Prisma GraphQL API 提供了强大的数据抽象与构建块,来辅助开发灵活可扩展的 GraphQL 服务端,包括了类型安全的 API,声明式 DSL 的数据模型、实时接口、与流行前端框架无缝兼容等。

巅峰人生

  • 对话 AI 专家洪亮劼:这次,我们全方位聊聊人工智能: 洪亮劼,极客时间《AI 技术内参》专栏作者,电子商务平台 Etsy 数据科学主管,前雅虎研究院高级研发经理。长期从事机器学习与人工智能的基础以及应用研究,积累了丰富的学术研究和工业实践经验,对推荐系统、搜索引擎、计算广告学、社交网络以及自然语言处理等领域有非常深入的理解。本文从人工智能的落地、观点、人才培养与招聘、学习等几个角度来聊聊人工智能。

前端之巅

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


感谢徐川对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作,请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博( @InfoQ @丁晓昀),微信(微信号: InfoQChina )关注我们。

公众号推荐:

AGI 概念引发热议。那么 AGI 究竟是什么?技术架构来看又包括哪些?AI Agent 如何助力人工智能走向 AGI 时代?现阶段营销、金融、教育、零售、企服等行业场景下,AGI应用程度如何?有哪些典型应用案例了吗?以上问题的回答尽在《中国AGI市场发展研究报告 2024》,欢迎大家扫码关注「AI前线」公众号,回复「AGI」领取。

2018-01-23 18:002148
用户头像

发布了 60 篇内容, 共 16.9 次阅读, 收获喜欢 9 次。

关注

评论

发布
暂无评论
发现更多内容

Rush vs Lerna,哪个更适合你的项目?

这我可不懂

Affinity Designer for Mac(强大的矢量图设计软件)v2.5.2中文免激活版

iMac小白

Affinity Designer mac Affinity Designer破解版 Affinity Designer激活版 Affinity Designer直装版

Ulysses for Mac(优秀的markdown写作软件)v35中文直装版

iMac小白

分享8个实用的Java Streams API

这我可不懂

Master-Worker 架构的灰度发布难题

阿里技术

架构 分布式 master Master-Worker Master-Worker 架构

即时通讯技术文集(第39期):推送技术合集(Part1) [共18篇]

JackJiang

即时通讯;IM;网络编程

OpenAI 发布的 GPT-4o是什么,有什么功能?

蓉蓉

openai gpt4o

DpEasy社区版1.4.0 | 体验全新的数据库特权账号管理平台!

BinTools图尔兹

数据库 应用 数据库安全

ForkLift for Mac(文件管理程序)v4.1.3激活版

iMac小白

win版XnViewMP(图片浏览软件) v1.7.2 绿色版

影影绰绰一往直前

XnViewMP下载 XnViewMP激活版

win版ApowerREC( 傲软屏幕录屏工具) v1.6.9.18便携版

影影绰绰一往直前

Affinity Photo for Mac(好用的图片编辑软件)v2.5.2免激活版

iMac小白

win版Native Instruments Kontakt(音乐采样工具) v7.10.5 特别版

影影绰绰一往直前

活动回顾丨AI 原生应用架构专场·北京站 PPT 下载

阿里巴巴云原生

阿里云 架构 云原生

Native Instruments Creator Tools for mac(高级采样器)v1.5.2.0激活版

iMac小白

Sip for mac(强大的屏幕取色软件)v3.5.1激活版

iMac小白

win版Free YouTube to MP3 Converter(YouTube视频转MP3工具) v4.4.1.530 特别版

影影绰绰一往直前

什么时候需要用到 @EnableWebSecurity 注解?

江南一点雨

Java spring spring security

心大陆多智能体还原人类情感,激发心理健康领域“新质生产力”!

心大陆多智能体

Affinity Publisher 2(逆天排版神器)中文直装版mac/win

iMac小白

Affinity Publisher 2下载 Affinity Publisher 2直装 Affinity Publisher 2激活

XnViewMP for Mac(图片浏览查看器)v1.7.2激活版

iMac小白

XnViewMP破解版 XnViewMP 下载 XnViewMP mac

win版GoodSync Enterprise(高效文件同步工具) v12.6.6.6 特别版

影影绰绰一往直前

GoodSync下载 Goodsync激活版】

Snagit for mac(最强大的屏幕截图软件)v2023.3.1中文版

iMac小白

Mock 工具使用 - 模拟弱网测试

霍格沃兹测试开发学社

win版Resktop Manager Enterprise(远程桌面管理器RDM) v2024.1.31 (x64)特别版

影影绰绰一往直前

【AI应用开发全流程】使用AscendCL开发板完成模型推理

华为云开发者联盟

华为云 开发板 昇腾 华为云开发者联盟 企业号2024年6月PK榜

接口测试 Mock 工具使用 - 弱网测试

测试人

软件测试 弱网测试

实时数据驱动电站管理,EMQX 助力黑马高科光伏电站运维监控

EMQ映云科技

mqtt 光伏发电 emqx 新能源行业 mqtt broker

Cockos Reaper for Mac(专业数字音频制作软件)v7.16激活版

iMac小白

win版Wise Care 365 pro(系统优化软件) v6.7.3.648 直装版

影影绰绰一往直前

win版Topaz VideoAl(视频无损放大软件) v5.1.1 英文便携版

影影绰绰一往直前

前端每周清单第 48 期:Slack Webpack 构建优化,CSS 命名规范与用户追踪,Vue.js 单元测试_语言 & 开发_王下邀月熊_InfoQ精选文章