作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
Bo是一名前端开发人员,在Angular方面拥有丰富的专业知识. 她曾在许多欧洲公司的团队中担任高级软件工程师和Angular教练,并在AgentConf上发表过演讲, Devoxx, AngularConnect等.
具有高度可扩展的架构, 许多web开发团队选择Angular来创建高效的, 复杂的单页应用程序. But, hiring 角的开发人员 说起来容易做起来难. 虽然有很多候选人,但无缝开发体验的关键是找到一个 great 角开发人员, 应用最佳实践和先进技术来满足高质量编码标准的人.
了解谷歌流行前端框架的关键概念将使您能够自信地面试潜在客户并雇用最优秀的开发人员——那些努力将代码库提升到下一个水平的开发人员. 本文列出了优秀的Angular专业人员应该具备的关键技能和知识.
高质量的Angular候选人将是那些:
注意:本指南适用于最新的Angular版本, 它们不再被称为AngularJS——“Angular”从Angular 2开始应用. 如果你雇佣的是维护或升级一个遗留的AngularJS web应用程序项目(1.X分行),结帐 如何聘请优秀的AngularJS开发人员.
Angular框架 runs on TypeScript,应用程序内编写的所有代码都被翻译成JavaScript. TypeScript is a superset 编译成纯JavaScript的JavaScript代码. Angular代码由这个超集表示.
许多开发人员学习Angular,但对JavaScript所需的核心概念缺乏很好的理解, TypeScript, HTML, or CSS. 如果这些基础缺失, 开发人员倾向于使用不适当的变通方法,从而增加了项目的技术债务.
所以,问问应聘者他们是否知道 HTML5 and CSS3. 一个好的Angular开发人员不需要成为一个HTML或 CSS expert 只要团队中的其他人是,但他们应该理解这些关键概念:
span
and a div
Angular开发者应该对JavaScript和TypeScript有深刻的理解, 以及一些HTML和CSS技能.
好的设计是好的应用程序架构的关键. 询问你的应聘者他们是如何进行设计的,并将他们的想法与这些理想的考虑因素进行比较:
一个特定设计的全部细节并不重要,重要的是应聘者是否有做设计的习惯. 所有的设计都是暂时的, 对于大多数应用程序, 文档可以像白板上的草图照片一样简单,除非需要正式的文档. 在后期阶段, 开发人员可以从代码(使用正确的工具)生成技术设计,以明确所有部分之间的相互关系.
问你的候选人他们知道什么 Angular组件生命周期. 他们的答案应该包括三个生命周期挂钩: ngOnInit
, ngOnChanges
, and ngOnDestroy
. 顾名思义, ngOnInit
在组件初始化时调用; ngOnDestroy
在组件被销毁时调用 ngOnChanges
属性更改时调用. 后者以前也可能发生 ngOnInit
-如果在组件完全初始化之前该属性已经被赋值,那么 ngOnChanges
之前执行 ngOnInit
.
如果候选人也知道 ngDoCheck
, ngAfterContentInit
, ngAfterContentChecked
, ngAfterViewInit
, and ngAfterViewChecked
,他们知道组件的所有变更检测挂钩,并且领先一步.
关于任何钩子,一个很好的后续问题是:“这种变化检测是什么时候发生的?”
一个鲜为人知的生命周期是 供应商生命周期,它只有一个钩子: ngOnDestroy
. 只有在组件级别附加提供程序时才会调用该方法, 在这种情况下,它和组件一起被销毁了. 如果它是在根级或模块级提供的,它就会这样做 永远不要被摧毁.
提供程序的构造函数将在第一次使用该提供程序时执行, 因此,构造函数可能永远不会被执行. 在现实世界的场景中,测试你的候选人这种可能性, 它可能是一个经常被忽视的bug来源!
在Angular应用中, 反应性编程 通常是最难理解的部分. 许多人在开始编写一段代码时都是以过程的方式进行思考的, 假设它更容易理解和使用, 就像一个食谱的步骤.
反应式编程包括对我们无法控制的事情做出反应, 这可能会以不可预测的顺序发生. 尽管我们每天都以这种方式对事物做出反应,例如, 当我们前面的车突然停下来时,我们就刹车——许多开发人员发现很难采用响应式编程方法.
但是,Angular应用中发生的一切都是基于响应式编程的. 例如,Angular购物应用中的一些响应性示例可能包括:
请注意,这些事情是自动发生的,不需要页面刷新就会出现. In an interview, 要求应聘者描述他们是如何在他们开发的应用程序中应用响应式编程的. 如果候选人描述了涉及刷新页面或手动调用的解决方案 ChangeDetectorRef.detectChanges()
要刷新组件,请将其视为黄色标志.
经验不足的开发人员有时可能会发现,他们在Angular应用程序中编写的代码没有得到执行. 经验丰富的Angular开发人员可以找出一个常见的原因:没有订阅 Observable
是响应式编程中的主要对象类型. 只有使用订阅才能执行后端调用或其他反应.
创建订阅有两种方法:开发人员可以使用 async
pipe or the subscribe
method. 但有一点需要注意:如果开发人员使用 subscribe
method), the Observable
将需要手动销毁(尽管有一些边缘情况,默认情况下会发生). 开发商可以破坏 Observables
以多种方式:
async
管道,在可能的情况下(这会破坏 Observable
当组件不再需要时).unsubscribe
method on an Observable
在组件生命周期结束时(ngOnDestroy
).takeUntil
内操作符 pipe
操作符,并使用主语(i.e.命名为 destroy$
). 在这种情况下,主体发出 destroy$.next()
在组件生命周期结束时(ngOnDestroy
). 接收到destroy事件后, takeUntil
operator将不再接受来自它所绑定的Observable的事件,这样它的订阅者逻辑就不会再被触发. 相关示例请参见 第2节中的takeUntil操作符. 类也可以公开类似的功能 take
and takeWhile
operators.until-destroy
library 或者其他第三方库,比如 SubSink 一旦组件被销毁,是否可以用来顺利地从可观察对象中取消订阅.响应式编程的另一个潜在痛点来自内存泄漏和对后端的多次调用. 询问应聘者是否意识到这些问题,以及他们通常会如何解决这些问题. 未能取消订阅可能会发生内存泄漏 Observable
如上所述的S. 由于后端调用上的多个订阅而导致的对后端的多个调用可以通过共享 Observable
.
所有单页应用程序都有一个状态,这个状态在前端的某个地方可用. 但是什么是国家呢? 它包含所有特定于当前用户体验的变量. For example, 通过身份验证的用户详细信息,如名称和配置文件图像URL, 选定的特定菜单项, 或者屏幕上的列表,比如购物车项目列表.
在Angular应用中,有三种主要的前端状态需要考虑:
State | Scope |
---|---|
Application | 整个应用程序可用的一般信息,例如经过身份验证的用户, user roles, menu items, 或者用户的购物篮. 在此状态下的任何更改都会对整个应用程序产生影响. |
Module | 使用服务的整个模块可用的信息. 每次开发人员重用带有提供程序的模块时,都会为每个提供程序创建一个新实例. 该状态永远不会被销毁,只会在第一次使用给定的提供者时创建. |
Component | 某个组件可用的信息. 组件是应用程序中最小的部分. Angular应用可以有多个组件状态, 但是它们只能通过每个组件访问. 该状态将在创建组件时创建,在销毁组件时销毁. |
对什么是状态有很好的理解, 什么时候该装子弹,什么时候该重新装子弹, 在招聘Angular开发人员时,最关键的技能之一是什么. 如果您的团队有机会审查候选人编写的一些示例代码,这是值得探索的主要领域. 如果申请人使用库进行状态管理:
effects
, action
, reducer
, store
, and selector
在相关代码中.让我们看看一般的流程 NgRx中的应用状态 (这与秋田和其他图书馆类似)作为例子:
如果开发人员使用服务创建自己的状态, 他们在国家管理方面的能力可能更难识别:
state
or effect
.通过调查申请人的代码,您不可能总是找到您需要知道的一切. 将这些问题添加到你的问题列表中,以调查潜在的Angular开发人员对state的理解程度:
state
—and how? This is a solid starting point to understand their experience with state; don’t be afraid to probe for specifics.了解各种状态类型的开发人员将避免这些副作用:
没过多久,全球商店就会变得杂乱无章, 目前还不清楚混乱的每个部分来自哪里, 使其更难调试和维护.
自动化测试 对任何Angular web应用来说,是否应该和代码质量一样重要. 程序员编写测试的主要原因之一是记录他们的代码:如果一个新的开发人员加入公司, 基于测试套件的期望,业务逻辑和某些UI流应该是清晰的. 此外,自动化测试可以在开发的早期发现bug.
向潜在的Angular开发人员提出三个测试问题:
当涉及到自动化测试框架时,Angular开发者有很多选择. 单元测试可以通过Jest或Jasmine和Karma来执行. 每个Angular开发人员都应该熟悉 Jasmine and Karma. Jest 也很常见——它通常更快,并提供更高级的测试选项.
Angular应用的端到端测试标准是Protractor, Angular CLI生成的默认工具. 另一种选择是Cypress,它是一个很有前途的端到端测试框架,有很多选项.
确保候选人对至少一个单元测试框架和一个端到端测试框架有深入的了解.
由于各种原因,优秀的Angular开发人员可能并不总是使用最新版本, 但是他们应该知道Angular的发布时间表,这样他们才能跟上变化,做好切换的准备. 评估这一点的一种方法是问候选人是否熟悉 发布策略 of Angular. Angular的目标是每六个月发布一次主版本,通常在2月和5月左右. Angular版本在发布后的前六个月处于“积极支持”状态, 并且在发布之日起的12个月内处于“长期支持”状态. 与其他一些技术相比,这是一个相当紧迫的时间, 因此保持与时俱进显得尤为重要.
你也可以研究一下Angular的最新版本, 并询问候选人这些新功能的好处. 例如,在Angular 14发布前后,你可能会问应聘者:
NgModule
,它们直接管理自己的依赖关系. 因此,可以直接依赖它们,而不需要中间体 NgModule
.FormControls
, FormGroups
, and FormArrays
在整个API表面类型安全吗. 这使得表单更安全,特别是对于深度嵌套的复杂情况.每个web开发项目和团队都是不同的,并且会对Angular开发人员的技能和知识的各个方面给予不同的重视. 但是,理解我们在这里提出的基本主题,将使招聘经理更有意义地参与招聘——即使是在更技术性的评估中.
Toptal Engineering博客向 Ramazan Yıldız 回顾本文中介绍的技术概念和图表.
Angular是一个流行的基于typescript的框架,它正在获得越来越多的关注. 如果你正在寻找一个专业的web应用程序与一个引人入胜的用户体验, 你可能想要选择一个Angular开发者.
Angular开发人员的核心是专门的web前端开发人员. 它们将执行诸如构建应用程序用户界面之类的任务, handling APIs, 与后端工程师协作, 编写单元测试.
JavaScript和TypeScript通常用于web应用程序, 和Angular框架尤其受欢迎. 正因为如此,Angular开发人员备受追捧.
一个优秀的Angular开发者需要理解各种各样的主题, 包括Angular基础(比如TypeScript基础), 组件生命周期, observables, 状态管理, and testing.
世界级的文章,每周发一次.
世界级的文章,每周发一次.