new commit

_config.yml

@@ -4,10 +4,10 @@
 # ---------------------------------------------------------------
 
 # Site
-title: NexT
+title: Cyan的技术博客
 subtitle:
 description:
-author: John Doe
+author: Cyan
 # Support language: de, en, fr-FR, id, ja, ko, pt-BR, pt, ru, zh-Hans, zh-hk, zh-tw
 language: en
 date_format: '%Y-%m-%d'
@@ -78,7 +78,7 @@ plugins:
 favicon: /assets/favicon.ico
 
 # Set default keywords (Use a comma to separate)
-keywords: "Jekyll, NexT"
+keywords: "Jekyll, Cyan"
 
 # Set rss to false to disable feed link.
 # Leave rss as empty to use site's feed link.

_posts/2017-04-15-2017上海 前端开发者大会小记--Vue 2017现状和展望.md

@@ -0,0 +1,124 @@
+---
+title:  "2017上海 前端开发者大会小记--Vue 2017现状和展望"
+description: 前几日有幸参加了前端开发者大会，本次大会包括有业界的阿里巴巴、百度、美团、京东、360、58等知名公司的前端技术负责人或资深专家都有参参与分享相关业内一些新动态，本篇小记主要是记录和回顾vue作者尤雨溪带来的关于vue的相关分享，部分内容来自于小佑（尤雨溪）的现场ppt内容。
+categories: front
+tags: [front]
+---
+> 前几日有幸参加了前端开发者大会，本次大会包括有业界的阿里巴巴、百度、美团、京东、360、58等知名公司的前端技术负责人或资深专家都有参参与分享相关业内一些新动态，本篇小记主要是记录和回顾vue作者尤雨溪带来的关于vue的相关分享，部分内容来自于小佑（尤雨溪）的现场ppt内容。
+
+<img src="{{ '/img/post/17041501.jpeg' | prepend: site.baseurl }}" alt="">
+
+## The progressive Framework 渐进式框架
+
+首先Vue开始做到现在已经差不多三个年了，从最初是非常小的个人项目，到今天的规模，其本身的定位也是在发生着变化，最早发布vue的时候，初衷是做Just  a  view  layer  library，所以叫Vue。做着做着后来发现本身一方面我本身在自己用的过程中也会需要用到各种各样的库，另一方面,作者发现如果确实你只提供一个核心，对于一些早期用户体验是很好，他们本身喜欢自己去细细的控制整个栈的每个部分。如果想要面向更广大的用户，一个琐碎的生态系统反而会导致一些生产力上有负面影响，所以会加一些框架都会包含的东西，比如像路由、状况管理等等，今天Vue的定位演变成渐进式框架，Vue的生态系统有提供完全的前端框架，并不是强迫你要用Vue一定要用所有的全家桶。如果可以只用Vue本身，不需要一下子把所有东西都用上。关于渐进式框架这个理念，就是把整个前端栈涵盖的事情，比如说组建系统、路由、状态管理等一层层区分之后，会有分层，如果只用Vue核心只包含了最左边的红圈的东西。这个策略还是比较成功的，确实大幅度降低了框架的进入门槛，使得Vue迅速获得了很多用户。
+<img src="{{ '/img/post/17041502.jpeg' | prepend: site.baseurl }}" alt="">
+
+ember提出，针对不同的应用复杂度，选择不同的工具复杂度里面。今天Vue的增长，在去年一直到现在，相当迅猛，马上要突破5万，在所有项目里面排第12。NPM上每月近50万次下载，CHROME开发者插件有14.6万周活跃用户。国内使用的用户非常多，前段时间做了一个调查，这只是列出了大家知道的公司，大厂很多产品在用，也有还没上市的独角兽，也有小的新锐创业公司，总的来说在国内使用的增长还是非常可观。
+
+
+<img src="{{ '/img/post/17041503.jpeg' | prepend: site.baseurl }}" alt="">
+
+
+
+<img src="{{ '/img/post/17041504.jpeg' | prepend: site.baseurl }}" alt="">
+
+
+<img src="{{ '/img/post/17041505.jpeg' | prepend: site.baseurl }}" alt="">
+
+
+## 2016.9.30 - Vue 2.0 Ghost in the Shell 
+
+去年Vue2.0发布到现在，Vue经历了技术上新的变化，去年9月底发布了2.0，从头重写但是保留了决大部分API。引入了Flow类型检查，提高代码健壮性。基于virtual  dom的渲染机制，更轻、更快，获得跨平台渲染能力。还有官方Typescript支持。
+<img src="{{ '/img/post/17041506.jpeg' | prepend: site.baseurl }}" alt="">
+
+在Vue2.0里面最大的变化，就是底层渲染机制,Vue2.0依然是使用模板，有一个把模板编译到渲染函数的过程，首先这个架构能让vue支持模板和手写函数，会有一些用户来说更偏向渲染函数，能够给他们用真正的程序语言进行表达的灵活性。但是模板在实际生产环境中也是有相当的固定优势，首先更适合用来思考界面本身的结构和样式之间的关联性，更好的体现你界面的语义结果，渲染函数最后就变成一堆代码。 
+
+模板对设计师和对写样式的开发者有更好的亲和。Vue2.0两边都有，所以会有一个模板编译过程，链接里面的应用，左边是模板，右边是编译后的函数。两种编译模式，一种是运行时，一种是构建时，你直接把模板写在页面里面，Vue在页面加载之后，把模板编译成渲染函数。构建时渲染是打包发布的同时把原文件的模板处理运行时就不需要再编译一遍了。
+<img src="{{ '/img/post/17041507.jpeg' | prepend: site.baseurl }}" alt="">
+
+vue是两段式编译策略，运行时基于with的简易编译器，构建时额外一次编译去掉with。编译器可剥离：构建时模板编译不需要在运行时包含编译器，可减少将近8kb gzip。
+<img src="{{ '/img/post/17041508.jpeg' | prepend: site.baseurl }}" alt="">
+
+2.0的服务端渲染，流式渲染：充分利用Node和HTTP对Streaming的支持。
+
+组建级缓存，大幅度提升抗压能力，引入一个概念bundlerenderer：解决同构代码在服务端的构建和部署。bundlerenderer的优点：避免跨请求状况污染；除了入口文件和构建配置外，业务代码完全同构；服务端包和服务端代码解耦，便于部署，甚至可以热部署。
+
+整个架构对于业务代码是零侵入性的，打包起来部署的时候是分的很清楚。整个服务端的包就是一个文件，使得你前端构建流程和后端部署完全解耦。你的服务端服务器都不需要充气进程，文件更新，重建渲染器实例就完成了，都是传统的不具备的。
+
+2016年11月就发布了2.0主要引入的应用就是ScopedSlots，传递一个可复用的模板片断给子组件。组件内部可以把传进来的组件内容，嵌入到组件自身里面，内容再组构的机制。可复用的模板片断可以获得子组件传回来的数据。
+
+## 2016.11.22 - Vue 2.1Hunter X Hunter
+
+ScopedSlots还有很多有意思的用法，可以写这样一个组件。传进去一个模板，模板会获得一个参数。可以根据传回来的参数根据不同的状态，还在等待请求还是请求发生错误，渲染不同的内容。这个组件就把HTTP过程完全抽象掉了，你甚至不需要在JS里面引一个库，处理回调，根据回调的状况异步的处理应用的状态。ScopedSlots有很多很有意思的用法可以发觉。
+
+<img src="{{ '/img/post/17041509.jpeg' | prepend: site.baseurl }}" alt="">
+<img src="{{ '/img/post/17041510.jpeg' | prepend: site.baseurl }}" alt="">
+
+## 2016.12.16 - Vuex 2.1 
+
+12月发布了Vuex  2.1。Vuex  Namespaced  Modules：带命名空间的模块可以包含自己的state，actions，mutations和getters，就像一个小的store。通过它们可以轻松的对业务逻辑进行分块封装，最后只需要在Root store入口处组合。甚至可以通过动态模块注册来配合代码分割/懒加载。
+
+
+2017年1月5号发布Vue.devtoots3.0。做了大量的UI细节改进，配合Weex进行快照的查看，可以看过去派发的每一个对应的状态。
+<img src="{{ '/img/post/17041511.jpeg' | prepend: site.baseurl }}" alt="">
+
+## 2017.2.26 -Vue 2.2 Initial D 
+2017年2月26号发布了2.2，vue引入了服务端渲染改进。配合Webpack，完美支持路由级别的代码懒加载（对业务代码无侵入性）。Vue-Style-loader自动抽取Critical  css；bundlernderer支持Source  Map。
+
+
+
+要提高首屏加载速度，就是保证首屏永远只加载真正需要的资源，相关的东西尽量只加载渲染首屏需要的资源，可能有10个不同的Vue，如果渲染一个Vue的时候就把其它10个Vue一起加载显然是不效率的，理想情况是每个Vue都分割成单独的代码块，每次只需要渲染对应Vue的代码。
+
+对于CSS也有代码分割的需求，传统的服务端渲染的时候，有一个问题，如果用内嵌形式的CSS会有一个问题，会有短暂的时间没有样式，显然是不理想的。现在可以避免首屏无样式的问题，也可以确保CSS跟随业务代码被分割出去的。
+
+2.2内置了Chrome  timeline性能追踪支持。更完成了异常处理，生命周期钩子里面出现错误不再crash整个应用。同时推出renderError：当渲染出错提供fallback组件。那个组件错了，立马可以知道哪个组件错了，不需要看数据函的信息。
+<img src="{{ '/img/post/17041512.jpeg' | prepend: site.baseurl }}" alt="">
+
+
+
+## coming soon -Vue 2.3 Jojo’s Bizarre Adventure 
+
+2.3在服务端的渲染做了改进，为了提供最完美的服务端渲染的首屏的性能，存在代码分割的情况下，通过分析Webpack服务端和客户端的构建信息，自动推导需要在客户端与加载的文件，生成最优的<Script>和<link rel=“preload/prefetch”>链接。
+
+
+同时还做了一些其他优化，自动选用不包含CSS字符串的异步JS文件，避免Critical  CSS被两次下载。比如在JavaScript有一个字符串是CSS，才指出的HTML里面也有字符船，等于字符串被重复了两次，我们会把每次割出去的代码包打两份，一份有CSS，一份没有CSS，避免首屏双重加载CSS的问题。
+
+2.3还有异步组件改进，在没有服务端没有渲染的情况下，你异步请求一个组件会有什么问题呢，会有网络延时，加载错误等等。我们会进行这些问题的处理。这些都是用户体验上的小优化。
+
+<img src="{{ '/img/post/17041513.jpeg' | prepend: site.baseurl }}" alt="">
+
+
+2.3里面使用函数式组件不需要显示声明props，父组件添加的V-on会以ctx.listeners体现。
+
+2.3的其它改进：有passive事件侦听：@touchmove.passive。.sync将会以prop+listener语法糖的形式回归。
+
+2.3发布之后可能会提供官方测试的工具库，同时会准备重构官方CLI模板，让用户在更新的时候，有版本控制的更新，模板方面有官方的服务端渲染模板，PWA、Weex等模板。
+
+## 社区动向：基于2.0的组件库逐渐成熟 
+
+2.0发布之后差不多半年了多了，社区涌现出了一批优秀的组件框架，相当不一般已经相当成熟了，Element  UI、iView 、Muse-UI这三个已经非常成熟了，包括Vue  Material、Vuetify等等，社区涌现了非常成熟的框架.
+
+<img src="{{ '/img/post/17041514.jpeg' | prepend: site.baseurl }}" alt="">
+
+<img src="{{ '/img/post/17041515.jpeg' | prepend: site.baseurl }}" alt="">
+
+___
+
+
+## 2017年展望：
+
+>更好的TypeScript整合：TypeScript团队为Vue量身打造更好的类型类型推导。
+
+>单文件组件CSS改进>>>和：：slotted选择器，CSS  variable  theming。
+
+>SSR性能进一步优化。然后Vuex与Rx怎么进行更好的整合。
+
+>我们会有一个基于Proxy的响应式系统重构，最大的优点是我们不需要Vue.set，同时会应用到lazy  observation，只转化我们启动的时候用到的部分，之后用到的之后再转，避免Vue文件过于庞大，基于这个可以支持显示构建响应式对象。
+
+>谷歌在起草新的标准  HTML  Modules：类似单文件组件的新标准。
+他们起草过程中，跟作者有过一些沟通，他们最理想的情况就是以后Vue的单文件组件，稍做修改就可以做原生的HTML  Modules在浏览器使用，可能还需要两到三年的时间。
+
+___
+
+
+