「大前端新趋势」专场 何庚坤 2023年05月28日 本期议题：Rspack 基于 Rust 的高性能 Web 构建工具 About me 何庚坤 字节跳动前端工程师 Rspack 团队成员 GitHub @ahabhgk 目录 1. Rspack 是什么？ 2. Rspack 解决了什么问题？ 3. Rspack 有哪些特性？ 4. 如何从 Webpack 迁移到 Rspack？

后浪Flutter Google 开源的 UI 工具包 陈孟泽 后浪Flutter • 简介：移动跨平台方案及Flutter介绍 • 语言: Dart语言简介 • 基础：Flutter常用知识点 • 进阶：Flutter核心原理 • 资料：学习参考资料 移动跨平台方案 • H5+原生（Cordova、微信小程序） • JavaScript开发+原生渲染 （React Native、Weex、快应用） JavaScript+原生渲染 原生控件渲染 好 中 支持 RN、Weex 自绘UI+原生 调用系统API渲染 好 高 默认不支持 Flutter Flutter简介 • Google 开源的 UI 工具包 • 非常精美丰富的组件库 • 支持移动、Web、桌面和嵌入式平台 • UI统一、高性能 Flutter简介 Dart语言简介 - 变量声明 Dart语言简介 - 函数声明 Dart语言简介

学习web开发工具 学习命令行的使用 学习 Node.js 学习 JS 模块系统 学习模块加载和打包工具 学习包管理工具 学习版本控制 学习构建及任务自动化技术 学习网站性能优化 学习测试 学习无头浏览器 学习离线开发 学习网络／浏览器／应用的安全 多平台开发学习 导向学习 前端课程 前端开发学习的起点 前端资讯、新闻站和播客 第三部分：前端开发工具 Doc/API Doc/API 浏览工具 SEO 工具 原型设计和线框图工具 制图工具 3 1.7.5 1.7.6 1.7.7 1.7.8 1.7.9 1.7.10 1.7.11 1.7.12 1.7.13 1.7.14 1.7.15 1.7.16 1.7.17 1.7.18 1.7.19 1.7.20 1.7.21 1.7.22 1.7.23 1.7.24 1.7.25 HTTP / 网络工具 代码编辑工具 浏览器上的神兵利器 HTML 工具 CSS 工具 DOM 工具 JavaScript 工具 静态网页构建工具 无障碍访问工具 应用程序框架工具（台式机、手机、平板电脑等） 渐进式 Web 应用工具 脚手架工具 常规前端开发工具 模版／数据绑定工具 UI 组件 & 组件包 数据可视化工具（例如图表） 图形工具（例如 SVG、canvas、webGL）

FlutterWeb 性能优化探索与实践 36 设计稿（UI 视图）自动生成代码方案的探索 56 美团外卖终端容器无关化研发框架 74 一款可以让大型 iOS 工程编译速度提升 50% 的工具 96 从预编译的角度理解 Swift 与 Objective-C 及混编机制 108 美团民宿跨端复用框架设计与实践 165 美团跨端一体化富文本管理技术实践 186 前端 | 2020 372 积木 Sketch Plugin：设计同学的贴心搭档 400 Native 地图与 Web 融合技术的应用与实践 431 目录 前端 | 2019 446 MTFlexbox 自动化埋点探索 447 Litho 在美团动态化方案 MTFlexbox 中的实践 459 开源 React Native 组件库 beeshell 2.0 发布 473 React Native 活动 Web 页面人机识别验证的探索与实践 580 React Native 工程中 TSLint 静态检查工具的探索之路 589 ESLint 在中大型团队的应用实践 610 美团 iOS 工程 zsource 命令背后的那些事儿 627 客户端单周发版下的多分支自动化管理与实践 635 美团外卖前端容器化演进实践 643 Bifrost 微前端框架及其在美团闪购中的实践

1. 从 Ruby 社区学习 2. 从 TJ 的代码中学习 主要涉及前端框架、工具、 社区文化等方面的知识。 jeffreyluo(罗嘉 辉) 腾讯SNG高级前端工程师，2013 加入腾讯， 先后负责微信钱包，QQ钱包相关业务，现在是 QQ钱包，QQ智慧校园的核心开发者，喜欢前 端技术，在框架/工具方面有较深的经验沉淀。 QQ钱包优化实践 1. 性能优化：service worker Server Web)组件的核心开发者 和维护者，本次主要解析在TSW演进中沉淀下 来的Node.js请求抓包工具的原理，该工具可以 将单次用户访问涉及到的所有请求打包成 Fiddler可以查看的saz包，下载到本地进行查 看和重放调试。 TSW抓包原理解析 1. 工具的背景和诉求 2. 染色体系建立 3. 请求包体记录 4. 打包下载查看 jackqqxu(徐杰) 徐杰，腾讯Web前端高级工程师，QQ空间个性 统QQ空间独立版中的沉淀和 应用； （2）ReactNative中内存可 回收的ListView组件应用， 包括React->web和web- >React自动化转化； （3）ReactNative开发调试 中jsbundle打包优化； （4）空间商城自动化； huarongxu(徐华 荣) 徐华荣，QQ浏览器高级工程师，从事过编译器 优化，Javascript引擎JIT开发工作， 目前负责

天然的MVC（HTML+CSS+JavaScript） 当前的Web开发 ● Web 开发越来越复杂：项目大，团队成员多 ● 前端功能越来越多：CS→BS→CS ● 大型应用维护和协作难 ● 性能弱，启动速度慢 ● 工具支持弱 ● 仔细选择技术方案和开发规范 Web 开发中还有许多问题有待解决... 未来的方向？ Chrome OS 和 Chromebook Chrome OS 基于浏览器和云端环境的 OS 我的设备：3个笔记本、1个台式机、iPhone 和 Android平板 云+端——同步无处不在 Google Apps Script GAS 运行在云端的 JavaScript，打通所有 Google 产品和服务，自动化处理业务。 云服务 X-aaS 或 Web API ，直接使用服务，这些都非常 方便，但实现被隐藏了。 基础平台商提供现成的服务，开发者只需要懂软 件、懂系统，但不需要懂硬件了。 安全 HTTPS 简单、有生产力 ● 适合从小型到大型的项目 ● 高性能、快速启动 ● 适合各种设备的Web环境 Dart 语言的目标 Dart 语言的组成 ● 语言规范 ● Dart VM ● 丰富的类库 ● 工具： ○ Dartium：Chrome + Dart VM ○ 包管理 Pub ○ Dart Editor ● Dart → JavaScript 编译器：dart2js Dart 两种运行模式

关于 来源：https://github.com/nimojs/gulp-book gulp 是基于 node 实现 Web 前端自动化开发的工具，利用它能够极大的提高开发效率。 在 Web 前端开发工作中有很多“重复工作”，比如压缩CSS/JS文件。而这些工作都是有规律的。找到这 些规律，并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。 将规律转换为 gulp 代码 则需要使用 Ctrl + C 退出任务。 npm 模块管理器 如果你了解 npm 则跳过此章节 若你不了解npm 请阅读 npm模块管理器 安装 gulp npm 是 node 的包管理工具，可以利用它安装 gulp 所需的包。（在安装 node 时已经自动安装了 npm） 在命令行输入 npm install -g gulp 若一直没安装成功，请使用 cnpm 安装(npm的国内加速镜像) 开始帮我们干活吧！ gulp 入门指南 - 4 - 本文档使用 看云 构建 使用 gulp 压缩 JS 压缩 js 代码可降低 js 文件大小，提高页面打开速度。在不利用 gulp 时我们需要通过各种工具手动完成压 缩工作。 所有的 gulp 代码编写都可以看做是将规律转化为代码的过程。 规律 找到 js/ 目录下的所有 js 文件，压缩它们，将压缩后的文件存放在 dist/js/ 目录下。

C++ Extension ⼏几种途径 Java -> Dart ⼯工具：⽣生成接⼝口和数据模型的Dart代码 简化服务调⽤用⽅方式 XML JAVA 反射 Dart代码 服务注册及通信 索引 闲⻥鱼 - 让你的闲置游起来 ⽆无Dart基础 服务端开发同学 有Flutter基础 客户端开发同学 通过⽂文档和⼯工具，写Hello World基本不不需要指导 单线程异步开发模型 让你的闲置游起来 UI2Code UI⽣生成代码 Flutter 客户端UI代码 Data Bind ⽣生成协议 Dart Server 数据拼装 领域服务 研发⾃自动化 未来和研发⾃自动化的结合 闲⻥鱼 - 让你的闲置游起来 • Dart Server Framework • Dart Server IDEA Plugins 开源计划 闲⻥鱼 - 让你的闲置游起来

1 fs 9.4.2 stream 9.4.3 http 9.4.4 buffer 9.5 Web开发 9.5.1 koa 9.5.2 mysql 9.5.3 swig 9.6 自动化工具 10 期末总结 - 3 - 本文档使用 书栈(BookStack.CN) 构建 致谢 当前文档 《廖雪峰JavaScript教程》 由 进击的皇虫 使用 书栈(BookStack.CN) ome浏览器。打开网页出问题的童鞋请移步国内镜像。 安装后，随便打开一个网页，然后点击菜单“查看(View)”-“开发者(Developer)”-“开发者工具 (Developer Tools)”，浏览器窗口就会一分为二，下方就是开发者工具： 先点击“控制台(Console)“，在这个面板里可以直接输入JavaScript代码，按回车后执行。 要查看一个变量的内容，在Console中输入 时，经常需要在Console运行测试代码。 如果你对自己还有更高的要求，可以研究开发者工具的“源码(Sources)”，掌握断点、单步执行等高 级调试技巧。 打开新浪首页，然后查看页面源代码，找一找引入的JavaScript文件和直接编写在页面中的 JavaScript代码。然后在Chrome中打开开发者工具，在控制台输入 console.log('Hello'); ，回 车查看JavaScript代码执行结果。

⼯工程化体系集成 cli 命令⾏行行⼯工具 编译构建集成 ⽣生态扩展能⼒力力 npm 管理理⽀支持 Vue 组件机制 开发规范扩展 Vue 编码规范 Vue 语法⽀支持 Vue 引擎驱动 mpvue 的能⼒力力 好扩展 前端赋能 易易学习 超低上⼿手 成本 多端复⽤用 技术沉淀收益规 模化 提⾼高开发效率 减少重复劳动 ⾃自动化构建 组件化开发 企业级开发核⼼心能⼒力力 了了解⼩小程序能⼒力力 & 边界 了了解 Vue.js 特性 了了解前端构建 mpvue 做什什么 & 不不做什什么 设计⼀一种编码⽅方式 确定⼀一套语法集合 内置编译构建⼯工具 推荐示例例项⽬目模板 UI 组件库 常⽤用⼯工具库 第三⽅方平台⽀支持 H5 差异抹平和适配 mpvue only mpvue 为主 mpvue 做增量量开发 使⽤用场景 • 官⽅方标准使⽤用⽅方式 • 从零构建⼩小程序项⽬目 从零构建⼩小程序项⽬目 • quickstart 集成⽅方案 • mpvue ⽅方案为基础 • 不不同⽅方案边界隔离 • 差异化构建 + 集成 • 维持既有技术⽅方案 • 使⽤用 simple ⼯工具 • 定制构建策略略 # install vue-cli $ npm install --global vue-cli # create new project with template