009 | 快速入门Web前端开发的正确姿势

入门标准

入门标准很简单,就一条:达到能参与 Web 前端实际项目的开发水平。请注意,是实际项目,这就需要了解如今的实际项目开发都用了哪些技术栈。HTML/CSS/JavaScript 这三大基础技术栈肯定是需要掌握的,但要能参与实际项目开发,肯定还要掌握其他一些主流的框架体系。

几年前, jQuery + Bootstrap 可以说是一统江湖,是前端领域的绝对霸主。而这几年,随着 AngularReactVue 等框架的兴起,变成了百家争鸣的局面。这几年,Web 前端的技术发展真是太快了,相应地,技术栈也就变得非常多,除了最基本的HTML/CSS/JavaScript,以及 Vue/React/Angular 等这些 JavaScript 框架和各自的生态体系,还有 CSS 预处理器 Sass/Less/Stylus,还有 TypeScript,还有 grunt/webpack/gulp 等各种打包构建工具,还有其他一大堆技术栈。

这么多技术栈,我们不可能全都掌握,就算是资深的前端工程师,也只是精通其中一部分,比如,有些精通 Angular,有些掌握 React,有些则熟悉 Vue,很少有人对三种框架生态体系都非常了解。因此,我们入门也没必要每种框架都学习,只要挑选一种就够了。而且,作为全栈,我们学习一门技术更重要的是要学习技术背后的编程思想、设计思想、架构思想等。而不管是 Angular、React 还是 Vuew,其背后的核心设计思想都是组件化的设计,因此只要掌握一种框架,我们也就能学习到前端技术的核心思想了。

那么,我们应该学哪种框架体系呢?我的建议是从 Vue 开始,因为 Vue 的学习成本是最低的,入门简单,而且这两年 Vue 可以说是出现了爆发式的增长,已经直逼 React。React 的主要学习成本在于要掌握 JSX 语法,而且文档还大多都是英文。Vue 因为是国人开发和维护的,自然对国内的开发者更友好。Angular 则是个大而全的框架,显得太重,学习成本自然最高。至于 jQuery + Bootstrap 这套,已经过时了,建议没必要去学习了,毕竟我们的时间很宝贵,还有一大堆更有价值的东西等着我们去学。

因此,我们要入门 Web 前端开发的话,除了要学习 HTML/CSS/JavaScript 三大基础技术栈,还要了解 Vue 体系。而 Vue 体系,除了 Vue 框架本身,还包括其他技术栈,这个后面再说。

HTML/CSS/JavaScript

HTML、CSS、JavaScript 是前端的核心基础,所以必须要掌握。HTML 主要就是HTML5,相比之前的版本,新增了很多新特性。CSS 则主要是 CSS3 了,相比以前的版本,主要就是作了模块化的拆分。JavaScript 其实分为三部分:ECMAScriptDOMBOM。ECMAScript 简称 ES,是 JavaScript 的核心,目前最新版本已经是ES2017,是 ES6 的第三个小版本。DOM 是文档对象模型,其实就是一套访问和操作 HTML 所有元素的 API。BOM 则是浏览器对象模型,用于访问和操作浏览器的一些特性。

HTML/CSS/JavaScript 的学习资源比较多,我推荐几个。首先是 w3school 的系列教程:

  • HTML:该教程也包括了 HTML5 新增的内容,但讲得没下面专门讲解 HTML5 的细,所以该教程我建议只看 HTML 基础教程和表单部分即可
  • HTML5:该教程讲解了 HTML5 的新特性
  • CSS:该教程并不包括 CSS3 新增的特性,所以还需要学习下面的 CSS3 的教程
  • CSS3:该教程内容比较少,只包含 CSS3 新增的特性
  • JavaScript:该教程只是讲解了非常基础的语法

不过,我更推荐菜鸟的教程,内容虽然也是来自 w3school,但部分内容比 w3school 的更详细,以下是教程地址:

  • HTML:http://www.runoob.com/html/html-tutorial.html
  • CSS:http://www.runoob.com/css/css-tutorial.html
  • JavaScript:http://www.runoob.com/js/js-tutorial.html

HTML 和 CSS 只要根据以上教程学习就足够了,但 JavaScript 则是不够的,以上教程缺少了 ES6 及更高版本的内容,后面我再推荐其他学习资源进行补充。

视频教程方面,慕课网、极客学院等都有基础课程,但都是收费的,而且价格不菲,性价比实在太低。比如慕课网的《前端小白入门》+《前端进阶:响应式开发与前端框架》两套课程的组合套餐就要 988 元了,而内容还没有上面免费教程的齐全。如果真要看视频,那我会推荐网易云课堂的一些免费课程:

  • 从零玩转HTML5前端+跨平台开发
  • H5/web前端开发|HTML5+CSS3
  • 李炎恢JavaScript教程 第一季

书籍方面,HTML 和 CSS 基础方面的,首推《Head First HTML与CSS》,编排设计通俗易懂,就连完全零基础的非 IT 人员都适合学习。不过,Head First 这本书没有涉及到 HTML5 和 CSS3 的更新内容。不过,Head First 有另一本书讲解了 HTML5,叫《Head First HTML5 Programming》,不过,要熟悉 HTML5 的用法,还是要先掌握一点 JavaScript 基础。CSS3 方面 Head First 则没有相应的书籍,因此,我推荐另一本《CSS3实用指南》

JavaScript 方面,我首推《JavaScript高级程序设计》这本书,书中内容由浅入深,也是写得通俗易懂,适合入门。另外,有些人会推荐《JavaScript权威指南》,但这本书主要还是一本字典书,略显晦涩,其实不适合入门。不过《JavaScript高级程序设计》还是基于 ES5 的,为了补充 ES6 的内容,推荐阮一峰的《ES6标准入门》,目前是第3版,内容已经覆盖了最新版本的 ES2017。另外,因为这是一本开源教材,所以也可以直接去阮一峰的官网免费阅读,以下是链接地址:

  • ECMAScript 6 入门:http://es6.ruanyifeng.com/

另外,有一套系列书叫《You Don't Know JS》也要推荐给大家,也是开源教材,这套书会让你对 JavaScript 知其然也知其所以然,也包含了 ES6 的内容,不过这套书面向初学者的,只适合用来进阶。也出版了中文翻译的书籍,叫《你不知道的JavaScript》,目前只有上卷和中卷两本,据评价,上卷的翻译还不错,但中卷的翻译则一般般,下卷不知道什么时候才出版。以下是系列书的github地址:

  • You Don't Know JS:https://github.com/getify/You-Dont-Know-JS

那么,这么多学习资源,我们应该如何学习才高效呢?其实,和前面学习 Android 和 iOS 时一样,我们主要还是为了了解各种核心概念,我们不可能在短期内熟悉所有知识点,因此,我还是和前面的文章一样,也罗列出一些核心的知识点吧。

  • HTML基础:以 w3school 或菜鸟的 HTML 教程为主,熟悉各种常用标签的用法,尤其是标题、段落、链接、图像、表格、列表、表单、区块、布局、CSS、脚本等
  • CSS基础:同样以 w3school 或菜鸟的 CSS 教程为主,熟悉 CSS 语法和选择器、样式、框模型、定位等模块的内容
  • JavaScript基础:首先作为一门编程语言,语言本身的基础肯定要熟悉,包括数据类型、变量、运算符、控制流、函数、对象等;另外,也要熟悉 DOM;BOM 简单了解下就可以了,使用场景不多
  • HTML5:HTML5 的新特性肯定要了解,内容其实也不是很多,核心的就是 canvas、svg、对多媒体的支持、Web 存储、应用缓存、WebSocket等
  • CSS3:CSS3 也是要熟悉那些新特性,最核心的就是弹性盒子
  • ES6:ES6 自然也是要熟悉的,学好阮一峰的《ECMAScript 6 入门》教程就足够了

Vue 体系

在开始正式学习 Vue 之前,我们先来了解几个概念,这样才能更好理解 Vue 的一些设计理念。第一个概念是「单页应用程序」,就是只有一个 Web 页面的应用,是只加载单个 HTML 页面并在用户与应用程序交互式动态更新该页面的 Web 应用程序。第二个概念是「Virtual DOM」,即虚拟 DOM,简单说就是一个模拟 DOM 树的 JavaScript 对象,是为了避免大面积操作真实 DOM 而导致的性能问题。第三个概念是「响应式系统」,通过数据模型和 View 的数据绑定,系统可以对数据模型的修改自动响应到视图上。第四个概念则是「组件化」,Vue 和 React 都是通过组合各种组件组成应用程序的。理解了这些概念,你才能更好的理解 Vue/React 这些前端框架体系。

还有,开发工具方面,我推荐 Visual Studio Code,一款免费开源的轻量级代码编辑器,macOS、Windows、Linux 都支持,有人评价说比sublime开源,比atom更快,比webstorm更轻,所以说,你值得拥有。

Vue 体系包含了很多技术栈,一套完整的 Vue 项目一般包括 vue + vue-router + vuex + vue-cli + axios + sass + webpack,其中,vue + vue-router + vuex 又称为 Vue 全家桶,因为这三套技术栈都是 Vue 官方推出的,其他框架和工具则是第三方的。那么,就让我们来一个个了解这些技术栈吧。

  • vue:vue 即是 Vue.js 框架本身,是一套采用了 MVVM 模式的 JavaScript 框架,它和 React 一样使用了 Virtual DOM,也提供了响应式和组件化的视图组件。不过与 React 不同的是,Vue 更推荐使用基于 HTML 的模板,这也是它相比 React 等其他框架更容易入门的原因。
  • vue-router:因为现在大多数 Web 应用都是单页应用,那要实现单个页面里的不同视图的跳转,就要用到路由,vue-router 库就是用来实现单页应用的路由功能。
  • vuex:vuex 是一个类 Flux 的状态管理库,它采用集中式存储管理应用的所有组件的状态。关于什么是 Flux,可以参考阮一峰写的一篇文章《Flux 架构入门教程》。
  • vue-cli:vue-cli 是官方提供的命令行工具,用它可以快速创建 vue 项目。
  • axios:axios 是 vue 官方推荐的一个第三方 HTTP 库,它是基于 promise 的,promise 是 ES6 的新增特性。
  • sass:CSS 的一款预处理器,简单入门可以看看阮一峰的一篇文章《SASS用法指南》。预处理器另外还有 less 和 stylus,不过不少大牛最推荐的还是 sass。
  • webpack:webpack 是打包构建工具,可以类比为 Java 的 Gradle。不过 webpack 是基于 node.js 的,所以要用熟 webpack,还要学点 node.js 的基础知识,至少要懂得配置 node.js 的运行环境以及了解 node.js 的包管理工具 npm 的常用命令。

对于刚接触当代前端的人员来说,存在太多陌生的概念需要了解,一时可能难以消化,Vue 的作者尤雨溪写过一篇《新手向:Vue 2.0 的建议学习顺序》,可以按照他的建议去学习。

学习资源方面,最好的应该就是官方文档了。另外,《Vue.js实战》这本书有尤雨溪作推荐序,也可以买来看看,可以作为官网的补充资源。对于一些概念如果还不是很理解,也可以暂时先放一放,后面在做项目开发的过程中可能你就会理解了。

实战入门

最关键的还是要通过项目实战才能真正入门,这也是我一贯推崇的。也是和 Android、iOS 实战一样的建议,如果条件允许,你可以向上司申请参与自己公司的前端项目开发,然后开始去熟悉代码和实现一些简单的工作任务,建议先从完成一些简单的UI界面开始。同样,开源项目自然也是少不了,Vue 这块的开源项目我推荐两个:

  • vue2-happyfri:很简单的一个小项目,很适合入门练习
  • vue2-elm:用 vue 模仿饿了么的一个完整项目,重点推荐

另外,也附上一个汇总了众多 vue 开源项目的 github 地址:https://github.com/opendigg/awesome-github-vue。

对于开源实战项目的操作上,我依然还是建议先给应用改皮肤开始,之后尝试着自己做出一个类似的App。以上面的 vue 版饿了么项目为例,你先给它所有页面先换个皮肤,包括背景、按钮、文字等等,通通换掉一遍,然后尝试自己做一个百度外卖或美团外卖,当你做完,应付一般的 vue 项目开发就应该没有问题了。之后也根据需要可以再去学下 React 体系,这时候学起来绝对不会吃力。

总结

前端开发入门,要学的技术栈真的很多,除了最基础的 HTML/CSS/JavaScript,还包括 HTML5、CSS3、ES6,还要学习目前流行的 JavaScript 框架,我的建议是从 Vue 开始,容易入门,要掌握的技术栈包括 vue + vue-router + vuex + vue-cli + axios + sass + webpack,另外,node.js 也要了解点基础。最后,实战项目我推荐了一个简单的小项目和一个完整的 vue 版饿了么项目。

思考和实践

前端开发的编程思想和移动开发有什么不同?如何将前端的架构思想应用到移动开发上?最后,还是要独立完成一款 Web 应用。

原文发布于微信公众号 - Keegan小钢(keeganlee_me)

原文发表时间:2017-11-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏知晓程序

失敬,我的微信语音总是比一般人多 1 秒 | 晓技巧

17730
来自专栏進无尽的文章

产品动效的福音,AE 动画直接变原生代码

在产品的开发中有时候需要一些动态效果,或者动画。如果全部让程序员用代码生成,可能发费的时间就很多了,并且有些动效是很难做出来的,比如超出了API支持的动画效果。...

38220
来自专栏知晓程序

你发的朋友圈为什么会被折叠?| 晓技巧

14720
来自专栏企鹅号快讯

2017JavaScript框架战报-React分战场

【IT168 资讯】我们来看看与React有关的软件包的生态系统。当Facebook构建React时,就有许多来自开源社区的第三方软件包。为提供完整的应用程序体...

20170
来自专栏小狼的世界

Axure制作Tab切换效果

axure 作为一款原型工具,能够帮助我们快速的设计原型,从而将产品人员的想法快速准确的传递给技术人员。

16430
来自专栏互联网杂技

为未来的SaaS应用提供新的交互及视觉设计

云端软件即服务已代替传统笨重的桌面软件,打造优异的用户使用界面让你的应用脱颖而出已是势在必行之事,然而这也意味着诸多的挑战。 本文介绍给大家一些基本需要关注的点...

375120
来自专栏Golang语言社区

【Go 语言社区】HTML5 Canvas+JS控制电脑或手机上的摄像头实例

移动设备和桌面电脑上的客户端API起初并不是同步的。最初总是移动设备上先拥有某些功能和相应的API,但慢慢的,这些API会出现在桌面电脑上。其中一个应用接口技术...

616110
来自专栏企鹅号快讯

数据分析常用工具

本文总结数据分析常用的软件,以及推荐相应的学习参考资料。 1. Excel 常用操作有函数、可视化、数据透视表、VBA。 函数 可视化 i.单元格 ii.静态图...

29290
来自专栏分布式系统和大数据处理

React与Redux开发实例精解

因为我身边掌握React技术栈的同事极少,所以一直只是自己在研究和实践。因此,买这本书想看看其他人都是如何使用这些技术的。从这点上来看,这本书确实起到了这样的作...

17630
来自专栏编程微刊

前端切图:自制简易音乐播放器

35440

扫码关注云+社区

领取腾讯云代金券