Angular CLI With .NET Core

Angular is a fantastic platform for building rich client side apps, but let’s not forget about the back end. My choice for the back end is ASP.NET Core. If you’re not shy about spending a bunch of time setting up Webpack, Angular and ASP.NET Core is a fantastic combination.

However, I prefer to spend my time building applications, not configuring build tools. Angular CLI takes a lot of the pain out of using Angular, but it’s a self contained command line tool. Fortunately, Angular CLI and ASP.NET Core can happily co-exist. In this post, we’re going to build an application using these two technologies together. By the end, you’ll be ready to have all the goodness of Angular and ASP.NET Core without spending a week setting up Webpack.

Prerequisites

Make sure you have .NET Core, Node.js and Angular CLI installed.

https://www.microsoft.com/net/core#windowsvs2017

https://nodejs.org/en/

npm install -g @angular/cli 

Getting Started: ASP.NET Core App Setup

Fire up Visual Studio (I’m using VS 2017) and create a new ASP.NET Core Web Application. Select the Web API Starter. This doesn’t bring in any web stuff, which is ideal. We’re going to use Angular CLI to generate the client files.

Then go ahead and disable automatic Typescript compilation. We want CLI to compile our Typescript, not Visual Studio. Do this by adding the “TypeScriptCompilerBlocked” line to your csproj file.

Head on over to the Startup.cs and add in the static files middleware. You’ll have to install the “Microsoft.AspNetCore.StaticFiles” NuGet package. After that, add app.UseDefaultFiles() and app.UseStaticFiles() to your Configure() method.

After you get those setup, you’ll want to add some middleware to redirect those pesky 404s to the root file. This will allow you to navigate the application without having to start at the root each time you hit refresh. For this app, api routes are prefixed with “api”, so we’re excluding those routes from the check. We’re also excluding routes with a file extension since those are likely static assets.

To prevent the app from loading up the api/values endpoint by default, go to properties/launchSettings.json and change the “launchUrl” keys from “api/values” to “”.

At this point, our .NET Core app should be ready to go. Let’s move on to the Angular code.

Setting Up Angular CLI

We’re going generate our Angular app on top of our ASP.NET core app. To do this, go to the command line and navigate to the directory of your solution file. Then run “ng new <your app name>”.

You want the <app name> part to be the same as your .NET Core source folder. This will drop all of the CLI files into your ASP.NET Core root folder. It should look like this:

Gluing It All Together

Angular has a default file structure, but it’s not ideal for the existing ASP.NET Core application. Fortunately, Angular CLI has some options that will allow us to change this structure. We want the client side code to be in a folder called “client-src” and the client side build artifacts to go to the wwwroot folder. To do this, rename the “src” folder to “client-src”. Then go to go to .angular-cli.json. This is the primary configuration file for Angular CLI. First, change “src” to “client-src”. Then change the “outDir” attribute from “dist” to “wwwroot”. This will drop all of the compiled assets into the wwwroot folder.

At this point, we can build the Angular application using Angular CLI. Navigate a command prompt into the main application folder and run “ng build”. This command will build the client side part of the application, dropping the build artifacts into wwwroot. The wwwroot folder should look like this:

  

At this point we should be able to run the app by hitting the Run button in Visual Studio. Unfortunately, we still have a two stage build pipeline. The first step being “ng build” to generate the client side files and then running the .NET Core app. To fix this, we can drop in a post build script: “ng build — aot”. This will compile the client side files (with ahead of time compiling) after the app builds.

Bonus Points

If you’re using git, you’ll want to add the wwwroot folder to your .gitignore file. These files are generated, so you probably don’t want to check them in.

Example Code

All of the demo code used in this post is available here:

https://github.com/DustinEwers/shiny-angular-demos/tree/master/ninjas-quest-cli-core/ninjas-quest

This demo includes a full Angular application on top of ASP.NET core. Feel free to use this as a template or something to look at while building your own. You now have everything you need to get started building shiny applications using Angular CLI and ASP.NET Core.

Book Review – Crucial Conversations

Ever find yourself in high stakes situations where even the slightest miscommunication can bring everything crashing into the ground? If so, Crucial Conversations has you covered. Crucial Conversations is a book about how to better navigate high stakes conversations. Unlike most business books, Crucial Conversations is packed with actionable information.

Why bother?

Why is this an important skill for developers? People think software development as a process where people in a windowless basement turn pizza and caffeine into software. The reality is that software development is more about communication than technology. We build software in teams. We build software for people. We need to figure out what those people want. We need to be able to have honest conversations when things don’t go as planned (which is always). Creating a free flowing dialog is absolutely essential to creating valuable software.

Beyond building software. Developers who want a lucrative career find themselves in high stakes negotiations. These include, project scope discussions, salary negotiations, and job role discussions. Learning how navigate these situations can add thousands of dollars to your lifetime earnings. Not bad for a $10 book and a few hours of reading time.

Main Ideas

Everyone has high stakes conversations. These include high pressure negotiations, impassioned arguments, and delicate interventions. Crucial conversations come in many different flavors. What links them together is that the results of these sorts of conversations have an out-sized impact on your life. Screw up one of these and you could be feeling the pain for years to come.

The key to navigating crucial conversations is to keep a free flowing dialog between the participants. To create free flowing dialog, maintain psychological safety. The primary goal of someone in a crucial conversation is to create and maintain a psychological safe space where both parties can express themselves without fear of anger or retribution. If everyone can get everything onto the table, you can usually figure out the correct path.

To cultivate psychological safety, you need to control your own emotions. Many people cast their own stories into “victim and villain” narratives. Playing the victim causes other people to get defensive. This defensiveness erodes psychological safety. Without psychological safety, people retreat to “silence or violence”. They either shut down or defend themselves with hostility. Usually emotional and verbal hostility, but sometimes physical hostility. Responding to a conversation with silence or aggression is “the fool’s choice”. Avoid the fool’s choice at all costs.

The book describes many techniques to maintain dialog. I’m not going to list them all out here, but a few include:

Shared Purpose
People generally have some shared goal in the conversation. Reminding people of that goal can inspire mutual cooperation.

Contrast and Clarification
Use contrast to clarify what you want. Prevent misinterpretation. Everyone has a plethora of cognitive biases. It’s easy to misinterpret wants and needs in high pressure situations. Contrast what you actually want with what people think you want.

“Start with Heart”
Figure out what you actually want from a situation and take your ego out of the equation.

Related Concepts

Radical Candor
Radical candor is where you are willing to challenge people directly, but with a high degree of empathy. It’s the useful alternative to being a wimp or an asshole.

Find out more about it here: https://www.radicalcandor.com/about-radical-candor/

Cognitive Distortions
People have a variety of intellectual distortions. These are also referred to as cognitive biases. Watch out for cognitive distortions in yourself or others. There are dozens of these, but Psychology Tools has put together handy chart detailing some of the major ones:

Web site – http://psychologytools.com/unhelpful-thinking-styles.html
PDF – http://media.psychologytools.com/worksheets/english_us/unhelpful_thinking_styles_en-us.pdf

Ego is the Enemy
A big part of being a better negotiation is learning how to disarm your ego. Lots of people forget their mutual goal and try to “win” an argument. This is usually waste of time. Focus more on your goal and less on yourself. Ryan Holiday has a fantastic book about this.

Ego is the Enemy (Amazon)

Conclusion

Being able to successfully navigate tough conversations is an essential developer skill. Crucial Conversations has a variety of techniques to better navigate high stakes conversations. For the sake of yourself and everyone who has to work with you, work on your communication skills.

Crucial Conversations (Amazon)

Debugging Angular Apps with Augury

I recently went on a hunt for Angular (formerly known as Angular 2)  profiling tools.  Angular is a fantastic framework, but the component hierarchies can get a little crazy. Fortunately, there’s a way to tame the complexity. After some Google searching, I came across Augury. Augury is a debugging and profiling tool created by Google and Rangle.io.

Augury is simple to install. First, install the Augury Chrome Extension (Sorry Firefox lovers, no soup for you.) There is no step 2.

Once installed, Augury shows up as a new tab in your Chrome Developer Tools. If you have an Angular app running in debug mode (it doesn’t work on prod mode), the tab will show several visualizations of your application. The first one is the component tree, which lays out the components for whatever page you are on. Click a component to see the properties and events for it. You can also manipulate the underlying models and trigger events. Additionally, each component is has a link to its source code. If you want to set a breakpoint, just click and you’ll be right there.

 

You can also get a visualization of injected services by clicking on the Injector Graph. It’ll help you figure out where your dependencies come from.

 

If your application is using routing, click on the routing tree tab to get a visualization of the routing structure.You can click into the routes to see what url triggers them, along with other route information. If you happen to use lazy loading, those routes are marked as “lazy loaded” until you access them.

If you want to see a breakdown of your application’s module structure, click the NgModules tab. This is a good way to get a high level overview of your application.

 

Overall, Augury makes it easier to reason about your Angular applications. By visualizing the component trees, routing, and module structures, you get a high level overview of your application’s structure. Additionally, the extra debugging features add a layer of easy to the already fantastic Chrome Developer tools. I’ve added this to my day-to-day Angular tool belt and urge you to do the same.

More Information

Augury Home

Augury Guide

To Win At Work: Be A Jack of All Trades, Master of One

Want to double your chances for success? Learn something new. Diversify yourself.
 
The idea of diversifying yourself by learning new skills is a common idea with many names. Scott Adams calls your mix of skills a “talent stack“. Each skill you add to your talent stack roughly doubles your chance of success. He claims that you’re better off becoming proficient (top 75%) at a variety of skills than trying to become world-class (top 99%) at one. Here’s an example of a talent stack in action.
 
Brett McKay at the Art of Manliness describes the T-shaped person. A t-shaped person who has both broad and deep knowledge. A jack of all trades, but master of one. You specialize in a few skills and support them with a broad base of general knowledge. For software developers, this means supplementing your developer skills with skills from other fields
 
I like to think about a portfolio of skills. Like a portfolio of stocks, some skills are rising in value, some skills are dropping in value, and some are steady. Like portfolio of stocks, diversification of skills makes you more valuable.
 
Regardless of what you call it, diversifying your skills is important.

Why?

There are several reasons to diversify yourself.
 
Usefulness
Each skill you learn means you can do more. Each new skills adds to your usefulness as a person.
 
Creativity
The basic process of innovation involves the recombining and transformation of ideas. Each new skill you learn gives you a pile of new ideas you can use to fuel your creativity. Many innovations come from taking skills from one field and applying them to another one. The lean movement in software development borrowed from the lean manufacturing method. Thomas Edison was famous for taking ideas from one field and applying them to another.
 
Empathy
The more skills you learn, the more people you can communicate with. Teddy Roosevelt was famous for this. He read several books a day. His broad knowledge allowed him to communicate with people from many different backgrounds. In software development, learning the terminology of business makes it easier to write requirements. Continuous communication with the business is one of the key tenets of agile software development. Learning about business makes that continuous communication much more productive.
 
Obsolescence
Technology moves at a fast pace. Skills that were valuable a few years ago are worthless today. In some ways, technologists are perpetual beginners. Learning a variety of skills, especially non-technical skills, gives you insurance against obsolescence. Non-technical skills are what separate a senior developer from a junior one.
 

What?

Now that I’ve convinced you to learn something new, where do you begin? I’ll give you the classic consultant answer… it depends. You need to make up your own criteria. Look for a combination of what interests you and what’s useful to others.
 
Here’s a few of my criteria:
Does this help me create common ground with other people? Examples: common hobbies, sports
 
Does this give me a new viewpoint or a new way of looking at problems? Examples: statistics, psychology, economics, design, art
 
Is this applicable to my career? Examples: design patterns, business skills, copy writing, communication skills
 
Is this something fun that I can use to make people laugh? Examples: history, weird trivia, humor
 
Does this increase my objectivity? Examples: argumentation, Stoicism
 

My Own Talent Stack

I cultivate a variety of skills. My primary career goal is to use software to solve difficult problems. I tend to focus on skills that help me do more.
 
Software Development – Primary skill set
Business – I read a lot of business books and study various aspects of marketing and finance. I’m also into small businesses. Most of us are working for businesses. Knowledge of how businesses work and how the business you’re in works is vital to being a good software developer.
Psychology – I love psychology. It gives me a whole new lens when dealing with people. I’m into cognitive and organizational psychology. I look for anything that helps me learn faster or understand human behavior.
Writing – Being able to write clearly is essential for all professionals. Writing clearly is thinking clearly.
Public Speaking – Public speaking is challenging and useful.
History – Those who don’t know history are doomed to repeat it. History also gives me interesting anecdotes to tell at dinner parties.
Philosophy – I’m a big fan of stoic philosophy. It’s a great philosophy for dealing with the chaos of modern life. Finding a practical philosophy of life gives your life structure. Religion works here too.
Design – A little design knowledge goes a long way. I’m no artist, but I can make a decent looking app without a designer. 

How?

There are lots of different ways to learn new things. Many of these methods are easy to integrate into your life. We all have a limited amount of time, so I like to use learning methods that capitalize on otherwise wasted time. My primary target is the time I spend in the car. Additionally, there’s so many inexpensive ways to learn new skills. Here’s a few of the ways you can learn some new skills.

Books
The easiest one is to read books. Books are cheap and accessible. If you don’t have a lot of time to read, get yourself an Audible subscription. Most books are also available in audio form.

Courses
College courses are nice, but there are better options. The Great Courses publishes classes taught by leading professors. I like to listen to them on my way to work. You can also access college level courses through moocs like EdX, Coursera, and iTunes U. Additionally, Udemy has a wide variety of inexpensive courses (wait for their $10 sales).

Commonplace
In order for your hard-won knowledge to be useful, you need to remember it. One method I use to learn better is to keep a commonplace book. A commonplace book is a collection of notes and quotations from the things you’ve read. This used be a common practice, but it’s coming back as people discover how useful it is. I record notes on anything interesting that I read. I also collect scraps of articles and interesting quotations. I keep these in a OneNote notebook that I can refer to. I also review things I’ve read before and add to my commonplace file. This cycle of note taking and review helps me get more out of what I read.

Organizations / Clubs
There’s a meetup for everything. Go find a group of people you can learn from. It’s often easier to talk to someone than to scour the Internet for resources. I’m looking into more agile groups to expand my business skills.

Make Stuff
This is one of the best ways to pick up new skills. If it’s a “maker” skill, like design or programming, build something. Side projects are a great way to learn something new. If it’s not a “maker” skill, like psychology, make something with the knowledge. Write a blog post or a talk. I never feel like I’m proficient until I use my knowledge to make something.

Conclusion

If you want to be more successful, learn a new skill. Each new skill makes you a more useful person. If you want to be more creative, diversify yourself. Diverse knowledge gives you more resources to draw from. If you want to win at work, be a jack of all trades, master of one. There are lots of learning resources at your disposal. Put them to work for you.

The State of Local Profiling on ASP.NET Core

If you want to improve it, you need to measure it. We use profiling tools to get the insight required to find and destroy application bottlenecks. I’m a big fan of local profiling tools that you can install and run from within your application. My favorites are Miniprofiler and Glimpse. Unfortunately, many of the tools that are available on regular ASP.NET are not available for ASP.NET Core. In this post, we’re going to explore our options for local profiling in ASP.NET Core. Currently, it’s slim pickings, but there are a few tools available.

Combing the Desert

The state of .NET Core Local Profiling Tools

For standard ASP.NET (non-core) Applications, there are a variety of profiling tools available. Some of those tools cost money and others are free. Unfortunately, most of them lack ASP.NET Core support. This is, in part, because ASP.NET Core is new. Additionally, our good friends at Microsoft have thrown the community a few curve-balls with the last few versions of the .NET Core. Most companies don’t want to waste their time building tools if the framework is going to have a ton of breaking changes. This is especially true for free tools.

Here’s the status of a few popular tools (as of January 2017):

MiniProfiler
The folks at Stack Overflow are waiting for a more stable version .NET Core to build their .NET core version of Miniprofiler. They said they will build a new version, but they only want to do it once.

dotTrace
JetBrains has not released a .NET Core version of dotTrace, though they claim some functionality with the current version. I’ve never tried this one, so I have no idea if it’s worth waiting for.

Glimpse
I love Glimpse. It’s one of my favorite profiling tools. The folks behind Glimpse put out a Beta version of Glimpse about a year ago. It lacked full functionality and no longer works. They appear to be working on the new version now. Their GitHub repo has recent check ins, so I’m hoping a new version appears soon.

Application Insights
This is Microsoft’s default solution for application performance monitoring. It’s meant to be used in conjunction with Azure, but you can run it locally and use Visual Studio to look at the results. Once hooked up to Azure, you can use this as a general application performance monitoring (APM) tool. It’s installed by default in new ASP.NET Core Projects (look at the startup.cs), so Microsoft really wants you to use it. I kicked the tires a bit. Prefix is a competent option for ASP.NET Core.

Application Insights in action:

Stackify Prefix
Stackify prefix is a free tool you can install on your PC that monitors your ASP.NET applications. You’ll need to also install it in your project, but once you do so, you get access to detailed information about your application’s requests. They have a paid version of the Prefix and a related APM product, so there’s some commercial backing here. I’ve tried out Prefix a few times and the tool is adequate for local profiling. It gives you the data you need, but I’m not a huge fan of the development experience. That being said, the tool gives you access to lots of data and works on .NET Core.

Stackify Prefix in action:

Conclusion

I’m still waiting for a new version of Glimpse (or Miniprofiler), but Stackify Prefix and Application Insights are good tools. I miss the easy to use inline monitoring of Glimpse, but Prefix and Application Insights have their advantages. Not only are they supported on .NET core, they also hook into more robust monitoring systems. You will be well served by either option. Go forth and monitor your apps, it’ll save you a lot of pain down the road.

How To Deal With Tech Overload: Focus on Value

Golden Hammer

By walknboston (Flickr: Gavel) [CC BY 2.0 (http://creativecommons.org/licenses/by/2.0)], via Wikimedia Commons

The technology landscape is exploding with new things to learn. From virtual reality to app enabled refrigerators to the JavaScript flavor of the week, we are drowning in new technologies. Unfortunately, none of these new things are cybernetic brain enhancement. We can only learn so much. What criteria can we use to winnow down the technology avalanche and focus on what is important?

Usefulness should be your primary criteria.

Let’s unpack that a bit.

Software is a tool. We use it to build things of value for people. Either our customers, our users, or ourselves. We build to provide valuable software for people. A lot of developers lose sight of this when they look into new technologies. They fall in love with a technology because it’s shiny, or interesting, or scratches an intellectual itch. It’s the old “golden hammer” antipattern. Find something shiny and use it to build everything, even if it’s not the best tool for the job or doesn’t really improve upon existing technologies. We can do better. By focusing on what’s useful, we can skip the majority of new technologies and keep our sanity.

To figure out what’s useful, we need to ask a few questions. Write down your own answers as you read through this exercise.

Who is your audience?

As developers, we serve one or more audiences. Each of these audiences has different needs. It’s your job to figure out which audiences you serve (or want to serve) and what they need. Perhaps you are spending most of your time in a full-time job, but want to start your own business. Perhaps you just work for the man. Figure out which audiences you serve and their relative priority. If you want to serve a new audience, think about what you will need to learn for them as well. Additionally, look for synergies. If you have more than one audience, find overlapping technologies.For example, if you want to build your own business on the side, use a similar tech stack to the one you use at your job.

Here’s a few audiences you can serve:

Employer

Your employer usually works with a specific tech stack in a certain industry. Focus your efforts on their current tech stack, new versions of that stack, and new technologies that would fit well within their current environment. If you work at a .NET shop, don’t waste your time on Java. If you work on a native iOS or Android team, learning Ionic is a bad plan. Find technologies that help business units create more value. If you don’t know how your business operates, add that to your “to learn” list.
 
A good example of a useful technology would be Docker. Docker allows for faster and more consistent deployments, which helps improve time to market. This can give a business a real competitive advantage. Another good example would be mastering performance tuning in your particular stack. Lot’s of case studies show performance adds to the bottom line.

Public Code / OSS

Open source projects have different goals than enterprise shops. There’s some overlap, but OSS is built differently. If you do OSS, figure out which projects you want to contribute to and focus on their tech stacks. Also think about what value you can bring to the developer community.

Small Business

If you run an app business or an ISV (independent software vendor), focus on technologies that create customer value. For example, while functional programming is cool, you’re better off mastering digital marketing or product design instead. Focus on technologies that help you get products in front of customers quickly. This doesn’t always mean new technology. There are a lot of Rails 2, jQuery, and ASP.NET Webforms apps out there still generating significant value for their customers.

Self

It’s OK to learn something just for fun. Lots of people write code as a hobby, but make sure you understand that the time you spend building robots or smartwatch apps is hobby time, not professional development time.


I have three audiences. I work on a team that builds data driven applications using .NET Core, Angular, TypeScript, and Spark. I also serve the broader technical community by speaking at conferences and blogging. Eventually, I want to build a small software product and sell it. I achieve synergy by focusing my community efforts on things that I either use in my day-to-day work (like Angular) or things that will serve me in business (innovation).

What makes you special?

What special qualities do you bring to the table? Are you an amazing debugger? Are you a UX genius? Are you good at cutting to the core of team issues? Do you have an underrepresented perspective? Everyone has specific skills that are both unusual and valuable. Focus your development efforts on expanding and complementing what makes you special. For example, if you’re a talented at building user interfaces, spend the time to skill up on Angular or React. If you’re the performance expert, check out that shiny new profiling tool. It’s often better to expand a strength than moderate a weakness. 
 
——
 
I know more about UX and front end development than most of the .NET developers I work with. I’m also good at keeping my cool when things get crazy. People have called me “Spock” before, which I take as a compliment. I also have a variety of non-developer skills, like public speaking and psychology, that allow me to think differently.

What do you already know?

Take inventory of your current skills. Focus your efforts on technologies that expand what you can do with your current skills. For example, if you know Ember and Angular, investing effort in learning React is going to net you diminishing returns. However, investing in Web API, Electron, or Ionic will add new capabilities to your skillset. Realize that specific technologies fade with time, but investing in fundamentals is always a good bet. Who knows what the JavaScript ecosystem is going to look like next year, but knowing the fundamentals of JavaScript, performance optimization, and UX will still be valuable.
 
——
 
My current skill set revolves around Angular, TypeScript, SQL Server, and ASP.NET MVC. I want to learn more about data tools, especially the ones in Visual Studio. The Microsoft ecosystem is gaining some interesting data capabilities that can add a lot of value.  I may also do an exploration of Ionic 2 and progressive web applications. Both of those are good ways to use existing skills in a new way. I’m also working on my public speaking and written communication. Communications skills never become obsolete. 

Practical Application

Now that you know what’s useful for your situation, let’s use that knowledge to make your life easier. You likely have a list of technologies that you’re interested in or feel obligated to keep up with. I have a whole radar of them. Take that list and run it through the criteria you figured out. If the technology doesn’t help you add value to one of your audiences, cross it off the list. Rank everything else based on its relative value.  Use your criteria to combat “shiny object” syndrome when you encounter a new technology. You’ll likely still have more things on your list than you can learn, but your list should be manageable.

If you want to survive the constant stream of new technologies with your sanity intact, make your primary technology criteria value.

Cutting Through The JavaScript Toolchain Thicket with Angular CLI

If there is a developer hell, one of the circles will involve the JavaScript toolchain. The JavaScript ecosystem is awash in tools, choices, and configuration options. Combine that with spurious documentation and constant change and you have a jungle of pain awaiting any brave soul who dares build a modern JS application.

Much has been done to ease JavaScript toolchain fatigue. There are templates and starter packs for most of the popular JS stacks. If you’re using Angular 2, the Angular team has created a tool called Angular CLI. It encapsulates all the best practices into one handy command line tool. Angular CLI shortcuts most of the Angular 2 setup. Just run a few commands and you have a working application. In addition to the build tools, you also get a set of scaffolding tools. If you’re familiar with the Ruby on Rails scaffolding tools, Angular CLI will feel right at home. In the interest of trying new things, I decided to kick the tires on Angular CLI and see if it lives up to the hype. I took my demo Angular 2/TypeScript/Webpack application (repo here) and ported it over to Angular CLI.

Installing Angular CLI

npm install -g angular-cli

Install the Angular CLI tool using NPM. Make sure to run the npm install as an administrator. Easy peasy.

Scaffolding an Application

npm install -g angular-cli
ng new <my app name>
cd <my app name>
ng serve

These commands will spin up a basic app structure for you to use. This app structure has a lot of goodies included. Testing, linting, hot module loading, and a decent starter app all come with the basic template. CLI abstracts away the webpack setup, so you don’t have to figure that out. It even includes a basic demo server for you to serve your application from. The only thing that the angular cli doesn’t include is a style library. I’d love to see Angular Material or Bootstrap included with the CLI, but I’ll live.

Here’s what comes out of the box with a new Angular CLI Project:

I was curious about how up to date the basic setup is, so I ran “npm outdated”. NPM packages change often. It looks like most of the packages are close to their most recent version, but the CLI used Angular 2.3 instead of Angular 2.4.

Generators

Boilerplate code sucks and Angular 2 has a bunch of it. There are lots of small files that need be built when you add a new component. Angular CLI has generators to help with that. I tried out a few of the generators. I found the component generator to be particularly useful. It builds out the template, code, and spec files. It also adds the component to its root module. This is a great time saver. The route generator was far less useful, however, as it didn’t do anything. It looks like they’re going to add it back in later.

Styles

The default template doesn’t include any style libraries, so I pulled in Angular Material (currently in beta).

To install:

npm install --save @angular/material

Then you need to pull it into your app module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { CharacterBuilderComponent } from './character-builder/character-builder.component';
import { EncounterComponent } from './encounter/encounter.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { StatsComponent } from './stats/stats.component';
import { HomeComponent } from './home/home.component';
import { MaterialModule } from '@angular/material';
@NgModule({
declarations: [
AppComponent,
CharacterBuilderComponent,
EncounterComponent,
NavMenuComponent,
StatsComponent,
HomeComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
MaterialModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Finally, add a theme file to your site.css. There are several pre-built themes, but you can make your own if you want.

@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';

After importing the styles I ported all of my demo code over into the angular cli project. This process was surprisingly easy. Unfortunately, the Material styles are not as robust as the Bootstrap styles. I’m sure I made a mistake somewhere, but I wasn’t really going for maximum style, so I let it go. I’m looking forward to Material UI being ready for primetime, but I don’t think it’s quite there yet.

Final Verdict

I wouldn’t use Angular CLI in production (yet), but I think it’s a fantastic tool for playing with and learning Angular 2. It takes the most painful part of setting up an Angular 2 project and makes it a breeze. You can get up and going faster than building an environment from scratch. I’m going to keep an eye on this project and see how it develops. If you build Angular 2 apps, I recommend you do the same.

Here’s the final result:

https://github.com/DustinEwers/typescript-demos/tree/master/ts-demo-node/ninjas-quest

Building Tech Radars for Fun and Profit

The technology landscape is exploding. New technologies, platforms, and tools are being creating at an ever-increasing rate. VR, AR, and wearables give us new app stores to target and new experiences to create. Conversational UI (Alexa, Bots, Cortana API) is a totally new way to interact with users, and another dozen different platforms you can target. Even the web space is exploding. It feels like there’s a new JavaScript framework roughly every ten minutes.

All of the new stuff is amazing, but also exhausting. There’s so many new things out there. Finding your focus is hard.

confused kitty

Keeping track of all this new stuff is tough, but we have tools to help us. One of those tools is tech radar. A technology radar is a collection of new technologies and how important they are to you or your organization. You enumerate new technologies and assign them a value somewhere between “run away screaming” and “let’s use this for EVERYTHING”.

The tech radar was created by Thoughtworks. They publish their radar a couple of times a year. It’s a great snapshot of what technologies they are using in their organization. I recommend you check it out.

Thoughtworks Tech Radar

While the Thoughtworks tech radar is great, it’s more fun (and useful) to do it yourself. Neil Ford has a fantastic talk about building your own tech radar. Check it out here:

In his talk, Neil mentions two tech radars. One for your company and one for yourself. After viewing this talk, I was hooked by the idea and decided to give it a try. I’ve worked on both styles of tech radar and learned a few things along the way. 

Organizational Tech Radars

An organizational tech radar is a picture of the technologies used in your company along with recommendations for new things you should keep an eye on. Your team sorts technologies into one of four categories.

Adopt – Use when appropriate. This is a default best practice.
Trial – Use on non-critical projects. Good, but not 100% there yet.
Assess – Keep an eye on this. Use it for POCs and Demos.
Hold – Avoid using this on new projects.

To conduct a tech radar, get representatives of the different teams in your organization together and have them discuss some of the new technologies they are using or interested in using. Assign each technology to the proper category and record the highlights of each conversation.

Shoot for fewer than 30 people per discussion session. Try to get a diverse slice of your organization’s tech users. If your organization has teams outside of generic enterprise app dev, make sure they get a seat at the table. (examples: designers, SharePoint Devs, Salesforce Devs, DBAs, DevOps, mobile devs, etc… )

I’m involved in two different organizational tech radars. One as the primary organizer and another as an observer. It’s been an educational and useful experience. I’ve gained insight into some of the dynamics behind how technology is used in these two organizations.

One of the major benefits of doing a tech radar is that you deepen your understanding of how technology is used in your organization. You also gain insight into what different people are thinking. It can highlight blind spots in your own thinking and surface interesting technologies to check out. Another benefit is that it can make your organization more proactive about technology adoption. By knowing what’s available, you can begin to plan earlier. You also gain consensus about which technologies to adopt. It’s a lot easier than trying to campaign for new technologies on your own.

It’s not all rainbows and puppy dogs though. I ran into several challenges while coordinating my organization’s tech radar. First, I had to make a special effort to represent all the developer communities in my organization. We have a lot of practices and not all of them came to the discussion meetings. Next time, I may hold special meetings for each group.

The second hurdle I ran into was that everyone was very focused on things to adopt now, as opposed to future technologies. This issue was relatively easy to solve. We created a new category for “obvious best practices” and focused more on the “trial” and “assess” categories. Don’t be afraid to make tech radar your own. You don’t have to copy Thoughtworks verbatim. I found that making a category for things that aren’t new, but part of your default tech stack, cleared up the “adopt” list and kept the radar future forward. It also provides you with a handy list of architectural recommendations for new projects.

The final challenge was dealing with all the conversations. It was easy to go off on tangents or get caught up in how you feel about a particular technology. It’s tough to keep on track. One way we addressed the issue was by splitting up the meetings into small chunks. It’s easier to schedule and no one gets burned out from a 4 hour meeting from hell.

Overall, I found this exercise highly beneficial. I learned a lot and picked up a few technologies for my tech radar.

Personal Tech Radars

If you’re like me, you have “the list”. Sometimes referred to as “the guilt list”, because I never finish it. It’s the pile of technologies you intend to research. If that sounds vague, that’s because it is. “to research” doesn’t really give you  a finishing point. I built a personal tech radar to help clear up that ambiguity.

For me, a personal tech radar is a much less formal affair than the organization radar. It’s also, by necessity, a smaller one. I changed the definition of the categories. Instead of focusing on adoption, my categories focused on how much effort I want to put into learning the technology. Here are my categories and a few examples for each one.

Adopt
Agitate for use and learn deeply. This is for your core skills.
Examples: .NET Core, Angular 2, TypeScript, Azure

Trial
Seek functional knowledge on. Build a demo apps or POCs.
Examples: Python, Spark, R, Progressive Web Apps

Assess
Keep an eye on it, but don’t worry about getting deep knowledge.
Examples: Hololens, Unity, Xamarin, Chatbots

Hold
Avoid using when possible. Don’t waste a lot of time learning new things about this tech.
Examples: Old ASP.NET, Angular 1

I only had one challenge with my personal tech radar. I’m interested in everything, so I had a lot of trouble keeping my categories small enough to be doable. I consider this a feature, not a bug. Doing this exercise forced me to take a holistic view about what I’m interested in and edit accordingly. I also did some journaling about where I wanted to go in my career, which helped clarify my thinking. For example, I realized that learning data analysis is a better use of my energy than learning native mobile development. I’m still keeping an eye on mobile, but it’s not a top priority for me. Overall, it narrowed my scope and helped me focus.

Conclusion

If you want to better deal with the ever-growing deluge of new technologies, consider doing a tech radar. Both the organizational and personal flavors offer insights that you can use in your daily developer practice. It’s a great way to end the year.

PS – For some reason, I think of this song every time I bring up Tech Radar.

 

Great Reads for Innovators

As technologists, we are the vanguard of innovation. We’re at the forefront of technological innovation. Even if you’re slagging COBOL in the basement of some bank, you’re still dragging your organization into the future. Ever wonder how that process actually happens? What can you do to be more creative?

I’m fascinated by this topic, so I put together a talk about it.  (abstract / slides) It distills what I’ve learned from reading dozens of books on innovation and the history of technology. To save you some time, I put together a list of my favorite innovation related reads. If you’re curious about this topic, these books are a good place to start.

Books for Innovators

Sapiens

Sapiens is a highly entertaining, unorthodox view of human history. Not only is it informative, it challenges basic assumptions about ideas that most people don’t realize they’re making. It’s a great description of early human history and how we got to the modern age. It’ll really open up your mind.

Geography of Genius

Innovation is not evenly distributed. There are certain times and places throughout history that have “golden ages” of innovation. Geography of Genius explores a few of these places and tries to find what ties them all together. This book is very interesting and you’ll learn about some places that you don’t see much of in the classroom.

Evolution of Everything

Unlike what the history books tell us, innovation is more bottom up than top down. Matt Ridley does a fantastic job describing how in Evolution of Everything. He covers a several major innovations including religion, money, and government. This book challenges many deeply held beliefs and illustrates how innovation is an evolutionary process.

Smarter Better Faster

This book offers a more tactical look at creativity. It’s also a great guide to improving other aspects of mental performance. Charles Duhigg does a fantastic job mixing science with fascinating stories.

Deep Work

Creativity requires concentration. A commodity in short supply in the modern age. In Deep Work, Cal Newport makes a compelling argument for making “deep work” (focused work) one of your primary priorities. I changed several of my habits after reading this one.

Competing Against Luck

While I enjoyed the Lean Startup, I felt like it treated innovation more like a roulette wheel than a process you can influence. “Just pivot until you make it big or run out of money.” In Competing Against Luck, Clayton Christensen describes a fantastic intellectual power tool for building new products. The “Jobs to Be Done” theory of innovation. If you want to build a product, I highly recommend this one.

The Righteous Mind

One of the most important things you can do to become more innovative is empathize with and learn from people whom you disagree with. We live in a society that’s increasingly polarized, but this book the antidote. In the Righteous Mind, Jonathan Haidt explains the moral foundations for different political outlooks and makes a strong case for civility in political discourse.  This is a must read if you have trouble dealing with people who don’t share your beliefs.

Bonus Materials:

Here are a few non-book resources to check out:

Protopia (Kevin Kelly)

Kevin Kelly’s concept of protopia (as opposed to utopia or dystopia) is really enlightening.

In How to Fail at Almost Everything and Still Win Big, cartoonist and business author Scott Adams describes his “success formula”. Each area you master roughly doubles your odds of great success. This is a great case for diversifying yourself. You can either get his book or read this article:

Dilbert Creator Scott Adams Reveals The Simple Formula That Will Double Your Odds Of Success

If you’re looking to diversify yourself, here are two excellent resources:

Personal MBA

The Personal MBA is a reading list that’s meant to give you the business skills taught by an MBA program. I’ve read many books on this list and have not been disappointed. It’s also got great selections on personal finance and psychology.

The Great Courses (Amazon)

The Great Courses are a series of college level lectures that you can listen to in your car. Personally, I’m a big fan of their history selection. They also have courses on psychology, philosophy, and business.

Why Innovation Thrives in Cities

Innovation is partly a network effect. This article describes why cities with a higher population density have higher per capita rates of innovation.

Everything is a Remix is a video series about cultural innovation by Kirby Ferguson. I have yet to find a better description of how culture is generated by remixing other cultural elements.

This is a TED talk on how Google X (Google’s own skunkworks company) takes risks and creates a culture that fosters psychological safety.

Conclusion

This list of resources will open your mind and help you become a better innovator. If you think I missed something, feel free to drop it in the comments.

 

Lazy Loading Modules With Angular 2 And Webpack

I’m sure this is obvious to some people, but this issue threw me for a loop.

When building applications in Angular 2, it’s best practice to divide up your application into feature modules. This keeps your code simple and easy to work with. You can lazy load these child modules to improve initial load times and keep people from downloading code for areas they don’t have access to.

The Angular 2 website has excellent tutorials on how to set this up, but if you’re using Webpack, those instructions (link) don’t quite work.

Here’s the code from the Angular 2 website.

export const routes: Routes = [
  { path: '', redirectTo: 'contact', pathMatch: 'full'},
  { path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' },
  { path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule' }
];

You could assume that this code isn’t specific to using system.js as your module loader, but you’d be wrong. Webpack, by default, chokes on these lazy loaded modules. I spent more time than I’m willing to admit trying to figure out the arcane errors before I realized that the Webpack was the problem. Fortunately, this problem is easy to fix.

Like everything else in Webpack, there’s a loader for that. In this case, you want the Angular 2 Router Loader (more info here). Be attentive to the instructions, because the module strings work different than they do with system.js. For example, the Webpack loader supports relative paths. (The Angular 2 docs say otherwise) Once you setup the loader, lazy loading in Webpack works like a champ.