Usability optimization

[DorianGrey]

This template started as a companion of https://github.com/flaviait/ng2-jspm-template, and initially was more like a quick shot to get a proper comparison between webpack- and systemjs/jspm-based setups for development of angular applications. Even though that comparison is already completed, I've decided to keep up this template for potential migration purposes, and for anyone searching for a setup with frequently used features and libraries included by default (ngrx is a good example here). Though the angular-cli project has evolved much since I've started with this, I'm not yet that comfortable with it. Esp. when it comes to extensibility and ejection, it's still far behind the capabilities of projects with similar intention, e.g. create-react-app for react. The setups it generates might be suitable for a lot a people - esp. beginners - but as long as advanced features and build-steps (as you know, webpack offers a lot of possible steps - suppose the only thing it can't do is serving a cup of coffee to my desk :smirk:) are literally impossible without ejection, I think there will always be a huge place for template projects like this - and that's why I'm still maintaining it.

However, since it started, I've also worked with other frameworks like react and vuejs, including potential setups: https://github.com/DorianGrey/react-ts-playground https://github.com/DorianGrey/vue-ts-playground Not all of the evaluated setups and build steps have proven their worth, but quite a lot have illustrated that the esp. the output of this template is a bit noisy, sometimes confusing and might lack useful information, thus drifting away from the focus of easy development. As a result of these evaluation steps, I've decided to adopt some of these dev and prod mode improvements to this template. An overview of what will definitely come and what is still under consideration can be found below. Since quite a lot of these changes are breaking ones, they will be added in a major release. The impact on your particular project depends on your level of customization, but in most cases, it will only require to adopt some of the new configs and the usage of the scripts.

Development will take place in this branch: https://github.com/DorianGrey/ng-webpack-template/tree/usability-rework Always open for suggestions!

Changes that will definitely come

General

• The folder structure will change a bit for more proper separation of config files, utilities etc.
• The new structure will take care of two kinds of assets: Those that are referenced directly from your code, and those that are just copied to be served, i.e. referenced dynamically.
• The scripts section in the package.json has grown quite large, even though most of the tasks only differ by the build parameters they set up. Most of these tasks might never be in use at all. This will be replaced by a config file containing the default config settings for both dev and build mode, which can be adopted to your particular requirements, and overriden via CLI for quick shots.

  Development mode

• At the moment, the unit tests are executed concurrently along the development server. This is not only quite noisy, it also causes readability problems when a projects gets larger and thus the test rebuild slows down. I've also faced projects where the watch mode (here: from Karma) stopped working after a couple of hundreds of unit tests. As a result, I've decided to remove the test execution from the dev task. It will still be possible to run them in watch mode in a different terminal tab, though. I will add the test execution as a prepush hook instead, so that tests are forcefully executed before pushing a commit.
• The current setup using concurrently and task chaining will be replaced by an own script. This allows more detailed orchestration. An example can be found here.
• Along with this change, the development output will be optimized a bit to something similar to what I've already set up in my vuejs playground (referenced above). An example: This will also affect error formatting.

Production mode

• Same as in dev mode, the build steps will be replaced by a specialized script (example) for the same reasons. It will no longer created different output folders per build option, but use a configurable output folder regardless of the build mode.
• In addition to the script, the build output will contain more useful information, instead of the webpack build details that are not interesting (apart from errors). Will also be based on the implementation of the vuejs playground as mentioned above. An example: I will a config option to toggle categorization, the screen includes the version with this option enabled.
• The current setup lacks a lot of PWA capabilities. While setting up all of them would be a bit too opinionated, at least these parts will be added:
  • An exemplary manifest.json.
  • An exemplary service worker, based on workbox, which is more modern and provides more capabilities than the one from the mobile-toolkit.
• The current prod-server tasks will be removed completely. They are quite messy since they always trigger a build and a test, and only serving the content afterwards. They will be replaced by a single serve command, which serves the content from the configured output directory of the build process. As a result, it will be possible to start the prod server without being forced to a build.
• The output directory will be more structured w.r.t. file types.

Changes still to be considered/discussed

Change test runner

You might have recognized that there are two branches in this repo, evaluating different test runners, namely:

• Jest (https://github.com/DorianGrey/ng-webpack-template/tree/jest-test)
• Mocha (https://github.com/DorianGrey/ng-webpack-template/tree/mocha-test)

While the latter still has some issues (e.g. this), Jest has shown that it works quite well and is a lot faster than the Karma-based approach, even though it requires a bit more of setup and mocks due to jsdom. I'm still not sure if these observations still hold true for larger or more complex projects. This is still in evaluation, input is welcome.

[DorianGrey]

The first part - usability rework - has been merged into master and release in V13.0.0.

The PWA abilities (e.g. service worker) are still work in progress.

[DorianGrey]

Service worker development takes place on this branch: https://github.com/DorianGrey/ng-webpack-template/tree/workbox-service-worker.

[DorianGrey]

Service worker has been merged as well: https://github.com/DorianGrey/ng-webpack-template/commit/957637b4fd17de49382e13d926fad882fa28f0fe

Thus - we're done for this step.