•混合开发 工程化开发模式Ⅰ •IDE直接集成Flutter产出模式 •快速方便集成 无法同步Dart代码 无法启动调试 Android IOS 工程化开发模式Ⅱ • Flutter工程集成NOW工程模式 • 修改NOW工程结构 • 将Dart代码与Native代码一起存放GIT • 修改编译脚本 • 支持断点调试 无法跨终端同步及维护Dart代码 工程化开发模式Ⅲ • 跨终端团队协作远程构建产出模式 • Dart代码独立GIT • 远程构建平台配置终端推送地址 • 构建完成自动推送更新 QCI 远程构建平台 Android Git iOS Git 工程化开发模式Ⅲ 1. 拉取Dart分支 2. 拉取Android /iOS分支 3. QCI设置分支及对应版本号 4. 开发提交代码 5. 启动构建同步至分支 开发步骤： 工程化开发模式总结 工程化开发模式总结 远程构建产出模式 Flutter工程集成IDE工程模式 IDE工程集成Flutter产出模式 适合个人独立开发 方便团队内部协作开发 方便开发调试 适合跨团队协作开发 分享目录 uNOW直播与Flutter uNOW直播中Flutter的开发模式 uNOW直播中Flutter的工程实践 u技术思考 版本迭代 Flutter NOW Version1.0 动态搜索页 Flutter

Flutter Web 页面要满足投产要求，还 有大量的工作（上图黄色部分所示），主要包括： ● 扩展基础依赖（如：Request、Router、埋点等）在 Web 侧的支持。 ● 完善工程化建设，例如：静态资源优化、构建与部署自动化。 ● 深入滚动性能与页面加载性能优化，使得 Flutter Web 能够满足基本的投产要求。 四、详细设计 4.1 基础依赖建设 企业级应用的基础开发依赖 Flutter 业 务代码到 Web 产物的整体流程，详细流程如下图所示： 编译流程 从流程中我们可以看到，Flutter 在 Web 端目前只支持 Dart–>JS 的转换，以及 UI 层的对齐，在工程化和性能优化方面做的工作并不多。 因此，我们必须解决以上的性能问题，才能保证我们的业务可以正常的交付。通过对 编译流程的仔细分析与梳理，我们在 AOT 产物生成之前对 Flutter SDK 进行定制， 页面滚动过程中会频繁进行位置信息的计算，在复杂的业务场景 （如页面存在大量动画） 仍然会暴露出一定的问题。因此对滚动性能的进一步优化也会 是我们未来的工作重心。 5.4 业务迭代效率 基于团队对 Flutter Web 工程化能力的建设和 Flutter 良好的跨平台特性，Flutter Web 在美团外卖商家学院改版需求的落地，大大提升了迭代效率，估算人效提升 40% 以上，计算公式为： 其中 E 代表人效提升，Ci

前端的分层 • 为什么单页应⽤用⼀一定要分层？ – 前端逻辑有⼀一定规模，分层有利协作 – 便于保证数据的⼀一致性 – 业务逻辑的复⽤用 – 每个层次的单独可测试 • Struts这种服务端MVC的弱点在哪⾥里？ – 拉长了视图层的⽣生成和渲染 – 不利于UI⼈人员协作 ⾃自定义标签 • 在创建界⾯面时，声明式代码是有优势的。 • HTML的标签集是⽐比较贫乏的。 它能利⽤用已有的什么？ – 服务、前端业务逻辑 • Angular有哪些特性适合移动端开发？ – ngTouch • 还有更完善的选择吗？ – Ionic 前端的⼯工程化 • ⼀一个软件系统，并不只是简单功能的堆砌 • 当规模扩⼤大的时候，有⼀一些边际效应 – 某个JS模块被修改，如何得知会影响谁？ – 某个界⾯面⽚片段被调整，会影响什么界⾯面？

SVG、canvas、webGL） 动画工具 JSON 工具 占位符内容工具 测试工具 前端数据存储工具 (例如客户端的数据存储方案) 模块加载／打包工具 模块／包管理工具 托管工具 项目管理以及代码托管工具 协作与沟通工具 内容管理 托管／API 工具 后端即服务工具 离线工具 安全工具 构建工具 部署工具 4 1.7.38 1.7.39 1.7.40 1.7.41 网站／应用监控工具 占位符内容工具 测试工具 前端数据存储工具 (例如客户端的数据存储方案) 模块加载／打包工具 Introduction 9 模块／包管理工具 托管工具 项目管理以及代码托管工具 协作与沟通工具 内容管理 托管／API 工具 后端即服务工具 离线工具 安全工具 构建工具 部署工具 网站／应用监控工具 JavaScript 错误报告／监控 性能工具 寻找工具的工具 可供使用。以下是一张关于所 有在开发网站或者网络应用时可以使用的公共接口的表。 — Mozilla 相关文档： Web API 公共接口 超文本传输协议 (HTTP) 超文本传输协议（HTTP）是一个为分布式的、协作的、多媒体的信息系统指定的应用协 议。HTTP 是万维网数据交流的基础。 — 维基百科 相关规范： 超文本传输协议 -- HTTP/1.1 HTTP/2 统一资源定位符 (URL) 统

mpvue 开发框架介绍和最佳实践 ���Vue.js������� 美团酒旅 - 终端研发组 - 基础服务平台 动态化技术⽅方向，⼩小程序应⽤用、RN 应⽤用 努⼒力力于⼩小程序⼯工程化开发、业务级应⽤用 ������美团点评 ⽬目录 CONTENTS mpvue 介绍 使⽤用⽅方式 设计思路路 实践 & 展望 1 mpvue 介绍 作为⼩小程序应⽤用开发框架，mpvue 作为⼩小程序应⽤用开发框架，mpvue 具有什什么特点？为开发者 带来了了是什什么？当前社区的反馈如何？ mpvue 是什什么 使⽤用 Vue.js 开发⼩小程序的前端框架 Vue.js 代码 ⼩小程序代码 ⼯工程化体系集成 cli 命令⾏行行⼯工具 编译构建集成 ⽣生态扩展能⼒力力 npm 管理理⽀支持 Vue 组件机制 开发规范扩展 Vue 编码规范 Vue 语法⽀支持 Vue 引擎驱动 mpvue

基于Electron Vue的桌面应用开发实践 赵 帅 前端工程师 @美团点评-到店事业群 负责-度假业务系统⼯工程化 瓦匠桌⾯面应⽤用开发者 瓦匠应用的介绍 02 桌面应用的技术选型 桌面应用开发总结 01 04 Electron Vue项目实践 03 应⽤用介绍 瓦匠 瓦匠⼯工作台 ⼀一体化解决⽅方案 提⾼高开发效率 应⽤用介绍 背景概述 需求类型 CRUD⻚页⾯面 兼容，DOM，组件、性能，…… Electron应⽤用技术体系推荐 检查\测试 打包构建 开发调试 devtron Vue-devtools Electron —inspect ESLint webpack ⼯工程化 DevOps平台 监控平台 版本管理理平台 数据统计平台 Electron-build Spectron + Mocha 基础设施 能⼒力力SDK 基础框架 Electron 应⽤用架构

DSL 解析 Web 应⽤用多元化 组件化 内容综述 基础篇 P1-P3 进阶篇 P4-P5 原理理篇 P6-P7 实战篇 P8 webpack 的基本概念和⽇日常 开发的实⽤用技巧 以⼯工程化的⽅方式组织 webpack 构 建配置，和 webpack 打包优化 详细剖析 webpack 打包原理理 和插件、Loader 的实现 从实际 Web 商城项⽬目出发， 讲解 webpack

跨平台 ● 天然的MVC（HTML+CSS+JavaScript） 当前的Web开发 ● Web 开发越来越复杂：项目大，团队成员多 ● 前端功能越来越多：CS→BS→CS ● 大型应用维护和协作难 ● 性能弱，启动速度慢 ● 工具支持弱 ● 仔细选择技术方案和开发规范 Web 开发中还有许多问题有待解决... 未来的方向？ Chrome OS 和 Chromebook Chrome 数据绑定就是自动化实现这种单向绑定或双向绑 定 组件是新技术？ 当然不是！思想和各种实现早就有，Web中也 有，但 Web 缺少对组件技术的基础支撑。——我 ● 组件技术适合于现代的软件环境 ○ 软件更新快、规模大、强调协作等 ○ 组件的概念、软件IC ● 组件的可独立发布性要求“接口与实现分离” ● 组件infrastructure,组件体系 ○ COM、CORBA、J2EE/EJB ● 中间件(middleware)市场

TypeScript TS 我们都知道 TypeScript 的优势 12 3 类型描述 更更多的 Feature ⽀支持 ⾯面向接⼝口编程 TS 个⼈人开发⾯面向类型编码， 协作时⾯面向接⼝口编程 TS 开发时增加更更多接⼝口定义， 数据定义，参数定义 TS 跨协议转换 TS 进⼊入正题 进⼊入正题 我们是来解决问题的 TS Why is Midway

因为它本身就包含了一个状态信息，即目前是否处于暂停态。 Generator与协程 Generator 函数的语法 427 协程（coroutine）是一种程序运行的方式，可以理解成“协作的线程”或“协作的函 数”。协程既可以用单线程实现，也可以用多线程实现。前者是一种特殊的子例程， 后者是一种特殊的线程。 （1）协程与子例程的差异 传统的“子例程”（subroutine）采用堆栈式“后进先出”的执行方式，只有当调用的子 函数的调用者，才能将程序 的执行权还给 Generator 函数。如果是完全执行的协程，任何函数都可以让暂停的 协程继续执行。 如果将 Generator 函数当作协程，完全可以将多个需要互相协作的任务写成 Generator 函数，它们之间使用 yield 表示式交换控制权。 应用 Generator 函数的语法 428 Generator 可以暂停函数执行，返回任意表达式的值。这种特点使得 那么，有没有更好的写法呢？ Generator 函数 协程 传统的编程语言，早有异步编程的解决方案（其实是多任务的解决方案）。其中有 一种叫做"协程"（coroutine），意思是多个线程互相协作，完成异步任务。 Generator 函数的异步应用 438 协程有点像函数，又有点像线程。它的运行流程大致如下。 第一步，协程 A 开始执行。 第二步，协程 A 执行到一半，进入暂停，执行权转移到协程