- What does the acronym LIFT describe?
- Locate code quickly
- Identify easily (naming)
- flat folder structure
- Try to be DRY
- What 2 options for organizing an Angular project folder do exist?
- convention based
- feature based
- How many features should you have per module and why?
- 1 module per feature
- self contained
- easy maintenance
- What is one big advantage of having each feature in a seperate module?
- Lazy loading parts of the application when it's needed
- What is an example for a folder structure?
- Core
- Shared
- Course
- Customer
- Customer-dtails
- Customer-edit
- Customers
- What belongs to the core part of an application?
- Singleton services or other parts i.e. components
- How can you conncet a routing module with its feature module?
- Import routing module in feature module
- 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]
})
- How can you update to the latest version of angular globally?
- npm install -g @angular/cli
- How can you update in an existing project?
- npm update @angular/cli @angular/core
- 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
- 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);
}
}
- 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
- What is forkJoin used for?
- Wait for all observables to complete and return their last emitted values.
- What is switchMap used for?
- Switch first observable into a second observable (cancel first first observable)
- What does mergeMap do?
- Map first observable into follow-up observables while keeping multiple inner subscriptions alive.
- What belongs into the core section of the app?
- singleton services (logging, errors, data) and components
- What belongs in the shared section of the app?
- reusable componentens, pipes, directives, for example calendarComponent
- How can you ensure that modules from core are only injected once?
- class based: EnsureModuleLoadedOnceGuard (extends + module + super)
- function based: throwIfAlreadyLoaded (function + module + name)
- How do you create a library?
- ng g library my-lib
- 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
- 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
- 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
- What's the role of ignition and turboFan in V8 engine?
- optimize and de-optimize code continuously
- 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
- What pattern does the event bus follow?
- mediator pattern
- What pattern does the observerable service follow?
- observer pattern
- 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
- 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.
- 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
- How many files should you have per folder at maximum?
- 7
- How many items should you have per file?
- 1
- What is the single responsibility rule about?
- a class, component or file shoule be responsible for one thing only
- How should you format constants names in components?
- normal camel case just like with normal properties/variables.
- How should you structure your imports in the app?
- 3rd party imports before own imports
- 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);
}
- What's some general best practices in Javascript?
- SRS
- Symbol naming
- Immutability
- Using small functions