ThomasBurleson

NgRx State Management with TicketFacade

Facades are a programming pattern in which a simpler public interface is provided to mask a composition of internal, more-complex, component usages.

When writing a lot of NgRx code - as many enterprises do - developers quickly accumulate large collections of actions and selectors classes. These classes are used to dispatch and query [respectively] the NgRx Store.

Using a Facade - to wrap and blackbox NgRx - simplifies accessing and modifying your NgRx state by masking internal all interactions with the Store, actions, reducers, selectors, and effects.

For more introduction, see Better State Management with Ngrx Facades

ThomasBurleson

💚 Best Practices: Use Permissions as BitFlags

Developers often miss the opportunity to express permissions as a collection of enumerated bitflags; where complex permissions can be easily grouped by context.

Consider the scenario where a user may have 30 or more permission flags.

---

Improved Version 😄:

ThomasBurleson

Scenario

We want to build a custom schematic for company Aero that will internally do two things:

• build a new ngrx library using Nx workspace naming conventions
• generate ngrx state-management files; include the *.facade.* files

---

Important: This example is valid ONLY for Nx v6.2.x or higher!

ThomasBurleson

import { NgModule } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { readFirst } from '@nrwl/nx/testing';

import { EffectsModule } from '@ngrx/effects';
import { StoreModule, Store } from '@ngrx/store';

import { NxModule } from '@nrwl/nx';

/**

ThomasBurleson

/**
 *  When manually subscribing to an observable in a view component, developers are traditionally required
 *  to unsubscribe during ngOnDestroy. This utility method auto-configures and manages that relationship
 *  by watching the DOM with a MutationObserver and internally using the takeUntil RxJS operator.
 *
 *  Angular 7 has stricter enforcements and throws errors with monkey-patching of view component life-cycle methods.
 *  Here is an updated version that uses MutationObserver to accomplish the  same goal.
 *
 *  @code
 *

ThomasBurleson

 // ------------------------------------------------------------------------------------------------
 /**
  * Why CLOSURES are great!
  * 
  * Think of Closures as Functions within Functions... where nested functions have access to parent function variables 
  * and arguments. So, you may ask? 
  *
  *     Closures allow developers to temporarily cache data!
  *     Closures can simplify recursion or iterations (aka visitors pattern)
  *     Closures can solve real-world `callback` problems; especially powerful for asynchronous callbacks. 

ThomasBurleson

ThomasBurleson

The interview questions below are grouped by category and each category lists questions in easy-to-hard order.

Interviews should ask the candidate to self-assess their skills/experience. Based on the candidate's response, the interviewer can jump to the appropriate section.

Some basic questions going from easy to difficult. A more exhaustive list of more questions from the community can be found here.

JavaScript

• What is variable shadowing

ThomasBurleson

Quite simply, because Observables can encapsulate many different types of sources and those sources don't necessarily have to obey that interface. Some like Promises always attempt to eagerly compete.

Consider:

const promise = $.get('https://www.google.com');

ThomasBurleson

import {
  Component,
  OnInit,
  Input,
  ViewChild,
  ElementRef,
  HostBinding
} from '@angular/core';

@Component({