对前端开发人员的责任扩大

本文扩展了我以前的文章“当前端意味着全栈”，最初在Stripe的增量杂志中出现。它建立在“大鸿沟”和“哦，我想我们现在是全栈开发人员”中探讨的主题上。

我的前端旅程始于wordpress的style.css 。使用几行代码来转换网站的力量令人着迷。通过HTML和CSS，我可以并且可以 - 可以 - 鼓励购买或社交共享。

甚至在专业前端工作之前，我都体验了艺术和逻辑的独特融合。这是一种表现力的艺术形式，但受到沟通和业务目标的约束。

前端发展是一个引人入胜的十字路口：

• 艺术和逻辑：创造性表达和技术精确度的融合。
• 商业和表达：将业务目标与艺术设计平衡。
• 左右大脑：参与分析和创造性思维。
• 设计和哑光：将美学敏感性与技术专长相结合。

我的教育背景反映了这种双重性 - 计算机科学与艺术课程的融合。

“前端开发人员”一词被广泛理解为职称。但是，在公司之间的角色差异很大，使职位的描述符不足。展示实用技能是关键。

克里斯·科伊尔（Chris Coyier）前端开发人员

尽管标题可能有所不同，但核心重点仍然保持一致：浏览器的网站。

• 前端=浏览器
• 后端=服务器

尽管工作角色不断发展，但这种基本的区别仍然存在。

“以浏览器为中心”的开发提出了独特的挑战。尽管进行了标准化的努力，但浏览器的不一致仍然存在。最近的一次遭遇强调了这一点 - 日期字符串在Chrome中正确解析，但在Firefox中造成了错误。这是前端发展的现实。

除了浏览器差异之外，用户行为还增加了另一层复杂性。屏幕尺寸，深色模式，颜色域，像素密度，带宽和输入方法（键盘，鼠标，触摸）都会影响用户体验。这些注意事项同样适用于桌面和移动设备，并通过HTML电子邮件变得更加明显。

这种众多未知数需要从前端开发人员采取全面的方法。

最关键的方面？用户。这是我们工作的原因。他们是我们CSS艺术的受众，我们的小部件的潜在买家，反应影响我们工作的个人。这些用户正确地放置在基座上，代表了浏览器以外的不同景观：不同的语言，需求，能力和紧迫水平。前端开发人员弥合了代码和用户之间的差距。

前端开发使我们处于最前沿，将我们的创作直接与用户联系起来，这是许多人感到有意义的职位。这是在考虑反应之前。

对以用户为中心的强调似乎是不言而喻的。理想情况下，从首席执行官到实习生的公司的每个成员都应优先考虑用户。但是，前端开发人员的角色是独一无二的。当我们编码<button></button>，我们将交互元素直接放置在用户的浏览器窗口中。调整颜色直接影响用户的视觉体验。

这类似于陶瓷艺术家塑造咖啡杯。它正在将工艺应用于数字体验。虽然后端开发人员可能会非常关心用户，但正如莫妮卡·迪肯斯库（Monica Dinculescu）恰当地指出的那样，他们经常“外包责任”。

前端开发人员是浏览器专家。掌握HTML，CSS和JavaScript是基本的。这不是过时的教条；数十年的经验证实了它的重要性。即使与预处理程序或框架一起工作，浏览器也最终会收到HTML，CSS和JavaScript。调试和浏览器优化是关键职责。

尽管CSS仍然是我个人的最爱，而HTML需要不断关注，但JavaScript值得特别检查。它从一个简单效果的工具到整个Web堆栈中的主要语言的演变是显着的。现在，只能使用JavaScript构建整个网站。

JavaScript在浏览器中的功能超过了HTML和CSS的功能。它可以通过解析HTML创建的DOM（文档对象模型）和应用样式的CSSOM（CSS对象模型）。

但是，这并不是完全准确的。 HTML首先被解析，这是网站速度的关键方面。理想情况下，仅使用HTML提供了网站的基本信息和功能。

这种哲学被称为渐进式增强。虽然我为此而努力，但完美的依从性并不总是可行的。一个<button></button>可以在没有JavaScript的情况下运行，但是通过JavaScript添加AJAX提交会增强用户体验。同样，在JavaScript执行之前，完全取决于JavaScript的元素可能不会呈现。有时，实用性胜过严格的坚持： “只要按下按钮，山姆。没有人会死的。”

JavaScript的主导地位使其成为Web开发人员的主要重点，尤其是其改进的人体工程学和强大的框架。马特·穆伦维格（Matt Mullenweg）的2015年建议“深入学习JavaScript”仍然很重要。 JavaScript在前端开发中的增长，尤其是在工作需求方面，是不可否认的。

尽管网站统计数据可能显示出使用REACT的顶级网站比JQuery的比例较小，但职位发布讲述了一个不同的故事，这是这些数字的逆转。

前端开发人员的实际日常任务包括：

• 将设计转换为代码。
• 跨设备实施响应式设计。
• 构建可重复使用的组件和图案。
• 应用语义HTML。
• 确保可访问性。
• 优化网站性能。

即使是第一点本身就感觉就像是大学课程。

让我们将其应用于假设的网站：

我们的思想竞赛！

• CSS网格用于布局。
• 字体优化：子集或满载，并处理字体变动。
• 创建可重复使用的卡组件。
• 用CSS变量定义和管理配色方案或像Sass这样的预处理程序。
• 优先考虑屏幕读取器的源顺序。
• 优化图像格式（PNG，JPG，下一代格式）和ALT文本。
• 将内联SVG用于图标。
• 决定前端框架（React，Vue，Svelte）和构建系统。
• 考虑CMS集成（无头或其他）。
• 计划互动：重点状态，过渡等

这说明了前端开发人员的思维过程。许多任务反复出现，但是每个项目的具体挑战各不相同。

这使我们获得了文章的标题。

尽管许多任务多年来一直是工作的一部分，但新职责正在出现，尤其是在现代JavaScript框架中。组件的概念对于这些框架至关重要。组件允许为项目量身定制的可重复使用的抽象。

这种基于组件的体系结构将前端开发人员提升到站点级架构师。一个页面可能由嵌套组件（卡，按钮，图标，网格，标头，侧栏等）组成，每个组件都有自己的逻辑和样式。这通常涉及处理URL和路由，有效地使前端开发人员负责该网站的整体体系结构。

组件很少包含硬编码数据；它们充当模板，通过JavaScript获取数据。这通常涉及API（例如，带有Apollo客户端的GraphQl），并管理组件本身中的数据获取和更新。这是另一个不断扩大的责任。

除了API数据之外，网站还管理内部状态：活动选项卡，模态对话框，手风琴状态，错误消息，分页，滚动位置等。有效地管理此状态至关重要。从使用DOM作为真理的来源转变为更复杂的状态管理解决方案（内置于框架或通过第三方库）是一个重大变化。前端开发人员现在负责架构和实施此状态管理。

强大的国家管理和可重复使用的组件的需求导致了设计系统的兴起。从系统上建造组件是自然的进步。

返回我们的设计示例：

出现了新的注意事项：

• 选择JavaScript框架及其含义（静态与服务器端渲染）。
• 设计数据获取（GraphQL API）。
• 选择一个CMS（无头或其他）。
• 定义必要的组件及其相互作用。
• 管理客户端状态。
• 实施身份验证。
• 利用第三方组件（例如，图像加载器）。

这些职责被添加到设计实施，语义，可访问性和性能优化的现有任务中。前端开发所需的技能正在不断扩大。

这种增长是由Web的扩展驱动的：使用情况增加，更广泛的互联网访问，不断增长的网络经济以及越来越强大的浏览器。

专业化变得越来越普遍。一些开发人员专注于设计和HTML/CSS，而另一些开发人员则专门研究系统或数据管理。尽管所有人都可能拥有“前端开发人员”，但他们的角色和职责可能会有很大差异。

我们讨论网站开发的方式也发生了变化。 LAMP堆栈（Linux，Apache，MySQL，PHP）完全集中在后端。平均值（Mongo，Express，Angular，节点）引入前端技术（角，节点）。 Node.js的出现使JavaScript开发人员可以同时处理前端和后端，从而模糊了角色之间的界限。通常使用Node.js的“无服务器”体系结构进一步扩展了前端开发人员的覆盖范围。 Star（设计系统，打字稿，Apollo，React）代表完全建立在前端技术上的堆栈。

扩大的职责可能令人生畏。感到不知所措很普遍。专业不仅可以接受，而且建议。专注于感兴趣的领域并建立专业知识。

唯一的常数是变化。拥抱它。

Å我是一名白人男性，提供了很大的优势。 ↩️²浏览器支持许多其他语言（HTTP，SVG，PNG等）。更广泛的知识增强了能力。 ↩️“具有讽刺意味的是，许多WordPress站点不是使用客户端JavaScript组件构建的。 ↩️

以上是对前端开发人员的责任扩大的详细内容。更多信息请关注PHP中文网其他相关文章！