威尼斯手机平台-电子正规官网登录首页

热门关键词: 威尼斯手机平台,威尼斯登录首页,威尼斯正规官网
威尼斯正规官网的主题演讲,致力于推动各类前端技术等在移动互联网领域的研发和应用
分类:新闻公告

在11月14日-16日于多伦多举办的 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 提速 100% ;

  • 更多编译时(compile-time)提醒以减少 runtime 开销;

  • 基于 Proxy 观察者机制以满足全语言覆盖及更好的性能;

  • 放弃 Object.defineProperty ,使用更快的原生 Proxy ;

  • 组件实例初始化速度提高 100% ;

  • 提速一倍/内存使用降低一半。

                随着新一代的前端技术的发展,给前端开发者带来巨大的创新应用实践机会,本大会以“高效前端开发实践和创新”为主题,内容涵盖电商、旅游、门户、搜索、分类广告、移动互联网等多种业态的技术经验分享,涉及各种WEB和APP前端开发技术和架构设计等方法论。

发展现状

威尼斯正规官网 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经历了技术上新的变化,去年9月底发布了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、SSR 性能进一步优化 

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

威尼斯正规官网 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 中会针对性增强

(文/开源中国)    

【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 的组件更新触发

                  携程框架研发部高级研发经理 魏晓军主要介绍了CRN-WEB(Ctrip React Native Framework For Web),主要分四个部分,一个是讲什么是CRN-WEB。第二是CRN-WEB的架构设计。第三如何使用CRN-WEB。第四CRN-WEB的现状及发展。

生态介绍/方案推荐

威尼斯正规官网 36

生态介绍/方案推荐

*           *       CRN-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、和去哪儿团队合作开发YRN-WEB  CRN-WEB = YRN-WEB + Ctrip Busine

上层框架

威尼斯正规官网 40

上层框架

  • Nuxt.js
  • 开箱即用的 SSR 封装
  • 也支持 SPA / 静态生成模式
  • 有商业支持

                                               3、多实战、 开发更快捷的工具 

移动端方案(H5 / Hybrid)

威尼斯正规官网 41

移动端方案(H5/Hybrid)

  • Vant
  • 来自有赞的纯移动端 web 组件库
  • Vux
  • 基于微信 UI 风格的移动端 web 组件库
  • Onsen UI
  • 来自日本,基于 custom elements 支持多个上层框架的 hybrid 移动端方案
  • Ionic 4
  • 知名 hybrid 移动端方案,原本只支持 Angular,4.0 开始通过原生 custom elements 支持 Vue

                 PPT分享链接 : 

移动端方案

威尼斯正规官网 42

移动端方案

  • Weex
  • 来自阿里, 现为 Apache 基金会项目
  • 在阿里内部广泛使用, 经受过考验
  • 有一定的国内社区
  • 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 重构
  • 更新速度 / 内存占用均有质的提升
  • 编译器架构重构,更多的编译时优化

                    阿里巴巴前端专家渚薰大神主要介绍了四个方面,一个是什么是交互,二个是交互的作用,三个是交互的的性能优化,四个是与交互相关的工具以及前沿技术。

提高自身可维护性

威尼斯正规官网 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 

所有核心改动都已经发布对应 RFC

威尼斯正规官网 61

核心改动

                                      4、BabylonJS 

培训 / 学习路线

威尼斯正规官网 62

学习路线

                                      5、PlayCanvas

新手向的学习路线

威尼斯正规官网 63

新手学习路线

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

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

已有前端基础的学习路线

威尼斯正规官网 64

已有基础路线

  • 通过文档基础部分上手
  • 通过实战类的视频课程或是书籍深化理解
  • 再过一遍文档,这一遍着重看细节
  • 在中小型项目中继续熟悉
  • 阅读一些开源组件代码,了解一些高级用法
  • 阅读深入内部实现、源码研究类的书籍
  • 推荐两本电子书:
  • Vue技术内幕(
  • Vue.js技术揭秘(

 

怎么样,看完是不是非常期待 Vue 3.0 的到来啊,不过在正式发布之前,记得好好学学 Vue 的基础知识哟~

如果你是前端新手,十分建议你看一下 尤雨溪 亲自编写的新手学习路线哟(

如果你是个老手,想要更加深入的学习 Vue 的底层技术与实现原理,也十分推荐你学习《Vue技术内幕》,《Vue.js技术揭秘》这两份电子书哟,对应的学习地址,小编已经在上方给出了。

加油,陪你一起从入门到精通。

期待下次与你相见 : )

                        威尼斯正规官网 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是世界上最好的语言”

 

“前端工程师是公司里最牛的岗位**

 

 

 

 

 

 

 

本文由威尼斯手机平台发布于新闻公告,转载请注明出处:威尼斯正规官网的主题演讲,致力于推动各类前端技术等在移动互联网领域的研发和应用

上一篇:网站(数据泄露检查网站)合作完成 下一篇:威尼斯正规官网美国超算上榜总数为109台
猜你喜欢
热门排行
精彩图文