Xui

As mentioned, I went to this tech talk and learned of this GitHub project, Xui! (You won't be likely able to follow that link. It's private.) Interesting things to say about Xui (pronounced ex you eye) are:

• The team develops using JetBrains WebStorm as the IDE. Again, all of the work is AngularJS frontend work, only touching the backed through ASP.NET Web API calls for data marshalling (which may be easily mocked/stubbed in testing), so there is not an immediate need for Visual Studio though all of the team members, who have C# backgrounds, found WebStorm easy to pick up and warm up to. A beta of WebStorm 11 is available.
• The team embraces TypeScript, now on version 1.6, in the name of gleaning insights from compilation errors. The team's build process first runs a task that compiles the TypeScript to JavaScript and then follows up with a task that minimizes the JavaScript. GruntTS is a task that compiles TypeScript to JavaScript. It is recommended that you filter d.ts files out. Source Maps in TypeScript are simple files which may be generated with your JavaScript-from-TypeScript JavaScript which allow you to, when debugging JavaScript, figure out what line of TypeScript is responsible for creating a particular, questionable line of JavaScript. This allows you to debug TypeScript in a roundabout way. Yes, you may also just debug it directly with Visual Studio 2015.
• This is an AngularJS project! Angular 2.0 will be built on TypeScript. I remember hearing that there was a memory leak in the two-way binding in Angular and that, thus, the Angular team was just going to pull it out of version 2.0, but apparently it will remain. Instead of memory just being kept in $scope, the data will make its way back to the controller when applicable. Also, there is just now a maturing understanding in this space that you don't want to just two-way data bind everything. In a ridiculous example, if you had a form with one thousand form fields, you would want to cherry pick what really needs to be two-way databound. A better alternative to making a form with one thousands field though is to break the content up into a wizard format. That too helps with the two-way databinding data manipulations. (Some of what I offer in these notes comes not directly from the speaker giving the talk but instead from chitchat I had with others in the audience before the talk began.) Directives will not exist in Angular 2.0. The framework moves to a purely component-based model. Angular Materials seems immature. The team needs its own thing to keep reusable components and it has to be downwards compatible to IE9 and not just one browser version less than the current version which seems to be the trend across similar projects. The lack of IE9 support in similar existing tools (AngularUI Bootstrap is an example) puts the Xui team in a situation where they have to roll their own animal, namely Xui itself.
• Bootstrap is also used for layouts, grids, and responsiveness.
• Bower, kinda like NuGet in that it pulls dependencies, is used to pull dependencies from GitHub repositories. You may specify what particular versions to pull from the GitHub repositories with Bower so that new stuff doesn't surprise/sabotage you.
• NodeJS is used mildly in that it runs Grunt scripts. (I learned that WebPack is an alternative JS build tool. Er, I suppose I learned as much for a second time that is.)
• A lot of core concerns that are used over and over in the team's apps have become components in Xui. Diagnostics, dialogs, UI notifications, and even just a button are examples. You don't want a button looking six different ways across six different forms rights? Each component has basically three parts:
  1. a .html file
  2. a .less file (LESS is compiled to CSS)
  3. a .ts file (the TypeScript is referred to as the "code behind" in their paradigm)
  4. Unit tests are the fourth of the three pieces. They sit in the same folder with the rest of the code side by side with everything else. Protractor is used for end-to-end testing, yes, but in these cases, Jasmine is used for the unit tests. Karma runs the Jamine tests.
  <xui-button...
  ...is an example of how one of the components would be called out to in markup. grunt-ngdocs is a Grunt task that builds the components (and this tool is also used by the Angular team itself to do their documentation). Like AngularUI Bootstrap, this framework handles the "maybe for mobile" possibility by being responsive design-friendly.
• What are Angular watches? Angular has a loop for dirty checking. This loop is always going on in the back of your AngularJS app. (Always monitor your watches.) The Xui guys rewrote the loop for each component and now they have their own, independent watches.
• Plunker is a website that allows you to test and run JavaScript. The team has developers play with their components here before putting them into applications and grunt-ngdocs pushes to Plunker.
• grunt-html-to-js is going to crawl all the .html files and put routes to them in a .js file. This is a template cache.
• Jenkins is used for build facilitation. Source files are uploaded to it and it builds to a GitHub repository.