Developer onboarding to Angular Project

Philosophy of This Project

  1. 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.
  2. 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.
  3. 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:

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.

becomes something like:

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.

Written By StevenLacks