Angular 2 Gotchas and Interview Questions

  • Creating a Container Component in Angular 2 [Code Snippet]
  • It takes some time and hands-on experience to realize that both systems can, and should, be used in harmony to create a well designed Angular 2 application.
  • I have a strong feeling that most production issues for Angular 2 applications will have root cause related to Dependency Injection.
  • Even with the small application, it started to get annoying quickly having to declare every component, pipe, directive etc in modules.
  • If we look at a component, we are basically embedding HTML in Typescript code from a developer’s perspective.

No framework is perfect, and Angular 2 is not exempt from that. Let’s look at some of its pitfalls and even get you prepped for your next interview. After reading, you’ll be Angular 2 ready.

@preeteshjain: Angular 2 Gotchas and Interview Questions #angular #angularjs #frontend #webdevelopment

Recently my team had the opportunity to create a new interactive web application from scratch, so we decided to write it using Angular 2 and Spring Boot.

Angular 2 is a well-rounded framework. I don’t think I have to say much in its support because it is frequently mentioned as being one of the best available front-end frameworks currently available. I wouldn’t be surprised if it becomes the de facto framework for developing front-end applications in the upcoming year. Using it you can recognize the years of experience, lessons learned and best practices that have been incorporated into its core design, such as Modularity, Components, Dependency Injection, Security, Testability, and more.

This is my first deep dive into the Angular 2 framework, and along with the readily apparent greatness, I’m starting to get glimpses of less than desirable dark spots as well. Right now I’m still undecided on whether or not these concerns may or may not turn out to be shortcomings in the framework down the line. Like many, I too have been burned by a shiny, new, all promising framework in the past, so I’ve decided to take a moment and share these concerns with the well-respected DZone community in hopes of getting some constructive opinions on this topic.

1. Compilation

As of now, Angular 2 supports development in Typescript, JavaScript, and Dart. Even though the framework supports JavaScript and Dart, the true contender for any new potential development seems to be Typescript. Moreover, the framework itself is written in Typescript.

Typescript is a superset of JavaScript language, and it has to be compiled into JavaScript in order to work. Angular 2 supports two kinds of compilation methods out of the box: Ahead-of-time (AOT) compilation and Just-in-time (JIT) compilation.

Ahead-of-time (AOT) compiles the application at build time with optimizations and is the method that must be used for production builds.

Just-in-time (JIT) compiles the app in the browser, at runtime, as the application loads – this is the standard development approach. JIT is useful for development, but its performance concerns me – how would JIT scale for enterprise level applications?

This setup reminds me of Google Web Toolkit (GWT – http://www.gwtproject.org/). GWT had the same promise – Code in Java and compile to JavaScript and you will get best of the both worlds. A strongly typed language with tooling support and performance of standard JavaScript at runtime. But as any serious GWT developer knows, the GWT compiler became the bottleneck. Compilation and executing test cases ended up taking so much time that everyone was looking for any hack or trick to make life more bearable. I hope Angular 2 won’t share the same fate.

Note: In Practice, I have observed that JIT skips errors while hot loading and reports it when you restart the server. Better to be a little careful and restart (npm start) the development server at least twice a day.

2. Configuration Over Convention

While reading the documentation, I started following the “Tour of Heroes” tutorial from the official Angular 2 documentation. It’s a simple application created for the sole purpose of learning. Even with this small application, it started to get annoying quickly having to declare every component, pipe, directive etc in modules. I’m not sure if this is a technical limitation (I didn’t get the chance to dig into Angular 2’s internal implementation yet), but isn’t there a way we can do a component scan and wire it all up based on Modules?

3. Bootstrap (main.ts) Appears Unnecessary

The file “main.ts” appears unnecessary. Why do we have to write and manage a class which is not my own business concern (application logic)? The code in this file is all about bootstrapping the application, and the worst part is that you would actually need a pair of files – one for development and another one for production. Is it possible to replace the separate files with an annotation that could be marked in the root module (E.g. Line 7 below)?

4. ”Code in HTML” or “HTML in Code” Dilemma

If we look at a component, we are basically embedding HTML in Typescript code from a developer’s perspective. Is this the right thing to do? I remember how the Java community started with Servlets where we embedded HTML in code, but then quickly realized the mistake and reversed it. Technologies like JSP, ASP, and PHP are based on the same conceptual model where we embed code inside HTML.

Both approaches have their own advantages and disadvantages. Moreover, we can’t get away with it as long as we want to dynamically generate the UI. Angular 2 has adopted html in the code – Is it the right approach for Angular? I don’t know – probably time will tell. But the good part is that Angular 2 supports having HTML partials in separate files which is great for separating code from markup, but comes with its own set of problems, especially for UX guys.

5. Module System

There is nothing wrong the way the Module system is implemented in Angular 2. The only thing confusing is having to mix two module systems; one is from Angular 2 and another one from JavaScript. I think this is more of a learning issue than a major problem. It takes some time and hands-on experience to realize that both systems can, and should, be used in harmony to create a well designed Angular 2 application.

6. Dependency Injection (DI)

Dependency Injection (DI) is a really great and powerful feature of the framework. It reminds me of a something I heard t in the Spiderman movie: “With great power comes great responsibility”. I have a strong feeling that most production issues for Angular 2 applications will have root cause related to Dependency Injection. Developers who don’t have good past experience with DI patterns and frameworks should look at it very carefully, especially the Prototype and Singleton behavior of services.

Apart from above six concerns, the framework lacks constraints to force developers to do the right thing. I see the potential to do things the wrong way being too easy; like a service being marked as a component or vise versa, the same is true about directives, and even components are essentially directives and so on. That said, I guess the potential for mistakes is a concern with any technology or framework.

As I mentioned earlier, Angular 2 is a great framework for building front end applications. If you are looking for new hire (or looking to get hired), here are few questions that could help make sure that the candidate has a basic working knowledge of Angular 2.

Why are components not marked with @injectable annotation, but services need to be?

Bonus: Check out http://ngmodules.org/ for common reusable components like file upload and more.

Angular 2 Gotchas and Interview Questions

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.