Book Image

Angular Design Patterns

By : Mathieu Nayrolles
Book Image

Angular Design Patterns

By: Mathieu Nayrolles

Overview of this book

This book is an insightful journey through the most valuable design patterns, and it will provide clear guidance on how to use them effectively in Angular. You will explore some of the best ways to work with Angular and how to use it to meet the stability and performance required in today's web development world. You’ll get to know some Angular best practices to improve your productivity and the code base of your application. We will take you on a journey through Angular designs for the real world, using a combination of case studies, design patterns to follow, and anti-patterns to avoid. By the end of the book, you will understand the various features of Angular, and will be able to apply well-known, industry-proven design patterns in your work.
Table of Contents (9 chapters)

TypeScript Best Practices

I've always hated JavaScript. I use it, sure, but only when necessary. I distinctly remember my first internship interview, back when I was a freshman at eXia.Cesi, a French computer engineering school. I only knew C and some Java, and I was asked to help on an intranet that mostly worked with homemade Ajax libraries. It was pure madness and kind of steered me away from the web aspect of computer engineering for a while. I find nothing likeable in the following:

var r = new XMLHttpRequest();  
r.open("POST", "webservice", true); 
r.onreadystatechange = function () { 
   if (r.readyState != 4 || r.status != 200) return;  
   console.log(r.responseText); 
}; 
r.send("a=1&b=2&c=3"); 
 

A native Ajax call. How ugly is that?

Of course, with jQuery modules and some separation of concerns, it can be usable, but still not as comfortable as I would like. You can see in the following screenshot that the concerns are separated, but it's not so easy:

A deprecated toolwatch.io version using PHP5 and Codeigniter

Then, I learned some RoR (a Ruby-based, object-oriented framework for web applications: http://rubyonrails.org/) and Hack (a typed PHP by Facebook: http://hacklang.org/). It was wonderful; I had everything I always wanted: type safety, tooling, and performance. The first one, type safety, is pretty self-explanatory:

<?hh 
class MyClass { 
  public function alpha(): int { 
    return 1; 
  } 
 
  public function beta(): string { 
    return 'hi test'; 
  } 
} 
 
function f(MyClass $my_inst): string { 
  // Fix me! 
  return $my_inst->alpha(); 
} 

Also, with types, you can have great toolings, such as powerful auto completion and suggestions:

Sublime Text autocompletion on toolwatch.io mobile app (Ionic2 [5] + Angular 2 )

Angular can be used with CoffeeScript, TypeScript, and JavaScript. In this book, we'll focus on TypeScript, which is the language recommended by Google. TypeScript is a typed superset of JavaScript; this means that, with TypeScript, you can do everything you used to do in JavaScript, and more! To name but a few advantages: user-defined types, inheritance, interfaces, and visibility. And the best part is that TypeScript is transpiled into JavaScript so that any modern browser can run it.

In fact, with the use of polyfill, even our good old IE6 can almost execute the final output. We'll get back to that in the next chapter. The transpilation is different from compilation (for example, from C to executable or .java to .class) as it only translates TypeScript into JavaScript.

In this chapter, we will learn the best practices for TypeScript. The syntax of the TypeScript language is quite easy to grasp for anyone who knows JavaScript and an object-oriented language. If you don't know anything about object-oriented programming, I'd suggest you put this book aside for a few moments and take a look at this quick Udacity course: https://www.udacity.com/wiki/classes.

As a summary of the topics covered:

  • TypeScript syntax
  • TypeScript best practices
  • TypeScript shortcomings