前端和后端开发人员比例

Websites and applications are complex! Buttons and images are just the tip of the iceberg. With this kind of complexity, you need people to manage it, but which parts are the front end developers and back end developers responsible for?

网站和应用程序很复杂! 按钮和图像只是冰山一角。 有了这种复杂性,您需要人来管理它,但是前端开发人员和后端开发人员负责哪些部分?

  • The many layers of development

    多层次的发展

  • But we’re not all full stack

    但是我们还不是全部

  • So what is the difference between Front End Development and Back End Development?

    那么前端开发和后端开发有什么区别?

  • What is Front End Development?

    什么是前端开发?

  • What is Back End Development?

    什么是后端开发?

  • Where things get fuzzy

    事情变得模糊

  • Resources to learn

    学习资源

多层次的发展 (The many layers of development)

Whether you’re working on a website or a native iOS app, all development environments share a common theme — there’s a front end to an application and a back end.

无论您是在网站上工作还是在本机iOS应用程序上工作,所有开发环境都具有一个共同的主题-应用程序的前端和后端。

This line can get blurry, especially given the rise of javascript and the serverless world. With the tooling somewhat merging together, we might sometimes wonder if we’re a full stack developer.

这条线可能会变得模糊,特别是考虑到javascript和无服务器世界的兴起。 随着工具的融合,我们有时可能会怀疑我们是否是一名全栈开发人员 。

但是我们还不是全部 (But we’re not all full stack)

As much as we might all want to be, we’re not all full stack developers. Personally, I find myself able to be productive in the back end of an application, but it’s not my strength and I much prefer to be heads down building UIs.

尽管我们所有人都想成为 ,但我们并不是全栈开发人员。 就个人而言,我发现自己能够在应用程序的后端高效工作,但这不是我的强项,我更喜欢低头构建UI。

And some people are the opposite, where they are strongest dealing with building APIs in the back end of an application and while they can build out a UI, it might be more of a prototype-like experience than a fleshed out application.

与某些人相反,他们最擅长在应用程序后端构建API,尽管他们可以构建UI,但与充实的应用程序相比,它更像是一种原型体验。

那么前端开发和后端开发有什么区别? (So what is the difference between Front End Development and Back End Development?)

Even if you are a full stack developer, that doesn’t mean there’s not a division of responsibilities.

即使您是全栈开发人员,也不意味着没有责任分工。

So what do those look like?

那这些长什么样呢?

什么是前端开发? (What is Front End Development?)

The front end of an application typically refers to the layer that represents the UI (user interface). This can include anything from a static site with HTML and CSS to a full React app that powers the UI.

应用程序的前端通常是指代表UI(用户界面)的层。 这可以包括从具有HTML和CSS的静态站点到为UI提供支持的完整React应用程序等所有内容。

前端开发传统上是什么样的? (What did Front End Development traditionally look like?)

Javascript currently rules the front end web, but that wasn’t always the case. While it could have been used to add little bits of interaction to a site, typically front ends were rendered using server-side templating languages like framework-driven PHP and Template Toolkit (Perl).

目前,Java语言统治着前端网站,但并非总是如此。 尽管可以使用它来增加与站点的少量交互,但通常使用服务器端模板语言(如框架驱动的PHP和Template Toolkit ( Perl ))来渲染前端。

This grew to be super popular in practice with home grown frameworks or tools like Wordpress that used PHP to drive a massive community of developers who built their websites with those tools.

在实践中,这已经变得非常流行,例如使用PHP的本地框架或工具(如Wordpress)来驱动庞大的开发人员社区,这些社区使用这些工具构建网站。

The way it worked was the templating language was able to get its data straight from the server as it was rendered. When a browser requested the page directly from the origin (the server itself), whatever data the template would need, the application logic would provide at that time.

它的工作方式是模板语言能够在渲染时直接从服务器获取数据。 当浏览器直接从源(服务器本身)请求页面时,无论模板需要什么数据,应用程序逻辑都会在那时提供。

Some of the more traditional front end tools include:

一些更传统的前端工具包括:

  • Libraries like jQuery or MooTools

    jQuery或MooTools之类的库

  • Website frameworks like Wordpress

    网站框架(如Wordpress)

  • Plain CSS

    纯CSS

  • Abundant use of Table elements

    表元素的大量使用

But as time went on, javascript kept getting more mature as a language and browsers kept getting more powerful, which led to the idea that we could move more of that work to the browser to build faster and more interactive experiences.

但是随着时间的流逝,JavaScript逐渐成为一种语言,浏览器也变得越来越强大,这导致我们可以将更多的工作转移到浏览器上,以建立更快,更互动的体验。

前端开发现在看起来像什么? (What does Front End Development look like now?)

Now it’s common to see javascript-heavy websites and apps built using UI frameworks like React, Vue, and Angular. These tools provide abstractions that allow developers to build complex UIs with reusable patterns like components.

现在,常见的是使用UI框架(如React , Vue和Angular)构建大量javascript的网站和应用程序。 这些工具提供了抽象,允许开发人员使用可重用的模式(例如组件)构建复杂的UI。

When the browser loads the page, the page receives an initial HTML document that also includes the script tag to the javascript (same as always). But once that javascript loads, it reaches out to APIs using browser requests that when completed, update the page to fill in any kind of dynamic data that you’d typically get along with that first HTML document.

当浏览器加载页面时,页面会收到一个初始HTML文档,该文档还包括javascript的script标签(与以往一样)。 但是,一旦加载了JavaScript,它就会使用浏览器请求到达API,并在完成后更新页面以填充通常与第一个HTML文档一起使用的任何类型的动态数据。

While it sounds like more steps, it commonly provides a faster initial page load and render, not to mention it has a great developer experience. By delivering less on that first request and prioritizing what loads after that, it usually ends up as a better user experience.

虽然听起来似乎需要更多步骤,但通常可以提供更快的初始页面加载和呈现速度,更不用说它具有出色的开发人员体验。 通过在第一个请求上减少交付并确定随后的负载优先级,通常可以带来更好的用户体验。

Some of the front end tools that are more common and growing in popularity  include:

一些更常见且越来越流行的前端工具包括:

  • UI frameworks like React or Vue

    UI框架,例如React或Vue

  • Web frameworks like Gatsby

    像盖茨比这样的Web框架

  • Compilers like Babel

    像Babel这样的编译器

  • Bundlers like Webpack

    Webpack等捆绑软件

  • CSS tools like Sass

    Sass之类的 CSS工具

But those APIs, whether ones we pay for or create ourselves, need to be built somewhere. That’s where the back end comes in.

但是这些API,无论是我们自己付费还是自己创建的API,都需要在某个地方构建。 那就是后端进来的地方。

什么是后端开发? (What is Back End Development?)

The back end layer is usually where the business logic occurs. This can be super complex like the rules that determine revenue for an e-commerce company or something more common like a user profile.

后端层通常是业务逻辑发生的地方。 这可能非常复杂,例如确定电子商务公司收入的规则,或者更常见的情况(例如用户个人资料)。

后端开发传统上是什么样的? (What did Back End Development traditionally look like?)

The back ends of applications were historically built using server-side languages like PHP or Ruby. The idea is that you have a server that you need to perform complex operations on, so the way to do that is with a language that server would understand.

历史上,应用程序的后端是使用服务器端语言(如PHP或Ruby)构建的。 这个想法是,您需要在服务器上执行复杂的操作,因此该方法是使用服务器会理解的语言。

On each request to the server, the backend would perform the full stack of the operations, including rendering out the front end. By using frameworks or DIY architectures, the back end would accept the request, figure out what it should do with that request, run any business logic needed with the request, and provide the front end any data that it would need to display a response to that request.

在对服务器的每个请求中,后端将执行完整的操作堆栈,包括渲染前端。 通过使用框架或DIY架构,后端将接受请求,弄清楚它应如何处理该请求,运行该请求所需的任何业务逻辑,并为前端提供显示响应所需的任何数据。该请求。

Some of the more traditional back end tools include:

一些更传统的后端工具包括:

  • On-premise or remotely managed servers like Rackspace

    本地或远程管理的服务器,例如Rackspace

  • HTTP servers using Apache

    使用Apache的 HTTP服务器

  • Databases like MySQL

    像MySQL这样的数据库

  • Server side languages like PHP or Perl

    服务器端语言,例如PHP或Perl

  • Application frameworks like Ruby on Rails

    Ruby on Rails等应用程序框架

后端开发现在看起来像什么? (What does Back End Development look like now?)

Back end stacks look somewhat similar to the way they did before, aside from newer code patterns, except more often you’ll see the back ends provide data through APIs via HTTP requests instead of directly to the templates the front end team are working on.

除了更新的代码模式外,后端堆栈看起来与以前的方式有些相似,不同之处在于,您会经常看到后端通过HTTP请求通过API提供数据,而不是直接提供给前端团队正在处理的模板。

While the foundation isn’t super different, it actually be comes increasingly complex as you have to deal with different security implications that could compromise your system if not properly configured such as leaving an API open to the public that returns sensitive user data.

尽管基础并没有什么不同,但实际上它变得越来越复杂,因为您必须处理不同的安全隐患,如果配置不当,这些隐患可能会损害您的系统,例如向公众开放返回敏感用户数据的API。

But also how the server operates can be completely different. While previously, we might run our python on our own managed server (we still can), we can now make use of serverless functions with tools like AWS Lambda that simplify how we manage code.

但是服务器的运行方式也可能完全不同。 之前,我们可能会在自己的托管服务器上运行python(我们仍然可以),现在我们可以使用无服务器功能以及AWS Lambda等工具来简化代码管理方式。

While “serverless” doesn’t necessarily mean there are literally no servers, it means that as a service, the developer doesn’t have to worry about maintaining that server and can instead just focus on the code they need to run.

尽管“ 无服务器 ”并不一定意味着实际上没有服务器,但这意味着作为服务,开发人员不必担心维护该服务器,而可以只专注于他们需要运行的代码。

Some of the back end tools that are more common and growing in popularity include:

一些更常见且越来越流行的后端工具包括:

  • Cloud servers like AWS EC2

    像AWS EC2这样的云服务器

  • Serverless services like AWS Lambda

    无服务器服务,例如AWS Lambda

  • NoSQL databases like MongoDB

    像MongoDB这样的NoSQL数据库

  • Languages like Python or javascript via NodeJS

    通过NodeJS的 Python或javascript之类的语言

  • Web application frameworks like Serverless Framework

    Web应用程序框架(如无服务器框架)

事情变得模糊 (Where things get fuzzy)

Part of the twist with back ends is now you can write your back end with javascript. With the inception of Node.js, developers were given the ability to use their favorite browser language to do most of the same things they were used to and familiar with but now on a server.

后端扭曲的一部分是您现在可以使用javascript编写后端。 自从Node.js诞生以来,开发人员就可以使用自己喜欢的浏览器语言来完成他们以前习惯并熟悉的大多数事情,但是现在都在服务器上。

While not everyone is fond of running javascript as a server side language, it became a little easier to use the same language to write the full stack of an application. This changed the game a bit as far as front ends and back ends were concerned.

虽然并非每个人都喜欢将javascript作为服务器端语言运行,但是使用相同的语言编写应用程序的整个堆栈变得有点容易。 就前端和后端而言,这彻底改变了游戏。

But it’s also started to come full circle where you now see systems that build APIs right next to the front end similar to what you might see in a traditional stack.

但是它也开始全面发展,您现在可以看到在前端附近构建API的系统,就像您在传统堆栈中看到的一样。

前端与后端 (Front End vs Back End)

Regardless of the stack, there will always be the separation of concerns. The UI and all of the interaction, whether rendered on the server or in the browser, is what makes the front end the front end and the data and business logic, whether coming from the server in your company’s closet or a managed function, is what makes the back end the back end.

无论堆栈如何,总会有关注点分离。 UI和所有交互(无论是呈现在服务器上还是在浏览器中)都是使前端成为前端的原因,而数据和业务逻辑(无论是来自公司壁橱中的服务器还是托管功能)是什么?使后端成为后端。

Whether you prefer to work on the user facing features or build the logic that lets them do things, there are plenty of resources to get started.

无论您是喜欢使用面向用户的功能,还是构建让他们执行操作的逻辑,都有很多资源可以入门。

学习资源 (Resources to learn)

前端 (Front End)

  • freecodecamp.org Responsive Web Design Certification (freecodecamp.org)

    freecodecamp.org响应式Web设计认证 (freecodecamp.org)

  • Beginner Javascript (beginnerjavascript.com - Wes Bos)

    初学者Javascript (beginnerjavascript.com-Wes Bos)

  • React Tutorial for Beginners (youtube.com - Programming with Mosh)

    React初学者教程 (youtube.com-用Mosh编程)

  • Front End Masters (frontendmasters.com)

    前端大师 (frontendmasters.com)

后端 (Back End)

  • freecodecamp.org APIs and Microservices Certification (freecodecamp.org)

    freecodecamp.org API和微服务认证 (freecodecamp.org)

  • Super simple start to serverless (kentcdodds.com)

    超级简单的无服务器启动 (kentcdodds.com)

  • AWS Certified Cloud Practitioner Training 2019 - A Free 4-hour Video Course (freecodecamp.org)

    AWS认证的Cloud Practitioner Training 2019-4 小时免费视频课程 (freecodecamp.org)

  • CS50's Introduction to Computer Science (edx.org)

    CS50的计算机科学入门 (edx.org)

以上全部 (All the above)

  • How to Become a Full Stack Web Developer in 2020 (colbyfayock.com)

    如何在2020年成为一名全栈Web开发人员 (colbyfayock.com)

  • Egghead.io (egghead.io)

    Egghead.io (egghead.io)

  • 100 Days of Code (100daysofcode.com)

    100天的代码 (100daysofcode.com)

  • The Web Developer Bootcamp (udemy.com - Colt Steele)

    Web开发人员训练营(udemy.com-Colt Steele)