Watch Your BAC

Simple web application to compute one's Blood Alcohol Content (BAC) built using Angular 2.0 and Unit tested with Jasmine 2.4.1.

Run the app

Clone the repo, install it, start it.

npm install
npm start

Sessions

Where we left off 11/30/16

1. Hello World and creating The Shell
2. Home page
3. Search page
4. Beer Details page
5. Beers Consumed page
6. Unit Testing

Angular 2 style guide here

Verification

1. Single Responsibility Principle (SRP)
2. Rule of One * The Home Component, search component, etc. have single responsibilities * All sessions follow this rule
3. Small functions * From the Home Component: nextPage() and getRadioValue() are small (session 2)
4. Naming
5. General naming guidelines * serializer.service.ts : serializer is the feature, service is the type (session 2)
6. Separate file names with dots and dashes * bac.service.ts : dot separation (session 2)
7. Components and Directives - consistent name, symbol suffix * beer-details.component.ts contains the BeerDetailsComponent class (session 2)
8. Service names - suffix with Service when it's not clear what it is * bac.service.ts contains the BacService (session 2) * serializer.service.ts contains the Serializer (session 2)
9. Coding Conventions
10. Classes - camel cased * BacService is upper camel cased (from bac.service.ts, session 2)
11. Constants - for use with constant data * See Constants.ts (session 3)
12. Interfaces - camel cased without 'I' prefix * See api-return-types.ts (session 3)
13. Methods - lower camel cased, don't prefix private methods with underscore * BacService - getState() and restoreUserData() (session 2)
14. Application Structure

• Remember LIFT
  • Locate code quickly
    • store files in intuitive locations
    • related files are near each other
  • Identify code at a glance
    • files contain exactly one thing per file
  • Flattest possible structure
    • not too much nesting unless there are many files in a folder
    • all of our files live in app/, views/, or styles/
  • Try to be DRY
    • quantity-component.ts is reusable code used in both the BeerDetailsComponent and ConsumedComponent (session 5)

1. Components
2. Selectors should use kebab-case * SearchButtonsComponent has the 'search-buttons' selector (session 3)
3. Extract templates and styles into their own files when more than 3 lines * SearchComponent has a search.html and search.css (session 3)
4. Use @Input and @Output decorators instead of input and output properties * SearchButtonsComponent - nextPage, previousPage, shouldDisableNext, shouldDisablePrevious (session 3)
5. Put logic in in services * Serializer service (session 2)
6. Don't prefix events with "on" (event handlers are okay for doing that) * nextPage and previousPage events in SearchButtonsComponent (session 3)
7. Presentation logic belongs in component class, not the template * your blood alcohol content is computed behind the scenes in the ConsumedComponent (session 5)
8. Services
9. Use services as singletons within same injector * Serializer service (session 2)
10. Services should follow SRP * Serializer has one responsibility: maintain sessionStorage data (session 2)
11. Use @Injectable decorator for Angular DI system * Serializer service (session 2)