• 开发的多层次
• 但我们不是全栈程序员
• 所以前端和后端的区别到底是什么？
• 什么是前端开发？
• 什么是后端开发？
• 模糊地带
• 学习资源

开发的多层次

无论你是使用网站或者是ios应用程序，所有的开发环境都使用相同的模式——那就是前端开发和后端开发。

这界线是模糊的，尤其是当 Javascript 和 serverless 世界的兴起。当开发工具开始结合在一起时，我们会开始怀疑自己算不算是全栈开发者。

但我们不是全栈程序员

虽然我们都想被称为全栈开发者，但我们并不是。以我个人来说，我发现自己在后端的开发比较有效率，但这并不是我的强项，我更喜欢建立使用者页面（ UI ）。

当然也有些人跟我相反，他们的强项是在应用的后端构建 API 同时也能建立使用者页面，但可能是比较像原型设计以展示应用设计地那种。

所以前端和后端的区别到底是什么？

就算你是个全栈开发者，但这并不代表没有职责的分支。

它们的区别是什么？

什么是前端开发？

应用程序的前端通常是指显示使用者界面的图层，当中包括所有的静态网页如 HTML 和 CSS 到 React 所构建的使用者界面。

传统的前端开发是什么样的？

目前统治前端网页的程序语言是 Javascript ，但并不完全只依赖一个程序语言就可以的。若需要在网页内增加一些互动，就需要使用如 PHP 和 Template Toolkit（Perl）的服务器模板的程序语言渲染网页前端页面。

这种方式广泛的应用在用户自行建立的框架或如 Wordpress 这样使用 PHP 来驱使广大的开发者社群使用这个工具来开发网站。

它的运作方式是这些模板可以在运行时直接从服务器获取资料。当浏览器从服务器请求网页资料时，模板所需的资料和应用的逻辑都会在那个时候获取。

一些传统的前端工具包括：

• 软件包如 jQuery 或 MooTools
• 网页框架 Wordpress
• CSS
• 充分地使用 Table 元素

但时间久了之后， 当 Javascript 变得越来越成熟和浏览器的强化，我们就能够建立更多、更快、互动性更强的使用者体验。

目前的前端开发是什么样的？

目前使用 Javascript 的网页和应用程序建立 UI 的框架如 React，Vue，和 Angular 越来越常见。这些工具提供了开发者能够重复使用的复杂 UI 元件的功能。

当浏览器缓冲页面时，该页面会先接受一个起始的 HTML 文件当中包括 script 标签里所包含的 Javascript 文档（就跟之前的一样）。不同的是当 Javascript 运行时，它会自动从浏览器与外部的 API 连接，更新页面之后就像一个普通的静态网页从起始的 HTML 文件中获取这样。

虽然看起来步骤变多了，但通常能够提供更快速的缓存和渲染，因此提供了更优质的开发体验。因为在初始请求页面时的资料减少和缓冲优先的排序，所以能够提供更好的使用者体验。

一些常用和广受欢迎的前端开发工具包括：

• UI 框架如 React 或 Vue
• Web 框架如 Gatsby
• 编译器如 Babel
• 集合器如 Webpack
• CSS 工具如 Sass

但是这些 API，无论是我们付费或者是自行建立的都需要建立在 某些地方。这就是所谓的后端。

什么是后端开发？

后端是程序逻辑发生的地方。这可以是非常复杂，比如管理电子商务公司的收入或者只是简单的用户资料。

传统的后端开发是什么样的？

传统的应用程序后端通常使用服务器编程语言如 PHP 或 Ruby。这个方法是需要一个服务器来运行复杂的运动算的，所以才会使用服务器能够明白的语言。

所以对服务器的请求，后端会执行所有的程序，当然也包括前端的渲染。通过使用框架或者自行定义的结构，后端能够接受请求，通过请求执行相对应的逻辑，然后提供前端所需要显示的资料。

一些传统的后端开发工具包括：

• 本地或远程控制的服务器如 Rackspace
• HTTP 服务器如 Apache
• 数据库如 MySQL
• 服务器程序语言如 PHP 或 Perl
• 应用程序框架如 Ruby on Rails

目前的后端开发是什么样的？

目前后端的开发和之前并没有太大的变化，除了有新的编码格式，就是我们经长能够看见的后端透过 HTTP 请求提供资料给 API 而不是直接透过前端工程师所建立的模板。

因为基础并没有太大的变化，当我们开放存有敏感资料的 API 给大众时会带来复杂且难处理的安全隐患。

但服务器的运行也有了不同。之前，我们需要在我们自己的服务器运行 Python 代码（当然现在也可以），但现在我们可以使用如 AWS Lambda 的工具来简化我们的代码。

可是 serverless 并不是真正不需要服务器的意思，而是转化成为了一种服务，开发者能够不需要担心服务器维护的情况下进行开发工作，只需要专注在编码本身的运行就行了。 一些常用和广受欢迎的后端开发工具包括：

• 云服务器如 AWS EC2
• serverless 服务如 AWS Lambda
• NoSQL 数据库如 MongoDB
• 程序语言如 Python 或透过 NodeJS 的 Javascript
• 网页程序框架如 Serverless Framework

模糊地带

透过 Node.js 的 Javascript 开发者能够使用自己喜欢的浏览器语言执行与服务器语言相同的任务。

虽然并不是所有人都是以 Javascript 作为服务器语言，当它的确能够简化整个程序只使用同一种语言。这重写了前端和后端的游戏规则。

但它他也开始进入一个完整的生态圈，就是现在我们会看到系统的 API 就建立在 前端的隔壁 这跟传统的格式一样。

前端 vs 后端

无论前端或后端，总是会有区分的界限。所有互动的 UI 不论是在服务器或浏览器运行的，都属于前端。而那些使前端的逻辑发生和资料来源，不论是某公司提供的服务或者是自定义的结构，都是后端。

不论你喜欢搭建使用者界面或者建立后台逻辑，都有不少的资源让你开始。

学习资源

前端

• freecodecamp.org Responsive Web Design Certification (freecodecamp.org)
• Beginner Javascript (beginnerjavascript.com - Wes Bos)
• React Tutorial for Beginners (youtube.com - Programming with Mosh)
• Front End Masters (frontendmasters.com)

后端

• freecodecamp.org APIs and Microservices Certification (freecodecamp.org)
• Super simple start to serverless (kentcdodds.com)
• AWS Certified Cloud Practitioner Training 2019 - A Free 4-hour Video Course (freecodecamp.org)
• CS50's Introduction to Computer Science (edx.org)

以上皆是

• How to Become a Full Stack Web Developer in 2020 (colbyfayock.com)
• Egghead.io (egghead.io)
• 100 Days of Code (100daysofcode.com)
• The Web Developer Bootcamp (udemy.com - Colt Steele)

原文：Front End Developer vs Back End Developer – Definition and Meaning In Practice，作者：Colby Fayock

如果你想学习编程，一般有三种方法可以选择：

• 搜索相关的课程来自学
• 上大学，修一个计算机相关学位
• 上编程学校，那里有动手实践的速成班，可以让你快速地在 3 个月至 1 年的时间内找到自己的第一份软件开发工作

虽然第一个选项是最便宜的，但是它也是最容易让人感到挫折和困难的一个选项。我们会在自学编程的一路上遇到各种障碍，然后想要放弃。

如果你一段时间不工作（或者不是全职工作），仍然能付得起学费和生活费用，仍然能供养得起家庭，那么第二个和第三个选项更好。但我相信不是所有人都可以做到。

这就是为什么我们创办了 freeCodeSchool Indy 。这个免费编程教学项目采用 freeCodeCamp 的课程，我们指导学生利用 3 个月的业余时间学习编程。

我们每周有两堂两小时的课程——星期一和星期三的下午 6 点至 8 点，课程涵盖基本的 HTML 到 JavaScript 的所有内容，甚至还会包括 React 入门知识。

学生每周需要花大约 6 个小时的时间进行自学。每周日下午 1 点至 5 点是我们的办公室答疑时间，他们可以自愿参与。如果他们在第一个 3 个月内完成第一个项目，那他们就可以参与接下来 3 个月的第二个项目，即学习使用 Node.js 进行后端网页开发。

我们执行这项计划一年多了，很高兴今年五月份我们顺利完成了第一轮的教学。在这篇文章里分享我们分享一些学到的东西。

我们的目标是建立一所免费的编程学校

起初，我们的目标是为所有人（不论他们的收入和生活状况如何，比如是否有能力在一段时间内不工作）提供便捷的支持性的教育。

我们并不是想要与任何的训练营或者编程学校竞争，当然他们也是为学生提供了有价值的服务。我们只是尝试为需要弹性安排课程时间或负担不起编程学校学费的人们提供另外一个更便捷的选项。

我们的员工、志愿者、社区成员或者是已完成我们课程的校友都会为学生提供教导和指引。

当然我们希望那些想要成为开发者的学生可以找到心仪的工作，但我们并没有能力保证任何事情，只能竭尽所能提供更多的支持，不管他们最后决定自学，还是参与更正式的课程（比如去编程学校或者修学位）。

就像我之前所说的，这一切花了我们团队一年的时间——寻找合适的空间作为教室，找到老师，决定项目和课程的形式。

接下来介绍一下我们的筹备过程。

我们如何安排课程

我们做的第一件事情就是决定课程的时长与目标。我们最终决定开设 3 个月的课程，让学生学会基本的 HTML, CSS 和 JavaScript，以及其他知识，比如说 Bootstrap 和 React 组件。

若一切按照计划进行，我们计划是让完成第一阶段的学生放一个月的假，然后学习第二阶段的课程。第二阶段的课程同样进行 3 个月，会沿用第一阶段的知识，教他们 JavaScript 框架的更多内容，并介绍 Node.js 。

从一个 3 个月的小型业余课程开始，有助于我们学会如何安排和调整长期计划。这个课程让学生有个短期的目标，使他们可以在短时间内完成自己的作品集。

这是我们在 Github 上的社群，我们会不断地更新资源和提供开源资料。

采用 freeCodeCamp 的课程

开发课程将会花费非常多的时间和金钱。幸运的是 freeCodeCamp 已经有了完善的免费课程供我们使用和修改，而且没有限制

因此我们采用了 freeCodeCamp 的课程，并把它作为我们的内容提纲。我们把 freeCodeCamp 的挑战题目作为课后作业，同时让学生独立或组队完成上面的项目。

在这个过程中，我们也鼓励学生在课程之外多学一些，这样他们能够在项目进行中或结束时拿到 freeCodeCamp 的证书。

我们如何寻找开课的地点

印第安纳波利斯公共图书馆慷慨地同意我们在那里开课，以及周日在那里组织答疑。但电脑室的空间有限，所以每班我们只能收 22 名学生。

虽然我们可以使用更大的会议厅安排更大的班级，但那样的话，我们就不能招募没有手提电脑的学生了，那不符合我们“让所有人都有机会学习编程”的目标。

我们原本没有计划实行远程授课，但受到疫情的影响，我们必须调整我们的课程，使用 Discord 进行授课和联络学生。

我们如何选择科技工具

我们在开课之前上线了一个 Discord 论坛（就像 freeCodeCamp 论坛一样），学生可以登录，接收通知，提问，和发布作业。管理员也通过这个平台追踪学生的学习进度，促进交流。

我们如何管理学校

招募学生

在计划这个课程的时候，我们担心没有人会感兴趣，那么这个计划最终会没什么意义。但实际上有兴趣的学生太多，我们无法接受所有的报名——计划了 22 个名额，却有超过 140 个人报名！并且我们没有做太多的营销工作。

看到这么多人感兴趣，我们感到非常开心，但也需要决定如何公平地选择学生。

我们要求报名的人完成 3 个简单的编程挑战，例如 Code.org 的 Flappy Game。这样我们知道了哪些人是对编程真正有兴趣，将报名人数减少至 80 人左右，然后以抽签的方式决定最终能够参与课程的学生。

授课

每位学生都有自己的个性和喜好，学习方式各有不同。我们无法期望他们只上一个小时的课，就能吸收所有信息并毫无问题地完成作业。

我们决定在每次上课之前先解答同学们的疑问，通常我们不会收到太多的问题。接着，以幻灯片的形式开始进入授课内容，每隔 15 分钟会暂停一下，让学生有时间尝试老师刚刚所教的东西。同时也会有导师从旁给予协助，学生也可以在这个环节在课堂内提出问题。

我们也经常预留 2 小时课程的最后 30 分钟让学生做自己的作业。

收集作业

有些学生不愿意提交作业，因为他们不好意思让其他同学看见他们的代码，或者有人觉得这是个免费的课程，所以不需要交作业，更有一些人受班上同学的影响，同学不交那我也不要交。

如果某位同学是害羞分享代码，那我们就会鼓励他分享给我们的老师看，并让他知道我们曾经和他一样不会写代码。

如果某位同学就是不想写作业，那我们也没什么好多说的。我们会尝试劝退那些不是真正想参与我们课程的学生。

所有学生的作业原本是在论坛内提交，但我们发现这样非常没有效率，学生并没有经常登录，也从不在那儿提问。

现在所有作业在我们学校的 Discord 聊天室里提交。

自从我们将项目搬运的 Discord 后——包括上课、回答问题等，交作业的人数增加了，我们也从员工和志愿者那里得到了更多有建设性的反馈。

期限

需不需要为完成项目设置最后期限呢？我们目前的观点是不需要。

第一批学生中大多数人的进度有点慢，有的人更是在课程完成几周后才完成项目。难道我们要惩罚那些有完成但不是在规定时间内完成的学生？不需要，原因是：每个人都有自己的学习节奏。

如果一个学生在 3 个月内完成项目，另一个学生在 4 个月内完成，他们两个应该同样被视为是完成了。

有一天，我们将会推行滚动式招生制度，更细化地帮助学生。到了那个时候，我们能做的就是保持弹性的教学，让他们什么时候完成作业了就什么时候提交。

鼓励学生提问

这是我们遇到的最大问题！有的人落后于自己的同学，对课程有疑惑，但又不寻求帮忙。甚至有的人疑惑到连提什么问题都不知道。

我们无法强迫别人提问，但可以给他们提示。我们找到让学生提问的最好方法就是在课程开始之前做一个简短的测试，并在课堂上留出时间，让学生可以在小组内提问。

如果学生想要以文字的形式提问，他们可以在聊天群发布帖子或者给任何一位员工发私信。

我们只能够帮助到这么多，如果学生遇到了问题但没有提出来，我们提供不了任何的解决方案。我们努力满足他们的需求，但他们也需要做出一些努力，主动咨询我们。

问卷调查

定期地对学生进行问卷调查为我们的课程带来了许多非常有帮助的回应。

我们在课程开始的阶段收集学生的目标和背景资料。然后在中途（大约在第 6 周）和结束的时候，分别进行了两次问卷调查。

收到许多有用的信息之后，我们发现可以多安排几次调查和增加几道题目。现在，我们大概会每月向学生进行问卷调查。以下是我们会问的一些问题：

• 你感觉目前的课程怎么样？是否有达到你的期望？
• 你觉得导师们对你完成作业有没有帮助？
• 我们可以怎样更好地帮助你实现目标？
• 你有什么想反馈给我们？

处理退学事件

生活中总有突发事件，计划赶不上变化。我们理解会有一些非常积极的同学可能是因为一些无法避免的问题而被迫停止参与课程。

如果他和我们沟通自己的情况，我们会安排他参与下一期的课程。

如果他没有和我们沟通，就不来上课了，那么他可以再申请下一期的课程，但是我们不会再招募他了。

员工与志愿者

招募志愿者

如果没有志愿者的协助，这个项目很难取得成功。以下我们招募的几类志愿者。

职责：

• 发起人——没错，我们也是志愿者。我们非常的幸运，有一个很好的团队可以去执行这个项目，当中包括我本人和另两名开发者，以及一位懂编程的图书馆电脑室管理员。我们每周会在 Discord 进行数次讨论，以确保课程顺利进行、学生们都在进进步。我觉得 3-5 个人就可以组成一个不错的团队，但还是需要增加人手以处理一些专项的事情，例如“社区管理员”或“志愿者管理员”等。
• 授课人——这些人主要是授课或主持通常在周末进行的特别支持环节。这是最难管理的志愿者类型。我们项目的课程时间通常为 1.5-2 小时，一共有 24 次课程，所以每一次课程都需要有清晰的重点，并且与其他课程衔接起来。一些很热心的志愿者并不是非常适合给毫无基础的初学者讲课。你希望学员在这堂课中掌握什么，落实到每一个知识点和学习成果，都需要给学员讲得很清楚，这非常重要。我们也给授课人提供统一的幻灯片模版，确保课程都能衔接起来。
• 导师——学生们不只是会有关于编程的问题，他们还会有关于职业与社交之类的问题。导师就是来为学生们解答这类疑惑的人。目前我们正在安排志愿者导师至少每周一次与学生交流，以确保学生们保持在正确的学习轨道上，并回答学生们的问题。我们延迟这项安排的其中一个原因是我们正在开发一个体系，以处理学生和导师在一对一交流时出现的关于不当言辞或行为的投诉。
• 实验室助理——助理的主要工作就是在直播课程的时候给予帮助，通常是处理电脑软件运行和代码错误。上实体课的时候，我们会安排更多的助理。上远程授课的时候，我们不能直接看到学生的电脑屏幕，所以需要几位助理能够及时在聊天室回答学生们的问题。
• 协助者——他们负责在聊天室回答学生们的问题，审核学生们写的项目和作品集。他们帮助学生了解自己的不足，并给予学生们鼓励。

志愿者手册

我们制作了 2 页的手册，详细说明对志愿者的期望与行为要求。这个手册目前包含基本的内容，我们会不断修改更新。

我们也把 freeCodeCamp 的行为原则发给志愿者，因为它很简洁到位，例如提到善意、包容等等。

确保员工拥有取得成功的条件

我们当然也犯了不少错误，包括我们让授课人自己制作幻灯片，在最后一刻才告诉他需要更换，所以课程效果就没有很好。我们本来应该向授课人清楚说明希望他做什么。

现在，每位授课人都会收到我们准备的教学模板和他们需要讲解的知识点列表。我们也会和他们联系几次，了解授课进展，以确保项目稳步推进。

目前为止，我们有了志愿者手册、课程计划、幻灯片模板、导师规范，以及 Google Drive 文件夹（储存项目的所有文档、学生的进度、课程资料和未来的计划）。最近我们重新整理了所有资料，以方便所有人快速找到需要的资料。

随着项目发展，我们会需要更多志愿者甚至员工。通过记录各项工作进展，我们可以帮助未来的参与者更便捷地了解这个项目。

社区合作伙伴

我们目前正在合作伙伴，给我们提供资金赞助和捐赠设备。

虽然图书馆提供了良好的环境与设备，但远程教学就会遇到不少困难，因为有些学生没有良好的设备和稳定的网络通讯。

另外，图书馆的开放有时间限制，对于有工作和家庭的学生来说，在白天安排出时间上所有的课程会比较困难。这就是为什么合作伙伴的赞助对于我们的课程来说非常重要。

未来，我们希望能够为有需要的学生提供网络通讯和手提电脑。

组织方式

营销

我们的团队并没有营销专家，所有的营销策略主要是确保品牌风格保持一致，以及时常在社交媒体上分享动态。

幸运的是，我自己在 YouTube、LinkedIn 和其他平台上有些粉丝，我在上面招募志愿者，激发人们对我们项目的兴趣。

公共图书馆也帮助我们在各类人群中宣传，招募学生，有的人群是我们的渠道触及不到的。

随着项目推进，我们可能会在社交媒体上扩大宣传，但目前由于预算有限，我们只是让项目有机增长。

远程直播

远程直播教学有不少挑战，比如网络连接有时候会断开，学生们需要时间掌握软件的使用。

Discord 是一个不错的选择，因为我们不仅可以在同一个平台里直播授课，还可以同时有聊天室和其他的一些功能，这样学生只需熟悉一款软件的操作就够了。

不仅如此， Discord 还允许我们在同一个聊天室同时给最多 50 个人分享屏幕，而且还是免费的！我们也了解过 ZOOM 和其他工具，但只有 Discord 是我们负担得起的又有适合我们需要的功能。

注册 & 筹款

我们想向一些公司和个人筹款，因此我们去年注册成为非营利组织。在美国，这个过程需要花大约 6 个月的时间。我们必须先在所属州注册成为公司，然后才能向联邦政府申请成为非营利组织。

我们终于在今年年初成功注册成为 501c3 非营利组织！目前我们正在寻找接受筹款和捐助的方法，将会在网站上增加“捐款”按钮，让更多人能够有机会帮助我们。我们内部也正在讨论众筹是否是个好方法。

如果你有任何的提议，欢迎给我们发邮件 contact@freecodeschoolindy.com 。

通讯工具

论坛

就如之前所说的，我们有一个论坛，但发现它非常难维护，并且不符合我们的需求。人们发现论坛难以使用，尤其是在移动端。让员工和学生时常登录论坛，也挺麻烦的。所以我们团队才会最终选择把整个项目搬到 Discord 上。

Discord

现在我们有自己的 Discord 平台！我们在这里直播上课——可以同时连线 50 位同学分享电脑屏幕。这个平台可以管理学生，组织志愿者活动，培训授课人，回答问题，完成小组报告，点评作品集等等。

将所有的东西集合在同一个地方是我们做出最正确的决定，不只是减少开销，也把管理工作变得更加简单。

毕业

我们本来打算组织一个毕业典礼，不幸的是由于疫情的关系，这个计划被影响了。我们需要将毕业证书邮寄给完成课程的学生。

第二期课程是远程授课，我们希望为即将在八月底毕业的学生增加一些有趣的环节。如果你有任何想法，欢迎告诉我们。

总结

推动这个项目是我做过最困难的事情之一，工作量非常大，但非常值得——可以改变学生的人生。

这不仅仅是我一个人的努力，当然还有整个团队的互相帮忙才能促成这个项目。

在这里我特别感谢 Jared Wilcurt、Casssandra Bautista、Marianne Mckenzie、印第安纳波利斯图书馆、freeCodeCamp 和志愿者，有了你们的参与才有这个项目。

我们目前正准备把使用的教学资料开源，包括幻灯片、项目、freeCodeCamp 的编程挑战、补充资料等等。我们花费时间和精力去整理这些资料，请耐心等待，稍后我们会把这些资料分享给感兴趣的人们:)

如果你对于我们的课程有任何建议，欢迎告诉我们。

推特账号: @gwen_faraday

YouTube 账号: Faraday Academy

课程网址: freecodeschoolindy.com

原文：We Created a Local Free Coding School Using the freeCodeCamp Curriculum. Here's What We Learned，作者：Gwendolyn Faraday