web前端工程师是做什么的_我作为前端Web工程师的角色解释了什么？

web前端工程师是做什么的

by Shaun Michael Stone

肖恩·迈克尔·斯通(Shaun Michael Stone)

我作为前端Web工程师的角色解释了什么？ (My role as a Front-end Web engineer explained ?)

Hi, my name is Shaun Stone. I’m a senior front-end web engineer from London, UK. I work in the FinTech industry and love what I do. In this article, I want to explain a bit about my role. To anyone out there who wants to pursue a career in web development, you may find this useful.

嗨，我叫Shaun Stone。 我是来自英国伦敦的高级前端Web工程师。 我在金融科技行业工作，热爱我的工作。 在本文中，我想解释一下我的角色。 对于任何想从事Web开发事业的人，您可能会发现这很有用。

I will cover: what we do, how we manage our work, the career path, languages and tools we use. In conclusion, I will provide advice on how you can break into the software industry. Don’t worry, I’m not selling anything — some advice I wish I had when I started out. ?

我将介绍：我们的工作，我们的工作管理方式，职业道路，使用的语言和工具。 最后，我将提供有关如何进入软件行业的建议。 不用担心， 我什么也不卖 -我希望刚开始时能得到一些建议。 ？

A front-end web engineer is responsible for implementing visual elements that users see and interact with in a web application.

前端Web工程师负责实现用户在Web应用程序中看到并与之交互的视觉元素。

我们建立UI ？ (We build UI ?)

We are focused on building the UI (User interfaces) for the users of our website or web application. We consider a few things:

我们致力于为网站或Web应用程序的用户构建UI(用户界面)。 我们考虑一些事情：

1. Accessibility: Often overlooked on the web, we design our applications to cater for users with some form of disability. This could be some cognitive impairment or limited dexterity. Someone who struggles with clickable areas such as radio inputs or checkboxes is an example.

   可访问性：我们经常在网络上忽略它，我们设计应用程序来迎合某种形式的残障用户。 这可能是一些认知障碍或灵活性受限。 例如在单选输入或复选框之类的可单击区域中苦苦挣扎的人。

2. Aesthetics: The styles of our UI elements such as the buttons, the fonts, and the spacing. Recently we implemented a design system that enforces consistency across our products. More information on design systems can be found here.

   美学： UI元素的样式，例如按钮，字体和间距。 最近，我们实施了一个设计系统，该系统可确保产品之间的一致性。 有关设计系统的更多信息，请参见此处 。

3. Performance: We have to think about the performance of our applications to keep page speeds fast. This involves reducing network requests, keeping images and SVG files optimized using methods like compression. The quicker you load that signup page, the more chance you have of users signing up. We use Lighthouse by Google to benchmark and gather interesting metrics.

   性能：我们必须考虑应用程序的性能以保持快速的页面速度。 这涉及减少网络请求，使用诸如压缩之类的方法使图像和SVG文件保持最佳状态。 加载该注册页面的速度越快，用户注册的机会就越大。 我们使用Google提供的Lighthouse进行基准测试并收集有趣的指标。

4. Security: Paramount. Tiny bugs in code can result in private information being leaked, and there are people out there hungry for it. Of course, it’s a huge topic. Check out Information Security Basics by Mozilla:

   安全性：至高无上。 微小的代码错误可能导致私人信息泄漏，并且有些人渴望它。 当然，这是一个巨大的话题。 查看Mozilla的《 信息安全基础知识》 ：

5. Quality of code: We use code reviews to check each other's work. We require at least two approvals before anything can proceed to our live applications. We use coding standards that have to be followed across the whole of front-end. Github allows us to do this and more.

   代码质量 ：我们使用代码审查来检查彼此的工作。 在进行任何实时申请之前，我们至少需要两个批准。 我们使用整个前端必须遵循的编码标准。 Github允许我们执行更多操作。

工作管理？ (Management of Work ?)

We follow the agile principles of software development, as do most companies. It’s a way of planning our work for the next two weeks (a sprint). During that process, we refine the tickets we have that follow those two weeks.

与大多数公司一样，我们遵循软件开发的敏捷原则。 这是一种计划未来两周工作的方式(冲刺)。 在此过程中，我们会完善这两周后的门票。

All the remaining work we have is stored in what’s called a backlog. This backlog gets filled with work we are to do in the future.

我们剩下的所有工作都存储在所谓的待办事项列表中。 此积压工作充满了我们将来要做的工作。

Having a road-map gives us a clear direction of where we want to be. To do this, we use a project management tool called Jira by Atlassian.

制定路线图为我们提供了明确的方向。 为此，我们使用Atlassian称为Jira的项目管理工具。

仪式 ？ (Ceremonies ?)

1. Sprint planning sets the team up for success throughout the sprint. The meeting involves walking through the backlog of work to be done, and prioritizing what should be completed for the next two weeks. The team has to estimate each story to see how much effort is required by us. Based on the effort involved, we can gauge capacity (how much can be done versus the development resource available).

   Sprint计划使团队为整个Sprint的成功做好准备。 会议涉及逐步完成待完成的工作，并确定接下来两周应完成的工作的优先级。 团队必须估算每个故事，以了解我们需要付出多少努力。 基于所涉及的工作，我们可以评估容量(相对于可用的开发资源，可以完成多少工作)。

2. Daily stand-up is a very brief meeting with your team to explain: what you did yesterday, what am I doing today, and is there anything stopping me from doing my job? (blocking). This keeps everyone in the loop. Keep it short. Once upon a time, a stand-up lasted an hour for me… ?

   每日站起来是与您的团队进行的一次非常简短的会议，以解释：您昨天做了什么，我今天正在做什么，是否有什么阻止我工作的？ (阻止)。 这使每个人都处于循环中。 保持简短。 从前，一个站起来对我来说持续了一个小时……？

3. Sprint review happens at the end of the sprint. We showcase to other stakeholders (member of the Product team, users of our system) what we managed to achieve. We do this by doing a demo of the work we have been doing. This gives them confidence that we are progressing.

   冲刺审核在冲刺结束时进行。 我们向其他利益相关者(产品团队成员，系统用户)展示了我们成功实现的目标。 我们通过演示我们一直在做的工作来做到这一点。 这使他们对我们的进步充满信心。

4. Retrospective is a way to reflect back on what went well and what didn’t. This brings up problems. From those problems we create actions. An action is a thing to initiate a process where we can stop that negative thing from happening again. The things that went well give us an understanding of what makes us work better.

   回顾是一种反思进展顺利和失败的方式。 这带来了问题。 从这些问题中，我们创建了行动。 动作是启动流程的事情，在此过程中，我们可以阻止负面事件再次发生。 顺利进行的事情使我们对使我们更好地工作的理解。

职业道路↗️ (Career path ↗️)

Companies have their own career paths. A very common pattern of progression as a software engineer is the following.

公司有自己的职业道路。 以下是软件工程师的一种非常普遍的发展模式。

Please note: This is my own opinion and based on my own experiences. The term ‘Engineer’ and ‘Developer’ are used interchangeably.

请注意：这是我个人的观点，并基于我自己的经验。 术语“工程师”和“开发人员”可互换使用。

1. Junior developers have little to no experience. They need to be guided by more senior members of the team to do their work. They will usually ask many questions but can learn a lot and will be very motivated to do so. Their salary is entry-level.

   初级开发人员几乎没有经验。 他们需要团队中更多高级成员的指导才能完成工作。 他们通常会提出许多问题，但会学到很多东西，并且会很积极地去做。 他们的薪水是入门级的。

2. Mid-level developers have a reasonable amount of experience. They can achieve certain tasks on their own. But still, need to look to senior members for guidance from time to time. They can assist Juniors and also provide good ideas to senior members.

   中级开发人员具有一定的经验。 他们可以自己完成某些任务。 但是，仍然需要不时寻求高级成员的指导。 他们可以为低年级学生提供帮助，也可以为高级会员提供好的想法。

3. Senior developers can deliver from start to finish with no guidance. They lead others to do the same and follow good practices. They are experienced enough to know when things can go wrong and how to avoid those problems.

   高级开发人员可以在没有指导的情况下从头到尾交付。 他们带领他人做同样的事情并遵循良好的做法。 他们有足够的经验，知道什么时候可能出问题以及如何避免这些问题。

But when you get to Senior, is that it? No, it shouldn’t be. There are two paths you can follow.

但是，当您升入高级班时，是吗？ 不，不应该。 您可以遵循两种方法。

4a. Tech lead/Principal Developer/Architect would be given to the core/higher rank developer in the team who provides a solid technical vision and has the respect of their peers. Less involved in code, and more so in the foundations of the languages and libraries used, the development process, and the infrastructure.

4a。 将向团队中的核心/高级开发人员提供技术负责人/首席开发人员/建筑师，他们应提供扎实的技术远见并得到同行的尊重。 更少地参与代码，而更多地涉及所用语言和库的基础，开发过程和基础结构。

4b. Team Lead/Team Manager is now more focused on the people of the team. Their well being, their career progression and having a one-to-one with each team member to make sure they are happy but are also delivering as expected. More meetings would result in less development time. Management skills are required, and it’s no easy task.

4b。 团队负责人/团队经理现在更加专注于团队成员。 他们的幸福感，职业发展以及与每个团队成员一对一的交往，以确保他们感到高兴，但也能按预期交付。 更多的会议将减少开发时间。 需要管理技能，这不是一件容易的事。

Following on from that you could move to a more executive role. An example is an Engineering manager. This person manages multiple Tech leads/Team leads. Another example is the Chief Technology Officer.

之后，您可以担任更高的执行职务。 一个例子是工程经理。 此人管理多个Tech潜在客户/团队潜在客户。 另一个例子是首席技术官。

Companies usually rate your competency level down to the number of years of experience you have. To me, this is a fallacy. I have worked with new starters who were labeled more Junior but were knowledgeable and strong. Candidates should be taken at face value.

公司通常会根据您的经验年限来评估您的能力水平。 对我来说，这是一个谬论。 我曾与新手一起工作，他们被标记为“初级”，但知识渊博且能力强。 应聘者应以面值为准。

学习语言？ (Languages to learn ?)

1. HTML is a markup language, the structure of web pages.
   HTML是一种标记语言，是网页的结构。
2. CSS is the language for describing the presentation of the web, dealing with colors, layout, spacing and more.
   CSS是用于描述Web外观，处理颜色，布局，间距等的语言。
3. JavaScript is the language of the web. It’s a client-side language and enhances the interaction for the user on a web page.
   JavaScript是网络语言。 它是一种客户端语言，可以增强用户在网页上的交互。

Invest a lot of time into mastering these three languages. I have a quick example of how they work together in this CodePen. Have a play around!

花大量时间来掌握这三种语言。 我有一个简单的示例说明如何在此CodePen中协同工作。 玩一玩！

Please note: This example is simplified for demonstration purposes only.

请注意：此示例已简化，仅用于演示目的。

View my CodePen here

在这里查看我的CodePen

If you are up to it, create your own version with a company name of your choice and post in the comments.

如果需要，请使用您选择的公司名称创建自己的版本，然后在评论中发布。

使用工具吗？ (Tools to use ?️)

1. Use Git to manage the versions of your code. It allows teams to collaborate on files without causing loss of work.

   使用Git来管理代码的版本。 它使团队可以在文件上进行协作而不会造成工作损失。

2. Use an Integrated Development Environment (IDE) to write your code. It’s software that is like Notepad but comes with more bells and whistles. It can provide suggestions on how you write your code, and color codes your text so it’s easier to interpret.
   使用集成开发环境(IDE)编写代码。 它是与记事本类似的软件，但是带有更多的花哨功能。 它可以提供有关如何编写代码以及对文本进行颜色编码的建议，以便于解释。

忠告？ (Advice ?)

The first thing to do is create a Github account. Like Behance for Designers, this will be a place where you can showcase the code you write. It will give us (employers) something to work with. When I left University, I was looking for an opportunity to build something even if it was for free. I knew in the long term it would benefit me.

首先要做的就是创建一个Github帐户。 与Behance for Designers一样，在这里您可以展示自己编写的代码。 它将为我们(雇主)提供一些合作的机会。 当我离开大学时，我一直在寻找机会来构建一些东西，即使它是免费的。 我知道从长远来看，它将使我受益。

寻找自由职业者？ (Find Freelance work ?)

One of my first freelance projects was for a huge company. The application they wanted me to build was easily a quote of £2–3K. I did it for a couple of hundred pounds. It was a complete steal for them, but it helped in the interview for my first job, that’s for sure.

我的第一个自由职业者项目之一是为一家大型公司。 他们要我构建的应用程序的报价很容易成为£2–3K。 我做了几百磅。 对他们来说，这是完全的抢断，但这对我的第一份工作的面试有所帮助，这是肯定的。

证明您的工作存在吗？ (Prove your work exists ?)

Whenever I review CVs, usually if it says you did a course on Udemy and that’s it, then that will not suffice. I want to see proof of your work. For every project you have worked on, even if it was a personal project or for a family member, it’s something that can be put on the CV. These claims of experience should be backed up with real evidence, whether it’s a link to the video demo or a link to the real page.

每当我审查简历时，通常如果它说您完成了Udemy的课程，仅此而已，那就不够了。 我想看看你的工作证明。 对于您从事的每个项目，即使是个人项目还是家庭成员，都可以将其放入简历中。 无论是视频演示的链接还是真实页面的链接，这些经验声明都应得到真实证据的支持。

第一份工作？ 大！ ？ (First job? Great! ?)

Now you’re pulling together a small collection of work. You impress a small company and begin your first job. You will be a junior, and the people around you have a lot to teach you for free. Learning from your peers is the best way to learn in my experience, and is — of course — much cheaper. Most online courses help at first and are good to follow sparingly. You should be able to elevate your skills via real commercial experience going forward.

现在，您正在整理一小部分工作。 您给一家小公司留下了深刻的印象，并开始了您的第一份工作。 您将成为一名大三学生，并且周围的人有很多免费教您的知识。 向同龄人学习是我经验中学习的最好方法，而且当然便宜得多。 大多数在线课程起初都会有所帮助，并且最好谨慎地进行。 您应该能够通过未来的实际商业经验来提升自己的技能。

证明你自己 ？ (Prove yourself ?)

Show that you are passionate about your work and that you want to proactively improve things. Every job you get will have good and bad qualities about it. Try and figure out how to improve the bad things and take the good things on board for any future ventures. In a new job — if that may be — teach them the good things you’ve learned previously, and try to fix the new bad things. If you feel you are not learning anymore, change circumstances so that you are. Your skills should always be relevant in the industry, otherwise, you get left behind. It’s sad but true.

表明您对工作充满热情，并且希望积极改进。 您获得的每一项工作都会有好坏的关系。 尝试找出如何改善不良情况并为将来的任何风险承担好事情。 在一项新工作中(如果可能的话)，教给他们以前学过的好东西，并尝试修复新的坏东西。 如果您觉得自己不再学习了，请更改环境以使自己处于学习状态。 您的技能应始终与行业相关，否则，您将被抛在后面。 这是可悲但真实的。

推销自己？ (Sell yourself ?)

Always find excuses to add to your LinkedIn. Explain what you did in your job (roles and responsibilities). Document it like a diary before you forget about it. Add a professional photo and a strong summary. This is what I have currently. It has evolved over the years.

总是找借口添加到您的LinkedIn。 解释您在工作中做过的事情(角色和职责)。 在忘记它之前，像记日记一样记录它。 添加专业照片和摘要。 这就是我目前所拥有的。 多年来，它一直在发展。

To date I have 7+ years experience building web applications. I’ve worked in automotive, finance, online gaming and been exposed to building and maintaining bespoke web applications for various companies involved in: car valeting, digital entertainment, industrial gases, retailing and broadband comparison services. Some of my key interests involve writing fiction and non-fiction, building and integrating APIs, automating repetitive tasks, building mobile games and animations with Haxe, Unity or JavaScript/HTML5 canvas.

到目前为止，我有7年以上构建Web应用程序的经验。 我曾在汽车，金融，在线游戏领域工作，并接触过为多家公司建立和维护定制的Web应用程序，这些公司涉及：汽车代客，数字娱乐，工业气体，零售和宽带比较服务。 我的一些主要兴趣涉及编写小说和非小说，构建和集成API，自动执行重复任务，使用Haxe，Unity或JavaScript / HTML5画布构建手机游戏和动画。

As well as reading a lot of technical books, I’ve written my own called Automating with Node.js. I read articles on platforms such as Sitepoint, CSSTricks, Egghead, PHPArchitect and Smashing. I attend conferences such as PHP London and keep my eye on Facebook and Google’s developer channels. I’m always open to new approaches and look out for any tips and tricks I can apply to my own work — that I can also share with my peers.

除了阅读许多技术书籍之外，我还编写了自己的《使用Node.js自动化》。 我在Sitepoint，CSSTricks，Egghead，PHPArchitect和Smashing等平台上阅读了文章。 我参加了诸如PHP London之类的会议，并密切关注Facebook和Google的开发者频道。 我一直乐于接受新方法，并寻找适用于自己的工作的任何技巧和窍门，也可以与同行分享。

这是一个快节奏的行业？ (It’s a fast-paced industry ??)

The front-end world moves very fast. Libraries/frameworks always seem to be popping up year on year. You will see that a lot of roles require experience of React (created by Facebook), Angular (by a Google employee), or Vue (by a smart guy called Evan You). There are many more but I won’t go into detail now.

前端世界移动非常快。 图书馆/框架似乎总是每年都在弹出。 您将看到很多角色需要具有React(由Facebook创建)，Angular(由Google员工)或Vue(由一个叫Evan You的聪明人)的经验。 还有更多，但我现在不再详细介绍。

Try and grasp these libraries as they are very much in demand. I work with React in my role and have invested a lot of time in becoming proficient in using it. These libraries and frameworks are a layer that sits on top of the JavaScript language. Become a pro in JavaScript first.

尝试并掌握这些库，因为它们的需求量很大。 我以我的角色与React一起工作，并投入了大量时间精通使用它。 这些库和框架是位于JavaScript语言之上的一层。 首先成为JavaScript专业人士。

建立东西？ (Build stuff ??)

Motivate yourself to work on a project in your own time. For years I was so interested in personal game development projects. You learn so much during the process. I randomly thought at work one day, “Wouldn’t it be a good idea to have a game like Battleships, but with rabbits instead.” I know right… weird thought to have.

激发自己在自己的时间从事项目工作。 多年来，我对个人游戏开发项目非常感兴趣。 在此过程中，您学到了很多东西。 我有一天在工作中随意地想：“拥有像战舰这样的游戏，而不是像兔子那样的游戏，不是一个好主意。” 我知道是正确的…奇怪的想法 。

So I found an artist, told him what I wanted, and then got to work on a proof of concept. To play, you place five bunnies and five traps, then sit back and watch. I won’t ruin the surprise. Game here.

因此我找到了一位艺术家，告诉他我想要什么，然后开始进行概念验证。 要玩，您要放置五个兔子和五个陷阱，然后坐下来观看。 我不会毁了这个惊喜。 在这里比赛。

That’s it for now. If you ever want more advice, feel free to contact me! Thanks for reading and good luck! Drop a few claps if you’d like. ?

现在就这样。 如果您需要更多建议，请随时与我联系！ 感谢您的阅读和好运！ 如果愿意，请拍几声。 ？

All the best, Shaun Michael Stone. ✌️

祝一切顺利，肖恩·迈克尔·斯通(Shaun Michael Stone)。 ✌️

翻译自: https://www.freecodecamp.org/news/my-role-as-a-front-end-web-engineer-explained-948d0f1ceac1/

web前端工程师是做什么的