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
Get Familiar with @NgModules (Angular Modules)
File Structure Pseudo Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// 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:
import
andexport
: 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. ()=>{}
andval=>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.
1 2 3 4 5 6 7 8 9 |
export class ClassEx { constructor(val) { this.val = val; } factory(newVal: number): (com: number) => boolean { return (com: number) => this.val + newVal === com; } } |
becomes something like:
1 2 3 4 5 6 7 8 9 10 11 12 |
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.