这份指南是给各位希望在网页上完成应用开发的新人开发者学习的一份辅助工具,希望你不会再被互联网的结果弄得一头雾水。

~ 部分教程参考了 Github 项目 kamranahmedse/developer-roadmap

起步:打好基础

想玩互联网,怎能不了解互联网?起步阶段,应先了解互联网的基本结构。

一般来说,你访问的互联网可以拆分成这三个基本部分:客户机(Clinet)、服务器(Server)、以及架起他们之间桥梁的协议(protocol)、还有物理网络(Network)。在不同的视角上,你需要掌握的技术栈也许各不相同,但通用的永远是 HTTP(S)、DNS ,如果你感兴趣的话,也可以研究一下 TCP/IP 协议,它也很有趣。

学习完了现代互联网的基本结构以后,我们来看看网页。一个网页由三大基石组成:HTML、CSS、Javascript,HTML 负责基本数据标记,CSS对标记的指定区域进行美化,Javascript 进行各种事件的处理。在这里,你需要掌握 HTML 的基本标记、CSS 的写法、Javascript 的语法结构以及基本的事件交互,同时,了解一下浏览器在收到这些数据以后,是如何渲染网页的,将在你后期进行网页性能优化时派上大用场。

顺带说一句,现在是 WebKit 的时代,拥抱 ES6 吧,它太香了。

大多数人在学习这些的时候都是在 Windows 上进行的,但是网页最后基本上还是要放置到基于 Linux 的服务器上给全世界各地的人看到。所以你还需要学习一些 Linux 的基本命令。

OK,学习了这三大基石,你就可以开始编写一些精美的静态网页了。但是所有的网页不可能一次性就全部编写完成,有时候如果出现了路线错误,甚至要全部推倒重写。这个时候就需要学习版本控制系统,他们通过为文件创建「快照」的方式来追踪文件的更改,这样无论是你要回退到某个版本或者是与他人合作,都不会造成太大的混乱。

但是请注意,即使这些网页可能会带有一些动画,但它们仍然称之为静态网页。因为它们的数据是写死的,不能直接更新。如果你需要在静态网站中加入一个动态资源,你需要先访问这个请求获取数据,然后操作 DOM 树进行网页的修改(DOM 的相关概念,在你学习 Javascript 的时候会自然知道的)。但是当动态资源的数量增多的时候,就需要进行大量 DOM 操作,那是会让程序员十分抓狂的(当时的互联网,还没有前端的概念呢)。

这个时候,你就可以做出自己的选择了:继续在前端深耕浏览器,或是转向后端进行数据操作,抑或是两者兼有。

前端:框架一把梭的背后

前端往往会涉及到大量的服务器请求和 DOM 节点的修改,这个时候你需要当前前端的三板斧:Angular、React、Vue,他们的任务就是将数据渲染成 HTML 文件到用户的屏幕上,并且一旦数据更新,它就会立即更新到用户的浏览器窗口上,非常的直观。

想要使用这些前端框架,你有两个选择:使用这些框架自带的创建工具(脚手架),它会自动帮你生成一个骨架,然后你就可以使用这些框架的语法开始构建用户界面了。或者从零开始,使用 Webpack、 Browserify 一类的打包工具从零开始构建。

当脚手架提供的内容已经无法满足你时,是时候开始学习打包工具了。打包工具最重要的功能有两个:

  1. 在最终发布的时候,将各种 .vue .jsx .tsx 各种奇奇怪怪的文件格式统统编译成 html,css,js 等浏览器认得出来的文件;
  2. 利用他们内置的 Web 服务器工具,实现热重载(即每一次的修改都能在浏览器中即时观察),方便开发和调试。

当然,选择了前端,就意味着你需要跟 Javascript 打交道的次数比后端,甚至于全栈要多得多。你会接触到一个叫 Node.js 的东西,这是让 Javascript 脱离浏览器运行的重要工具。其内置的 npm 包管理工具则是安装上述这些框架的必需品。

如果你觉得性能还不够,想要再优化优化性能,那么你需要继续阅读 gulp、npm script 一类的构建工具,它们相当于一类批处理脚本,能够自动优化、自动打包、自动压缩你生成的前端页面。追求到极致性能的——去阅读这些框架的源码吧,说不定会给你一些启发。但是你需要有良好的 Javascript 功底,否则会有点难以上手。

写好的代码需要部署到服务器上,但是众所周知,用于 Web 服务的端口只有 80 和 443 ,如果前后端同在一台机器上运行的话,就会端口打架,各种 API 调用都会因为找不到路径而出错,因此最后你还要学习反向代理服务器软件(Nginx,Apache 等),将不同的路由分发到不同的端口,这样前端的代码就能愉快的跑起来了。

在学习这些的同时,你可以去玩玩 Flutter、React Native、微信小程序,看看现代 Javascript 是如何活跃于移动端的。

后端:从啥都要干到 CRUD

过去的后端,不但要写网页服务器,还要充当现在前端的角色。因为早期前端框架还没出现的时候,后端除了要学习服务器端编程语言以外,还需要学会使用一种叫模板语言的东西,说白了,就是在预先设置好的 HTML、CSS 上挖几个洞,然后用数据将这些洞填上,渲染成 HTML 并直接发送给用户。

自从前后端分离以后,后端的工作就轻松了不少。因为他们只需要同前端商议好 API ,然后将数据以 JSON 的格式发送给前端即可,后端不需要再去设计复杂的 DOM 操作,而只需要与前端进行简单的数据交互即可。

但是成为了后端,就意味着要向着计算机原理的更深层面出发,此时最好先找门网课(指 MOOC ,而不是傻逼培训机构)的计算机原理听一听,了解个大概。

然后就可以选择一门编程语言开始愉快的服务器端编程之旅吧,可以是 Java、C++、Go、PHP 等等各种你喜欢的语言开始尝试。

但是网站面对各种各样用户的访问,总会产生大量的数据交互,这些数据最后都会存放在数据库中,因此你至少要掌握一门关系型数据库和非关系型数据库的使用。当然自从有了 ORM 框架以后, SQL 语句都很少有人写了…

所有代码测试通过后,是时候部署到生产环境了,第一种办法是将代码直接编译生成二进制文件,它的通用性最强,开箱即用,几乎可以运行于各大 Linux 平台,但是一旦程序出错将很难找到出错的源头。第二种办法则是将整个源代码 clone 至生产环境,并切换为生产模式直接运行源代码。但是它需要在服务器上直接安装大量的依赖,有时候一个依赖出错也会导致应用奔溃。这个时候你可以去学习虚拟化环境,如 Docker,它兼顾了这两种方法的优点,一次生成,各地部署,无需考虑依赖安装。

为了适应现代互联网的敏捷开发(即不断地上线功能),减少人工部署和测试的频率,还有必要掌握一个 CI/CD 工具,CI 工具就相当于系统的批处理,他会自动对你的源代码进行编译、测试、部署等操作,并在出错时第一时间通知你。

产品正式上线以后,就可以考虑重构整个源代码,并进行性能优化以应对日益增长的新用户了,这一步也许会让你对你的编程语言以及计算机的整个工作原理有更多的了解,为了进行更深层次的性能优化,你还可以去学习一下数据结构和算法。

全栈:既当爹又当妈

我相信大部分的爱好者最后都会走上这条路,因为大家都没有朋友,没地方合作啊(

成为了全栈,虽然你需要把前端和后端的知识一起学了,但是整个项目在开发的过程中拥有极大的灵活度,你可以任意去选择前后端的技术栈,并能在不同的项目中担任不同的角色,即万金油(。

同时你可以去尝试一下服务端渲染技术,谷歌等国际搜索引擎已经支持了单页应用 (SPA)的搜索,但是为了更好的 SEO 结果,使用服务端渲染优化你的应用将给用户带来更好的访问体验。

总结

这是我从去年开始从 Freecodecamp 做题起家后,一路摸爬滚打,大概总结出的一个适合新人入坑的学习路线。总结出来的目的,一是为了自己查漏补缺,看看还有没有什么遗漏的部分,比如说我在写到 CSS 的时候发现自己对 CSS 的整个定位体系还不够了解,一会还要去重新补课。二就是不要让各位一开始就上去做题,先把自己要做什么知道了,才不会让自己陷入迷茫。

在学习的过程中,多做,多思考,用笔记软件记录下自己的想法以后方便随时查阅,这样三个月内你就可以自己写出一个自己想要的东西了。