知行学院分享 Anybox Web

Size: px

Start display at page:

Download "知行学院分享 Anybox Web"

完贲
5 years ago
Views:

1 Anybox Web 安全可靠开放易易用的企业级云盘大家好我是青云的前端开发工程师段国伟, 主要负责青云存储产品线的前端开发, 今天由我来给大家简单介绍一下 Anybox 企业网盘的前端

2 这就是我们网盘的主页面在这里里用户可以查看自己在网盘中的文件, 最近使用, 收藏夹和回收站等用户也可以通过网页来上传文件和文件夹等

3 网盘提供了了常用文件的预览功能用户可以在线查看图片视频音频 Office 文档和 PDF 文件等

4 通过网盘用户可以很方便便的分享自己的文件给其他用户用户可以为文件生成一个共享链接设置链接的有效期密码等

5 1. 技术栈 2. 项目构建 3. 文件上传本次分享分成两节课, 第一节课里里会先给大家介绍一下网盘前端的技术栈, 讲讲我们都用了了什什么技术, 什什么框架组件等, 然后再介绍一下网盘的前端是怎么构建的, 会讲一下整个构建的流程网盘的文件上传功能我们放到第二节课介绍下面我们开始吧

6 Anybox Web 是一个典型的 B/S 架构的服务核心是在浏览器器中运行行的单页面应用, 和使用 django 框架的 web server 单页面应用

7 下面我先来看一下用户访问网盘时的流程图单页面应用

8 GET /recents GET /recents 单页面应用当用户打开浏览器器访问网盘时, 请求会先经过 Nginx, 然后发送到 django server 上

9 GET /recents GET /recents 单页面应用 django server 在收到请求后, 会首先向 API server 发请求检查用户是否登录

10 GET /recents GET /recents 单页面应用 HTML HTML User 如果用户没有登录, 会将用户重定向到登录页面如果登录了了, 则会再次向 API 发请求, 请求一些渲染页面必要的信息, 比如用户的头像语言等, 然后用得到的信息渲染一份 HTML 返回给浏览器器

11 GET /recents GET /recents 单页面应用 HTML HTML User 浏览器器在收到返回的 HTML 后又会去下载所需的 JS CSS 和图片等资源文件当 JS 文件下载完成之后, 经过 parse 执行行等步骤, 在浏览中运行行的单页应用就跑起来了了

12 time-tested crowd-tested Tons of Django packages available Django has excellent documentation The Django community is amazing and supportive Web framework 我们选择的是 Django, Django 和其他 Python web framework 相比有几个比较显著的优点 : Django 稳定可靠, 文档写的很好, 插件也很丰富, 有开箱即用的特点, 使用 Django 我们能很快的开发出所需的页面

13 GET /recents GET /recents 单页面应用 HTML HTML User Nginx 除了了转发浏览器器的请求到 django server 外, 还有个作用是 host 前端需要的静态资源文件

14 GET /recents GET /recents 单页面应用 HTML HTML User 对象存储 Bucket 在生产环境中, 我们会将 nginx 替换成对象存储, 方便便做版本控制和 CDN 分发

15 GET /recents GET /recents 单页面应用 HTML HTML User 对象存储 Bucket 缓存是 web 服务中必不不可少的组件, 我们使用的是 redis, 用于保存用户的登录状态和其他一些不不经常改变的数据等

16 单页面应用

17 刚才说的都是服务端用到的框架组件等, 现在我们来看看在浏览器器起运行行的单页应用都用到了了什什么单页面应用

单页面应用 Easy to Learn, Easy to Use Reusable Components Fast render with Virtual DOM It s Easier to Write with JSX The Ecosystem Great Developer Tools Easy to

比, 单页应用将很多路路由的逻辑和页面渲染的任务放到了了前端, 减少了了前后端的耦合, 在提高了了开发效率的同时, 也提高了了用户的使用体验 React 是目前使用最广泛用来的构建页面 UI 的 JS 库, 它不不但有平缓的学习曲线, 还有强大的社区支持, 而且 React 相关的

18 单页面应用 Easy to Learn, Easy to Use Reusable Components Fast render with Virtual DOM It s Easier to Write with JSX The Ecosystem Great Developer Tools Easy to learn and use Less boilerplate Full support for object-oriented programming Dealing with nested data is easy 前端我们是使用目前很流行行 React + MobX 为主的一个单页应用和传统的页面相比, 单页应用将很多路路由的逻辑和页面渲染的任务放到了了前端, 减少了了前后端的耦合, 在提高了了开发效率的同时, 也提高了了用户的使用体验 React 是目前使用最广泛用来的构建页面 UI 的 JS 库, 它不不但有平缓的学习曲线, 还有强大的社区支持, 而且 React 相关的文档和开源组件也非常丰富状态管理理我们使用的是 MobX 和 Redux 相比,MobX 不不但入门容易易而且速度更更快使用 MobX 作为状态管理理可以定义多个 store, 将不不同业务逻辑的数据区分开使用 MobX 改变状态时, 不不用像 Redux 那样需要写很多的 action 和 reducer, 直接修改就可以

19 单页面应用 Lodash Moment.js PDF.js 另外我们也使用了了一些其他很常见的第三方 JS 库, 比如工具库 lodash, 时间工具库 momentjs, 和在预览 PDF Office 文件时用到的 pdfjs 等

单页面应用 Local and global variables Nested Selector Mixin Extends Color functions Clean HTML & clean CSS Maintainable HTML & CSS Self-document code, readable Better naming convention Reduces style

20 单页面应用 Local and global variables Nested Selector Mixin Extends Color functions Clean HTML & clean CSS Maintainable HTML & CSS Self-document code, readable Better naming convention Reduces style conflicts 我们使用 Sass 作为 CSS 的预编译语言 Sass 代码比原生的 CSS 代码更更容易易读, 同时 Sass 还有有很多非常酷的特性, 比如支持变量量, 选择器器嵌套,mixin, 继承等, 借助 Sass 的这些特性, 大大提高的代码的可维护性和可扩展性, 进而提升了了开发效率另外, 我们还使用了了 BEM 来组织我们的 Sass 代码 BEM 是 Block,Element,Modifier 的缩写, 它是一种 CSS 的命名规范, 也可以作为 HTML 的结构规范通过 Block/Element/Modifier 这三种概念的划分, 有效的解决了了 CSS 中命名困难的问题, 同时也避免了了选择器器权重过高的问题

21 GET /recents GET /recents 单页面应用 HTML HTML User 对象存储 Bucket 好, 以上就是 Anybox web 的主要技术栈后面我们会支持许多新功能, 会引入很多新的技术, 等有机会再向大家介绍

22 1. 技术栈 2. 项目构建 3. 文件上传下面来给大家介绍一下网盘的前端是如何构建的不不同的前端项目使用的构建工具不不同, 希望下面的介绍能给大家一些参考和启发

23 UglifyJS 如何构建前端项目可能是让刚学前端开发的同学最困惑的地方因为这里里面有太多的概念和太多的工具在理理清这些工具的用途和他们之间的差别上花费了了很长时间现在我来给大家简单介绍一下在构建 Anybox Web 时我们都用了了哪些工具和怎么使用的

24 依赖管理理与安装资源编译 UglifyJS 我们可以将前端的构建过程分为两个大的步骤一是依赖管理理与安装二是资源编译这样我也可以将上面的工具分成两大类我们先来看看包管理理工具或者依赖管理理工具他们是用来安装和更更新项目中需要的第三方库

25 1. dependencies 2. devdependencies 前端项目的依赖又可以分为两类,dependencies 和 devdependencies, 前者是指应用运行行时的依赖, 后者是指项目开发或编译时的依赖例例如网盘前端用到了了 React Mobx Momnetjs 等第三方库, 这些库属于 dependencies, 而 Babel,webpack sass 等都是只有在开发时才用到的库, 属于 devdependencies

26 我们可以在项目的 package.json 中声明所需的依赖, 然后使用包管理理工具安装它们

27 Powered by enginers from google and faceboook include in nodejs 目前主要使用的包管理理工具有两个 : 一个是 NodeJS 自带的 NPM, 还有一个是由 Google Facebook 等工程师们合作开发的 Yarn

28 离线模式 : 如果你之前安装过某个包, 你就可以在没有网络连接的情况下再次安装它确定性 : 不不管是什什么顺序, 在不不同的机器器上的依赖会以同一方式安装网络适应 : 单个请求失败不不会导致安装失败, 请求失败时会重试相同的软件包 : 从 npm 安装软件包并使用相同的包管理理流程扁平模式 : 解析不不匹配的依赖版本为一个单一的版本来避免导致多个版本网络性能 : Yarn 可以高效地队列列化请求并且避免请求瀑布化, 使网络利利用率最大化网盘使用 Yarn 来管理理依赖, 因为它比 NPM 快速可靠,Yarn 使用格式详尽而又简洁的 lockfile 文件和确定性算法来安装依赖, 能够保证在一个系统上的运行行的安装过程也会以同样的方式运行行在其他系统上 Yarn 是命令和 NPM 几乎一样, 如果你熟悉 NPM, 那可以很快的上手 Yarn 想了了解如何安装和使用 Yarn, 可以访问 yarn 的官方网站

29 依赖管理理与安装资源编译 UglifyJS 依赖管理理与安装涉及到的工具比较少我们重点谈谈资源编译类的工具吧

30 JS Minify Sass Code Minify Compress Production Code 为了了帮助大家理理解不不同工具在编译过程中的作用, 我们先看一下这张简化的流程图网盘前端 JS 和 CSS 源代码大致要经过这几个编译步骤后成为生产环境的代码

31 图中有四个工具在编译过程中比较重要, 下面我们来逐个介绍下

32 Babel is a JavaScript compiler. 首先是 Babel, 它是一个 JavaScript 的编译器器, 它可以将 ES6+ 的代码转化成向后兼容的版本我们为什什么需要它呢?

33 ES6 是 JavaScript 历史上非常大的一次更更新, 这次更更新带来了了众多非常酷的新特性,

34 比如 Promise Promise

35 arrow function Arrow Function

36 spread operators Spread Opreators

37 async/await Async/Await

38 Class Class

39 Promise Arrow Function Spread Opreators Async/Await Class 借助这些新特性, 可以显著的降低我们代码的复杂度, 提高代码可读性和可维护性目前主流的浏览器器已经支持了了 ES6 的大部分新特性

40 但是, 用户使用的浏览器器并不不一定是最新版本, 这些低版本浏览器器缺少对这些新特性的支持, 如果让这些浏览器器直接执行行 ES6 的代码会报语法错误, 但是我们不不可能为不不同浏览器器写不不同版本的代码, 而且又非常想使用这些新特性

41 Transform syntax Source code transformations Polyfill features And more! 为了了解决这个矛盾, 我们可以使用 Babel 将 ES6+ 的源代码转化成低版本浏览器器兼容的版本

42 比如我们使用箭头函数定义一个 function, Babel 会将起编译成普通函数声明的形式

43 再比如我们在代码中使用了了 async/await, Babel 可以将其转化成 generator 的形式这两种版本的代码在执行行结果上没什什么区别

44 Code in ES6 兼容低版本浏览器器 Use next generation JavaScript, today. Both Win! 有了了 Babel 作为编译器器, 我们可以在源代码里里使用 ES6+, 用户的浏览器器也能正确执行行编译后的代码, 双赢!

45 static module bundler for modern JavaScript applications 第二个要给大家介绍的是打包工具 webpack 为了了解释为什什么我们需要一个打包工具, 让我们来简短的回顾一下 JavaScript 是怎么下载到浏览器器里里执行行的

46 最开始我们有一份 html 代码, 代码里里有一个 script 标签,src 是 js 文件的地址, 当浏览器器 parse 到这个 script 标签时就会去下载对应的 js 文件

47 慢慢的, 随着我们在页面上添加更更多的功能,js 代码会越来越多为了了更更好的组织代码, 我们采用模块的方法, 将不不同业务或者逻辑的代码放在不不同的 js 文件里里, 然后我们在 html 中再增加对应的 script 标签

48 模块依赖耦合 script tag 顺序 too many http requests 因为 html 是按顺序 parse 和下载文件的, 因此 script 标签在 html 中出现的顺序和模块之间的依赖顺序必须是对应的, 比如在某个模块 A 中引用了了模块 B, 那包含 B 模块的标签就要出现在 A 模块的前面当项目进一步增长之后, 将模块之间的依赖关系转化成 script 标签的顺序将变得越来越困难, 感觉就像是自己被绑住了了手脚还有一个问题是每次下载 js 文件都会产生一次 http 请求, 需要下载的文件越多, 消耗的时间也就越久, 这会严重影响页面的性能问题 : - 模块依赖 = script tag 顺序 - too many http requests

49 module-a.js module-b.js module-d.js bundler bundle.js module-c.js module-e.js module-e.js 为了了解决这些问题, 我们就需要一个打包工具, 将项目中的众多模块打包成一个或者几个文件, 由打包工具来维护模块之间的依赖顺序

50 然后我们只需要在 html 中写打包好之后的 js 文件就可以

51 常用的打包工具有 webpack, rollup, browserify 等, 网盘选用的是 webpack

52 webpack 也是目前使用最广泛的打包工具, 插件也最齐全 bundle js bundle css/images code split dev server

53 webpack 使用起来也非常简单, 一般我们的应用程序启动都有一个入口文件, 通过这个文件,webpack 会找到程序依赖的所有模块, 构建一个依赖图 Dependency Graph, 然后将所有的依赖合并到一个或几个文件中, 也就是我们常见的 bundle.js 关于 webpack 有太多可以说的东西, 比如使用 webpack 加载其他文件,code split 等, 由于时间关系, 我们就不不在这里里详细介绍了了

54 第三个要介绍的工具是 Sass, 它也是一个编译器器, 用来将 Sass 代码编译成 CSS 代码

55 CSS 的预编译语言有很多,Sass 是其中功能最强大的一种, 但是浏览器器不不认识 Sass 代码, 所以需要经过编译例例如我们有如下的 Sass 代码, 经过编译之后就会成为

56 最后一个工具是 PostCSS 它是一个 CSS 的处理理框架我们最常用的功能就是让它来自动为我们的 CSS 代码添加 vendor prefix

The major browsers use the following prefixes: -webkit-: Chrome, Safari; basically, any WebKit based browser -moz-: Firefox -o-: Old, pre-webkit, versions of Opera

57 The major browsers use the following prefixes: -webkit-: Chrome, Safari; basically, any WebKit based browser -moz-: Firefox -o-: Old, pre-webkit, versions of Opera -ms-: Internet Explorer and Microsoft Edge CSS 中很多试验阶段和非标准阶段的属性, 为了了能安全的使用这些属性, 我们需要在属性前加上 vendor prefix 我们在代码中经常见到的 `-webkit-` `-moz-` 等就是适配不不同浏览器器的 vendor prefix

58 例例如我们使用 input-placeholder 来设置 input 元素的 placeholder 样式, 需要在前面加上对应的 vendor prefix 才能在相应的浏览器器上看到预期的效果

59 但是每次都写这些 vendor prefix 很麻烦, 我们可以使用 PostCSS + Autoprefixer 插件来减少重复劳动

60 源代码里里我们只需要写不不带 vendor prefix 的属性,Autoprefixer 会自动识别那些属性需要加, 那些不不需要

61 好, 以上就是对这四个工具的简单介绍

62 Minify & Gzip 在前端静态文件编译中还有非常重要的一环, 那就是 minify 和压缩网盘的前端是一个单页应用, 虽然经过了了 webpack 做代码分片, 但是单个 JS 文件的体积仍然很大, 为了了加快页面加载的速度, 提高用户体验, 对静态文件进行行 minify 和压缩是构建过程中必不不可少的一步

63 删除评论 Minify 删除换行行删除不不必要的空格, 括号和分号缩短变量量名属性名参数名类名和方法名等等等 Minify 主要执行行的操作是去除评论空格缩短变量量名属性名参数名类名和方法名等

64 // Straightforward bubble sorting... function bubblesort(list) { var items = list.slice(0), swapped = false, p, q; for (p = 1; p < items.length; ++p) { for (q = 0; q < items.length - p; ++q) { if (items[q + 1] < items[q]) { swapped = true; function bubblesort(f){var a=f.slice(0),d=! 1,c,b;for(c=1;c<a.length;++c) {for(b=0;b<a.length-c; ++b)if(a[b+1]<a[b]){d=!0;let e=a[b];a[b]=a[b+1],a[b+1]=e;}if(! d)break;}return a;} let temp = items[q]; items[q] = items[q + 1]; items[q + 1] = temp; } } 例例如下面这段代码, 经过 minify 之后会变成这样虽然经过 minify 之后的文件基本不不可读了了, 但是代码仍然能被浏览器器正常执行行

65 Gzip Once upon a midnight dreary, while I {pon}dered weak an{d wea}{ry,} Over many{ a }quaint{ and }curious volume of forgotten lore, W{hile I }nodded, n{ear}ly napping, su{dde}n{ly }th{ere} ca{me }a t{apping,} As{ of }so{me o}ne gent{ly }r{apping, }{rapping} at my chamb{er }door. `'Tis{ some }visitor,'{ I }mu{tte}r{ed, }`t{apping at my chamber door} - O{nly th}is,{ and }no{thi}{ng }m{ore}. 压缩的主要操作是找到文件中重复的字符串串, 然后用一个指向第一个重复字符串串的指针替换它 Gzip 是前端静态文件最常用的压缩方法压缩之后的代码不不能被浏览器器正常执行行, 当让更更不不能直接阅读, 必须要先解压缩才可以

66 location /dist { gzip on; gzip_types text/plain text/css application/javascript ; } 压缩操作一般不不会包括在我们资源编译的过程里里, 如果使用 Nginx host 静态资源文件的话, 只需要开启 Nginx 的压缩功能并指定需要压缩的文件类型就可以

67 Minify & Gzip they are good friends! minify 和压缩是前端静态文件编译比不不可少的步骤, 经过压缩和 minify 之后文件的体积会减少 40% ~ 90%, 大大缩短了了文件的下载时间

68 JS Minify Sass Code Minify Compress Production Code 上面说了了这么多构建前端代码需要的步骤, 我们怎么把他们联系起来, 并做到自动化呢?

69 下面再给大家介绍一个可以将上面的步骤关联起来的工具, 叫 gulp gulp 是一个 task runner, 我们可以将上面工具的工作都定义成一个一个的 task, 然后使用 gulp 去执行行他们

70 gulp.task( scss ) gulp.task( postcss ) gulp.task( minify-css ) dist 比如可以将 css 代码的编译步骤分别定义成三个 task,sass task 会将 Sass 代码变成 CSS 代码, 并将生成的 css 代码作为输入, 传给 postcss task 去添加 vendor prefix, 然后又把已经添加 vendor prefix 的代码 minify 后放到 dist 文件夹里里

71 1. 技术栈 2. 项目构建 3. 文件上传

72 Thank you.

Kubenetes 系列列公开课 2 每周四晚 8 点档 1. Kubernetes 初探 2. 上手 Kubernetes 3. Kubernetes 的资源调度 4. Kubernetes 的运行行时 5. Kubernetes 的网络管理理 6. Kubernetes 的存储管理理 7.

Kubernetes 包管理理工具 Helm 蔺礼强 Kubenetes 系列列公开课 2 每周四晚 8 点档 1. Kubernetes 初探 2. 上手 Kubernetes 3. Kubernetes 的资源调度 4. Kubernetes 的运行行时 5. Kubernetes 的网络管理理 6. Kubernetes 的存储管理理 7. Kubernetes