2016年前端领域爆发出一堆新的东西，w【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。ebpack横行霸道，react风靡一时【本文受版权保护】本文版权归作者所有，未经授权不得转载。，typescript也占尽风头。有兴趣【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。对2016年前端领域的新事物一盘了解的，【关注微信公众号：wwwtangshuangnet】【本文受版权保护】可以读下这篇本文版权归作者所有，未经授权不得转载。翻译的文章，采用对话形式，让人抓狂，最后本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。还不忘黑一下Python3。

原创内容，盗版必究。【作者：唐霜】未经授权，禁止复制转载。

这篇文章，主要想讲一下我对前端发展的一点转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。想法，以及对2017年甚至未来的一些预测【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】。

【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。【转载请注明来源】

【本文受版权保护】【本文受版权保护】【原创不易，请尊重版权】

上图是我总结的自己对前端整个发展的思考。本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。首先，它并不是代表所有阶段，而是各个阶段【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net的杂糅，形成现在的这个局面。其次，它更多【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。的是站在程序员的角度重新去看到自己走过的转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net成长道路。

本文作者：唐霜，转载请注明出处。【转载请注明来源】【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。

前端开发工作模式的不同阶段【版权所有，侵权必究】

【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net

一谈到前端的发展，总会把前端产品或技术构本文版权归作者所有，未经授权不得转载。【本文受版权保护】成的历史总结一番。但是再怎么发展，最重要未经授权，禁止复制转载。原创内容，盗版必究。的因素是人，所以更应该站在开发者的角度去转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net谈谈作为一个开发者，都经历了哪些工作模式未经授权，禁止复制转载。【版权所有，侵权必究】。

未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】

“三剑客”的远去本文版权归作者所有，未经授权不得转载。

【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。【本文受版权保护】【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】

早期的前端，更多的是以html文档的形式【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。呈现出来，这和我们学习前端技术的顺序是一【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。样的，它们是前端开发的核心基础知识（co【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netre basic knowledge），【原创不易，请尊重版权】未经授权，禁止复制转载。掌握它们没什么用，但是不掌握则无法理解前未经授权，禁止复制转载。【未经授权禁止转载】端工作的实践认知。这个时候的工作模式大抵原创内容，盗版必究。转载请注明出处：www.tangshuang.net是写好html的架子，然后用css处理好转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】界面，用Javascript作零星的点缀原创内容，盗版必究。【原创内容，转载请注明出处】，让页面动起来。

未经授权，禁止复制转载。【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。

风靡一时的jquery未经授权，禁止复制转载。

【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。【作者：唐霜】【版权所有，侵权必究】【原创不易，请尊重版权】

2006年jquery就发布了第一个版本【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。，但是真正风靡世界是在2009年左右，从本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】此以后，它甚至成为进入前端领域的初学者先【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】学习的东西。甚至可以说，初学者使用jqu转载请注明出处：www.tangshuang.net【版权所有，侵权必究】ery，可以直接跳过对Javascrip【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】t中dom操作的一些学习。jquery先【原创不易，请尊重版权】【原创内容，转载请注明出处】进的地方在于将纷繁复杂的操作封装为接口，【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。这种设计甚至影响了后来各类库的开发。就连【转载请注明来源】【原创不易，请尊重版权】现在ES标准，也试图将原来的一些全局函数著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。重新封装，提供为对象接口。

【版权所有，侵权必究】【未经授权禁止转载】原创内容，盗版必究。

jquery、react等前端库让前端开著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net发者解放了自己重复撰写某些功能模块或函数【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。的时间，用更简单的方式实现快速开发。比如著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】jquery中对ajax的封装，几乎成为【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】后来前端开发的一种标配写法。虽然到了20【转载请注明来源】【版权所有】唐霜 www.tangshuang.net16年，还会有新的库成为热点，比如rea【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。ctjs，这个2016年最火的库，解决了【作者：唐霜】【未经授权禁止转载】视图层面的性能问题。工作模式上的改变并没未经授权，禁止复制转载。【原创内容，转载请注明出处】有太大变化，类库的使用主要是缩短开发时间【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net提高效率。

【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】著作权归作者所有，禁止商业用途转载。

前端开发框架【本文受版权保护】

【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。【本文受版权保护】

当随着前端应用越来越复杂，代码之间的逻辑著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】关系越来越紧密，耦合度越来越高时，普通的转载请注明出处：www.tangshuang.net【本文受版权保护】面向过程的编程已经无法满足我们对应用业务本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。的需求。前端编程框架也出现在视野中，其中【作者：唐霜】【转载请注明来源】最知名的莫过于angular，采用MVC【作者：唐霜】原创内容，盗版必究。模式，将前端代码合理区分，不同的代码群实转载请注明出处：www.tangshuang.net【未经授权禁止转载】现不同的逻辑，比如Model指处理数据相【作者：唐霜】【原创内容，转载请注明出处】关逻辑的代码群，而View指处理界面显示转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。的代码群。

本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】原创内容，盗版必究。【本文受版权保护】【本文首发于唐霜的博客】

框架里面也可以使用库，但是不同的框架，蕴本文版权归作者所有，未经授权不得转载。【转载请注明来源】含的思想不一样，一旦确定了使用什么框架，【本文首发于唐霜的博客】【转载请注明来源】后期产品代码库庞大之后，基本不能改变使用【关注微信公众号：wwwtangshuangnet】【本文受版权保护】的框架，所以最好选择靠谱的长期支持的框架未经授权，禁止复制转载。【转载请注明来源】来使用。

【原创不易，请尊重版权】【本文首发于唐霜的博客】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。

除了angular，还有backbone【本文首发于唐霜的博客】【本文首发于唐霜的博客】、ember等，2016年最火的，莫过于本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。angular2和vue.js了。前端开【作者：唐霜】【本文受版权保护】发框架让前端开发不仅拥有明确的业务区分，本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。而且让代码管理成为可能，一个产品的开发可原创内容，盗版必究。原创内容，盗版必究。以分为不同的模块来进行开发，不同的开发者【作者：唐霜】【本文受版权保护】专注于不同的业务层面，工程化成为可能。这【原创不易，请尊重版权】【本文首发于唐霜的博客】种进步标识着前端开发不再依靠后端来决定开【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net发模式，而是可以自己来决定在客户端如何处【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。理，后端更多的专注于数据处理。

转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】【版权所有，侵权必究】【版权所有，侵权必究】原创内容，盗版必究。

工作模式已明显于前一个时代不同，特别是S【本文首发于唐霜的博客】【本文受版权保护】PA（单页应用）的出现，使得原本提倡的应转载请注明出处：www.tangshuang.net原创内容，盗版必究。该将html，css和Javascrip转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。t分开的这种思想破碎了，前端框架的使用，原创内容，盗版必究。【本文受版权保护】使得这三者重新杂糅在一起，只不过以前是全【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net部杂糅在html里面，现在是杂糅在Jav【作者：唐霜】转载请注明出处：www.tangshuang.netascript里面。由于这种变化，以前可转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】以一个人专注写html一个人写样式一个人【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】写脚本这种模式完全不可用，现在的模式必须【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。是由一个人（团队）来完成三个方面的工作。【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。看上去把问题搞复杂了，但是实际上这使得应原创内容，盗版必究。转载请注明出处：www.tangshuang.net用的表现形式更加丰富，框架的使用使得大规【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。模的代码管理成为可能，大型前端应用出现，本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】性能也提升很多。

【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】

模块化转载请注明出处：www.tangshuang.net

【转载请注明来源】【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】

node出现时，遵守commonjs模块本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】化规范，凭借require和module【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。.exports这两个特殊语法，实现了n【未经授权禁止转载】【原创不易，请尊重版权】ode模块的复杂体系。在此基础上，npm原创内容，盗版必究。【本文首发于唐霜的博客】大行其道，package成为模块的集大成【原创内容，转载请注明出处】【版权所有，侵权必究】者，npm给模块发布安装提供了最好的实践【转载请注明来源】【版权所有】唐霜 www.tangshuang.net。也因为npm的盛行，基于此的webpa著作权归作者所有，禁止商业用途转载。【转载请注明来源】ck打包工具成为2016年最火的工具之一【本文受版权保护】本文版权归作者所有，未经授权不得转载。。

【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。【转载请注明来源】

2015年发布的ES6标准更是将模块标准【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。化，成为Javascript标准的一部分【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】。但是标准并没有吸收commonjs的成【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。果，而是直接跳过包括amd在内的一些现有【版权所有，侵权必究】【本文首发于唐霜的博客】规范，直接构建起自己模块化规则，采用ex【转载请注明来源】【未经授权禁止转载】port和import进行模块之间的导入【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。导出。这也就是说未来node可能同时支持【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netcommonjs和ES6的模块规则，毕竟【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】以前采用require实现的各种程序不可原创内容，盗版必究。【原创不易，请尊重版权】能全部改变自己的代码来适应新的模块化规则【本文受版权保护】转载请注明出处：www.tangshuang.net。不过现在babel在做这件事，支持ES原创内容，盗版必究。【作者：唐霜】6语法，或者把ES6代码转换为ES5/c转载请注明出处：www.tangshuang.net【版权所有，侵权必究】ommonjs来执行。
【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。 当模块化成为主流的时候，模块化编程就逐转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。渐成为前端开发的主要工作模式。这种转变直【转载请注明来源】著作权归作者所有，禁止商业用途转载。接导致前端工作模式的一次变迁，从传统的手【未经授权禁止转载】原创内容，盗版必究。工编程到自动化构建。

【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】未经授权，禁止复制转载。【未经授权禁止转载】

构建（build）已经成为前端代码的标配【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。。构建，是一个将source源码经过编译【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net、打包、压缩、发布等操作按照开发者的意义【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。自动化完成的过程。也就是说，开发者不再像转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】以前一样，写出直接用于运行于浏览器的前端转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。脚本，而是要经过构建工具进行构建后才进行【原创不易，请尊重版权】【原创不易，请尊重版权】发布。构建工具既可以是现成的，也可以是自【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net己编写的，在源码里面，你不必严格遵循原始原创内容，盗版必究。【原创不易，请尊重版权】的Javascript写作语法和规则，当【本文首发于唐霜的博客】【本文首发于唐霜的博客】然为了向后兼容，遵循标准的ES语法和规则未经授权，禁止复制转载。原创内容，盗版必究。更好，但是现在的浏览器并不完全支持ES6本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。，因此，需要将写出来的ES6转换为ES5【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。代码，源码中使用到模块化的，也要通过打包【本文受版权保护】【版权所有，侵权必究】工具，使其在浏览器中可用，这就交给构建工【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】具来完成吧。grunt、gulp及其插件【作者：唐霜】著作权归作者所有，禁止商业用途转载。体系，可以帮助我们完成自己的构建工具。

【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】未经授权，禁止复制转载。【作者：唐霜】

npm、gulp、webpack这些原本【版权所有，侵权必究】【未经授权禁止转载】和前端两个次元的工具，也成为前端开发者必转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。须了解和掌握的，因为，前端开发的工作模式著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】已经进入构建时代。对于一名开发者而言，单著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】纯掌握core basic knowle【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.netdge和library以及一些前端开发技【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。巧，已经无法完成前端开发工作的需要了。不原创内容，盗版必究。未经授权，禁止复制转载。掌握这些和构建相关的工具，甚至自己编写（未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。修改）构建工具，已经无法称自己是一个合格【版权所有，侵权必究】【版权所有，侵权必究】的前端开发者了。

【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】【本文受版权保护】【本文受版权保护】【版权所有，侵权必究】

component的时代【本文首发于唐霜的博客】

【原创不易，请尊重版权】【转载请注明来源】著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】

模块这个概念在前端领域的横行，使得代码重【原创不易，请尊重版权】【转载请注明来源】用率有了巨大提高，但是也带来了一些问题，【本文首发于唐霜的博客】原创内容，盗版必究。比如管理繁杂。然而模块，更多的是注重功能【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。，然而，真正要达到application【原创不易，请尊重版权】【原创内容，转载请注明出处】这一层，还需要将这些功能组合起来，才能组【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net合成真正的应用。然而这种功能组合，会使得【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】编程又回到了复杂的体系，原本模块是为了解【本文首发于唐霜的博客】【版权所有，侵权必究】决相互之间的高耦合问题，但框架式的开发使【作者：唐霜】【本文首发于唐霜的博客】得依赖太过紧密。在package和fra本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】mework之间阈值太大，导致用pack原创内容，盗版必究。转载请注明出处：www.tangshuang.netage撰写出最终的产品体系非常复杂。构建【本文首发于唐霜的博客】【版权所有，侵权必究】工具也无法解决这个问题，它的问题本质是粒未经授权，禁止复制转载。【转载请注明来源】度问题。module和package粒度原创内容，盗版必究。【原创内容，转载请注明出处】太小，framework和applica【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.nettion粒度太大，两者之间是否存在一种过【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。渡状态的颗粒呢？

【原创内容，转载请注明出处】原创内容，盗版必究。未经授权，禁止复制转载。【本文首发于唐霜的博客】

组件，这种粒度适中的形态，让开发者可以尝著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】试使用各种包完成一个业务模块，这些组件经【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。过调用可以独立运行，也可以塞进frame【本文受版权保护】转载请注明出处：www.tangshuang.network成为产品的一部分。这让开发者可以转载请注明出处：www.tangshuang.net原创内容，盗版必究。专注于用package实现应用的一部分，【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】而不用太过考虑全面，从而解放功能实现的专【作者：唐霜】著作权归作者所有，禁止商业用途转载。注度。另一个好处是，这种形态让重用更加高本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】度，在使用package开发组件的时候，【原创不易，请尊重版权】【版权所有，侵权必究】并不会直接将package打包进组件，而本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net是在后期使用或运行的时候使用npm in【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。stall来安装这些包，这使得packa【原创不易，请尊重版权】转载请注明出处：www.tangshuang.netge部分的重用最大化，而且对于frame【本文受版权保护】【本文受版权保护】work这一层而言，也是重用packag【本文首发于唐霜的博客】原创内容，盗版必究。e和component，不同的产品，使用本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】不同的component就可以封装出来，转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。即使它们底层的package可能都差不多【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】。component的表现形式也可以多种本文作者：唐霜，转载请注明出处。【作者：唐霜】多样，不过目前组要是以package的形【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。式发布，所以实际上component本身【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net使用了package，同时自己也是pac原创内容，盗版必究。【原创不易，请尊重版权】kage，它们之间是引用关系，而不是包含【原创内容，转载请注明出处】【版权所有，侵权必究】关系，这就让代码更加合理。构建在前端的地【转载请注明来源】转载请注明出处：www.tangshuang.net位，是使得符合ES标准的代码在未来更换构【作者：唐霜】本文版权归作者所有，未经授权不得转载。建工具的时候，还可以用，你写的是符合ES【转载请注明来源】著作权归作者所有，禁止商业用途转载。标准的代码，所以，未来无论前端发生多大的【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。变化，这些代码都可以工作，你只需要调整构本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net建过程即可。

【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。

早期前端开发，必须将全部业务代码放在一起【作者：唐霜】未经授权，禁止复制转载。测试、运行、开发，开发者不得不对全盘逻辑未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。进行了解。但是后来模块化开发成熟后，开发【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】模块的开发者只需要根据功能需求，撰写符合【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net需求接口的模块即可。但模块仍然是面向功能【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】的，当面向业务的组件开发成熟之后，开发者原创内容，盗版必究。转载请注明出处：www.tangshuang.net可以完全脱离全局业务逻辑，而是专注当前的本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。业务逻辑进行开发，从交互到后端api，都【原创内容，转载请注明出处】【版权所有，侵权必究】可以独立在这个范围内实现。这就将前端开发【关注微信公众号：wwwtangshuangnet】【作者：唐霜】剥离为component和framewo【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。rk两个大的层面的开发。

【关注微信公众号：wwwtangshuangnet】【转载请注明来源】著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】

Web Components也在2016【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】年初显端倪，它将成为下一代web开发的标【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。准之一，也就是说未来web开发中将统一组【版权所有，侵权必究】未经授权，禁止复制转载。件的接口标准，组件的实现不同，但对于使用著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】组件的开发者而言，接口相同。例如在自己的【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】网站中使用了来自Google的组件，使用【转载请注明来源】【版权所有】唐霜 www.tangshuang.net的时候按照web标准进行调用。但是有一天【本文首发于唐霜的博客】【原创内容，转载请注明出处】对组件样式不满意，于是自己重新写了组件。著作权归作者所有，禁止商业用途转载。【本文受版权保护】再次使用时，不需要修改调用部分的代码，组【转载请注明来源】转载请注明出处：www.tangshuang.net件内容的改变并不影响其接口。

【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】【作者：唐霜】

前端开发的工作模式并没有太大的变化，构建未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】是不可避免的。但是对于开发者而言，更加专【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。注所在领域的业务上，前端开发者个人能力的本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。提升和对业务的熟悉更加重要，不同行业领域【转载请注明来源】【本文受版权保护】的开发者之间，有着越来越大的差别。这也是本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。我想说的另一个话题，叫professio著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】nal focus。

原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。

前端开发的方向【作者：唐霜】

【版权所有，侵权必究】未经授权，禁止复制转载。【版权所有，侵权必究】【原创不易，请尊重版权】

随着前端体系越来越庞大，不同领域也开始从【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】原来的浏览器端前端开发中剥离开来。比如在转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】桌面应用中采用web技术，在手机应用中采【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net用复合开发，在服务端使用node提供服务【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】等等。

【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】

嵌入web的应用【关注微信公众号：wwwtangshuangnet】

【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net原创内容，盗版必究。【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】

以前我们称为网站，现在都全部改称为web【作者：唐霜】转载请注明出处：www.tangshuang.net应用，网站只是web应用的一种形式，we【本文受版权保护】【关注微信公众号：wwwtangshuangnet】b可以应用到更多的开发中，比如浏览器内部本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。，比如编辑器内部，比如一些桌面客户端内部【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】。采用web的形式嵌入到应用中可以让应用【本文首发于唐霜的博客】【未经授权禁止转载】轻量化，而且同时更新更加可控，以往一个b原创内容，盗版必究。转载请注明出处：www.tangshuang.netug需要升级应用才可以，现在只需要在se本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】rver端推送最新的代码即可修复。

原创内容，盗版必究。【未经授权禁止转载】转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】

native的暴走【转载请注明来源】

原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】未经授权，禁止复制转载。未经授权，禁止复制转载。

native开发已经是前端的重要领域了，本文版权归作者所有，未经授权不得转载。【作者：唐霜】没有一个前端开发者不需要关注这个领域。特本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net别是react native的推出，使得著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。前端开发已经完全具备开发本地应用的能力。【转载请注明来源】【原创内容，转载请注明出处】基于这种思想，用Javascript开发【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net应用程序也顺理成章，例如编写编辑器的插件著作权归作者所有，禁止商业用途转载。【本文受版权保护】，浏览器的应用，中间件。基于node写一【原创内容，转载请注明出处】【版权所有，侵权必究】个本地应用进行文件处理也非常简单。微信小本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】程序也于年底推出。这类应用和html5应未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。用不同，html5应用试图一个应用适用不【原创不易，请尊重版权】【版权所有，侵权必究】同平台，native则只是利用这么编程语【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net言的特性进行编程，最终的应用仅适合基于的【本文受版权保护】【原创内容，转载请注明出处】平台。

本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】

方兴未艾的server端【未经授权禁止转载】

【未经授权禁止转载】【转载请注明来源】【版权所有，侵权必究】【本文受版权保护】

node的出现使Javascript出现未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】了无限可能。因为作为服务器的node，提本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】供了直接操作文件系统的接口，使js操作文本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。件和其他进程成为可能。这也是上面实现本地未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。应用的原因之一。server端的开发依赖原创内容，盗版必究。【未经授权禁止转载】于node，通过node提供的接口，可以【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】对文件进行读写，提供本地service，原创内容，盗版必究。本文作者：唐霜，转载请注明出处。甚至对其他应用程序进行操作。作为经典的s【本文受版权保护】【原创内容，转载请注明出处】ervice，利用express或koa未经授权，禁止复制转载。【转载请注明来源】js可以像任何其他的开发语言一样，提供服【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。务端的web开发框架。这使得前后端的语言【未经授权禁止转载】【转载请注明来源】都是Javascript，让前端开发者一未经授权，禁止复制转载。原创内容，盗版必究。站式解决所有问题，可以说是近几年年最令人未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。兴奋的事。

【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net

交互向转载请注明出处：www.tangshuang.net

著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】【作者：唐霜】【转载请注明来源】原创内容，盗版必究。

回归web前端开发，未来几年，前端开发者本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】之前的区分会越来越严重，也就是说越来越多【版权所有，侵权必究】【原创不易，请尊重版权】的开发者会在两种不同的业务类型中开发，一未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。种是围绕数据流为中心的applicati【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。on，另一种是围绕视觉流为中心的产品。而【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】这种围绕视觉流为中心的产品开发，就是交互【版权所有，侵权必究】【本文受版权保护】向前端的主要阵地。最明显例子就是游戏领域转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】，这是众所周知的红海，也是技术门槛。前端【本文受版权保护】【本文首发于唐霜的博客】开发者要进入游戏领域，除了要掌握基本的游著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】戏开发库，还要有实践经验，有创意，能够发本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net挥创造力。除了游戏，各种莫名其妙的为营销未经授权，禁止复制转载。未经授权，禁止复制转载。活动服务的专题页（或者跟游戏相结合），包【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】括未来的3d应用，都是前端在交互向的重头本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net戏。

原创内容，盗版必究。【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net

数据向【本文首发于唐霜的博客】

未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】

传统的web应用其实就是以数据流为中心的【未经授权禁止转载】【本文首发于唐霜的博客】，例如网站、社交平台，但是未来这种倾向可转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。能更加严重，那种业务流程相关的数据向开发【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】可能谁都能搞定，但是能够将大数据处理后可【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。视化展示出来的能力不是谁都具备。d3这个本文作者：唐霜，转载请注明出处。【未经授权禁止转载】库的出现为可视化提供了捷径。但不仅限于此【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】，比如table和grid，这两个看上去转载请注明出处：www.tangshuang.net【转载请注明来源】差不多的东西，本质里面到底有什么区别？本【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】质的区别是grid是画出来的。前端已经完【原创内容，转载请注明出处】【原创内容，转载请注明出处】全沦陷为通过api获取数据进行展示的开发原创内容，盗版必究。【本文首发于唐霜的博客】模式，不可能再回到以前通过server端【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】渲染数据的时代了。既然如此，只会在可视化【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net这条路上越走越深。我想，这也是这个时代回【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。归大道至简的需求。

本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】【版权所有，侵权必究】【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net

结语转载请注明出处：www.tangshuang.net

本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net

在知乎上看到有人提问“2017年学前端应【本文受版权保护】本文版权归作者所有，未经授权不得转载。该怎么学”类似的问题。我觉得2017年已【作者：唐霜】未经授权，禁止复制转载。经不再是单纯把前端看作一个事物的时代了，著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。就像Java一样，你会问“安卓开发”，前转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】端也一样，你应该问“前端数据可视化”或者本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。“前端游戏开发”这样比较具体的领域。一旦转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net把范围缩小，具体应该怎么学，怎么去积累经未经授权，禁止复制转载。【本文首发于唐霜的博客】验，就变得非常明确。开发者应该明确自己的【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】兴趣在哪一个方面，并且深专进去。

未经授权，禁止复制转载。【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net

扩展阅读：【关注微信公众号：wwwtangshuangnet】

【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】

1. Web 开发模式演变历史和趋势原创内容，盗版必究。
【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net
2. 2016 年移动 Web 的发展，201【本文受版权保护】著作权归作者所有，禁止商业用途转载。7 年的前端又会怎样？
【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。
3. 前端包管理器争端，只不过是构建工具的牙缝本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】菜
原创内容，盗版必究。【本文首发于唐霜的博客】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。
4. Morningstar的产品开发模式著作权归作者所有，禁止商业用途转载。
本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net

2017-01-29 9138