Web 前端技术知识体系
前面讲了两点。第一点,说明人精力有限,有空要多陪陪基友和女友,所以我们要选择一套全栈式开发技术,帮助我们轻松开发应用程序,这就是 HTML5 + Node.js 技术体系。第二点,吹了半天,来说明这套技术多多好。
那么,HTML5 和 Node.js 就是两种技术吗?当然不是了,衍生出的技术好多好多。HTML5 是什么,你 google 吧,我这里不粘贴了,可好? 如果你说:google 臣妾做不到,那就百度吧。
Web 前端程序,实际上运行环境就是浏览器,现代浏览器已经是一个平台了,提供了很多 API ,我们叫做 Web API。编写一个 Web 前端程序,需要用到的技术有 HTML5 / CSS3 / Javascript 。而 HTML5 往往是这些技术的总称。
那么,用这三个技术确实能写出程序来了,但是从头自己些也是很慢的,可以用很多工具库和框架,帮助我们快速开发。
前端技术库
比较火的技术包括: JQuery , Angular2 , React , Redux , Vue.js 等,这些工具库各有千秋,比如,比较小的程序,用 JQuery 就可以搞定了,如果比较复杂的,可以用 React ,Angular2 或 Vue.js 库。
开发 Android 、iPhone 和桌面程序
上面介绍的部分前端技术,可以写出程序来,但只能运行在浏览器中,我们也可以用打包工具,让开发好的程序,运行在 Android iPhone 和 电脑上。
PhoneGap 和 React-Native 就可以用我们已知的技术,来开发Android 和 iPhone 程序,而用 electron 就可以把程序打包成 PC 电脑桌面程序。
掌握以上技术,就让我们可以开发各种客户端程序了。
服务器端技术
那么,服务器端程序用 Node.js 就可以了吗? 你当然可以从头写服务器端程序,最好是用现成的框架。比如 Express koajs 等框架,来编写 Web 服务器端程序。
数据库也是需要的,要不数据就没法持久化和查询了,我推荐用 mongodb 数据库,采用 mongoosejs 库来写 Node.js 的数据库程序,因为 mongodb 数据库的文档结构,和 javasript 的 json 是很类似的,另外 mongodb shell 用的也是 javascript 语言。
单元测试
到目前为止,前后端程序所需技术,都够用了。那么,还有一个问题,就是测试! 程序开发后,再整体测试,会出现很多幽灵bug,也就是很难找到问题根源bug。所以,最好是单元测试,就是写点代码就测试一下,遇到问题及时解决,而不是 bugs 攒多了到最后无法解决。这方面的单元测试工具也有很多,推荐 Node.js 后端程序用 mocha 做单元测试,前端用 jasmine + karma 做单元测试,因为karma 可以让我们在终端就能看到多个浏览器测试结果,而不是各种浏览器,挨着个的刷新看结果,前端浏览器测试最麻烦,因为有兼容问题,所以用 karma 大大提高了我们测试效率。
打包工具
像 Webpack , gulp 等技术也是需要掌握的,可以帮助我们自动打包程序。
Web 前端技术学习路线图
上面说了这么多,到底如何一步步掌握这些技术呢? 下面推荐一个学习路线图,希望对初学者有帮助。
Javascript 语言:全栈开发中,用的编程语言就是 javascript
HTML5 标签和 DOM:这是前端最核心技术,为之后学习各种开发框架,打下坚实基础。
CSS3:学习通过 css 开发网页和各种可视 UI 组件。
SASS:利用 sass 语言,开发复杂的页面 css
Node.js:掌握Node.js 核心 API ,具备后端开发能力。
Express 5.x 框架:掌握 Express 框架,从而具备快速开发后端程序的能力。
socket.io 库:让前后端通过 websocket协议通信,是web 开发游戏、聊天等程序必备技术。
Mongoose 框架:可以让程序具备文档数据储存能力
Git 命令与 github:可以对项目进行版本管理,从而能团队开发项目。
Gulp 构建工具实战:通过 gulp 工具,灵活对项目进行构建。
Webpack:可以用和 Node.js 后端模块化方式,开发前端程序,从而能开发大型系统。
Jasmine & Karma:可以利用 Jasmine & Karma 轻松实现,多种浏览器同时进行单元测试,而不必切换界面。
前端相关框架:JQuery / Bootstrap / Vue.js /React / Angular通过框架帮我我们快速开发程序
移动端与桌面程序开发工具:phonegap / react-native / electron / 微信小程序开发,这套工具,基本上只是打包工具,和提供了一些特定平台 API ,开发还是使用之前的 Web 技术。
如果通过这套学习路线图学完,那么就业是毫无压力的,但是做为有志向的码奴,我们还需要展望未来和扩展眼界。想要详细查看学习知识点的,点我查看吧!传送门在此。
一提到扩展眼界,有些人就会,疯狂的拿来一本永远不用技术的书,啃起来,比如你是用 html5 写前端界面的,永远用不上 QT 写界面,你买本 QT 津津有味的学起来,如果你感觉不错,那就学吧。
其实,我们学任何技术,都要讲究是否有用,技术本身是冰冷的,如果没有价值,或用不上就不必学,除非你理论计算机学家,这个职位我编出来的,不造有没有这个岗位。