There are numerous choices for tooling in a TypeScript Angular 2 project. This list is no doubt incomplete:
SystemJS with JSPM
SystemJS without JSPM
Angular-CLI (which uses System and Broccoli and other things behind the scenes)
At Oasis Digital, we have worked with all of these variations, and experienced trouble at least with all of them but have been around long enough to have trouble with. There is no clear winner yet, there are only trade-offs.
Speed matters. Specifically, speed of the development cycle, of how long it takes to compile/recompile an application and reload it in the browser during development. (I’m less concerned with the speed of a “production build” because those happen much less often and usually without a human actively waiting.)
As of May 2016 (these things change rapidly) we have found the following yields the very fastest results for the development cycle:
Bundle libraries using JSPM/System-Bundler or WebPack, or use bundles shipped by the Angular 2 team.
Set up tsconfig to use “module”: “system” and “outFile”: “somebundlenamehere.js”. TypeScript both compiles your code, and produces a single-file bundle of the results. This is much faster than having typescript emit numerous files and then bundling them with another tool.
Run tsc in your IDE; don’t bother to “watch” from the command line or by other means – better for compile errors to land in the IDE. There is no benefit to simultaneously compiling in your IDE and in a concurrent “watch” – omitting that (for example, by moving away from Webpack) roughly cuts in half the total CPU effort spent on each development cycle.
To demonstrate how little work is typically needed to set this up, see the following tiny “fork” of the angular.io “quickstart”. This single commit shows the slightly less configuration needed with the “module”: “system” approach.
Of course, there is no benefit to this change in the quickstart application – the tutorial adds only a handful of components. But we have confirmed the performance lead with other teams developing on Angular 2 “at scale”. This approach is, as of May 2016, the fastest compile-reload cycle for large Angular 2 applications.
It might not last long; there are many efforts underway, including the official angular-cli, to build better development tooling. Moreover, Hot Module Reloading might make speed up the development cycle enough that the clean-reload time isn’t important.
I have written and spoken many times about the importance of getting started. This is a key idea in agile software development (or for that matter, to many other kinds of work). If you refuse to start projects until you fully understand how they can be completed, you will miss many valuable opportunities.
When in doubt, start. But start with a modest budget, because there is an opposite and equally unavoidable fact of life. To complete a project of any size (one person-hour, or 1000 person-years), a sufficient effort must be mustered. Sometimes some of my fellow agile lists talk about working on a huge project one bite at a time, planning just the next few iterations, just the next scrum, whatever. This is all good, this is all agile. But it is important not to ignore the size of the thing you’re trying to accomplish.
To accomplish something of size (fast enough for it to be valuable) requires an approximate overall understanding of its size, then committing sufficient “resources” of all kinds:
The list goes on
If it is not possible to commit enough firepower to the job at hand, then the right time to cancel or rescope an effort is at the beginning, not halfway through (the infamous point at which you are 90% of the way done but have 90% of the work still remaining). Keep that in mind next time a project is proposed. Understand the resources that can be committed, the overall scope of the project, and if they don’t fit, pick a different project.
I frequently work on projects where various developers are using various editors or IDEs. Some of these tools, and it would be rude to name names, have completely broken notions of how files and lines ought to end. Those of us who been working with text files for many years mostly agree on the following.
Every line, including the last one, ends in a newline character.
No trailing white space.
Happily, git will point out problems of this nature, and many editors can easily fix a file once open. But I often need to fix a whole tree of files at once. I have various snippets and batch files around to do this, here is the relevant one-liner for OSX:
Here’s a tip for the intrepid out there who are following the Angular 2 alphas. It has been somewhat harrowing, as alpha software tends to be. Here’s a problem I encountered today, and could not find an obvious answer anywhere on the Internet, therefore this post.
Here’s a critical piece of background, I have been using JSPM to manage dependencies in my Angular 2 work. I am using an alpha package manager with an alpha module loader to load an alpha framework and it’s mostly-alpha dependencies. Realistically it is surprising that it sometimes works at all.
I made the mistake(?) of falling behind a couple of weeks in the alphas – rather than updating one at a time I leapt directly from 37 to 40. With a bit of experimentation I found that breakage occurs starting with Alpha 38, and elaborate error failing to load a file Subject.js.
After reading numerous websites, Angular alpha diffs, and so on, it appears that this is related to the transition recently to “RxNext”, the upcoming next version of reactive extensions. The new dependency is visible in the top level package.json, for reasons unknown to me JSPM did not notice this and bring it in. Fortunately all of the sulfa software coordinated enough to fix the problem with a single command:
jspm install npm:@reactivex/rxjs
All of the Alpha stuff, that’s just life in your working with software on the edge. The one piece of this thing that I am a bit unhappy with is the name of the package mentioned above. This is the first NPM package I’ve encountered that begins with or otherwise includes a special character. I didn’t even know that was allowable, and I hope it does not become common practice.
Yesterday I saw the following video of a brief talk by Martin Fowler, in which he defines software architecture. I have grumbled about that term myself, in that firstly it is often ill-defined, and secondly it can be pretentious. I have sometimes defined software architecture as “high level design”, or as the design of systems complex enough to warrant substantial input from someone who is been around the block many times.
Fowler’s definition is crisp: Software architecture is those decisions which are both important and hard to change. This means it includes things like the choice of programming language, something architects sometimes gloss over or dismiss. Both aspects land squarely on the economics of software development. Said another way, software architecture is those decisions which, if made poorly, will make a project either succeed or fail, in a needlessly expensive way.
This connection resonates deeply with me. I have often talked about the economics of software development, the economic impacts of tool choices, the economic impacts of process selection, platform selection, etc. But Fowler’s talk made a connection I had never set out loud at least: the economic concerns, not only the technical ones, are software architecture.
Comments Off on Martin Fowler defines Software Architecture
Oasis Digital also offers training in Angular, which we call Angular Boot Camp. I kicked off the effort, created substantial portions of the curriculum and managed the curriculum for the first several years.