一转眼2017年又要过去了,好像又是啥事情也没干成的一年(捂脸),不过行业内各种新技术新趋势依然在不断涌现、日新月异,要学习的东西依然很多,Web开发也不例外。这篇文章的目的就是梳理出2018年学习Web开发的路线和需要关注的一些方面。

(题外话:其实本来文章标题想加“全栈”二字的,不过全栈工程师现在看来似乎成为了“啥都懂一点但啥都不精”的代名词,而且说实话,Web开发的趋势就是找准一两个方向深入,同时对于前端后端的技术都要有所了解,因此“全栈工程师”在我看来其实是一个伪命题。)

开始学习Web开发前应当知道的事情

找准一个方向并深入,前端?后端?Web设计?API? 前面也说过了,真正的全栈工程师绝对是凤毛麟角,因为大多数人的精力有限,试图精通每一个领域的结果可能就是每个领域都浅尝辄止、从入门到放弃。同时对于一个方向一定要往深处挖掘,养成对系统整体运作理解的习惯,这样在学习其他方面技术的时候就能从更多的角度去思考问题。

工具和软件

编辑器

  • VSCode
  • Atom
  • Sublime Text

都是很好的编辑器,过去前端开发用Atom和Sublime Text都很多,Atom优势在于插件多,但性能上有待优化,特别是打开比较大的压缩过的文件。现在VSCode已经迎头赶上,插件数量也上来了,最大的优点是调试功能特别完善,比如代码提示、文件跳转、函数定义跳转、函数提示、变量提示等等,都是Atom所不具有的,而且速度也很快,目前有成为主流编辑器的趋势。

浏览器

不解释了,Chrome和Firefox都可以,新版Firefox Quantum与之前的FF简直是天壤之别,和Chrome不相伯仲。

图像处理

GIMP早期版本出了名的难用,以前我对它的印象还停留Redhat 7.2上捆绑的那个版本,但GIMP从2.6之后有了很大的改善,性能和扩展性上也有所提高。不过想从事Web设计,还是推荐Photoshop,经过十多年无数从业人员验证、目前暂时还无法被取代的工具。

如果是对图片进行简单的快速处理,可以考虑非常小巧轻量的Paint.net,自带了基本的图层和滤镜功能,Windows商店有售,经常打折,印象中好像十几二十块钱吧。

下面开始谈谈学习Web开发的技术方向。

HTML/CSS

Web开发前提,在开始学习其他知识之前必须掌握HTML和CSS,因为它们本身不难学习。所有网站,不管后端跑的是什么,UI展现的永远是HTML和CSS。具体到HTML 5和CSS 3,两者中掌握一样就可以了,推荐把重心放在前者,除非你想搭建具有大量动画效果的网站。

除此另外,还应当了解Flex Box和CSS Grid的核心内容,它们都是用于构建 HTML复杂布局体系的新方法,对于创建响应式页面有较好的效果,目前两者还不能相互替代,在不同的场景都有着对应的用武之地。

同时还值得一提的是,响应式布局非常重要(简单地说就是一个网站能兼容不同终端,比如当页面宽度不同时,呈现的布局也不同),所以应适当了解这方面的技术(例如CSS 3的media query)。

原生JS(Vanilla JavaScript)基础

就算你打算从事后端开发,你也应当掌握除了框架之外、必要的JS基础。你能相信很多人在开始学习React框架之前连一个基本的for循环都不会写吗?这里的原生JS基础首先是一些基本的语法,包括:

  • 数据类型
  • 函数
  • 条件及循环
  • Operator

其次应当学习:

  • 如何操作DOM对象和事件(非jQuery)
  • Ajax/Fetch API/JSON

这里强烈建议把学习重心放在JSON上,不管从事的是前端还是后端,都应当掌握这套数据描述格式。

想了解JavaScript、jQuery、Ajax和JSON之间关系,可以参考此文:https://www.zhihu.com/question/31305968/answer/116023020

最后,还需要学习ES2015+(JavaScript的最新一代标准)的基础知识,包括Arrow Functions(箭头函数)、Promise、Template String(模板字符串)等。

接下来的方向

掌握以上内容后,你应当可以自己建立一个简单的网站、实现一些基本的UI。现在,你需要开始考虑接下来的方向,包括:

  • HTML/CSS框架:Bootstrap、Materialize等
  • 前端JavaScript框架:React、Angular等
  • 后端技术、语言:Node.js、Python等
  • 数据库:MongoDB、MySQL等

下面将按照这个顺序分别进行说明,每个方向里面选择一种框架/技术去重点学习即可。

HTML/CSS框架

  • Bootstrap 4(Twitter):目前流行的框架,在开发响应式布局、移动设备优先的项目上有着不错的表现。
  • Materialize CSS:重心主要在UI/UX上面的一个框架,基于Material Design,相对比较新。
  • Bulma:语法简单易学,不涉及JavaScript,也不像前面两个框架需要依赖jQuery,所以配合Vue、React很方便,默认样式要比Bootstrap漂亮很多。如果想快速做一个没有复杂交互的网站,可以试试这个框架,个人比较喜欢。
  • Zurb Foundation:算得上是Bootstrap的备选,过于臃肿是最大的缺点,而且默认样式不太好看。不过最新的Foundation 6减少了50%的代码量,也增加了很多特性,感兴趣的可以了解一下。
  • Skeleton:严格上来说不能算是框架,只能说是一个响应式模板,因此最大的特点就是:超级轻量,可以实现零编译和零安装。如果你想搭一些网站原型,不考虑UI或者功能性实现的话,Skeleton是一个非常好的选择。

Bootstrap、Zurb Foundation和Skeleton的比较可以参考:https://www.vermilion.com/responsive-comparison/

总体来说目前最流行的HTML/CSS框架依然还是Bootstrap 4。

前端JavaScript框架

如果前端完全不想用诸如React或者Angular这种JS框架的话就可以不看这一部分了,但其实大多数情况下你都得学习这种框架,很有好处。

  • React:速度极快,极为轻便,非常适合初创的小公司,使用Redux作为状态管理器,并通过JSX(JavaScript和XML的结合格式)渲染HTML。(严格地说React只是一个库,但你可以轻松地加入路由、HTTP client等功能使其成为一个完整的框架,所以现在都习惯将它称为框架了。)

    React入门的不错文章:http://www.ruanyifeng.com/blog/2015/03/react.html

  • Angular:企业级框架,因此要比React显得重一点,但功能非常全面,包含了组件化方案、模块化方案、测试方案、表单验证、路由、国际化方案和安全方案,甚至连代码风格都给出了建议。文档涵盖面广,对如何实现某个功能给出了明确建议。Angular让开发者的关注都放在业务实现上,而不是一个又一个的选择。

  • Vue.js:国内开发者研发的框架,快速、轻便、语法直白、中文文档齐全,学习起来很容易,能让对JS不是很熟悉的人仿出一个项目(仿网易云音乐、仿微信、仿今日头条等等),因此在国内的人气比较高。

  • Aurelia:另一个轻量的框架,用起来很像是原生JS,流行程度不高,可简单了解一下。

个人觉得重点还是放在React和Angular上,特别是Angular学好之后,对测试、安全和部署方面的知识会有更深的了解。不是说Vue.js不好,反而是因为它太好用了,所以很多人会陷入“快速搭建项目”的沉醉感,不愿意去深入研究。如果能在学习上克服这一点的话,Vue.js是一个相当好的前端JS框架入门选择。

后端技术

  • Node.js:大名鼎鼎,因其快速和高扩展性而被广泛应用,对于有JavaScript基础的人来说可以快速上手,可通过NPM(Node Package Manager)来管理大量的第三方包、实现各种功能。Node.js早已是后端的必学手艺,不解释。
  • Python:PHP是最好的语言吗?自从有了Python,回答这个问题的底气可能就没那么足了。尽管很多人不想承认,但Python在后端开发方面的流行程度确实在与日俱增。
  • PHP:非常实用化的一门语言,部署起来也很方便。
  • Ruby:以前用来做快速开发很不错,社区也很有活力,但现在看来有面临淘汰的趋势。
  • C#:极其强大的语言,但由于种种原因(.net成本高、微软运营上的失误等等),以前在国内长期处于尴尬地位,不过感觉现在又开始处于上升期了,毕竟好东西是不会被埋没的。

建议还是以Node.js和Python为主,未来的趋势,不建议初学者上来就学PHP。

数据库

其实依然属于后端,与上面的内容分开来写会显得比较清晰。

  • MongoDB:NoSQL、非关系型数据库,速度很快,扩展性强,能够处理更多的数据类型和数据库扩展,可完美搭配Node.js,在大数据和物联网行业很受欢迎。

    入门可参考官方的MongoDB教程:https://university.mongodb.com/

  • MySQL:最为流行的关系型数据库,适配Python、Ruby、PHP等语言(当然也包括Node.js)

  • Firebase:Google推出的实时云数据库,强烈建议在掌握以上一种数据库之后对其进行关注。

此外还有SQL Server和Oracle,因为接触不多,所以也就不展开了。

后端框架

  • JavaScript 类:Express、Hapi.js、Adonis、Loopback、Swagger等。Express是目前的主流JS框架。
  • Python 类:Django、Flask、Web2py、Pylons等。毫无疑问Django、Flask是其中的两位主角,然而两者的设计完全相反。Django提供一整套的解决方案,从模板、ORM、Session、Authentication等等都分配好了,总之就是为你做尽量多的事情,而且它的admin配合django-suit后可以迅速做出一个后台。Flask只是一个微框架,仅实现核心功能,其他的由扩展提供,比较适合开发API。社区方面Django要优于Flask,插件数量很多。
  • PHP 类:Laravel、Symfony、CodeIgniter、Yii2等
  • Ruby 类:Ruby on Rails、Sinatra、Nitro等,如前面所说,Ruby正在渐渐被时代所抛弃。
  • C# 类:当然就是微软自家的.net了。

在Express或者Django/Flask里面挑一种就好,如果对电商类网站比较感兴趣的话可以把重心放在Django上面。

移动应用

这里主要是说利用之前的Web框架来进行跨平台移动应用开发,不涉及Java或者Swift语言。

  • React Native框架:使用React框架开发原生应用(非混合应用),在多平台开发上有着不错的效率,所谓的“仅需学习一次,编写任何平台。(Learn once, write anywhere)”
  • Native Script框架:与React Native类似,采用Angular框架来进行跨平台APP开发,支持纯JavaScript,个人比较喜欢,不过在实现很多原生功能上比较麻烦,不如直接用webview那样效率。
  • Ionic/PhoneGap/Cordova:混合应用开发,简单地说就是使用webview技术在APP中展现Web页面,而不需要使用手机浏览器。很多市面上的APP都在用。
  • Xamarin:使用C#进行开发原生APP,目前已经免费了,用的人不多。

其他技术

  • GIT:版本控制的不二之选,每个开发者都应当学习。

  • APIs/REST:不管是前端还是后端,都应当了解REST API是如何工作的。

  • GraphQL:又是来自Facebook的技术,开源之后意图取代REST API,现在可以开始关注了。

  • CSS 预处理器(CSS Pre-processor):简单地说就是允许你在CSS中使用变量和函数、进行一定程度的逻辑操作,从而简化CSS的编写。预处理器主要有Sass、LESS和Stylus,要学的话重心主要放在Sass上。

  • Webpack&Babel:模块加载器,以及JS编译器。如果要深入学习JavaScript开发的话,这两者也应当一同学习。

    Webpack一篇不错的入门文章:http://www.jianshu.com/p/42e11515c10f

实际应用

掌握以上内容后,你应该可以:

  • 创建从简单到高级的Web应用;
  • 创建安全的REST API
  • 部署和维护Web应用
  • 管理数据库等等

最后还是再强调一下最开始的观点:专心一个方向,不要频繁地从一个框架跳到另一个框架、从一门语言跳到另一门语言,但在空闲的时候也不要忘记了解最新的技术(Grid CSS、GraphQL、Firebase等),同时时刻关注业界的发展变化。