如何入门

前辈经验助你零基础找到全新技术领域学习方向

如何入门前端

18/05/21 08:11

通俗的来说,前端就是「写网页」。稍微严格一点说,前端指的是 Web 开发中,主要与用户所看到的界面打交道的,以 HTML 、 CSS 和 JavaScript 为技术基础的开发方向。

如果你对前端和 Web 开发是怎样的完全没有概念,你可以先从这几篇社区成员创作的,全面记录了整个前端开发流程的小文章感受一下:

在这篇文章我们不深入讲解前后端配合的方法和完整的 Web App 开发流程,请期待系列后续文章。

引言

在最近的几年里,前端的发展极其迅速: 在2016 年学 JavaScript 是一种什么样的体验? – 知乎专栏 这篇文章以一位从两三年前「穿越」过来的程序员,和一名 16 年的前端开发者对话的心路历程,展现了前端的技术更新换代之快 —— 写作本文的 2018 年,里面提到的技术和库,又有将近 1/3 已经被替代。

等等,我有没有告诉你 先不要打开上面这篇文章 ……?如果你被这篇文章中复杂的技术和名词绕晕劝退了,我很抱歉 —— 其实,如果你不以前端开发为自己目标的行业,例如你是希望有自己动手实现漂亮的网页界面的基础能力的设计师,只需要很简单就能入门刚才说到的三门前端基础技术。应该说, HTML 和 CSS 可以说是最简单就能学会的「程序语言」(因为它们甚至实际上不算编程语言), 实际上几天或者几周的练习足以掌握写出静态页面所需的大部分技术 。不如说,在网络如此发达的今天,这几乎应该成为每个人必备的基础技能。

不过另一方面,如果这些名词让你感受到的不是畏惧,而是觉得深奥有趣,兴致勃勃的想要一探究竟 —— 那么恭喜你,你完全可以深入钻研前端,因为 前端可以说是目前工程开发领域中,诞生新语法、库和标准最快,应用新技术最激进冒险,技术交流最活跃的方向之一 。如果你浏览了那篇文章,可能留意到了文末一个最形象的例子: Python 3.6 已经发布如此之久,还有许多人在使用陈旧的 Python 2.6 ,而前端工程师们却就因为浏览器对 JavaScript 最新版本 ES6/ES7 兼容支持不住,不能自由的使用各种写起来舒服优雅的新特性,于是干脆搞出了 Babel 配合 Webpack 作为补丁库,把新版本语法的代码编译成旧的以便在老式浏览器运行,这样就可以愉快的玩耍还在测试阶段的新技术啦!

还有不得不提的是,由于使用 JavaScript 语法的 Node.js 服务器脚本语言、基于 HTML5 和 JavaScript 的 Electron 、 React Native 和 Weex 等具有开发桌面端、 Android 和 iOS 本地原生 App 的技术的流行, 从前端开始入门工程开发已经成为了性价比最高的选择,因为意味着你掌握了前端开发,便不只是网页、同时还具有了编写桌面 App 和移动 App 的能力 。像 Electron 这样的技术最大的特点是「一次编译,多平台运行」,本质上是给一个功能强大的网页 (Web App) 套上了本地应用的壳子,再与浏览器内核捆绑在一起,就能用 Web 前端技术写出能在 Windows 、 macOS 和 Linux 同时运行的桌面应用。如果你使用过微软的 Visual Studio Code 编辑器,可以试试在右上角「关于」菜单打开开发者工具,你会惊奇的发现 —— 这样一个看起来功能复杂的程序,本质上居然是一个网页!

接下来,本文会分前端基础、前端逻辑和前端进阶三个部分讲解,如何入门前端 HTML 、 CSS 和 JavaScript 页面基础并能写出简单的页面,如何入门目前前端开发中最常用的 React Vue Angular 等逻辑库让自己具有真正的前端工程能力,如何进一步深入提高自己的前端技能点。

如何入门前端基础

秉承「如何入门」系列文章的宗旨,我们不浪费时间讲授领域的任何具体知识,只「授人以渔」,指出合适的资料和学习的方法。

你只需要清楚:入门用来编写网页所具有的内容的 HTML (超文本标记语言)、用来给网页添加字体颜色和布局排版和样式的 CSS (层叠样式表)、用来给原本静态的网页文档添加程序计算功能并操控其中元素的 JavaScript 程序语言之后,你就算入门了前端基础

具体来说,学习这几门语言,你可以这样做:

  1. 你可以在 W3School 或者 Runoob 网站上找到简明扼要又友好的这几门语言的新手在线入门教程 —— 这是公认最好的中文入门教程。
  2. Mozilla 基金会 (Firefox 火狐浏览器的开发商) 的 MDN 网站,如果你有过学习其他程序语言的经验,里面的入门教程非常适合你;或者你在学习过程中想要查找更规范一点的参考资料,也可以在这里直接搜搜。 另外, 「JavaScript 秘密花园」 这份文档总结了简明概要的 JavaScript 核心知识点。
  3. 如果你愿意阅读一些前端技术的干货文章, W3Plus 这样的前端分享专题网站可以让你进步的更快,或者去 SegmentFault – 前端 专栏 这样的内容聚合网站、哪怕是 前端 – 知乎话题 都可以。
  4. 当然,你也可以选择视频教程、慕课等你喜欢的学习方式。

在学习过程中,有这样几个建议:

  1. 你可以选择几个你觉得好看的网站,利用浏览器调试工具看看他们的源代码,试试自己动手写出一样的界面来,俗称「仿站」,这样会让你练习起来更高效。学到一定程度的时候,你就可以给自己写一个个人主页了 —— 这样会让你更有成就感。
  2. 如果你觉得已经多多少少学了一些,又懵懵懂懂不能全部记住,要知道 HTML 和 CSS 并不是一个你需要全部「背下来」的语言:你最重要的是全面的浏览这两门技术所具有的的知识点,知道他们能做什么。最重要的是,你想实现网页的某个特性的时候,能想起来 HTML 和 CSS 有某个功能特性能解决这个问题,具体怎么写的语法不必死记硬背,用时搜索就行
  3. 尽管搭建网站和服务器运维并不是前端开发必须学习的内容,但是你可以试试搜索「搭建网站」「搭建个人博客」这样的关键字,自己动手搭建出一个属于自己的网站,再自己写一个好看的界面样式 —— 我个人的推荐是搭建对应的站点,然后从「WordPress 主题」或者「Hexo 主题」入手。这样的过程能极大加深你对 Web 开发和前端的意义的理解,并让自己学到的技术发挥实用功能。

简单的学习 JavaScript 后,你应该就能为网页添加简单的动画,或者在网页上写小游戏了。这时候你可以试试一门名为 jQuery 的库,目前来说它并没有过时 —— 这个神奇的库帮你写好了非常多常用功能的函数,可以大大节省你编写 JS 计算、 DOM (文档对象模型,这里指文档元素)操作、 JS 动画的时间。所需的教程,前几个网站也都有。

在进一步深入前,如果你希望你的基础学的更扎实一些,试试看这几本书:

  • 「HTML5 秘籍」,讲了 HTML5 版本引入的多媒体播放、动画、 Canvas 画布等新特性,对 HTML 语义化的讲解非常优秀。如何在网页文档中标记有意义的信息,方便 Google 和 Baidu 这样的搜索引擎抓取,如果你在搜索结果中看到某条结果下不只有网页标题和简介,还有星级平衡、子栏目导航等内容,多半是语义化标签的功劳。
  • 「CSS 权威指南」。搞定这本书,你就可以说你算是学会 CSS 了 —— 当然 CSS 的奥秘还有很多。
  • 「JavaScript DOM 编程艺术」、「JavaScript 高级程序开发」和「JavaScript 权威指南」。如果你已经入门基础了,从书面应该看得出这几本书分别在哪个方面深入讲解了。一个不重要的情报,最后一本书俗称犀牛书。
  • 「CSS 禅意花园」。这是 csszengarden.com 出版的官方书籍,介绍了在同一个简单的 HTML 网页中,仅仅是更换 CSS 样式表,能让界面效果变成怎样天差地别的另一个网页。这本书会让你相信 CSS 是万能的。
  • 「CSS 揭秘」。可以搞定面试级别的大量实用 CSS 技巧。
  • 阮一峰的「ECMAScript 6 入门」 。非常全面的介绍了 JavaScript 的 ES6 新特性和语法。

如何入门前端逻辑

「前端逻辑」是我生造出来的词,目前似乎还没有特别公认的说法(关键词:「前端视图库」「前端视图逻辑」「前后端分离」),但是应该偏差不远。

光听后面的说明可能感觉「专业」的令人生畏,或者起码让人感受到和前面的前端基础好像天差地别了。其实,首先如果你不打算朝专业道路发展,只希望能在项目中完成前端工作,那么直接入手学习 React 或者 Vue 就好,其他的库都有会 create-react-app 或者 vue-cli 这样一键生成项目的「脚手架」工具帮你搞定。如果你是这样想的,直接跳到后面的 React / Vue / Angular 学习部分。

前端大环境和生态

这里我想指的是在最近三四年间诞生和发展的,从前端自动化和工程化库潮流(Gulp, Grunt),前端组件化模块化潮流(WebComponents, CommandJS, AMD,前面几个概念已经过时了,如今是 Webpack, Parcel)、前端异步(Promise, Fetch)和 CSS 预处理器 (SASS, LESS, Stylus) 等潮流,最后围绕 React 、 Vue 或者 Angular 等视图库和 Webpack 打包工具为核心形成的崭新的前端生态。如果你打算深入学习,其实这些技术的本质很简单,无非就是:

  1. 在前端引入了服务器端语言 Node.js 的各种管理工具 (NPM, Yarn) ,并让前端取代了一部分后端和服务器功能
  2. 进一步抽象了 jQuery 中包装过的手动 DOM 操作,变为能自动管理数据更新和前端界面元素显示切换的视图库 (Vue, React,Angular)
  3. 把以前需要前端工程师用多个工具手动处理的图片压缩、雪碧图、代码压缩打包和优化等流程,合并到一个统一的管理工具中 (Gulp, Grunt, Webpack, Parcel, cssnext, postcss)
  4. 把比较低级的 HTML (Emmet) 和 CSS (SASS, LESS, Stylus) 语法简化,引入更强的计算和函数功能,给 JavaScript 的新标准 ECMAScript6/7 引入兼容性 (Babel),引入变量静态类型等功能 (TypeScript)
  5. 由于 Webpack 打包的普及,越来越多专职处理一个问题的专门库,例如负责发送网络请求的 axios 库取代了 jQuery $.ajax() ,也让 jQuery 这种大而全的库不再那么流行
  6. 前面所述,出现了让 Web App 打包为 Window, macOS 和 Linux 桌面应用的 Electron ,利用 React 或者 Vue 开发 Android 或者 iOS 移动 App 的 React Native 和 Weex
  7. 解决新出现的问题的前后端分离导致的虚拟 API mock 技术,搜索引擎优化的 SSR 服务器端技术,还有不一定只和前端相关的,工程开发所用的代码单元测试 (UnitTest) 和应用自动集成部署 (TravisCI) 技术

由上,可以概括出这些变化的来源是,单纯的网页变成了复杂的程序 (Web App) ,前端工程师承担的职责越来越大、工作越来越复杂,所需的工具也越来越高级、流程越来越复杂、低级机械的工作越来越被抽象成库进行简化。

React / Vue / Angular 学习

这几门视图库是如今前端工程的核心,来自 Facebook 的 React 和来自 Evan You 的 Vue 基本平分秋色,应该说 React 的生态系统相对更强大一点点,而 Vue 由于是渐进性框架,对新手来说学习曲线更平缓一点点。至于 Google 主推的 Angular 如今市场相对较小,但也可一学。

学习这类库最好的办法是阅读其官方文档提供的 新手教程 (Getting Start) ,导览 (Turtorial) ,官方文档 (Docs) 和手册 (Manual) 。虽然我们完全可以在这里列出,请你自己尝试用搜索引擎找到这几门库的官网及其官方教程文档,中文也可以,如果有条件,英文文档会更好。

在跟着官方文档学习之后,你就可以用实现自己的项目、仿照现有站点或者应用的方式进行练习啦。在这过程中你可能还会接触到许许多多的新名词、新技术和库,那么只需要按着一样的套路:官方文档为主,民间教程为辅,加上练习实战,用到一个学一个,都不会有大的问题。遇到任何问题,合理搜索和适当翻阅文档,你就很可能在 CSDN 、 SegementFault 和 StackOverflow 找到答案,获得新的经验。

总而言之,在学习前端逻辑的过程中, 对前端领域各种技术路线有宏观了解、阅读官方文档进行库的学习、遇到问题时用搜索引擎解决,这几种技能是最核心和无价的

如何进阶前端

HTML 游戏开发、 Canvas 、 SPA 单页面应用 …… 我们将会后续更新进一步的内容!

This site uses Akismet to reduce spam. Learn how your comment data is processed.