• You are here:
  • Home »
  • Archive: January, 2017

Archive Monthly Archives: January 2017

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