Developer onboarding to Angular Project

Philosophy of This Project

Use the tools that fit the job. For Developers, this means you can use whatever code editor or IDE you prefer. For DevOps this means it’s easy to put in various environments, because the interface is a Browswer, NPM and Node.
Small Modules. A module should do as little as is sensible. Methods should have simple interfaces and do or change one thing. The app will be composed of many small modules. Small modules are easier to test and change because they use fewer dependencies.
Solve Actual Problems. Build to today’s requirements, not for some issue that may or may not come up in the future… However, unit testing and a healthy amount of E2E should be considered today’s problems – they are part of how we verify that our code works and requirements are met. The future looking benefits of testing are like gravy, they’re a bonus, the icing on the cake.

Resources

TypeScript in 5 Minutes

Official Documentation

John Papa talks CLI and tools in 2017

Angular Module and ES2015 Module

Get Familiar with @NgModules (Angular Modules)

File Structure Pseudo Code:

// PSEUDO CODE NOT REAL CODE
import { Type } from './file'; // Gets 'Type from a file'
import { lib } from 'node_module'; // Gets lib from a npm package
import { Service } from '/src/path/to/service'; // Imports a service type
import { AngularInterface } from '@angular/core'; // Imports a core angular type

@Decorator({
  metaData: "data"
})
export class ClassNameType implements AngularInterface {
  constructor(private service: Service) { }
  property: Type;
  method(param: Type): ReturnType {
    return service.serviceMethod(this.property, param);
  }
}
// PSEUDO CODE NOT REAL CODE

// PSEUDO CODE NOT REAL CODE

import { Type } from './file'; // Gets 'Type from a file'

import { lib } from 'node_module'; // Gets lib from a npm package

import { Service } from '/src/path/to/service'; // Imports a service type

import { AngularInterface } from '@angular/core'; // Imports a core angular type

@Decorator({

metaData: "data"

})

export class ClassNameType implements AngularInterface {

constructor(private service: Service) { }

property: Type;

method(param: Type): ReturnType {

return service.serviceMethod(this.property, param);

}

// PSEUDO CODE NOT REAL CODE

There’s a lot of new vocabulary in Angular, but mostly it’s just new names to indicate slight differences.

These terms sometimes have broader, general meanings. The definitions below are in regards to angular.

Current JavaScript Features often thought of as unfamiliar:

importandexport: tells the javascript interpreter to get this file (the build system handles this in angular)
class {}: used for instantiating objects in JS also used by typescript to help with suggestions.
{ key1, key2 } = object: destructuring, used in importing
Future JavaScript Experimental Feature:
@Decorator: a wrapper that lets the interpreter know how to use the thing it’s decorating. This is notated by putting the @ in front of a method or class. Example: @Input() el means ‘el’ is decorated with an @Input() class. @Component({...}) export class TestComponent means that ‘TestComponent’ is going to be a component with the metadata passed in to the Component parentheses.
()=>{} and val=>val==com: are arrow function notation. They are more performant when you don’t need binding to a new context (a new this);

TypeScript:

Type: Types are optional to the JavaScript

When you combine these new concepts it can look like a whole new language but it’s not.

export class ClassEx {
  constructor(val) {
    this.val = val;
  }

  factory(newVal: number): (com: number) => boolean {
    return (com: number) => this.val + newVal === com;
  }
}

export class ClassEx {

constructor(val) {

this.val = val;

}

factory(newVal: number): (com: number) => boolean {

return (com: number) => this.val + newVal === com;

}

becomes something like:

function ClassEx(val) {
  this.val = val;
}

ClassEx.prototype.factory = function(newVal) {
  var oldVal = this.val;
  return function(com){
    return oldVal + newVal
  }
}

module.export = ClassEx;

function ClassEx(val) {

this.val = val;

}

ClassEx.prototype.factory = function(newVal) {

var oldVal = this.val;

return function(com){

return oldVal + newVal

}

module.export = ClassEx;

They’re not that different, the new JavaScript one (with types from TypeScript) is a lot easier to write automated tests for, gives you better linting, and is easier to turn into modules. It also gives you much better type hinting and auto-suggestions in your favorite text editory.

Steven Lacks

Developer onboarding to Angular Project

Philosophy of This Project

Resources

Get Familiar with @NgModules (Angular Modules)

Written By StevenLacks