场景，⽽而淘宝有不不少全栈场景 class ⽤用法，⽆无法多继承 TS 杂糅的 app/ctx 合并机制 体验不不同 Egg 解决的是 BFF 场景，⽽而淘宝有不不少全栈场景 TS 第⼀一代设计 第⼀一代设计 TS 解决复杂度问题 尝试引⼊入 IoC 解决复杂业务的问题 TS 配置 很早就开始使⽤用 ioc 注⼊入的⽅方式，苦于 js ⼀一 直没有很好的实践产品。 使⽤用描述⽂文件创建实例例（xml） class/interface TS 体验 集团中间件缺少描述，补充了了⼤大概 10 ⼏几个类的定义， 这样通过注⼊入就不不需要额外再摸索。 增加接⼝口描述 TS 体验 增加接⼝口描述 TS 第⼆二代设计 第⼆二代设计 TS 解决 Egg.js 体验 虽然服务层的使⽤用已经解决了了，但是和 egg 耦合的部分还是沿⽤用了了 egg 的写法，虽然有 变通的办法，但是需要在体验上更更进⼀一步。 TS @schedule @priority Import { controller } from ‘@midwayjs/decorator’ @func 休息⼀一下 休息⼀一下 TS ⾯面向未来的设计 ⾯面向未来的设计 TS 跨场景的设想 Web场景/⾃自启动场景/更更多⾃自定义场景。 正好碰上了了 Serverless 的浪潮，作为集团唯 ⼀一的 Node.js 架构团队，集团的领航者当仁 不不让的投奔进去。

前终端统⼀一⽅方案 Hippy-Vue 设计和实现 腾讯 / QQ 浏览器器 SuperTeam / xqkuang 背景介绍 Web 开发效率⾼高 ⽀支持多平台 可动态发布 体验差 能⼒力力弱 Native 开发效率低 ⽆无法跨平台 发布复杂 体验好 能⼒力力强 传统移动端开发模式，⽆无法满⾜足业务精细化运营需求，急需寻找⼀一种⾼高性能、跨平台、动态发布的开发解决⽅方案。 Code JavaScript Hippy 底层三⼤大特性 ⾼高性能可复⽤用滚动列列表 动画和⼿手势实现 X5 内核团队提供⽀支持 项⽬目架构 Hippy SDK 采⽤用三层设计，其中： • JavaScript 层：提供业务代码运⾏行行时的前端上下⽂文环境； • Native Framework 层：负责前终端通讯与 JavaScript VM，并提供 Native 相关模块； ⼆二进制传输协议，编解码性能更更好。 X5 V8 X5 团队特供 V8 引擎。 Hippy Layout iOS、Android 共享布局引擎， 纯 C 开发，只有 50kb。 项⽬目架构 Hippy SDK 采⽤用三层设计，其中： • JavaScript 层：提供业务代码运⾏行行时的前端上下⽂文环境； • Native Framework 层：负责前终端通讯与 Javascript VM，并提供 Native 相关模块；

学习 Web 浏览器 学习域名系统（又叫 DNS） 学习 HTTP/Networks（包括 CORS 和 WebSockets） 学习网页寄存（通称虚拟主机） 学习前端开发 学习用户界面／交互设计 学习 HTML 和 CSS 学习搜索引擎优化 学习 JavaScript 学习 Web 动画 学习 DOM、BOM 和 jQuery 学习网页字体 & 图标 2 1.6.1.14 (JavaScript 对象表示法) 学习 JS 模板 学习静态网页生成器 通过JS学习计算机科学 学习前端应用架构 学习数据（例如，JSON）API 的设计 学习 React & Redux 学习渐进式 Web 应用 学习设计 JS API 学习web开发工具 学习命令行的使用 学习 Node.js 学习 JS 模块系统 学习模块加载和打包工具 学习包管理工具 学习版本控制 学习网络／浏览器／应用的安全 多平台开发学习 导向学习 前端课程 前端开发学习的起点 前端资讯、新闻站和播客 第三部分：前端开发工具 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

在美团外卖的实践 14 FlutterWeb 性能优化探索与实践 36 设计稿（UI 视图）自动生成代码方案的探索 56 美团外卖终端容器无关化研发框架 74 一款可以让大型 iOS 工程编译速度提升 50% 的工具 96 从预编译的角度理解 Swift 与 Objective-C 及混编机制 108 美团民宿跨端复用框架设计与实践 165 美团跨端一体化富文本管理技术实践 186 包大小治理上的探索与实践 297 美团外卖持续交付的前世今生 326 微前端在美团外卖的实践 352 积木 Sketch 插件进阶开发指南 372 积木 Sketch Plugin：设计同学的贴心搭档 400 Native 地图与 Web 融合技术的应用与实践 431 目录 前端 | 2019 446 MTFlexbox 自动化埋点探索 447 Litho 在美团动态化方案 分实现细节的介绍，分享我们在移植和开发过程中的一些经验。希望能对大家有所启 发或者帮助。 背景知识和基础概念介绍 在适配开始之前，我们要明确好先做哪些事情。先来回顾一下 Flutter 的三层结构： 在 Flutter 的架构设计中，最上层为框架层，使用 Dart 语言开发，面向 Flutter 业务 的开发者；中间层为引擎层，使用 C/C++ 开发，实现了 Flutter 的渲染管线和 Dart 运行时等基础能力；最

ExtJS和AngularJS比较 原文地址：http://www.techferry.com/articles/ExtJS-vs-AngularJS.html ExtJS 和AngularJS 是两种企业级的富 UI设计框架。 这篇文章从优势、架构、测试、性能等各个方面比较了 ExtJS 和 AngularJS 我们用ExtJS和AngularJS开发了一个简单测试的应用程序，进行完整的性能测 试。我们选取了同 charts a t D3.js. 6. 学习成本 高 中等 架构 架构 7. 应用程序设计框架 ExtJS 5 支持 MVC (Model-View-Controller) 和 MVVM (M odel-View-ViewModel) MVW (Model-View-Whatever). 它支持流行的设计模式，比如 Model-Vi ew-Controller(MVC) 和 Model-View-Vie Model-View-Vie wModel(MVVM) 8. 依赖注入 Ext JS 能够通过扩展（ Deft JS）增加依赖注入 ✔ 9. 数据绑定 ✔ ✔ 10. 直接操作DOM元素 ✔ ✔ 11. 模块化 ✔ ✔ 测试 测试 12. 自动测试支持 通过扩展工具实现 ✔ 13. 测试框架或者测试工具 许多第三方的测试框架，比如 Siesta (专门为ExtJS优化), Jasmine and Mocha

业务package n Plugin n 外界资源 新pubspec.yaml 一键命令 模块化开发 业务框架升级之旅 接下来…… n 技术需求（背景） n 现有业务框架 n 现有业务框架的问题与挑战 n redux到tieba_redux 技术需求（背景） 定制版本、 快速开发新app 细粒度模块化 中台能力 一键配置生成 现有业务框架（传统做法） Model Presenter 带有编码规范的框架 n 满足拦截类开发需求 Ø 网络访问添加通用参数 Ø 打印action序列和State，加速问题定位 Ø 改变跳转，热修复 Redux 模块化 tieba_redux n 概念上的『和』与『分』 n 分之后的代码组织与运行 n 细粒度模块化的编码需求 tieba_redux GlobalRedux Tasks Actions Reducers Store State n 业务/服务/子系统 Tab容器化 生命周期 构建系统 tieba_redux Flutter Android插件之旅 接下来…… Flutter Android插件 n 插件设计与目标 n 问题与挑战 插件设计与目标 公共基础库 主包 Assets Runtime 运行容器 部署管理 壳（:flutter） 形态 内置 Java/res/lib 帖子内容 Java/res/lib

--downlevelIteration 编译选项 TypeScript Handbook（中文版） 107 TypeScript 2.3 之前迭代器只在编译目标为 ES6/ES2015 或者更新版本时可用。此外，设计迭代器 协议的结构，比如 for..of ，如果编译目标低于ES6/ES2015，则只能在操作数 组时被支持。 TypeScript 2.3 在 ES3 和 ES5 为编译目标时由 --downlevelIteration processEntity(e?: Entity) { validateEntity(e); let s = e!.name; // 断言e是非空并访问name属性 } 兼容性 这些新特性是经过设计的，使得它们能够在严格空检查模式和常规类型检查模式下 都能够使用。尤其是在常规类型检查模式中， null 和 undefined 类型会自动从 联合类型中删除（因为它们是其它所有类型的子类型）， { readFile } from "myLibrary/fileSystem/readFile`; readFile(); // readFile是'any'类型 支持UMD模块定义 一些库被设计为可以使用多种模块加载器或者不是使用模块加载器（全局变量）来 使用，这被称为UMD或同构模块。这些库可以通过导入或全局变量访问。 举例： math-lib.d.ts export const

首先，它涉及大量的外部 API。JavaScript 要发挥作用，必须与其 他组件配合，这些外部组件五花八门，数量极其庞大，几乎涉及网络应 用的各个方面，掌握它们绝非易事。 其次，JavaScript 语言有一些设计缺陷。某些地方相当不合理，另 一些地方则会出现怪异的运行结果。学习 JavaScript，很大一部分 时间是用来搞清楚哪些地方有陷阱。Douglas Crockford 写过一本 有名的书，名字就叫《JavaScript: 原生二进制代码的运行速度。各种语言（主要是 C 和 C++）通过编译 成 WebAssembly，就可以在浏览器里面运行。 （3）事件驱动和非阻塞式设计。 JavaScript 程序可以采用事件驱动（event-driven）和非阻塞式 （non-blocking）设计，在服务器端适合高并发环境，普通的硬件就 可以承受很大的访问量。 JavaScript 是一种开放的语言。它的标准 ECMA-262 是 页脚本语言。Brendan Eich 有很强的函数式编程背景，希望以 Scheme 语言（函数式语言鼻祖 LISP 语言的一种方言）为蓝本，实 现这种新语言。 1995年5月，Brendan Eich 只用了10天，就设计完成了这种语言的 第一版。它是一个大杂烩，语法有多个来源。 基本语法：借鉴 C 语言和 Java 语言。 数据结构：借鉴 Java 语言，包括将值分成原始值和对象两大 历史 - 19 - 本文档使用

Greeter 类的一个实例。 它会调用之前定义的构造函数，创建一 个 Greeter 类型的新对象，并执行构造函数初始化它。 在TypeScript里，我们可以使用常用的面向对象模式。 基于类的程序设计中一种最基本的模式是允 许使用继承来扩展现有的类。 类 介绍 类 继承 类 - 120 - 本文档使用 书栈网 · BookStack.CN 构建 看下面的例子： 1. class 在使用基于名义类型的语言，比如C#或Java中，这段代码会报错，因为Person类没有明确说明其实现 了Named接口。 TypeScript的结构性子类型是根据JavaScript代码的典型写法来设计的。 因为JavaScript里广 泛地使用匿名对象，例如函数表达式和对象字面量，所以使用结构类型系统来描述这些类型比使用名义 类型系统更好。 TypeScript的类型系统允许某些在编译阶段 padLeft("Hello world", true); // 编译阶段通过，运行时报错 在传统的面向对象语言里，我们可能会将这两种类型抽象成有层级的类型。 这么做显然是非常清晰 的，但同时也存在了过度设计。 padLeft 原始版本的好处之一是允许我们传入原始类型。 这样做 的话使用起来既简单又方便。 如果我们就是想使用已经存在的函数的话，这种新的方式就不适用了。 代替 any ， 我们可以使用_联合类型_做为

2009 年 Node.js：JavaScript 延伸到 Server 端 近两年：AMD、CommonJS 模块化标准 当前：正在制定 ECMAScript 6 标准 JavaScript 并不完美 JavaScript 并不完美 ● 程序结构不明显 ● 并非为性能设计的语言 ● 缺少一些基础功能的支持 ● 缺少统一的基础特性，共享复用难 变量提升（hoisting） var JavaScript source code dart2js Source map tree shaking minification Dart2js Tree-shaking ● 语言的设计影响性能 ● 使用snapshot启动速度快10倍 ● 运行时不能改变对象结构有利于VM优化 ● Dart VM 性能已超越 JavaScript V8 ● …… 高性能 性能测试 http://www