只要能看到的,不管是 app,小程序,pc端,都是前端做的
前后端分离模式下,只需要从服务器获取数据,展示到页面,
或者把客户端获取到的数据传递给服务器,属于应用层和交互层
后台需要处理数据,需要会算法
通过算法考察思维逻辑
动手是学习的重要组成部分:书籍中的每一个例子都动手实现并在浏览器中查看效果
掌握原生javascript的基础上推荐熟练掌握jQuery,在实际工作中用处很大
Grunt:前端自动化工具,提高工作效率
less css:优秀的CSS预处理器
bootstrap:优秀的CSS框架,对没有设计师的团队很不错,与less结合使用效果完美
requirejs:AMD规范的模块加载器,前端模块化趋势的必备工具
Node.js:JavaScript也可以做后台,前端工程师地位更上一步
AngularJS:做Single Page Application的好工具
移动端web开发:智能手机的普及让移动端的流量正在逐步赶超PC端
Javascript内存管理:SPA长期运行需要注意内存泄露的问题
工具
chrome dev tools:前端开发调试利器
Mark Men:测量、取色、标注利器,拿到视觉稿之后第一个打开的软件
GFW Fucker:我用红杏,可以的话买个虚拟服务器当梯子
iHosts:非常优秀的hosts管理软件,轻松修改hosts,开发调试必备
Charles:Mac 平台最好用的抓包分析工具
Rythem:AlloyTeam出品的代理抓包软件,非常轻量,安装简单,移动端(真机)开发调试很好用
Wunderlist:一个非常不错的Todo List,任务、需求多的时候管理起来很方便
语言基础
进阶
常用框架使用及其原理
jQuery:基于选择器的框架,但个人认为不能叫框架,应该算工具库,因为不具备模块加载机制,其中源码很适合阅读钻研
AngularJS/Avalon等MVVM框架:着重理解MVVM模式本身的理念和双向绑定的实现,如何解耦
underscore:优秀的工具库,方便的理解常用工具代码片段的实现
polymer/React: 组件化开发,面向未来,理解组件化开发的原理
CSS和HTML:主要是CSS3的特性和HTML5的特性,以及浏览器处理的流程和绘制原理
DOM树、CSSOM树、渲染树的构建流程及页面渲染的过程
解析HTML、CSS、JavaScript时造成的阻塞
HTML5相关
SVG及矢量图原理
Canvas开发及动画原理(帧动画)
Video和Audio
flex box布局方式
icon fonts的使用
常用NodeJs的package:
koa
express
underscore
async
gulp
grunt
connect
request
一些理念:
响应式Web
优雅降级、渐进增强
don’t make me think
网页可用性、可访问性、其中的意义
SEO搜索引擎优化,了解搜索引擎的原理
SPA的好处和问题
性能优化:
减少请求数量(sprite、combo)
善用缓存(application cache、http缓存、CDN、localstorage、sessionstorage,备忘录模式)
减少选择器消耗(从右到左),减少DOM操作(DOM和JavaScript解释器的分离)
CSS的回流与重绘
项目
版本管理:首推Git,用过Git都不会想用SVN了
Git:本地版本管理的机制
SVN:远程中心的版本管理机制
自动化构建:主要就是less、模板、coffee等的预处理以及对代码压缩和合并
Gulp:基于流构建,速度快、模块质量好
Grunt:独立任务构建,速度慢,配置蛋疼,灵活性高
预处理和模板引擎
less:语法简单,但功能有限
jade、ejs、velocity等模板引擎,各有各的长处 - caffe:python工程师最爱,我没用过
环境搭建:主要是将线上代码映射到本地,并在本地启动一个demo服务器,至于模拟数据的mock,见仁见智了
本地代理:ihosts
自动化测试:在业务较为稳定的情况下,可以通过自动化测试来减少测试的事件,但需求较多的时候,维护测试用例的成本会很高,可能用自动化测试会起到反效果
jasmine
mocha
生态系统
npm
bower
spm
搭建一个属于自己的博客
git pages
hexo
jekyll
未来
其他
有些东西不是考敲码就能弄好的,
入门书
入门可以通过啃书,但书本上的东西很多都已经过时了,在啃书的同时,也要持续关注技术的新动态。
《JavaScript高级编程》:可以作为入门书籍,但同时也是高级书籍,可以快速吸收基础,等到提升再回来重新看
《JavaScript权威指南》:不太适合入门,但是必备,不理解的地方就去查阅一下,很有帮助
《编写可维护的JavaScript》
《JavaScript DOM编程艺术》学习JavaScript和DOM开发的必读之作。
《Node.js开发指南》:不错的Nodejs入门书籍
《深入浅出Node.js》:Nodejs进阶书籍,必备
《JavaScript异步编程》:理解JS异步的编程理念
《JavaScript模式》和《JavaScript设计模式》:JavaScript的代码模式和设计模式,将开发思维转变到JavaScript,非常好的书
《JavaScript框架设计》:在用轮子同时,应当知道轮子是怎么转起来的,讲解很详细,从源码级别讲解框架的各个部分的实现,配合一个现有框架阅读,可以学到很多东西
《Don`t make me think》:网页设计的理念,了解用户行为,非常不错
《CSS禅意花园》:经久不衰的一部著作,同样传递了网页设计中的理念以及设计中需要注意的问题
《高性能JavaScript》和《高性能HTML5》:强调性能的书,其中不只是性能优化,还有很多原理层面的东西值得学习
《HTML5 Canvas核心技术》:我正在读的一本书,对于canvas的使用,动画的实现,以及动画框架的开发都非常有帮助
《HTTP权威指南》:HTTP协议相关必备,前端开发调试的时候也会经常涉及到其中的知识
《响应式Web设计》:技术本身不难,重要的是响应式网页的设计理念,以及移动先行的思想
《JavaScript语言精粹》:老道的书,也是普及JavaScript的开发思维的一本好书,非常适合入门
一些不错的网站
前端的定位
前端技术日新月异,范围越扩越宽,标准越来越丰富,似乎任何一个触角都能伸出很远。怎么给前端一个合适的定位?
用户和网站的联结者,用户体验的创造者
不管你是从交互设计上下手,还是从性能优化出发,或者改进工作流提升工作流效率,最终都是为了创造和提升用户体验,最终都要体现到用户体验这一点上来。
现在的前端工程师做到一定阶段不可避免会接触到很多比切页面、实现视觉要求、实现交互等更深入的问题,比如前端自动化、图像编程、性能优化等等,再往后推一点就是PHP/JSP/ASP/nodeJs,
现在随着前端架构的演进,可能会让你去写后端模板的代码,需要用到后端语言(PHP/Java/C#等),这就是所谓大前端(然而这与前端的定位并不是相背离的,大前端处理的依然是与用户接触的部分,仍然是对用户体验的优化)。可能最常见或者被谈论最多的就是node,其实这几种技术选型都可以,bat三家据说百度用PHP比较多,阿里用node比较多。
玉伯在他的博客里提过所谓全端是横向的,全栈是纵向的。全端即所有的终端说白了都是前端,因为都关乎到用户体验,直接和用户接触。适应多终端的开发,要求你在web前端的基础上,可能还要去扩展android开发和ios开发的知识,好在由于hybrid开发方式的流行,对使用native语言开发的技能会要求的不那么深入。