响应式界面
从小屏手机到宽屏桌面显示器都能保持完整的布局,而不仅仅是在设计稿最初绘制的那一种宽度下才成立,在各种中间尺寸的设备上也同样经得起考验。
访客在屏幕上实际感受到的一切,布局、按钮、菜单展开的方式、表单在字段填错时的反应,都属于前端工作。当界面这一层需要独立投入、与背后运行的服务器分开处理时,企业就会在迪拜聘请前端开发工程师:把已确认的设计稿转化为可运行的代码、搭建可复用的界面组件,或是修复一个在笔记本电脑上显示正常、却在手机上完全变形的界面。这类问题往往在上线后才被访客发现,届时修复成本也更高,还可能影响客户对整个品牌的第一印象。
MDN 官方对这一领域的说明,明确将 HTML、CSS 和 JavaScript 归为浏览器一侧,由每位访客自己的设备运行,而不是由服务器运行,这正是前端工作与后端工作表现不同的原因,也说明了为什么真正专精于此的开发人员,比临时兼顾这一层的人更值得信赖,尤其是在界面复杂度不断增加的产品中。
前端开发工程师的工作成果
网站或应用中访客能看到的那一层,做得恰到好处。
从小屏手机到宽屏桌面显示器都能保持完整的布局,而不仅仅是在设计稿最初绘制的那一种宽度下才成立,在各种中间尺寸的设备上也同样经得起考验。
按钮、表单、卡片和菜单只需构建一次即可反复使用,避免界面逐渐衍生出十几个略有差异的版本。只要项目超出一个很小的网站,聘请前端开发工程师时都值得要求查看这样一套组件库,作为判断其工程能力的依据。
页面快速显示,并且在访客开始点击、滚动或输入后依然保持响应,而不是因为后台加载而卡顿。速度是首版界面进入评审后,最值得测量的指标之一,也是访客是否愿意继续停留的关键。
仅凭键盘或屏幕阅读器即可使用的界面,基于结构正确的 HTML 构建,而不是用带样式的容器冒充真正的控件,这一点在自动化测试工具中也很容易被忽略。
在访客实际使用的各类浏览器上测试过的界面,确保表单或布局不会在其中一部分访客那里悄悄出错,即便他们使用的是较旧版本的浏览器,也不会影响下单或提交。
针对阿拉伯语内容能正确镜像的界面,而不是一个只在从左到右方向下才成立的设计。
关键技能
只有在真实内容和真实设备介入后才会显现的技能。
| 技能或工具 | 达标标准 | 重要原因 |
|---|---|---|
| HTML 和 CSS 基础 | 能够手写干净、语义化的标记,而不只是依赖框架生成的输出 | 框架无法修正一开始就没有正确结构化的标记,问题会一直留在代码里,日后排查也更费时 |
| JavaScript 框架 | 在 React、Vue.js 或 Angular 中具备扎实、跟得上时代的经验,并与您产品当前使用的技术匹配 | 日后用另一个框架重建界面成本高昂,也很少值得,几乎总是预算的浪费,还会拖慢新功能的上线 |
| 性能意识 | 主动检查加载速度和响应表现,而不仅仅关注页面在设计文件中的样子 | 缓慢或卡顿的界面会在访客看到您的成果之前就流失掉他们 |
| 将无障碍设计当作习惯 | 从一开始就考虑键盘和屏幕阅读器的使用,而不是最后才补上 | 事后为已完成的界面补充无障碍功能,比一开始就搭建进去更慢,也更不彻底 |
| 依据设计稿开发 | 能将设计文件转化为像素级精确、响应式的代码,而不需要把每种状态都写清楚 | 无法仔细读懂设计稿的开发人员,做出的界面会逐渐偏离最初确认的版本 |
Google 官方的核心网页指标指南,将加载速度、交互响应速度和视觉稳定性列为衡量一个界面是否真正优秀的三项指标,值得聘请的前端开发工程师应当能具体谈论这三项指标,而不只是说网站“感觉挺快”,更应该拿出真实的测量数据。
与我们合作的方式
专属开发人员适合持续增加新界面和新功能的产品,长期与您的后端团队协同工作。限定范围的项目适合一次明确的界面搭建或重构,按已确认的设计稿交付。招聘支持适合正在壮大自有产品团队、希望直接聘用前端开发工程师的企业,咨询则适合对现有界面进行评审,例如在投入进一步工作之前先做一次性能或无障碍审计,提前发现潜在问题。
评估候选人
不止于作品网站截图好看与否的核实方法。
无论是聘请专属角色还是限定范围的build项目,在动手之前,都可以自行运行以下核实方法,也可以请我们作为招聘支持的一部分代为进行,节省您自己的时间。
而不是缩小的浏览器窗口。检查菜单、表单和图片在真实小屏幕和真实网速下的表现,这往往比桌面版更容易暴露问题。
不碰鼠标,用 Tab 键逐步浏览页面。如果候选人的界面在这种方式下依然可用,说明他们从一开始就考虑了无障碍设计,而不是事后补充,这一点往往比嘴上说的更有说服力。
他们的回答能说明,他们是否以可复用的模块方式思考,还是只是逐页照着设计文件拼凑。
提供一个简单的设计稿和简短需求,重点考察还原度以及标记是否干净易读,而不只是视觉上相近,代码风格是否统一也值得留意。
真正处理过性能问题的候选人,会描述具体的技术手段,而不是含糊地说“已经够快了”,这类细节很难临场编造。
认证
没有任何厂商设有真正涵盖前端整体工作的认证。
HTML、CSS 和 JavaScript 是没有归属厂商的开放网络标准,React、Vue.js 和 Angular 等主流框架也都没有官方认证项目,因此任何所谓“认证前端开发工程师”的标识,都无法通过权威来源核实。
一个您可以亲自打开、点击并在自己手机上测试的作品集,比任何证书都更能说明问题,也是聘请之前最值得花时间核实的部分。
阿联酋相关事项
两个在迪拜界面项目中经常出现的方面。
阿拉伯语版本的界面需要的不只是一份镜像样式表:图标、数字格式和阅读顺序都需要专门考虑。为双语工作聘请前端开发工程师时,请要求查看一个真实的从右到左构建,而不是听对方口头描述,实际打开测试才能看出问题。
W3C 的《网页内容无障碍指南》为对比度、标签和键盘操作制定了具体、可测试的规则,对任何面向阿联酋广泛受众的界面来说,都是一个合理的基本要求,也是评估候选人时可以直接对照的清单。
直接解答
并不完全一样。我们网站开发人员页面所指的角色,通常端到端负责整个企业网站。前端开发工程师则专门负责界面这一层,往往是更大团队中的一员,与负责服务器端的后端开发工程师协同工作。
对于标准建站,通常不需要,因为平台自带的模板已经能满足大多数需求。当设计中包含超出平台主题系统能力的定制交互或组件时,前端开发工程师才真正派上用场。
有些人在实用层面可以,但本页描述的角色专门聚焦于界面。如果您希望由一人同时妥善覆盖两端,我们的全栈开发工程师页面将其定义为一个独立角色,而不是被勉强拉伸职责的前端聘用。
这取决于您的产品目前运行在什么技术之上,或是您的设计师和后端团队最习惯配合哪一种。React、Vue.js 和 Angular 都是真正胜任的选择,优秀的前端开发工程师会如实说明各自的取舍,而不是默认使用自己最熟悉的那一个。
通过在真实设备、真实屏幕宽度下测试,至少开启一次屏幕阅读器,并实际测量加载和响应速度,而不是仅凭一张截图判断。
资料来源
书面固定价格
已收到,我们正在为您撰写报价。
工作时间内您将在 45 分钟内收到。请查收确认邮件。