分享第二届中国前端开发者大会与会心得

by admin on 2020年3月14日

在1月15日-14日于法兰克福设立的 VueConf TO 2018 大会上,尤雨溪发布了名叫 “
Vue 3.0 Updates ” 的主旨演说,对 Vue 3.0
的翻新陈设、方向进行了详细阐释。最近该发言的 PPT 也已上传至 谷歌(Google卡塔尔国文书档案,感兴趣的可点此查阅。 

图片 1

Vue 3.0 动态大旨概述

增加生产本事特色

  • 提供函数式的写法(Vue
    专门项目hooks写法),能够组合vue的有的特征,和react的hooks达成的守旧差不离
  • flow移除,深度结合typescript
  • 中央信赖体积更加小,虚构DOM比较算法优化,数据掣肘基于 Proxy 的改过侦测
  • 作用扶助 tree-shaking

移除特性

  • 3.0 未有 class 风格,废弃(Class API 议事原案已废除)

下面我们来拜会 Vue.js 手艺分享详细的情况的内部意况呢。

图片 2

           

Vue.js 才具分享

图片 3

Vue.js 技巧共享

能够见见,Vue 3.0 将会:

               

大纲

图片 4

大纲

  • Vue 团队和进步现状介绍
  • 兼备思路及与其余框架的相比较
  • 生态介绍和方案推荐
  • — 午休 —
  • 3.0 新特征、改换介绍
  • Vue 的培养和读书路径 & QA

1、更快

               
第一届中中原人民共和国前端开拓者大会(FDCon2017)是在香岛设立的照准前面叁个技能(HTML5,CSS,JS)的互连网开荒者所开办的最严肃和高尚的连锁技巧会议,由技巧社区TopGeek主办、汇智Tek联合主办,致力于推动各个前端本领等在移动互连网领域的研究开发和选拔。

集体 / 发表现状

图片 5

公司腾飞

  • Virtual DOM 完全重写,mounting & patching 提速 百分百 ;

  • 更加多编写翻译时(compile-time)提醒以压缩 runtime 花销;

  • 借助 Proxy 观望者机制以满足全语言覆盖及更加好的质量;

  • 扬弃 Object.defineProperty ,使用越来越快的原生 Proxy ;

  • 零器件实例开端化速度增加 100% ;

  • 提速一倍/内部存款和储蓄器使用裁减50%。

               
随着新一代的前端本事的升华,给前端开辟者带给庞大的换代应用实行机缘,本大会以“高效前端开荒试行和翻新”为主旨,内容包涵电子商务、旅游、门户、搜索、分类广告、移动网络等多样业态的才干经验分享,涉及各样WEB和应用程式前端开拓手艺和构造划假造计等方法论。

前行现状

图片 6

迈入现状

  • Chrome DevTools: 93.2万周活跃客户
  • 对比:React ~160万
  • npm 下载量:~400 万次/月
  • Jsdelivr CDN:5亿次引用/月
  • GitHub stars:13.6万
  • 全 GitHub 第三,实际代码项目第一

图片 7

                参预解说的第一有以下大咖:

全球化的影响力

图片 8

全世界化的影响力

  • 分布世界内地的线下集会
  • 现阶段一年一度在世界各州实行的 Vue 焦点会议:
  • VueConf 中国
  • Vue.js Amsterdam
  • VueConf US
  • Vue Fes Japan
  • VueConf Toronto
  • VueDay Italy
  • Vue Summit Brazil

2、更小

图片 9

完美的反映

图片 10

理想反馈

  • State of JavaScript 2018 调查
  • 前边一个框架知足度第一
  • StackOverflow 2019 年份考察
  • Most Loved Web Frameworks 第二
  • Tree-shaking 更友好;

  • 新的 core runtime: ~10kb gzipped

                 

接纳集团遍及全球

图片 11

选拔公司遍布满世界

图片 12

                 
Vue Technology LLC 创始人 尤雨溪首要介绍了把2.0发布之后的张开意况,满含接下去他本着Vue
2.0版本迭代陈设的远望。Vue经验了技艺上新的调换,2018年二月中发布了2.0,从头重写但是保留了多方面API。引进了Flow类型检查,升高代码强健性。基于virtual
 dom的渲染机制,更轻、越来越快,得到跨平台渲染技能,还应该有官方Typescript扶植。尤雨溪提议,Vue
2.0版本还是是应用模板,Vue有叁个把模版编译到渲染函数的历程,首先这么些构造能扶植模板和手写函数,对于一些客商来讲更趋向渲染函数,能够给她们用真的的程序语言进行表述的灵活性。

团队

图片 13

团队

  • 20 人的外向宗旨团队,来自 世界内地,大部分平凡专门的学问与 Vue 相关
  • 独立运行,资金重要来源于赞 助商,两年来稳步增加
  • 境内有一人开采者通过 OpenCollective 资金专职维 护 CLI 及工具链

3、更易维护

                  Vue 2.0 2017年展望:

与任何框架的可比

图片 14

与其它框架的可比

  • Flow -> TypeScript

  • Decoupled Packages(解耦包)

  • 编写翻译珍视写

                                               
1、越来越好的TypeScript整合:TypeScript团队为Vue量身塑造越来越好的类型类型推导。

到底是“框架”还是“库”?

图片 15

到底是框架仍旧库

图片 16

                                                2、单文件组件 CSS
改良:>>> 和 ::slotted 选用器,CSS variable theming

“只是一个视图层库”

图片 17

只是一个视图层库

4、更易于原生

                                               
3、
SSXC60 品质进一层优化 

不 “只是叁个视图层库” !

图片 18

并非二个库

  • 自定义 Renderer API

*                                                4、Vuex 与 Rx 的整合*

“渐进式框架”

图片 19

渐进式框架

图片 20

                                               
5、
依照 Proxy 的响应式系统重构

运用复杂度 vs. 框架复杂度

图片 21

复杂度相比较

5、让开采者更自在

                                                       
○ 不再供给 Vue.set
                                                       
○ Lazy observation
                                                       
○ 显式营造响应式对象 

框架功效

图片 22

框架功用

图片 23

发展史

图片 24

发展史

  • Exposed reactivity API

  • 轻便识别组件重新渲染的始末

  • 改进 TypeScript 以支持 w/TSX

  • 改革警示追踪

  • Experimental Hooks API

  • Experimental Time Slicing Support

  • 支持 IE11

                                                6、HTML Modules:

“JavaScript 疲劳”

图片 25

JavaScript Fatigue

图片 26

                                                       
相似单文件组件的新专门的工作(由 Google 起草中)

渐进式框架 The Progressive Framework

图片 27

渐进式框架

图片 28

定义

图片 29

定义

PPT 地址:Vue 3.0 Updates

*                 * PPT分享链接 : 

对比 Angular

图片 30

对比 Angular

  • 越来越灵活的适应各个处境
  • 默许 API 相符纯前端背景的开辟者 / 小快灵场景
  • 相配 TypeScript 也得以顺应传统 Java 后端背景的开拓者 / 大型项目
  • 更低的补助资金,越来越快的左侧速度
  • 底层的 Virtual DOM 在高等场景下提供越多的狡猾
  • 巨型应用中与 TypeScript 的构成不比 Angular
  • 3.0 中会针对性巩固

(文/开源中国State of Qatar    

【Vue 2017现状和展望】尤雨溪-Vue Technology LLC 创始人, Vue.js 作者  

 http://note.youdao.com/noteshare?id=81c3bfc1633ea496d70375bdd92d728a

对比 React

图片 31

对比 React

  • 对大许多科普现象都提供了事实规范方案
  • 无需额外自行科学钻探接收方案
  • 在供给情形下也足以 换用自行研制方案
  • 模版提供更融洽的就学曲线
  • 再者揭穿底层 Virtual DOM 用于高等场景
  • 重型应用中与 TypeScript 的重新整合一时半刻不如 React
  • 3.0 中会指向性巩固,非常是 TSX
  • 对标 React 16+
  • Vue 相像能够兑现相符 Hooks 的逻辑复用机制
  • 3.0 援助时间分片

 

与任何具备框架的界别

图片 32

与其余全数框架的差异

  • 自带的响应式系统 (Reactivity System卡塔尔(قطر‎
  • 看似于 MobX,但与框架自个儿的整合更无缝
  • 在头昏眼花组件树中提供比 React 更可信的翻新侦测
  • 3.0 将暴光越多底层响应式 API
  • 单文件组件 (Single File Components卡塔尔(قطر‎
  • HTML 的本来延伸,相符直 觉的代码协会办法
  • 百样玲珑的工具链
  • 预微型机帮助
  • Scoped CSS
  • webpack 热更新
  • IDE 支持 (VSCode + Vetur)
  • Linter 支持 (eslint-plugin-vue)

             图片 33

React 的组件更新触发

图片 34

React 的组件更新触发

 

Vue 的组件更新触发

图片 35

Vue 的组件更新触发

                  蜂窝网框架研究开发部高档研究开发董事长
魏晓军首要介绍了CWranglerN-WEB(Ctrip React Native Framework For
Web),首要分八个部分,一个是讲什么样是C猎豹CS6N-WEB。第二是CHighlanderN-WEB的布局设计。第三哪些利用C宝马X3N-WEB。第四CHavalN-WEB的现状及发展。

生态介绍/方案推荐

图片 36

生态介绍/方案推荐

*           *       CSportageN-WEB现在的张望:

法定工具链

图片 37

法定工具链

  • 路由:vue-router
  • 事态管理:vuex
  • 创设筑工程具脚手架:vue-cli
  • 开垦者工具:vue-devtools
  • IDE 支持:VSCode + Vetur
  • 静态检查:ESLint + eslint-plugin-vue
  • 单元测验:Jest + vue-jest + vue-test-utils
  • 文书档案/静态站生成:VuePress

                                             
 1、功能康健及质量优化,完备浏览器端的宽容性难题

优秀的组件库

图片 38

了不起的组件库

图片 39

好好的组件库

  • Vuetify
  • 依靠 Material Design,功能完全强盛,桌面 + 移动
  • 支持 SSR
  • Element-UI
  • 妇孺皆知进口组件库,来自饿了么前端团队
  • 只扶持桌面端应用
  • 有现存的调整后台模版
  • iView
  • 另三个资深国产库,来自 TalkingData 前端共青团和少先队
  • 非常重要支撑桌面端,但也可以有小程序整合
  • 有现存的决定后台模版
  • Quasar
  • 不单是组件库的全平台技术方案
  • 桌面端 SPA/SSR + 移动端 PWA / Hybrid + 桌面端 Electron。

                                             
 2、和去何方团队合营开荒YOdysseyN-WEB  CRN-WEB = YCR-VN-WEB + Ctrip Busine

上层框架

图片 40

上层框架

  • Nuxt.js
  • 开箱即用的 SS揽胜极光 封装
  • 也扶助 SPA / 静态生成方式
  • 有经济贸易协理

                                             
 3、多实战、 开垦更便捷的工具 

运动端方案(H5 / Hybrid卡塔尔(قطر‎

图片 41

挪动端方案(H5/Hybrid)

  • Vant
  • 根源有赞的纯移动端 web 组件库
  • Vux
  • 基于Wechat UI 风格的位移端 web 组件库
  • Onsen UI
  • 发源日本,基于 custom elements 援助七个上层框架的 hybrid 移动端方案
  • Ionic 4
  • 有名 hybrid 移动端方案,原来只扶助 Angular,4.0 开始通过原生 custom
    elements 扶助 Vue

                 PPT分享链接 : 

一举手一投足端方案

图片 42

移步端方案

  • Weex
  • 发源阿里, 现为 Apache 基金会项目
  • 在Ali内部普及选择, 经受过核实
  • 有自然的国内社区
  • NativeScript
  • 本来只帮衬 Angular,但今后拼命投入与 Vue 的咬合
  • 全盘的文书档案和活泼的外国社区,但大约 为意大利共和国语
  • 用作付加物,背后有买卖投入,提供商业协助
  • Uni-app
  • 国产的 Vue 跨端方案,来自 DCloud
  • 相像套代码编写翻译到 iOS, Android, H5 + 出头小程序
CRN-WEB(Ctrip React Native Framework For Web)】-魏-晓军 -携程框架研发部高级研发经理

http://note.youdao.com/noteshare?id=c6b20ac977f6afb556f5f2ec65dbe032

3.0 新特性 / 改动

图片 43

3.0 新特性

 

3.0 设计目的

图片 44

3.0 设计指标

  • 更小
  • 更快
  • 增进 API 设计一致性
  • 加强 TypeScript 支持
  • 加强自己可维护性
  • 开放更加的多底层功用

图片 45

更小

图片 46

更小

  • 全局 API 和放手组件 / 作用支撑 tree-shaking
  • 常驻的代码尺寸调节在 10kb gzipped 上下

 

更快

图片 47

更快

  • 依据 Proxy 的改动侦测,质量完全优化 getter / setter
  • 经过了相当长的时间来看,JS 引擎会继续优化 Proxy,但 getter / setter
    基本不会再有针没有错优化
  • Virtual DOM 重构
  • 履新速度 / 内部存款和储蓄器占用均有质的晋级
  • 编写翻译器结构重构,更加多的编写翻译时优化

                   
阿里Baba(Alibaba卡塔尔国前端行家渚薰大神首要介绍了多个方面,一个是何等是互相,贰个是互相的意义,七个是互为的的属性优化,几个是与互为相关的工具以致前沿手艺。

提升自己可维护性

图片 48

增进自个儿可维护性

  • 代码应用 monorepo 结构,内部分层更清楚
  • TypeScript 使得外界进献者更有信念做退换

                 
  渚薰大神大神对于互相有以下的见识,小编认为总计的相当的好:

开放越来越多底层效能

图片 49

绽放比比较多底层功效

  • Custom Renderer

import { createRenderer } from '@vue/runtime-core' 

const { render } = createRenderer({ 
 nodeOps, 
 patchData
})

                                      1、交互作用,是链接⽤户的大桥

人生观 vdom 的性质瓶颈

图片 50

历史观 vdom 的脾性瓶颈

  • 即便 Vue
    能够有限支撑触发更新的构件最小化,但在单个组件内部依然供给遍历该器件的任何
    vdom 树
  • 在部分零件整个模版内独有为数十分少动态节点的图景下,这个遍历都以性质的浪费
  • 金钱观 vdom 的习性跟模版大小正相关,跟动态节点的多少毫无干系

                                      2、动画,是展现⻚⾯的灵魂

情景结合突破瓶颈

图片 51

气象结合突破瓶颈

图片 52

事态结合突破瓶颈

  • 由此沙盘模拟经营静态剖析变化更优化的 vdom 渲染函数
  • 将模版切分为 block(if, for, slot卡塔尔(قطر‎,每种 block 内部动态节点
    地点是固定的
  • 每一种 block 的根节点会记录本身所含有的动态节点(包蕴子 block
    的根节点)
  • 更新时只必要直接遍历动态节点
  • 新主旨将 vdom 更新品质与模版大小解耦,变为与动态节点 的数码相关
  • 完整比 Vue 2 质量升高 2~5 倍

                                      3、相互作用是前端界的⼜⼀股泥⽯流

TypeScript

图片 53

TypeScript

图片 54

TypeScript

  • 3.0 本身用 TypeScript 重写,内置 typing
  • TSX 支持
  • 不会潜濡默化不选择 TS 的客户

尤为重要的职业说二回

  • Class API 议事原案已吊销
  • Class API 议案已撤废
  • Class API 提案已吊销

                    与WebGL框架相关的本事:

Function-based API

图片 55

Function-based

图片 56

Function-based

const App = {
 setup() {
 // data
 const count = value
 // computed
 const plusOne = computed => count.value + 1)
 // method
 const increment = () => { count.value++ }
 // watch
 watch => count.value * 2, v => console.log
 // lifecycle
 onMounted => console.log('mounted!'))
 // 暴露给模版或渲染函数 return { count }
 }
}

对比 Class API

  • 越来越灵敏的逻辑复用工夫
  • 越来越好的 TypeScript 类型推导援助
  • 越来越好的习性
  • Tree-shaking 友好
  • 代码更易于被压缩

                                      1、Three.js

有关逻辑复用

图片 57

复用逻辑

图片 58

复用逻辑

  • Mixin
  • 混迹的性质来源不明晰
  • 取名空间冲突
  • 高阶组件
  • Props 来源不清楚
  • Props 命名空间冲突
  • 结余的零器件实例变成的性质浪费
  • Scoped Slots
  • 发源清楚
  • 无命名空间冲突
  • 余下的零构件实例变成的习性浪费
  • Composition Functions
  • 便是简单的函数组合
  • 无额外的组件实例花费

                                      2、stack.gl

事例:抽出鼠标地方侦听逻辑

图片 59

复用逻辑

function useMousePosition() {
 const x = value const y = value const update = e => {
 x.value = e.pageX
 y.value = e.pageY
 }
 onMounted => {
 window.addEventListener('mousemove', update)
 })
 onUnmounted => {
 window.removeEventListener('mousemove', update)
 })
 return { x, y }
}

图片 60

复用逻辑

const App = {
 setup() {
 const { x, y } = useMousePosition()
 const z = useOtherLogic()
 return {
 x,
 y,
 z
 }
 }
}

                                      3、Unity 

富有中央转移都早就发布对应 福特ExplorerFC

图片 61

核心转移

                                      4、BabylonJS 

作育 / 学习路线

图片 62

学习路径

                                      5、PlayCanvas

生手向的上学路径

图片 63

新手学习路径

【H5互动的正确打开方式】-渚薰-阿里巴巴前端专家

http://note.youdao.com/noteshare?id=8913e7572edf189c863af83cd9acdbf1

本来就有前端底子的读书路径

图片 64

原来就有底蕴路径

  • 透过文书档案基本功部分上手
  • 通超过实际战类的录制课程恐怕书籍加强领悟
  • 再过一次文书档案,这一遍器重看细节
  • 在中型Mini型项目中持续熟知
  • 读书一些开源组件代码,通晓部分高等用法
  • 阅读深远内部贯彻、源码钻探类的书籍
  • 推介两本E-BOOK:
  • Vue本事内情(
  • Vue.js技艺揭秘(

 

哪些,看完是还是不是十三分希望 Vue 3.0
的到来啊,可是在正经八百公告在此以前,记得好好读书 Vue 的底蕴知识哟~

固然你是前面一个生手,十三分建议您看一下 尤雨溪
亲自编写的新手学习路线哟(

假若你是个熟手,想要尤其深入的上学 Vue
的尾部技巧与贯彻原理,也拾壹分推荐介绍您读书《Vue技艺内情》,《Vue.js本领揭秘》这两份E-BOOK哟,对应的学习地点,我已经在上方给出了。

加油,陪你合作从入门到精通。

盼望后一次与您相见 : 卡塔尔(قطر‎

                        图片 65

 

                   
美团点评的前端技能专家张强器重介绍了两个方面,一是 前端史,二是Redux的标题,三是私货。

                    张强以为,前端史分为上面八个时期:

                                                1、古典时期          

                                                2、中世纪一代

                                                3、⽂艺复兴 时代

                    duxjs特性:
                                 • 申明式API,未有样本代码
                                 • 模块化/组件化,可嵌套,可动态加载
                                 • 统⼀的异步处理
                                 • 同构
                                 • HMR热替换
                                 • 插件 

【Redux的打开方式】张强-美团点评前端技术专家

http://note.youdao.com/noteshare?id=2ba514586b9d564b6080ee35ecc797a1

 

 图片 66

                        

                 
 前端资深程序猿题叶尤为重要介绍了多个方面,一是Weex的利用项景
,二是Weex使用办法,三是Weex页面品质,四是Weex与主流技能相比。

                   Weex与HTML5、React Native之间的相比:

                  图片 67

                         

【Weex 在饿了么前端的实践】-题叶- 饿了么前端资深工程师

http://note.youdao.com/noteshare?id=5a43ca84614344668d554a22e7285f99

 

                   其次届中黄炎子孙民共和国前端开拓者大会(FDCon2017)资料总括汇总:

 

 第二届中国前端开发者大会【视频汇总】   

http://www.itdks.com/dakashuo/play/858

 第二届中国前端开发者大会【嘉宾发言文字汇总】   

 https://d.wps.cn/v/8mPL0?_=1491645028743&s=qr

【第二届中国前端开发者大会】讲师课件下载       

 http://note.youdao.com/share/index.html?id=6a70fae9eb4b4e1aaebcd3c8fb210492&type=note#/

【精彩回顾】2017第二届中国前端开发者大会      

 http://mp.weixin.qq.com/s/CA3O_OD9RlzYwFsM0vTDCw

 

 

“JS是社会风气上最佳的言语”

 

“前端技术员是集团里最牛的岗位**

 

 

 

 

 

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图