Make Your Angular Awesome Again

Posted April 23, 2018

I’d like to share with you my own Angular tips and tricks.

There are tons of resources on the internet that can make your code awesome. Code that you would love to work with. Code that will do pretty amazing stuff with just a few lines.

1. lodash & lodash-decorators

What is lodash?

It is a modern JavaScript utility library delivering modularity, performance & extras.

Lodash has some great pure functions to manipulate Arrays, Collections, Objects, Functions. You can transform data from one type to another with no effort.

Example:

var users = [

  { 'user': 'barney', 'age': 36, 'active': true },

  { 'user': 'fred',   'age': 40, 'active': false }

];

_.filter(users, function(o) { return !o.active; });

// => objects for ['fred']

// The `_.matches` iteratee shorthand.

_.filter(users, { 'age': 36, 'active': true });

// => objects for ['barney']

// The `_.matchesProperty` iteratee shorthand.

_.filter(users, ['active', false]);

// => objects for ['fred']

// The `_.property` iteratee shorthand.

_.filter(users, 'active');

// => objects for ['barney']

Check the official documentation of lodash.

What are lodash-decorators?

Decorators using lodash functions.

lodash-decorators are created based on lodash. You can use them in Angular as decorators on functions.

Example:

import { Debounce, Memoize } from 'lodash-decorators';

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  @Debounce(100)
  save(date) {
    return this.httpService.post(data);
  }

  @Memoize(item => item.id)
  doSomeHeavyProcessing(arg1, arg2) {}
}

Debounce — Creates a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked. The debounced function comes with a cancelmethod to cancel delayed func invocations and a flush method to immediately invoke them. Provide options to indicate whether func should be invoked on the leading and/or trailing edge of the waittimeout. The func is invoked with the last arguments provided to the debounced function. Subsequent calls to the debounced function return the result of the last func invocation.

Memoize — Creates a function that memoizes the result of func. If resolver is provided, it determines the cache key for storing the result based on the arguments provided to the memoized function. By default, the first argument provided to the memoized function is used as the map cache key. The func is invoked with the this binding of the memoized function.

Read official documentation

2. NRWL Extensions

An open source toolkit for enterprise Angular applications.

Nx is designed to help you create and build enterprise grade Angular applications. It provides an opinionated approach to application project structure and patterns.

Why Nx?

At Nrwl we help enterprise teams build Angular applications.

These companies don’t build small apps. They have multiple teams building multiple apps using multiple shared libs. It’s many to many to many. Organizing this dev workflow is challenging.
They care about consistency. If every team uses their own unique way of building software, the code is harder to reuse and integrate.
They have legacy AngularJS apps they need to upgrade. NgUpgrade is great, but it is easy to misconfigure.
They want to write robust, proven code: error handling, race conditions, etc.

Follow official documentation

3. NgRx — State Management

NgRx is based on Redux from React. It’s reactive library for angular.

NgRx contains several packages:

@ngrx/store — RxJS powered state management for Angular applications, inspired by Redux
@ngrx/effects — Side Effect model for @ngrx/store to model event sources as actions.
@ngrx/router-store — Bindings to connect the Angular Router to @ngrx/store
@ngrx/store-devtools — Store instrumentation that enables a powerful time-travelling debugger.
@ngrx/entity — Entity State adapter for managing record collections.
@ngrx/schematics — Scaffolding library for Angular applications using NgRx.

NgRx is not hidden one, but it should be mentioned in any list of resources for Angular.

Each one is pretty awesome and gives you flexibility to handle state.

Follow official documentation on GitHub

There are more tools that should be mentioned in this article, but this three resources are mandatory to make your job easy and robust.

Guest Author: Zura Gabievi

Gvantsa