Using FP to prevent ‘Cannot read property of undefined errors’ (A.K.A. Array.reduce rocks)

‘Cannot read property of undefined errors’ are common when using JavaScript or TypeScript.  While some languages, such as CoffeeScript, have the existential operator which checks for the existence of an object, it doesn’t currently exist in JavaScript.

This means the following will throw an exception:

 const myObject = {};
  const zipcode = myObject.homeOwner.address.zipcode;

Of course it’s easy to see in this example.  However, if you receive myObject from a REST service call and it may not return the full object, it’s easy to miss.

The first approach to resolving this is typically:

let zipcode = {};
if (myObject && myObject.homeOwner
   && myObject.homeOwner.address) {
    zipcode = myObject.homeOnwer.address;
  }

Of course, this becomes very cumbersome and obfuscates what you’re really trying to do. Functional programming techniques can provide shortcuts for preventing these kinds of errors.  This is where Array.reduce comes to the rescue:

let _ = function (instance, path) {
  return path.split('.').reduce((p, c) => p ? p[c] : undefined,instance);
}

let zipcode = _(myObject,'homeOwner.address.zipcode');

Super cool!  This 1-line function splits the path parameter into an array of accessors and uses reduce to iterate through them and either return undefined or the value of the final property.

Check out the safe-get github repo or npm package for more info, tests and examples.

TL;DR

Functional programming rocks.  Use safe-get

A project template for WebPack + TypeScript (A.K.A. Framework Fragmentation Frags Developers)

hand grenade

wet-template

One of the wonderful things about the rise of open source is the corresponding increase in framework and library options.  One of the biggest disadvantages is the huge fragmentation caused by this increase in options.

If you’ve ever played a first-person shooter, you’re probably familiar with the term “fragging“.  Gamers frequently use this term, although it was coined during the Vietnam war to represent deliberate killing of an unpopular team-member.  The number of JavaScript library/framework combinations is staggering (26,000 listed on GitHub) and easily leads to developer brain implosion — hence the title: “Framework Fragmentation Frags Developers”.

dynamite

After researching numerous various options and prototyping with several different frameworks / libraries, languages and build tools (Babel, TypeScript, Grunt, Gulp, Bower,Webpack, Aurelia, React, ad infinitum), I’ve found what I consider to be the best (read most likely not to be dead/deprecated within 6 months).

Truthfully, this is a fairly minimalist solution as it allows me to customize each project easily.  It includes the following:

  • A testing framework (Mocha + Chai  — run-away community favorites)
  • Build scripts (NPM scripts are powerful, cross-platform and minimalist)
  • A bundler (Webpack -relatively easy, powerful, well-supported)
  • A linter (TypeScript — okay, this is more a language than a linter but close enough)
  • An initial project structure (it’s amazing how much time teams spend arguing about this)
  • VS Code bindings (An excellent, minimalist, hackable editor)

So, without further ado, here’s how to use the template:

  1. clone the wet-template repository (WEbpack + Typescript – ‘wet’, get it?)
  2. From a shell / command prompt do the following:
    1. ‘npm install -dev’
    2. ‘code .’
  3. Create a new git repo in a separate folder
  4. Copy everything except the .git folder into your new repo.
  5. Modify the package.json in this new folder to account for your git repo, description, keywords, author, etc.

Dude, where’s my code

wet-template folder structure
wet-template folder structure
  • src – All of your source code (TypeScript files) should be in the src folder.
  • test – Tests, surprisingly, are placed in the test folder (again, TypeScript here).
  • build – The TypeScript compiler places files that are compiled into JavaScript (by pressing ctrl+shift+B) in the build folder
  • dist – bundled (via webpack) JavaScript ready for distribution (e.g. via npm) are located here
  • example – examples (html pages, etc.) are placed here.  This folder can also be used for hosting an app if desired

Tips ‘n Tricks

Automatic Provisioning (typings)

In Visual Studio Code, press ctrl+shift+B (or ‘npm run build’ from a command line).  This will build the example code so you can ensure everything works.  The first time the build task runs, it executes the provision.js script which installs TypeScript typings and then removes itself from the build script of the package.json file so typings aren’t reinstalled every time you build.

Webpack loaders

I’ve included an html loader (commonly used for requiring templates in various front-end frameworks like vue.js)

TL;DR

wet-template is a minimalist project template for WebPack and Typescript — clone it, npm install it and go.

 

 

 

 

Troubleshooting Aurelia (A.K.A. Where are my Custom Elements?)

Aurelia is a great JavaScript framework for creating Single Page Apps (SPAs).  It’s especially easy to learn for engineers that are familiar with WPF and the MVVM pattern-the documentation even uses the familiar terminology of views and view-models.

While it’s still in beta (as of today – Mar. 24, 2016), there is a decent amount of support available on Gitter, Stack Overflow and some documentation available on Aurelia.io.

Recently, I’ve been using Aurelia in conjunction with Cesium to develop a 3-D visualization app.  I’m using Aurelia for navigation, custom components for various forms of selection and the main navigational view component contains Cesium:

.HypersonicScreenshot

One simple, but potentially frustrating issue I’ve run into is when my custom elements don’t appear in the app.  This frequently leads me into the following train of thought:

  1. Why aren’t my custom elements showing up in Aurelia?
  2. Are there any warnings / errors in the browser console?
  3. Is there a bug in my View (HTML)?
  4. Why aren’t there any warnings / errors in the browser console?
  5. Is there a bug in my ViewModel (js)?
  6. Where are the darn warnings / errors in the browser console?
  7. Is Gulp watch working?
  8. What the heck is wrong with this thing — why aren’t there any warnings or errors!
  9. Why didn’t I become a Doctor like my mother always suggested!?!

After struggling with this train of thought for a while I finally realized I’d missed the following little snippet in my containing element’s HTML:

<require from="my-custom-component"></require>

As you may have guessed from the above rant, this does not generate any warnings or errors.  Instead, you may just end up with an empty component like this:

<my-custom-component></my-custom-component>

So, next time you start asking yourself “Why aren’t my custom elements showing up in Aurelia?” make sure you haven’t forgotten a <require> tag in the containing element.  Either that or choose a less frustrating, time-consuming career and go back to medical school.