(改)AI时代的移动技术革新-Node全栈-i5ting.key

Size: px

Start display at page:

Download "(改)AI时代的移动技术革新-Node全栈-i5ting.key"

梓吉
4 years ago
Views:

1 Node 全栈阿里里巴巴前端技术专家 i5ting 狼叔

2 个人简介他们叫我狼叔姓名 : 桑世龙部门 : 阿里里巴巴大文娱事业部简要介绍 : 嗷呜 Node.js 布道 StuQ 明星讲师被坑的 CTO 晒娃狂魔

3 2017

4 压缩 uglifyjs, jsmin,csso 模块系统 CommonJs, AMD, ES6 Modules 依赖管理理 npm, bower 图片压缩 imagemin 资源处理理 DataURL js 友好语言 coffee, babel,typescript 模板引擎模块加载器器 jade, handlebars,nunjucks require.js, jspm,sea,system.js CSS 预处理理 PostCSS less sass 构建工具 grunt, gulp, make 模块打包器器 browserify, webpack

5 前端 = 钱端

6 目录 1. AI 时代的三端分析 2. 前端工程化构建与 Webpack 3. 更更了了不不起的 Node.js 4. 我眼中 Node 全栈

7 1 AI 时代的三端分析

8 我在做什什么播放器器是有前置和后置条件的, 前置是播放页加载方式, 后置是各种播放接口, 非单一优化点播放页播放接口加载方式播放器器 ups/cdn 等

9 优化无止境压缩 cdn 图片切分 gzip 首屏渲染加载顺序减少请求常规优化数据前置防盗链播放页 Player 播放接口

10 分块加载技术 Bigpipe res Browser domready jquery domcomplete 布局 P1 P2 Pn 渲染模块首屏 Server res 渲染模块完成 res.end()

11 PC & H5 还有前途吗? 移动互联网时代已死? 太远?

12 AI 时代已经来了了

13 AI 时代的前端从单兵, 到组团 ai 三端对齐移动端 pc pc client

14 从移动端的发展看未来 native < hybrid < rn/weex < h5 c/s 架构到 b/s 架构, 该对瘦客户端予以一定的支持

15 从移动端的发展看未来重点是开发变得无比复杂 Here is is the advantage of of the layout of of the way Vue MVVM 编译渲染 Runtime one two three four five

16 2 前端工程化构建与 Webpack

17 依赖下载下载某个库或插件下载它的依赖, 以及依赖的依赖无穷尽

18 依赖管理理 npm/bower

19 脚本加载 window eval iframe $.getscript()

20 模块系统使用标准的模块系统来处理理依赖和导出每个文件是一个模块使用模块加载器器或打包器器进行行处理理 AMD, CommonJS, ES6 Modules

21 CommonJS require("..."): Loads module, returns exports require("./helpers.js"):... by relative path, returns exports require("jquery"):... from dependencies manager folder exports or module.exports export object module exports require global

22 AMD CommonJS 中逐渐分裂出了了 AMD, 专门用于浏览器器的因为浏览器器没有 io 读写 api

23 核心代码 Amd cache - define - require 按需加载

24 以前的做法使用多个 <script> 标签加载手动管理理顺序手动管理理加载哪些

现在的做法开发环境产品环境 module loader module bundler 依赖管理理模块系统 runs in the browser and loads modules when they are requested easy to use less optimized for production usage runs in

25 现在的做法开发环境产品环境 module loader module bundler 依赖管理理模块系统 runs in the browser and loads modules when they are requested easy to use less optimized for production usage runs in preparation and bundles modules into static files needs a preparation/build step more optimized for production usage require.js r.js\browserify\ grunt/gulp systemjs webpackjspm

26 所有资源都是模块

27 Webpack 打包过程从配置文件里里找到 entry point 解析模块系统解决依赖模块依赖处理理 ( 读取, 解析, 解决 ) 合并所有使用的模块合并模块系统的运行行时环境产生打包后的文件

28 以前的做法

29 浏览器器里里解包过程通过 <script> 加载 webpack 打包后的文件加载模块运行行时环境加载 entry point 读取依赖解决依赖执行行 ( 带有依赖的 )entry point

30 演进过程 1. <script> 混乱加载 2. 各种模块系统标准,commonjs/amd/es6 module 3. 模块加载器器,requirejs/sea/systemjs 4. 模块打包器器,webpack/r.js/jspm/browserfy A. 合并入口, 对外暴暴露露的只有 entry point B. 提供浏览器器运行行环境 ( 内置模块加载器器 ) C. 优化 (tree-shaking DCE 无用代码移除等 )

31 时髦的开发模块 1 Loaders 模块 2 合并转换降级优化压缩模块 n plugins webpack

32 今天的前端你只管写就好了了其他的 webpack 来你能写好, 就好了了你能写, 就好了了你能, 就好了了你, 就好了了

33 打包器器的演进 browserify commonjs 规范 webpack 1 多种模块 rollup webpack 2 利利用 es6 模块能静态分析语法树的特性, 只将需要的代码提取出来打包, 能大大减小代码体积 Parcel

34 前端工程化

35 当下面临的问题开发测试成本增加客户端性能受影响

36 YKit Ykit 工具? 使业务同学专注于研发

37 YKit 工作原理理

38 构建优化

39 Webpack 本地服务

40 YKit 本地服务 Ykit 会根据请求的资源进行行入口过滤, 仅打包页面所请求的资源

41 Webpack 本地服务

42 YKit 本地服务

43 效果对比

44 压缩优化使用进程集群, 一个进程压缩一个资源防止 Webpack 内存溢出崩溃

45 效果对比

46 问题你觉得, 复杂么?

47 3 更更了了不不起的 Node.js

48 一定有你不不知道的应用场景网站 ( 如 express/koa 等 ) im 即时聊天 (socket.io) api( 移动端,pc,h5) HTTP Proxy( 淘宝 Qunar 腾讯百度都有 ) 前端构建工具 (grunt/gulp/bower/webpack/fis3 ) 写操作系统 (NodeOS) 跨平台打包工具 (PC 端的 electron nw.js, 比如钉钉 PC 客户端微信小程序 IDE 微信客户端, 移动的 cordova, 即老老的 Phonegap, 还有更更加有名的一站式开发框架 ionicframework) 命令行行工具 ( 比如 cordova shell.js) 反向代理理 ( 比如 anyproxy,node-http-proxy) 编辑器器 Atom VSCode 等

$js 跨平台 01 前端 (web+h5) 移动端 (hybrid) PC 端 NPM 03 前端 react\vue\angular 应用实践架构 Node 后端 02 核心特性 Web$

49 更更了了不不起的 Node.js 跨平台 01 前端 (web+h5) 移动端 (hybrid) PC 端 NPM 03 前端 react\vue\angular 应用实践架构 Node 后端 02 核心特性 Web 应用 Api rpc 测试部署最佳实践微服务厂商支持 04 工具各种预编译构建工具 webpack/gulp 工程化, hack 技巧 npm 等

50 做合适的事儿大前端 -> Api -> oltp(node java go) -> olap(dw && bi) -> data mining -> ai 利利益与时间

51 贯穿开发全过程 rpc 服务

52 页面即服务

53 npm 上 45w+ 的模块, 叫生态

54 异步流程控制

55 学习重点

Hippy-VueConf

Hippy-VueConf 前终端统一方案 Hippy-Vue 设计和实现腾讯 / QQ 浏览器器 SuperTeam / xqkuang 背景介绍传统移动端开发模式, 无法满足业务精细化运营需求, 急需寻找一种高性能跨平台动态发布的开发解决方案 Web 开发效率高 Native 开发效率低前终端一体化开发效率高支持多平台无法跨平台支持双平台可动态发布发布复杂可动态发布体验差体验好