我想我们现在是*全栈开发人员

*由“我们”，我的意思是前端开发人员。

这是2019年Jamstack Conf London演示文稿的书面版本，这是在一次不幸的山地自行车事故阻止我出席后创建的。我将其重新出现在此处出于档案目的，并展示WordPress Gutenberg的功能。

？你好！我的职业生涯一直致力于前端发展，并帮助他人在这一领域表现出色。

和男孩，我的手臂累了。

我管理CSS-Tricks（最近庆祝其成立12周年），该网站致力于网络开发资源。

我还共同创立了前端技术的社会编码平台Codepen。

此外，我共同主持了ShopTalk Show播客，接近第400集。

通过这些经验，我与无数开发人员进行了互动，获得了对行业的宝贵见解以及网站创建的多方面性质。

定义前端开发人员角色

✅这是一个职称和公认的职业。

这不仅仅是语义；这是相关的就业和头衔的真正工作。财务补偿强调了其重要性。

但是，我们如何定义这一角色及其期望是主观的。

浏览任何技术工作委员会，您会为前端开发人员找到许多帖子。

定义前端开发人员角色（续）

✅直接与浏览器，设备和用户进行直接交互。

尽管许多网络专业人员每天都使用浏览器，但前端开发人员居住在其中，利用DevTools和在各种浏览器，版本和平台上进行测试。

至关重要的是，他们优先考虑用户体验，包括可访问性注意事项。

米娜·马克汉姆（Mina Markham）提供了对前端开发人员角色的高级解释：[如果有的话，插入Markham的报价]。

后端开发人员存在区分；不是后端开发人员无视用户，而是责任是分配的。

Monica Dinculescu恰当地指出：[如果有的话，请在此处插入Dinculescu的报价]。

浏览器是前端开发的核心。如果您的重点是浏览器中的事物的外观和功能，那就是前端开发。这比经常承认的更具挑战性。

定义前端开发人员角色（续）

✅尽管有多种工具，但依赖HTML，CSS和JavaScript。

这些是浏览器理解的基本语言。虽然涉及其他技术，但核心可交付的居住在这些语言中，而前端开发人员对此负责。

熟练水平各不相同；一些开发人员可能会写最小的JavaScript，而另一些开发人员则专注于它。这导致了令人着迷的鸿沟。

我的文章“大鸿沟”探讨了这种二分法：[如果有的话，请插入到文章的链接]。

这不是一个单一的观点；许多开发人员承认这一分歧。

布拉德·弗罗斯特（Brad Frost）介绍了“前部”和“前后”，以对该部门进行分类。他强调说，这种多样性是一种优势。

在Google，这种区别在工作冠军头衔中得到认可和反映，对两种职业道路都有同等的补偿。

自2015年以来，JavaScript的突出是不可否认的。

（对于更大的视图，请使用DevTools。您是前端开发人员，对吗？ ）

我们的角色本质上令人着迷！我们都与浏览器，用户和设备进行交互。但是，我们的专业知识和贡献差异很大。

有些人专门研究设计，摄影，法律方面，绩效优化，可访问性或社交媒体。

隐喻地，我们可以将其视为分支树。 [如果可用，请在此处插入树图]。

这个隐喻可能不是完美的，但它说明了分裂。我们分享基本技能，但分为不同的专业领域。一个分支重点关注JavaScript和“前后”任务，而另一个则没有。

由于该讨论以前端开发人员在全堆栈作品中的不断扩展的作用为中心，因此让我们专注于那些具有更强JavaScript技能的人。

网络开发的不断变化景观

后端任务转移到JavaScript

现在，在JavaScript领域内处理了许多先前考虑的后端职责的任务。

组件驱动的设计和开发

谢谢，JavaScript！

非JavaScript服务器端渲染项目很少包含组件（存在例外，但请考虑Rails Landscapes上的庞大的PHP CMS和Ruby）。尽管存在模板并包含在内，但与真实组件驱动的开发相比，它们苍白。

有趣的是，尽管JavaScript框架之间存在分歧，但组件的概念被普遍接受。甚至本机Web组件也反映了这一点。

让我们检查Codepen（主要是反应供电）。即使是小SVG图标也是一个组件。我们称之为<svgicon></svgicon>组件是因为它抽象了有用的方面。

将图标与数字配对是另一个组件，因为其重复模式和潜在的交互功能。

一排MetaItem组件可能会成为一个组件，以及项目的其他显示方面。

因此，整个项目成为一个组件。

这些是UI结构的视觉和功能抽象。语义HTML为它们支撑，但这些抽象是自定义的构建块。

较大的部分成为组成部分。项目网格成为管理布局和分页的组成部分。

设计人员经常使用“符号”在诸如Figma，Sketch和Adobe XD之类的工具中使用，从而在概念上与组件相似。

许多开发人员很容易理解组件。

站点级体系结构/路由

后端任务转移到JavaScript（续）

传统上，URL处理和现场结构是后端的关注点。现在，“路由”越来越成为前端责任。

[在此处插入代码片段]

在Codepen的UI中，组件扩展超出了网格。一切都变成了一个组件：标签，标题，按钮，形式，菜单和侧边栏。

最终，整个页面成为一个组件，有效地将URL转换为组件。

所有URL成为组件，授予整个站点的控制。

这种建筑责任是巨大的。考虑现有的前端工作量；它不会消失；它扩展。这解释了前端开发人员的全栈式角色的越来越多。

国家管理，数据获取和操纵

后端任务转移到JavaScript（续）

大多数JavaScript框架中心的州管理解决了许多过去的前端意大利面问题。

但是，状态通常依靠数据获取，现在经常承担前端责任。更新并将数据发送回服务器增加了进一步的复杂性。

GraphQL提供了强大的解决方案。它的价值有所不同，但对我来说，这是关于授权的。

借助强大的GraphQl端点和Apollo等工具，前端开发人员可以访问UI构造所需的任何数据。

[在此处插入GraphQl查询代码段]

请注意，在组件中管理数据获取和异步处理。是否应该使用骨架，旋转器或延迟渲染？错误和超时如何处理？

还处理了通过GraphQL突变的数据操作和发送更新。

[在此处插入GraphQl突变代码段]

突变并不比查询要复杂得多，但这增加了前端开发人员的工作量 - 以前在后端处理的任务。

这些示例通过React中的Apollo客户端说明了GraphQl。

关于组件，查询，突变和样式，让我们考虑共同列出样式信息。

前端开发人员始终管理样式，但是在独立的组件中，共同融合样式是有道理的。

在这里，CSS模块范围样式到特定组件。仍使用用于抽象的全球样式和SASS。

[在此处插入CSS模块代码段]

[插入代码段显示样式导入]

组件化和共同位置会导致包含逻辑，查看模板，查询，突变和样式的文件夹。

这很方便，具有积极的副作用。 JavaScript捆绑包仅包含所需的内容（代码分配）。造型不会膨胀；当组件未使用时，它们的样式将被删除。命名是由于文件划分的命名而简化的。

GraphQL纪录片是有见地的。凯尔·马修斯（Kyle Mathews）（20:24左右）讨论了React对前端问题的影响和GraphQL的相似效果。

虽然不适合所有项目，但这种方法对大型，复杂的应用程序有益。

现有的前端职责：

• 设计实现
• 设计系统集成
• 可访问性注意事项
• 性能优化
• 跨浏览器测试
• 跨设备测试
• UX注意事项

新职责：

• 组件驱动的设计
• 站点级体系结构
• 路由
• 数据获取
• API相互作用
• 数据突变
• 国家管理

工作量大大扩展。这并不意味着每个人都必须掌握各个方面，但是这些任务属于前端域。

佩吉·雷兹（Peggy Rayzis）讨论了前端发展的扩大范围和越来越多的专业化：[如果有的话，请在此处插入Rayzis引用]。

许多任务已从后端转移到JavaScript。

不断发展的技术范围

让我们检查技术范围的发展。

LAMP（Linux，Apache，MySQL，PHP）是一个重要的，尽管较老，但可以为许多CMS提供动力。该堆栈中的前端开发人员处于光谱的尽头，与堆栈的核心技术相互作用。

平均值（MongoDB，Express，Angular，节点）包括角，前端框架。前端开发人员的工作与此堆栈更加重叠。

无服务器将堆栈向右移动。服务器身份变得较少相关；重点是服务器端代码和API。前端开发人员甚至可以编写无服务器功能并管理API。

肖恩·王（Shawn Wang）称为设计系统，打字稿，阿波罗（Apollo）GraphQl和React“星”应用程序 - 所有前端技术。

技术讨论越来越多地集中在前端开发人员频谱上。

前端功能的无服务器扩展

我创建了一个有关无服务器技术的网站：[如果可用，请插入到网站的链接]。

我认为Jamstack（JavaScript，API，标记）是无服务器运动的一部分。 （shamstack可能更准确，开为舌头）。

这是一个利用无服务器技术的jamstack网站：列出即将举行的前端开发会议的网站：[如果可用，请插入到站点的链接]。

[在此处插入Markdown文件代码段]

每次会议都是一个带有元数据的前物质的降价文件。静态站点生成器和平坦的刻痕文件是自然的。

该网站是公共GitHub存储库。这很重要：

1. 整个网站都在存储库中；部署涉及克隆和一个命令。
2. 不需要登录，权限或凭据。
3. 内容，设计和功能是为公共贡献而开放的。

GitHub页面可以托管该网站，但Netlify提供了很大的优势：

• 部署预览
• 分析集成
• 编程图像操纵

Netlify CMS为现场内容编辑提供了UI，消除了代码编辑或GIT。 Netlify身份简化了身份验证。

考虑一个功能：一个按钮显示电子邮件输入表格。提交电子邮件会触发一封包含会议详细信息的电子邮件。

这需要后端功能。仅客户端技术不能发送电子邮件。使用API​​，但是API键需要后端代码才能安全管理。

[在此处插入SparkPost代码段]

SparkPost处理电子邮件发送。其node.js库简化了该过程。代码是JavaScript。

这种运行情况如何？云功能（AWS lambda，Azure功能，Google Cloud功能）是无服务器的关键。 Netlify使用NetLify功能（引擎盖下的AWS lambda）。函数放置在A /functions/文件夹中，并通过相对URL访问。

从前到后建立整个站点感觉很强大。

重新访问的技术范围

操作系统和服务器变得较小。可以在不关注这些产品的情况下制造整个产品。

数据库不太关键；数据互动通常通过API（无头CMS（如Foctful，以API为中心的工具）或Firestore等页面上的库）进行。

技术范围允许与所有零件进行交互。

全栈功能

添加：

• GIT熟练度
• 测试技能
• 设计功能
• 建立过程知识
• 表演意识
• 可访问性专业知识
• 部署管道设置

？
你天哪
右派
全栈
开发商！

然而，

技能很大。

专业化是可能的。

“实际”独角兽（精通网站建设的各个方面的独角兽）很少见。

后端开发人员仍然至关重要；网站复杂性需要他们的专业知识。

Codepen的问题跟踪器揭示了我不能孤单的任务。后端支持至关重要。我可以认为自己是全栈，但是后端技能是我的弱点。

现实通常类似于：[插入图显示前端和后端技能部分重叠的图]。

或者，就我而言：[插入图显示的重叠量甚至更少，突出了无力的领域]。

这并不意味着贬义。这是一个隐喻。我们是整匹马或龙，但边缘粗糙。

令人兴奋的是，技术使我们能够涵盖整个过程。当复杂性提高进入障碍时，会出现担忧。但是，当技术简化过程，使个人能够独立构建事物时，这也令人鼓舞。

请记住，质量是每个人的责任。

• 好UX
• 良好的表现
• 良好的安全性
• 良好的可访问性
• 用户的道德待遇

即使不直接参与影响这些方面的代码，也倡导其适当的处理。

Codepen Pro（支持您当地的手工艺软件产品）

以上是我想我们现在是*全栈开发人员的详细内容。更多信息请关注PHP中文网其他相关文章！