Experiments with a possible Angular2 project architecture

It should cover the following tasks:

• multi-tier architecture:

  • dal - Data Access Layer:
    • servers/* - abstraction of the HTTP/AJAX calls. Supports multiple servers and configurable PRODUCTION and SANDBOX urls. May handle any server specifics like settings (eg: withCredentials), raw-errors handling, common params, transforms, etc
    • api/* - set of pure (without any logic) endpoint-based methods to talk with your servers. Will be replaced by a Fake API layer for e2e.
    • fake/* - Fake API layer for e2e
  • bl - Business layer - your business reusable logic which will be used by components (send/retrieve, caching, validation, common logic, etc).
  • components - components with pages logic, related unit-tests and styles.
  • ... - any other semantically-named sets of project-specific entities (eg: cards, actions, widgets, etc)

• project skeleton

  • dev workflow gulp tasks
  • unit-tests
    • base skeleton + simple examples
    • coverage
  • e2e (protractor)
  • routing
  • production gulp tasks
    • build
    • unit
    • e2e using Chrome
    • e2e using FF
  • CI - Travis

• functionality

  • very-very basic app functionality (actually almost nothing - just load some data from server (production/sandbox/fake) and display list)
  • search for https://github.com/angular/angular/issues using Algolia
    • retrieve issues from GitHub => process => add/update on Algolia
    • display facets
    • showMore directive
    • unit-tests
    • e2e
    • filter using facets
    • search
    • ...
  • ... to be continued

• Hot Loader

Installing Local Env

• npm i -g gulp
• npm i

Running Local Env

• gulp server

  http://localhost - dev app with sandbox API urls

  http://localhost/mocked/ - dev app with Fake API data

• gulp server --env=production

  http://localhost - dev app with production API urls

• gulp unit

  run unit-tests in auto-watch mode using PhantomJS

• gulp unit --browser=Chrome

  run unit-tests in auto-watch mode using Chrome

• gulp ci-unit

  run unit-tests in continuous integration mode using PhantomJS

• gulp e2e

  run e2e tests using Chrome

• gulp build

  build dist version of the app

• gulp dist-e2e

  run e2e tests for the dist version app (gulp build must be run before)