How start Front End

from: zhihu

从来没有发过言，在这里破处。。。

就具体的工作、开发框架或库，上面的都列举得差不多了，就不重复大家的，咱来一个前端开发方面理论层面的东西，从理论层面来反推，前端都要学习些什么技术，这也算是个人对于前端这个工种的粗浅见解吧，欢迎吐槽，别扔鸡蛋~~

这个疑惑是大多数前端开发入门的困扰。。。说实在的，和后端相比，前端的知识体系太杂了，以至于很多入门者找不到方向。其实，前端既要宽度，也要深度，优秀的前端开发人员比后端开发人员难培养多了。

1，兴趣是最好的老师
学习前端，或者说(ˇˍˇ）， 玩代码这一行，要玩得有深度，最基本也是最重要的，要自己有兴趣，没有兴趣就不要浪费时间了。虽然这是废话，但是当你碰到了技术发展的瓶颈期了，我觉得就应该能很比较好地理解这句废话的含义。

2，找一个好的导师
找一个愿意传授知识的导师，或找一个有大牛存在的团队，这是提高技能的最好也是最快的途径。如果什么都是自己研究，天赋异禀，或许会比别人快，但有一个人在关键时刻提点你，效果其实是非常显著的，突飞猛进指日可待。

说白了，你要和牛人一起干过活，知道大牛长什么模样的。

当然，在大中型项目中，大牛比较多，但这个对于入门者来说，如果你进入不了大中型项目，那么也可以在很多创业项目中物色，特别是电商领域等热门的、竞争激烈的领域，前端这一块至少需要一两只大牛来做前端架构和开发模式选型，能承担这样子角色的人选，一般都算是比较厉害的了。
竞争激烈的领域，如果连交互体验都不重视，那么这种项目绝对是没有成功的机会滴。

不同level，前端需要的技能分析
1，初级入门
html和css，这两个基本功。合理的html结构，很多时候可以减少js逻辑、css样式，以及避免绝多数的兼容性问题。基本功不好，到了一定程度会限制你往后发展的空间。
这一层面会涉及photoshop、美术方面的相关知识，而交互方面，大多数WEB需求是在jQuery或Zepto这样的库下进行的，会这两个库基本能够入门了。

2，中高级前端
初中级前端对于原生js开发能力的要求并不是很迫切，但是如果到了高级前端，就需要对js原生层面的API、属性以及不同浏览器的特性，都要有较深的了解了。
这一层面的前端，我个人认为必须深刻理解几个知识点：js的闭包、作用域以及类。熟练掌握几种js类的定义以及继承的方法，了解它们之间的差异，并能结合实际需求，在开发生产应用上。这其实就是具备面良好的向对象编程的编程开发思维了。
此外，中高级的前端必须掌握CMD或AMD的模块化方案中的一种，还掌握至少一个MVC或MVVM框架，能胜任比如OPOA页面，又如tmall、唯品会等电商网站的侧边工具条、提交订单等交互功能复杂的开发需求。

在这个级别的前端，我觉得，才好称之为程序员，和后端的开发一样，都是码农了。对于入门的，只要求会切图，写简单脚本或整合个jQuery插件来完成任务的，在我看来，还不能算是一个程序员。

3、前端leader
之前都是说技术的，而leader角色其实除了开发技能外，可能还需要一些管理方面的经验或能力。
在这个层面，不同的团队可能不一样，有偏技术的，有重管理的，但我个人认为，如果要底下的开发人员服你，至少代码层面的功力不能少，要不你无法做好代码review，保障整个团队是按照规范来执行得，有问题的时候需要leader快速定位问题，提供解决方案或解决思维。

小结，一个优秀的前端leader，我认为应该具备的能力：
①重要功能或需求的开发，或提供解决方案，做技术选型 ---> 技术功底
②需求分析评审，分发开发任务，和产品经理、设计师以及后端等沟通、协调 ---> 沟通能力，具备产品思维，前端转型做产品不在少数
③开发需求的跟进，代码review，代码合并与发布等，精通svn或git是必须的，记住是精通，你新招的新手同事很可能不知道什么时候把别人写好的东西弄没了，你至少要知道如何找回吧 ---> 项目管理能力
④前端开发规范，开发文档、开发标准的建立和实施，关键是实施 ---> 文档功力和执行力
⑤新员工的培训、辅导 ---> 做老师的能力
⑥前端的技术更新太快了，一个优秀的前端leader还要引导团队了解和学习新的技术，为以后做技术储备 --->行业观察能力
……
⑦不能太宅。这很重要，技术男大多很宅，要想做一个好的leader，就要多和不同的人特别是多和沟通方面强势的人打交道。要不，等你做到leader的位置，即便是站在前端的角度来看有些极度不合理的需求，你也可能镇不住，天天接这样的需求，怨言就犹如漫天飞雪，受不了的人会选择离开，如果你的团队离职率高的话。。。Boss会觉得你是合适的吗？

4，前端架构师

是的，前端也需要架构！
前端leader，或高级前端开发不就是了？可能是，但架构是一个系统性层面的东西，能做好前端管理，未必能做好架构，当然，做好前端架构了，未必就能做好前端团队的管理。

当然，这是两个层面的东西，也没所谓谁更高大上。

好吧。还是聊聊架构师这玩意吧，因为做架构要涵盖的前端方面方面，还包括一些后端的东西。听起来，还是挺高大上的。

现在的前端已经不再是刀耕火种的年代了，在整个web开发生产流水线上，可能一些企业网站还可能属于附属或边角的工作，就是干php的顺手也可以弄一下的那种，但是，但凡有点追求的，重视前端体验的项目，前端必须是专业人士来干的，前后端分离开发也是必须的。

如何实现前后端分离？为什么要实施前后端分离？这方面的知识，似乎不是这个主题的范畴了。我就不说了，这里主要是给前端架构师，这个细分工种，给出我个人的见解。

首先，在我看来，前端架构要解决三个层面上的问题：
①团队开发协作层面的——根据项目的情况，设定一套符合项目实际需求的，能够解决前端团队多人协作开发、代码模块化组织的开发架构或模式，减少前端开发的边际工作，方便开发人员把绝大多数精力专注于业务逻辑的本身实现。也就是，前端生产的工程化和发布的自动化。

②业务需求实现层面的——根据业务需求，设定或整合一套符合业务需求的，能够解决绝大多数业务场景的基础上，保持好良好的可扩展性以及良好的可维护性的Javascript框架或方案。

③除了解决前端自身开发的两个层面问题外，还可能协同后端架构师，确定前后端对接的API，定一套符合项目需求的RESTful方案，并整合到前端框架中，最终形成一套数据封装的js API，如果项目有采用MVVM框架的，最好是能结合Model，以便view视图的控制。

当然，对于前后端交集的部分，比如服务端view模板层的一些东西，可能也需要前端架构师提供一个合理的架构或方案，哪些东西是公共的，可继承或复用的，该抽象出来的。。。这在PHP项目中是必不可少。

当然，这个工作可能是前端Leader来干也合适的。

或墨水有限，或眼界有限，对于前端架构师这个工种的表述不是很到位的，欢迎补充。

举个例子吧，然后我再对前端架构师要干的活做一个小结。

以阿里巴巴为例，淘宝、天猫、一淘等平台，都是基于kissy框架以及基于kissy开发的模块，这是根据阿里巴巴复杂多变的业务需求，在多次迭代后形成的，几乎你想要的前端功能它都包含，底层的基础工具函数，表现层的业务实现代码，甚至标准模板都有的，如果把所有功能都打包，这个框架就很大，实际生产时不可能这么干，对吧？

没关系，它本身是模块化，可以按需请求。但这还需要结合在Combo技术和CDN技术，这其实是阿里前端的核心技术，这里也有些相关的介绍：
前端优化：淘宝的Combo Handler和新浪微博的link标签includes属性__
模块化高扩展性的前端框架 KISSY__

小结： 如果项目中要用上类似kissy这样的框架，到底涉及多少前端架构相关的技术：
1、前端自动化工程化——nodeJS/grunt /gulp
2、前端模块化——CMD或AMD，kissy是CMD，也就是seaJS，CMD就是阿里自己弄出来的标准
3、前端发布代码增量发布系统——git是必须的，NodeJS Express框架的自动化或可视化的发布界面
4、前端按需加载——在线Combo，CND缓存技术，这里的核心，我认为是解决js模块依赖分析以及CDN的强缓存问题
5、前后端数据交互——RESTful、模板控制系统（tmall内部好像是TMS系统），前端主导业务系统的API规范
6、前端开发环境的一些相关问题，这个因为前端开发比较零碎，边际工作多，提高开发体验和提高开发迭代速度，很多基础性工作，比如开发环境，数据模拟系统，等都是前端架构师要考虑的事情

当然，kissy很强大，但并不一定适合每个项目，所以架构师要做的事情要对技术做好选型，如果时间允许，架构师不妨考虑自己造一个轮子，但项目的时间规划上不允许，不是要你自己造一个轮子，而是整合各种资源，形成一套能快速用于实战的整合套餐。

比如，蘑菇街的前端开发框架就是一盘整合的套餐——requirejs+jquery+backbone+一套自定义的底层库+各种插件+在线combo

如果要了解大公司的前端是怎样的，或者别人是怎么做的，可以看这里的视频，——D2前端技术论坛——2014绽放丨章节__
有不少底料，前端开发理念层面的东西比较多。当然，前提是你都看明白了，如果都理解别人的做法，我想，你距离大牛也就不远了吧。

题外话：在线combo和本地combo
在阿里和蘑菇街两个电商上，都用了在线Combo，说明这确实是一个前端非常重要的技术，模仿阿里前端资源在线combo的服务，咱用coffeescript也写了个在线combo的服务，基于node 的Express框架，有兴趣可以参考一下
https://github.com/lmtdit/static-combo__

但是，我个人认为，在中小型的项目中，其实还用不上在线combo这种技术，因为这需要良好的服务器支持，而阿里、蘑菇街在这方面的资源并不是问题，而初起步的项目一开始就引入这种前端资源加载机制，是挺高大上的，但可能投入产出比上考虑不是很划算。。。
而本地化的Combo机制，生产代码在本地build好之后，再发布到第三方的CDN上，这种可能会比较实际，但也要解决好CSS和JS模块开发和生产混淆压缩以及静态资源的缓存问题。