angular-webpack-starter icon indicating copy to clipboard operation
angular-webpack-starter copied to clipboard

Comparison to other Angular starters. Path to convergence.

Open dancancro opened this issue 8 years ago • 6 comments

This is a great project!

I have started adding the facts about this project to my collection and created the following work-in-progress comparison between it and some others. Now I'm looking for some help from you who know this project best. The goal is to help people choose among alternatives and also clarify a path to convergence. Now that the Angular-CLI project has provided access to webpack.config.js, this seems like a great time to start thinking about working together.

Once all the facts are in, we can talk about which things to add from which projects to which projects so that at the end of the day there are fewer, better choices.

If you would like to contribute what you know, please go here to get access to the database. All you need to do is scan through a Google Sheet and indicate which benefits this project provides.

Developer Experience great big angular2 example Angular-kitchen-sink angular-seed-advanced angular-webpack2-starter
Authentication X X
Authentication, with two-factor authentication UNIQUE
Can run on a desktop without a browser UNIQUE
Code coverage reporting (?) X X
Command line interface (CLI) X X
Compiled, supports ahead of time (AOT) compilation X X
Components communicate with events X X
Core Module X X
CSS style checking UNIQUE
Deployment automation, to a mobile native executable UNIQUE
Deployment automation, using Docker (?) X X
Deployment automation, using Heroku (?) UNIQUE
Error handling, Client-side logging X X
Hot Module Replacement (?) UNIQUE
In-memory server-side database UNIQUE
Local storage X X
No pluralization UNIQUE
Production build, generate docs (?) X X
Renders markup on the server (universal) (?) UNIQUE
Separation of smart containers and dumb components (?) UNIQUE
Server-side integration & unit tests X X
Shared Module X X
Single source of truth, central state management, without lots of boilerplate (?) UNIQUE
Style guide for code (?) X X
Update generated code in an existing app UNIQUE
User Experience great big angular2 example Angular-kitchen-sink angular-seed-advanced angular-webpack2-starter
Account Management, Forgotten Password with Resetting UNIQUE
Account Management, login/logout X X
Analytics UNIQUE
Asynchronously loaded data example X X X
Breadcrumbs (?) UNIQUE
Derived, computed properties X X
Dynamic component creation UNIQUE
External, 3rd party, API interaction X X
Footer UNIQUE
Full-stack CRUD (?) X X
Full-stack CRUD, with Create, Update and Delete X X
Full-stack CRUD, with Create, Update and Delete, individual records X X
Full-stack CRUD, with Create, Update and Delete, whole data structures UNIQUE
Full-stack CRUD, with Read X X
i18n, localization (?) UNIQUE
Many-to-many data UNIQUE
Mouse wheel (?) UNIQUE
Navigation bar X X
Panels, draggable X X
Responsive styles UNIQUE
Search, actually works with backend API UNIQUE
Dependencies great big angular2 example Angular-kitchen-sink angular-seed-advanced angular-webpack2-starter
Backend Frameworks Express Express Express
Client-side API interfaces @angular/http @angular/http @angular/http @angular/http
Continuous integration testers Travis Travis
Convenience method libraries lodash lodash lodash
Databases Redis
Documentation generators typedoc typedoc
Frontend Frameworks Angular 2.0 Angular 2.0 Angular 2.0 Angular 2.0
Languages JS ES5, JS ES6 (ES2015), JSX (opt), Typescript JS ES5, JS ES6 (ES2015), Typescript JS ES2016, JS ES5, JS ES6 (ES2015), Typescript JS ES5, JS ES6 (ES2015), Typescript
Linters codelyzer, ESLint, stylelint, tslint codelyzer, tslint tslint
Loaders/Bundlers Webpack Webpack Rollup, SystemJS Webpack
Misc Angular Style Guide, Helmet, nodemon, Redux, redux-devtools, RxJS Immutable, Redux, redux-devtools, RxJS Angular Style Guide, cssnano, Electron, Redux, redux-devtools, RxJS nodemon, Redux, redux-devtools, RxJS
Package Managers npm npm npm npm, Yarn (opt)
Routers Angular Component Router Angular Component Router Angular Component Router Angular Component Router
Runtime Environments Node Node NativeScript, Node Node
Stacks angular-cli angular-cli mgechev's angular-seed
State Managers ngrx ng2-redux ngrx ngrx
Task Runners Gulp Gulp
Test assertion libraries Chai, Jasmine, Mocha Chai, Jasmine, Mocha Jasmine Jasmine
Test coverage reporters Istanbul
Test runners Karma BrowserSync (opt), Karma Karma
Transpilers libsass libsass libsass
Widget collections Angular Material Angular Material Angular Material

EDIT: Added "Renders markup on the server" as the benefit of Angular Universal delivered by angular-webpack2-starter

EDIT: Added State Managers dependencies section for ngrx and ng2-redux

dancancro avatar Feb 18 '17 18:02 dancancro

Very good post! A row missing is a row about the support of Angular Universal

Tuizi avatar Feb 18 '17 18:02 Tuizi

I think https://github.com/AngularClass/angular2-webpack-starter might be worth adding

Matmo10 avatar Feb 18 '17 20:02 Matmo10

@Matmo10 Thanks. I don't have any info about that one yet, but you are welcome to fill in the details about it if you know it. Just go here and request access to the Google Sheet.

Here's a good list of other ones too. https://www.reddit.com/r/Angular2/comments/5rj14a/helpful_angular_2_github_repos_curated_through/

dancancro avatar Feb 18 '17 20:02 dancancro

@dancancro Maybe you could add a row about @ngrx/store and @ngrx/effects integration? That's a big feature imho.

Waterstraal avatar Mar 27 '17 09:03 Waterstraal

@Waterstraal I added the State Managers row to the dependencies section.

The database contains thousands of possible technology selling points and I give each one an importance weight based on my imperfect judgement.

To keep the above report to a reasonable size, the way it works is that it filters out benefits whose importance score is below a certain threshold and benefits that are delivered by all of the contestants in the report. In this case the benefit delivered by ngrx, "immutable state", is important but also delivered by all of the projects. So it doesn't appear in the table. However the dependencies part includes every project dependency (that I have in the db) even if all the options have it.

Now, if you know of something that's both important and delivered by ngrx but not ng2-redux, then that would show up because one of the options uses ng2-redux and not ngrx. So far I don't know of any salient distinction between them and I wish that they would just converge and make life a little easier. :)

dancancro avatar Mar 27 '17 17:03 dancancro

@dancancro Thank you for this, and your quest for a defacto starter for angular2. I was hoping angular-cli would move into that direction, but I think it would need a plugin system, or custom blue-prints for that to be flexible enough.

And I did not know that all starters have an immutable state solution built in, so that's already something I learned by putting it in the table, and not only the differentiators :).

Waterstraal avatar Mar 27 '17 22:03 Waterstraal