Is there an accepted Angular 2 ecosystem yet? - javascript

I'm an Angular 1 dev currently looking to get to grips with Angular 2, however with the changes and rewrites so far it's a bit of a quagmire.
All of the full ecosystems I've found are from late 2015, the testing ngdocs are outdated and there doesn't seem to be a clear up to date scaffold for Angular 2.
Has anyone come across a recommended setup or been able to set something up themselves? Something like Yeo is not strictly necessary but I'd need Typescript compilation and linting, live reload for development, unit testing, minification, SASS compilation and dependency management.
I would default to Gulp, Jasmine & Karma for the build system and tests but ideally I want to start off learning the best suited technologies from the start.
Bonus points for Webstorm integration :)

I'd check out the Angular-CLI project. It's an official CLI toolchain with testing and build built in. It's still a bit unstable with the changeover to webpack, but if you're working with RC software that's to be expected.

While waiting for angular-cli to become a bit more mature, I've been using the Fountain Webapp generator. Long term, I'll probably move to angular-cli.

Related

What reason is there to NOT use ahead of time compilation?

Since I know now, what "angular compiler" actually means, this would be my next question.
I read here about the positive and negative points of ahead of time compiling. To me, it boils down to this:
Use AOT for deployments
Use JIT for development
The only valid reason (imho) for JIT is, that it runs way faster (which is nice for the development process). Is there any other reason?
AOT has so many HUGE advantages over JIT, that I wonder why JIT is even an option for for a deployment.
Well, There are many difference and some of them are pointed out by you very well. It also dependent what kind of environment you are in and your requirement.
I have been using angular since angular-2.beta.17 when angular cli was not existed and we have to take the help of many build system and run environment to run the project in anywhere.
Systemjs building and running:
In some situation where multiple project and frameworks run together, you can not make a AOT build and bootstrap your code into the SPA and run. In system js environement you have to load the scripts one by one and they bootstrap it.
You must have seen this kind of build and loading script in many online tools like codepen, plunker, etc. I think they all uses systemjs loading
There are many other like commonjs loader, babel build system, webpack build system. But now angular cli is a bullet proof tool with internally use web pack and amber cli to handle everything you want.
Ahead of Time compilation and JIT debugging
As the name suggest AOT do a tree shaking and include everything which is really used in your code and throw away unused codes and compact the code size which can be loaded very fast. But by doing that it looses debugging control and don't give you a nice error message if in case in production you want to see what is wrong.
Same time JIT can point to the line number in typescript file which have the error and make your life super easy to debug while running in dev mode through angular cli.
You can get lot more in angular compiler and there are many tools and games available as well.
one of my favorite is ngrev

Migration path from legacy to webpack

I have a single page application written in JavaScript ES5 and Angular 1.x, Twitter Bootstrap, UI Router, and several other dependencies. It currently has no modules and no build system and only minimal minification. All code just lives in the global namespace.
The app started out as a prototype and having no build system was fine at first, but now its bigger and not having a proper build system starts to create all kinds of problems.
I would like to transition this app to a webpack 2.x world, as that seems to be the most promising build system right now. But I do not really know where to start.
Ideally I would like to do this gradually, such that I do not have to migrate all files at once.
I have experimented with Webpack 1.x and 2.x for a while, and also created a small prototype that uses Angular 1.x, but I still do not see a way to do the migration step by step. It looks to me as if switching to webpack is an all-or-nothing decision.

Angular2 - better use angular-cli or clean prepared before biolerplate?

I have a question about using angular-cli. I had used it, but I had trouble with override webpack conf, sass files, assets conf. In other hand I have nice boilerplate with karma tests sass and other confs, which is enough for most projects. Which solution is better? angular-cli or spent some time and get own custom boilerplate?
It is a personal answer and every developer would have its own.
Mine is:
Angular-cli should be up to date with the latest things in Angular 2 while with your own build/compile process may not.
There is no problem in using your own set, but you can be out of date without even known and end missing some good features that angular-cli may have.
But you should use what you think is better for you and your project. Any option will work. Like I said, is more a personal opinion then a absolute truth.

AngularJS: Dependency Management

We are currently planning a website which exists out of different AngularJS apps that will make use of common services. Services will be implemented in seperate files; to minimize the filesize of the apps we want to include/concatenate only those service-files that are used in the corresponding app - so we are looking for the best practise in dependency management.
is there something like requireJS in angular or what would you suggest to handle the includes?
thanks in advance .)
I suggest to use the same organization as ng-boilerplate:
https://github.com/joshdmiller/ng-boilerplate
I use an organization close to ng-boilerplat for one project and it allowed us to be modular in our dependency management.
For me, the only build/deployment system that works like a charm for most web apps that have extremely js computation is yeoman.
This quote should describe what it is/does:
Yeoman 1.0 is more than just a tool. It's a workflow; a collection of tools and best practices working in harmony to make developing for the web even better.
So basically, it is a npm that installs all the boilerplate files, dependencies and configures your whole app with the help of generators. It uses bower and gruntalso takes care of the hard part of configuring grunt that is in charge of building/deploying your app.
I highly recommend yeoman as a modern and efficient workflow.
I personally haven't looked at the ng-boilerplate as #Julio mentioned above, but you could easily manage to configure and use RequireJS with angular of you want to. I've done it and it works like a charm.

TypeScript Continuous Integration

Does anyone have a good strategy for adding TypeScript to a continuous integration system?
I'm planning on compiling it in my build and then running unit tests against it's generated JavaScript.
However, I'd like to add code standards checking for the TypeScript. Any ideas?
Thanks.
The TypeScript team are deliberately reserving judgement on the official coding standards because they want to see how people use the language in real life. Anecdotally, people seem to be following the JavaScript naming conventions, i.e. ModuleName, ClassName, functionName.
You can write your unit tests in TypeScript (tsUnit) or JavaScript (Jasmine, QUnit et al).
How you integrate it with CI depends a little on the framework and on the CI platform. I have integrated tsUnit tests with Visual Studio and TFS using the MS Script Engine to execute the tests. If you want more details on this particular set up I am happy to share.
One option is to set up TSLint and integrate it into your build process.
In my case (an Angular 2+ app), I added an npm task to run TSLint. Then the CI system (VSTS for me) executes that npm task. The CI system fails the build if TSLint detects any errors. The TSLint task I'm using comes from Angular's quickstart project. Here: https://github.com/angular/quickstart/blob/master/package.json [Notice the "lint" script]
Also note that TSLint's rules are configurable, so you can customize the coding standard to whatever you want to use.
Your question is vague; it's difficult to give a precise answer.
For integrating TS compilation into your build system, you'll want to simply invoke the TypeScript command line compiler (tsc.exe) on your .ts files. This will output the JS and you can run your unit tests against those.
Regarding TS code standards, I don't think there's any tooling available now that look at TS coding standards, seeing as how the language went public just a few months ago.

Categories