Flashcards

flashcards-angular-architecture.md

1. What does the acronym LIFT describe?

• Locate code quickly
• Identify easily (naming)
• flat folder structure
• Try to be DRY

2. What 2 options for organizing an Angular project folder do exist?

• convention based
• feature based

3. How many features should you have per module and why?

• 1 module per feature
• self contained
• easy maintenance

3. What is one big advantage of having each feature in a seperate module?

• Lazy loading parts of the application when it's needed

4. What is an example for a folder structure?

• Core
• Shared
• Course
• Customer
  • Customer-dtails
  • Customer-edit
• Customers

5. What belongs to the core part of an application?

• Singleton services or other parts i.e. components

6. How can you conncet a routing module with its feature module?

• Import routing module in feature module

7. What trick can you use to easily connect all components from within a routing module?

export class AboutRoutingmodule {
	static components = [AboutComponent];
}

@ngModule({
	imports: [AboutRoutingModule],
  	declarations: [AboutRoutingModule.components]
})

8. How can you update to the latest version of angular globally?

• npm install -g @angular/cli

9. How can you update in an existing project?

• npm update @angular/cli @angular/core

10. What is the basic flow of NgRx?

• Component dispatches action
• effects get called in order to retreive data
• effect send the action to the reducer
• store is updated
• component gets updated via selectors

11. How does an event bus work?

• 2 components / 1 event bus (subject)
• 1 component subscribes with .on and "callback" function
• 1 component raises event

import ...

@Injectable()
export class EventBusService {

    private subject$ = new Subject();

    on(event: Events, action: any): Subscription {
         return this.subject$
              .pipe(
                    filter((e: EmitEvent) => {
                      return e.name === event;
                    }),
                    map((e: EmitEvent) => {
                      return e.value;
                    })
                  )
                    .subscribe(action);
    }

    emit(event: EmitEvent) {
        this.subject$.next(event);
    }
}

export class EmitEvent {

  constructor(public name: any, public value?: any) { }

}

export enum Events {
  CustomerSelected
}

import ...

@AutoUnsubscribe()
@Component({ 
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit { 
  customers: Customer[];
  customer: Customer;
  eventbusSub: Subscription;
  customersChangedSub: Subscription;
  
  constructor(private eventbus: EventBusService, private dataService: DataService) { }

  ngOnInit() {
    //Example of using an event bus to provide loosely coupled communication (mediator pattern)
    this.eventbusSub = this.eventbus.on(Events.CustomerSelected, (cust => this.customer = cust));

    //Example of using BehaviorSubject to be notified when a service changes
    this.customersChangedSub = this.dataService.customersChanged$.subscribe(custs => this.customers = custs);
  } 
}

12. How can you improve the performance of functions used in the template and why is this good?

• Use pipes instead of functions, because these are only recalculated if the input of the component changes

13. What is forkJoin used for?

• Wait for all observables to complete and return their last emitted values.

14. What is switchMap used for?

• Switch first observable into a second observable (cancel first first observable)

15. What does mergeMap do?

• Map first observable into follow-up observables while keeping multiple inner subscriptions alive.

16. What belongs into the core section of the app?

• singleton services (logging, errors, data) and components

17. What belongs in the shared section of the app?

• reusable componentens, pipes, directives, for example calendarComponent

18. How can you ensure that modules from core are only injected once?

• class based: EnsureModuleLoadedOnceGuard (extends + module + super)
• function based: throwIfAlreadyLoaded (function + module + name)

19. How do you create a library?

• ng g library my-lib

20. What do you need to do after you create a library in order to use it?

• ng build my-lib in order to build library in dist folder

21. What does ng g l do?

• create new project in ./project
• add paths to tsconfig.json (used during build to distribute to dist)
• add project to angular.json

22. How does the JS engine process JS code?

• JS Code -> runs through parser -> AST is created -> runs through basline compiler -> runs continously through optimisation compiler -> is translated to machine code

23. What's the role of ignition and turboFan in V8 engine?

• optimize and de-optimize code continuously

24. What are different subject types in RxJs?

• Subject: latest value
• ReplaySubject: specified last x values (caching)
• BehaviorSubject: last value
• Async Subject: last value on completion

25. What pattern does the event bus follow?

• mediator pattern

26. What pattern does the observerable service follow?

• observer pattern

27. What's the biggest difference between event bus and observable service?

• event bus does not know of source of truth and how changes are handled

28. What is a ngModule?

• An NgModule declares a compilation context for a set of components that is dedicated to an application domain, a workflow, or a closely related set of capabilities.

29. How does Angular compile a component?

• Find module the component belongs to
• Find all directives that are in scope of the module
• Run compilation with all found directives

30. How many files should you have per folder at maximum?

• 7

31. How many items should you have per file?

• 1

32. What is the single responsibility rule about?

• a class, component or file shoule be responsible for one thing only

33. How should you format constants names in components?

• normal camel case just like with normal properties/variables.

34. How should you structure your imports in the app?

• 3rd party imports before own imports

35. What's a simple way to add or drop entries from an array in an immutable way?

• this.currentUser.classes.push(classId);

• Object.assign({}, this.currentUser, {classes: this.currentUser.classes.concat([classId])}

• this.currentUser.classes = this.currentUser.classes.filter( c => c.classId !== classId);

• this.currentUser = Object.assign({}, this.currentUser, {classes: this.currentUser.classes.filter(c => c.classId !== classId)});

function saveUser(user): Observable<any> {
	this.currentUser = user;
  	return Observable.empty().delay(4000);
}

vs.

function saveUser(user): Observable<any> {
	this.currentUser = Object.assign({}, user, {classes: user.classes || []});
    return Observable.empty().delay(1000);
}

36. What's some general best practices in Javascript?

• SRS
• Symbol naming
• Immutability
• Using small functions