Hiring a freelancer for Angular jobs can be a scary undertaking, especially when filling a hole in your team’s existing skill set. Whether you’re hiring a freelancer to take ownership of an existing AngularJS web development project, to pave the way with a new greenfield project, or to augment an existing team, you’ll need to know what to look for and what to avoid.
<h2 id="pitfall-no-1-angularjs-vs-angular">
Pitfall No. 1: AngularJS vs. Angular
</h2>
<p>
<img src="https://i0.wp.com/blog.amit-agarwal.co.in/wp-content/uploads/2017/09/toptal-blog-image-1499848793911-f97ea4924e4c159296fc683948155c09.png?w=688" alt="It's important to know the difference between Angular and AngularJS." data-recalc-dims="1" />
</p>
<p>
<strong>It’s just “Angular.”</strong>
</p>
<p>
Even though it sounds straightforward, not all “Angulars” are created equal.
</p>
<p>
The team that built Angular has specified in its <a href="http://angularjs.blogspot.com/2017/01/branding-guidelines-for-angular-and.html" target="_blank" rel="noopener noreferrer">Branding Guidelines for Angular and AngularJS</a> that “AngularJS” should be used when referring to versions 1.x, and “Angular”—without the “JS”—should be used when referring to versions 2+. That means even Angular 4 is just referred to as “Angular.”
</p>
<p>
<strong>Why does this matter?</strong>
</p>
<p>
It’s important for you and your freelancer to be on the same page and use the right name. While AngularJS and Angular may sound similar, they are in fact distinct frameworks. And just as you wouldn’t expect a <a href="https://www.toptal.com/react">React specialist</a> or a <a href="https://www.toptal.com/vue-js">Vue.js specialist</a> to hit the ground running with your Angular app, you shouldn’t expect an AngularJS specialist to be an expert in Angular, or vice versa. This isn’t to say they can’t take it on—they’ll just require more ramp-up time.
</p>
<p>
When hiring for an existing project, be sure to know if you need an AngularJS or Angular specialist. If you’re planning a new project, use Angular!
</p>
<h2 id="pitfall-no-2-hiring-a-developer-who-isnt-fluent-in-typescript">
Pitfall No. 2: Hiring a Developer Who Isn’t Fluent in TypeScript
</h2>
<p>
Angular was written in TypeScript, and it is by far the preferred language for Angular apps. This means that the ecosystem (e.g., libraries and documentation) around Angular is predominantly written in TypeScript.
</p>
<p>
When hiring an Angular expert, you’ll want to make sure that you’re hiring someone who knows TypeScript and can take full advantage of its amazing features. They should be familiar with tools like <a href="https://atom.io/" target="_blank" rel="noopener noreferrer">Atom</a> and <a href="https://code.visualstudio.com/" target="_blank" rel="noopener noreferrer">VSCode</a>, which support TypeScript and will highlight errors and provide autocompletion.
</p>
<p>
Hiring an Angular specialist means hiring a TypeScript specialist, so test their chops!
</p>
<h2 id="pitfall-no-3-lead-or-follow">
Pitfall No. 3: Lead or Follow?
</h2>
<p>
Are you looking for someone to augment your existing Angular team? Maintain an existing application? Lead or bootstrap a new project?
</p>
<blockquote>
<p>
An Angular lead should know how to set up a new project. This is an <strong>incredibly important</strong> part of your project lifecycle.
</p>
</blockquote>
<p>
The answers to these questions will help you determine how much Angular experience your specialist will need to have. As with other frameworks, the skill and experience required to be productive in an established codebase is much lower than what is required to bootstrap a new project. If you don’t need an Angular lead, then hiring someone with React, AngularJS, or great JavaScript experience may suffice, although they will require some learning. If you need an Angular lead, or someone to bootstrap a new project, you’ll want to make sure that your specialist is up to the task.
</p>
<p>
A professional Angular lead should know how to set up a new project. This is an <strong>incredibly important</strong> part of your project lifecycle! Think of it like a building—you wouldn’t want to build a skyscraper on top of a shaky foundation. Likewise, your Angular lead will be setting up the foundation for themselves and all future developers working on your project, so it needs to be rock-solid.
</p>
<p>
<strong>A good setup will:</strong>
</p>
<ul>
<li>
Follow best practices (for <a href="https://angular.io/guide/styleguide" target="_blank" rel="noopener noreferrer">Angular</a> or <a href="https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md" target="_blank" rel="noopener noreferrer">AngularJS</a>).
</li>
<li>
Reduce bugs.
</li>
<li>
Make it obvious how to add new features and extend your application.
</li>
</ul>
<p>
When hiring a lead, make sure to ask them about best practices, directory structure, and how to set up a single page application (since it requires special routing).
</p>
<h2 id="pitfall-no-4-your-angular-specialist-doesnt-really-know-angular">
Pitfall No. 4: Your Angular Specialist Doesn’t Really Know Angular
</h2>
<p>
You wouldn’t hire a chef without tasting their food, and you shouldn’t hire someone for Angular or AngularJS development without testing their Angular knowledge. (A great starting point for this is <a href="https://www.toptal.com/angular-js/interview-questions">our list of AngularJS interview questions</a>.) Both Angular and AngularJS code come with their own set of peculiarities that you’ll want to talk about.
</p>
<p>
<strong>Data Binding and Component Communication</strong>
</p>
<p>
An Angular specialist should know their way around data binding and component communication.
</p>
<p>
An AngularJS expert in particular should know the different ways to pass data to a component:
</p>
<ul>
<li>
<div class="codecolorer-container text solarized-light" style="overflow:auto;white-space:nowrap;width:550px;">
<table cellspacing="0" cellpadding="0">
<tr>
<td class="line-numbers">
<div>
1<br />
</div>
</td>
<td>
<div class="text codecolorer">
@
</div>
</td>
</tr>
</table>
</div>
<p>
for raw text</li>
<li>
<div class="codecolorer-container text solarized-light" style="overflow:auto;white-space:nowrap;width:550px;">
<table cellspacing="0" cellpadding="0">
<tr>
<td class="line-numbers">
<div>
1<br />
</div>
</td>
<td>
<div class="text codecolorer">
&
</div>
</td>
</tr>
</table>
</div>
<p>
for a function</li>
<li>
<div class="codecolorer-container text solarized-light" style="overflow:auto;white-space:nowrap;width:550px;">
<table cellspacing="0" cellpadding="0">
<tr>
<td class="line-numbers">
<div>
1<br />
</div>
</td>
<td>
<div class="text codecolorer">
=
</div>
</td>
</tr>
</table>
</div>
<p>
for two-way data binding</li>
<li>
<div class="codecolorer-container text solarized-light" style="overflow:auto;white-space:nowrap;width:550px;">
<table cellspacing="0" cellpadding="0">
<tr>
<td class="line-numbers">
<div>
1<br />
</div>
</td>
<td>
<div class="text codecolorer">
=?
</div>
</td>
</tr>
</table>
</div>
<p>
for optional two-way parameters</li> </ul>
<p>
Conversely, an Angular specialist should know when to use:
</p>
<ul>
<li>
<div class="codecolorer-container text solarized-light" style="overflow:auto;white-space:nowrap;width:550px;">
<table cellspacing="0" cellpadding="0">
<tr>
<td class="line-numbers">
<div>
1<br />
</div>
</td>
<td>
<div class="text codecolorer">
[property]
</div>
</td>
</tr>
</table>
</div>
<p>
binding</li>
<li>
<div class="codecolorer-container text solarized-light" style="overflow:auto;white-space:nowrap;width:550px;">
<table cellspacing="0" cellpadding="0">
<tr>
<td class="line-numbers">
<div>
1<br />
</div>
</td>
<td>
<div class="text codecolorer">
(event)
</div>
</td>
</tr>
</table>
</div>
<p>
binding</li>
<li>
<div class="codecolorer-container text solarized-light" style="overflow:auto;white-space:nowrap;width:550px;">
<table cellspacing="0" cellpadding="0">
<tr>
<td class="line-numbers">
<div>
1<br />
</div>
</td>
<td>
<div class="text codecolorer">
[(two-way)]
</div>
</td>
</tr>
</table>
</div>
<p>
binding</li> </ul>
<p>
Your specialist should also be able to tell you how to do parent-child or child-parent component communication, for <a href="https://angular.io/guide/component-interaction" target="_blank" rel="noopener noreferrer">Angular</a> or <a href="https://docs.angularjs.org/guide/component#intercomponent-communication" target="_blank" rel="noopener noreferrer">AngularJS</a>.
</p>
<p>
<strong>Services, Directives, and Pipes</strong>
</p>
<p>
Your Angular specialist should be able to explain to you what services are (hint: they’re singletons!), and when to use them. Services are a great way to provide common utilities to many components, simplify components by pulling out complex logic, and share state throughout your app. Angular makes it easy to control the scope of this shared state through the use of providers (e.g., app-, module-, or component-level state).
</p>
<p>
An Angular specialist should also know when to use directives and how to set them up. Directives are an amazing way to extend HTML by attaching custom behavior to elements in the DOM. For example, you could set up a directive to add on-hover tooltips to an element, set up hotkey event handling, or register when a user clicks outside of your element (to close a dropdown, for example).
</p>
<p>
Any non-trivial application will most likely have its own custom pipes, so your specialist will need to be versed in these, too. Pipes (or <em>filters</em> for AngularJS) are specifically used to transform your displayed data. Angular comes with many <a href="https://angular.io/api?type=pipe" target="_blank" rel="noopener noreferrer">built-in pipes</a>, and AngularJS comes with many <a href="https://docs.angularjs.org/api/ng/filter" target="_blank" rel="noopener noreferrer">built-in filters</a>. Ask your specialist about these handy tools, and make sure they won’t repeat the same transformations across the app when they could use pipes or filters!
</p>
<p>
<strong>Promises and Observables</strong>
</p>
<p>
While not strictly Angular-specific, promises and observables are paradigms that are common in the Angular world, and your specialist should be familiar with these as well.
</p>
<p>
Thanks to promises, we no longer have to live in fear of <a href="http://callbackhell.com/" target="_blank" rel="noopener noreferrer">callback hell</a>, and your specialist should know when and how to use them (such as wrapping REST API requests). Additionally, Angular introduces the use of ReactiveX’s <a href="http://reactivex.io/documentation/observable.html" target="_blank" rel="noopener noreferrer">Observables</a>, which provide an awesome way to stream data.
</p>
<h2 id="pitfall-no-5-not-doing-a-code-review">
Pitfall No. 5: Not Doing a Code Review
</h2>
<p>
<strong>You can talk the talk, but can you walk the walk?</strong>
</p>
<p>
So, your prospective specialist sounds like they know what they’re talking about, but can they actually break down a problem and write quality code?
</p>
<p>
Do a code walkthrough of some of their existing code that they can share with you. It doesn’t need to be perfect (but if it isn’t, they should be able to explain to you how they’d improve it). Additionally—or if they don’t have any open source code to share—have them code an example component within your problem domain (e.g., a checkout shopping cart, a web form for teachers to add lesson plans, or a to-do list). Alternatively, you can set up some example code and have them explain it and identify bugs and cleanups.
</p>
<p>
Checking their code can really give you an insight into not only their competency, but also their style. Good style goes a long way in keeping code maintainable and bug-free, and is just a good general indication of their seniority.
</p>
<p>
<strong>Things to look for:</strong>
</p>
<ul>
<li>
They follow best practices (for <a href="https://angular.io/guide/styleguide" target="_blank" rel="noopener noreferrer">Angular</a> or <a href="https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md" target="_blank" rel="noopener noreferrer">AngularJS</a>).
</li>
<li>
Consistency in their style (casing, format, etc.).
</li>
<li>
They use TypeScript for Angular.
</li>
<li>
They can explain how their code works and defend their decisions.
</li>
</ul>
<p>
Read up on <a href="https://www.toptal.com/software/six-commandments-of-good-code">good code</a>, <a href="https://www.toptal.com/javascript/10-most-common-javascript-mistakes">common JavaScript mistakes</a>, and <a href="https://www.toptal.com/angular-js/top-18-most-common-angularjs-developer-mistakes">common AngularJS mistakes</a>. And if you’re hiring someone who has yet to be vetted, you should also test their general programming skills (there’s a reason <a href="https://blog.codinghorror.com/why-cant-programmers-program/" target="_blank" rel="noopener noreferrer">FizzBuzz</a> weeds out so many freelancers).
</p>
<h2 id="pitfall-no-6-proceeding-without-a-testing-strategy">
Pitfall No. 6: Proceeding without a Testing Strategy
</h2>
<p>
Tests are an essential part of every code base. They’re like a warm, snuggly security blanket for your engineers, giving them confidence that they aren’t breaking anything and costing the company money. Good tests and a good testing strategy will boost your <a href="http://firstround.com/review/forget-technical-debt-heres-how-to-build-technical-wealth/" target="_blank" rel="noopener noreferrer">technical wealth</a>, while bad tests, or lack of strategy, will be a constant source of frustration and major code debt.
</p>
<p>
A good freelancer will advocate for tests and understand their benefits:
</p>
<ul>
<li>
Guarding against regressions (preventing <em>“What do you mean users can’t sign up anymore!?”</em>).
</li>
<li>
Acting as codified documentation of your codebase, making it easier for other developers to understand, maintain, and extend it.
</li>
<li>
Validating functionality and preventing bugs in pesky edge cases.
</li>
</ul>
<p>
If you don’t understand testing, you’ll likely fall into the <em>“We need tests!”</em> trap. This can lead you to hire someone who doesn’t truly understand tests, but will happily write tons of less-than-useful or incredibly fragile tests.
</p>
<p>
When considering Angular consulting, you’ll want to explore your potential hire’s understanding of tests and determine how they’d go about testing your app.
</p>
<p>
<strong>Things to look for:</strong>
</p>
<ul>
<li>
They understand the <strong>fragile</strong> nature of front-end testing and how to use constructs like <a href="https://angular.io/guide/testing#use-a-page-object-to-simplify-setup" target="_blank" rel="noopener noreferrer">page objects</a> to <a href="http://programmer.97things.oreilly.com/wiki/index.php/Don%27t_Repeat_Yourself" target="_blank" rel="noopener noreferrer">DRY</a> up test upkeep in the face of template changes and refactorings.
</li>
<li>
They can explain how AngularJS’s digest cycle works, or how Angular’s asynchronous change detection works, and how that impacts testing. (Hint: You need to <a href="https://angular.io/guide/testing#the-tick-function" target="_blank" rel="noopener noreferrer">explicitly resolve asyncs</a> or use <a href="https://angular.io/guide/testing#whenstable" target="_blank" rel="noopener noreferrer">wrapping functions</a>to wait for them.)
</li>
<li>
Mocking! They should know how to use <a href="https://jasmine.github.io/api/edge/global.html#spyOn" target="_blank" rel="noopener noreferrer">spys</a> and <a href="https://angular.io/guide/testing#provide-service-test-doubles" target="_blank" rel="noopener noreferrer">stubs/test-doubles</a> in order to isolate tests and remove their dependence on any network calls.
</li>
<li>
An Angular specialist will know that services and pipes are ripe for unit testing. Components are also unit-testable, but with a <a href="https://angular.io/guide/testing#test-a-component" target="_blank" rel="noopener noreferrer">bit more boilerplate</a>. This is why it is recommended to <a href="https://angular.io/guide/styleguide#delegate-complex-component-logic-to-services" target="_blank" rel="noopener noreferrer">move complex logic into a service</a>.
</li>
<li>
End to end (E2E) tests will depend on your back-end framework, but an Angular specialist should know about <a href="http://www.protractortest.org/" target="_blank" rel="noopener noreferrer">Protractor</a> (although other tools like <a href="http://nightwatchjs.org/" target="_blank" rel="noopener noreferrer">Nightwatch.js</a> will also work).
</li>
</ul>
<p>
To aid in your probing of their abilities, you could provide an example component, service, or directive and ask them what they’d test—maybe even have them write up the “it should (blank)” descriptions of all of the tests they’d write for it, and also write one of them up.
</p>
<p>
When hiring a professional Angular specialist, don’t superficially ask about tests. Instead, explore their understanding of what to test and how to test it.
</p>
<h2 id="pitfall-no-7-having-only-non-developers-interview-your-freelancer">
Pitfall No. 7: Having Only Non-Developers Interview Your Freelancer
</h2>
<p>
When hiring a freelance developer for Angular(JS) web development, you’ll want to make sure that a developer interviews them. Just because a freelancer is confident, it doesn’t mean they are competent, and a non-developer has a higher risk of making a costly mis-hire. A good developer will be able to recognize someone who knows what they are talking about. Your developer should also validate that the freelancer can walk the walk, through interview questions and challenges.
</p>
<p>
If you don’t have a senior developer, you can ask a friend or stick with vetted developers.
</p>
<h2 id="this-up-front-effort-will-save-you-time-and-money-in-the-long-run">
This Up-Front Effort Will Save You Time and Money in the Long Run
</h2>
<p>
Exploring AngularJS development services can seem like a difficult, opaque, and potentially costly process. After all, if you’re looking for a freelancer to contribute to your existing project or team, it’s incredibly important to find someone who is a good fit and whose chops are up to par. And if you’re building a new project from scratch, in many ways, your project’s future success will depend upon the early-stage decisions made by your specialist.
</p>
<p>
But don’t panic. By taking the precautions discussed above, you can ensure not only that you’ll be hiring a skilled developer, but also that your project will be on the right track to succeed and to take advantage of all the powerful features that Angular has to offer.
</p>
<p>
This <a href="https://www.toptal.com/angular-js-development#hiring-guide">article </a>is originally publisheed at Toptal.
</p></div> </div> </div> </div> </section> <footer class="hide_in_webview"> <section class="page_footer_legal-wrapper">
<div class="page_footer_legal is-wide">
</div></section> </footer>
<div>
</div></div>
<div class="notification-container">
</div>
<div class="layout-counters">
</div><nav class="page_header_menu-wrapper is-grid_row is-fixed is-visible">
<div class="page_header_menu is-grid_row_inner">
</div></nav>
<p>
</p>
Authored By Amit Agarwal
Amit Agarwal, Linux and Photography are my hobbies.Creative Commons Attribution 4.0 International License.