Dan Martensen

Software Engineering

Read this first

SQL Performance of Join and Where Exists

Sometimes we need to identify record sets with at-least-one relationships. Find customers who’ve placed an order, products categorized as books, or cities that have airports. In this post we’ll compare the performance and execution paths of inner join to where exists in PostgreSQL 9.5.

Let’s settle with finding all products that have been ordered.

 Setup

Create and populate two tables, products and orders, with 1,000,000 rows each of random data.

CREATE TABLE p
(
    p_id serial PRIMARY KEY,
    p_name character varying UNIQUE
);

INSERT INTO p (p_name)
    SELECT substr(gen_salt('md5'), 4)
    FROM generate_series(1, 1000000);

Output

|  p_id     |  p_name    |
--------------------------
|  1        |  5aHN4w0f  |
|  2        |  29LKwrBw  |
|  3        |  9cIR4iXE  |
|  4        |  5P9aTUQN  |
|  ...      |  ...       |
|  1000000  |  6cpGNL18  |

Pretty random looking. Now for

Continue reading →


Rediscovering MVC and How to Write without a Framework

If you’ve paid much attention to front-end development in the last few years you’ve heard about Angular, Backbone, Ember, and other JavaScript MV* frameworks. They offer structure, bundled APIs and streamlined approaches to complex UIs, although not without concerns of performance, monolithic designs, and high churn rates[1][6].

All these frameworks share an adaptation of classic MVC, a pattern that transcends platforms, libraries, and languages, where models hold state and logic, views visualize state as output, and controllers handle input and interactions with the model and view[2]. Understanding classic MVC helps us evaluate strengths and shortcomings when selecting a front-end framework or micro-framework alternative. In this post we’ll cover MVC’s relevance, the roles of each component and how to write it with vanilla JavaScript.

 Purpose

So why is MVC so prevalent? Some

Continue reading →


Designing Normalized SQL Tables

SQL databases are reliable for complex queries, partial updates, transactions, and decoupling data modeling from application specific contexts. In this post we’ll cover how to normalize tables in 1NF, 2NF, and 3NF.

NFL_63650.jpg

We have a table.

Name Position Team Jersey No. Home Stadium Stadium City Salary & Contract
Aaron Rodgers QB Packers 12 Lambeau Field Green Bay $22M, 5 years
J.J. Watt DL Texans 99 NRG Stadium Houston $16.7M, 6 years.
Earl Thomas DB Seahawks 29 Century Link Field Seattle $10M, 4 years
Andrew Luck QB Colts 12 Lucas Oil Stadium Indianapolis $5.5M, 4 years

Some issues off the cuff, right? What if I wanted to add a new team but had no player? What if a player plays multiple positions? Or two teams share the same home stadium? All these deal with data redundancy. And what’s the primary key, anyways?


 1NF

1NF defines the shape of a table.

Concepts

Continue reading →


Build Better Apps with ES6 Modules

ES6 is packed with features like iterators, generators, maps, sets, symbols, template strings and more. One of the biggest game changers to app architecture is the new modules, and different than the syntactic sugar of class and extends they’re an entirely new construct[1]. In this post I’ll cover ES6’s new module syntax and how it provides better performance, encapsulation, and error handling.

But first a little backstory. Engineers have long defined modules with workarounds on the global window object using object literals, the module pattern, and any combination of IIFEs one can imagine. Each of these comes with a set of challenges from lack of encapsulation to forced singletons. In 2010 RequireJS became a popular tool to define modules client-side, being used on sites like PayPal, Dropbox and The New York Times. CommonJS, it’s counterpart, was adopted server-side by the

Continue reading →


Events, Concurrency and JavaScript

Modern web apps are inherently event-driven yet much of the browser internals for triggering, executing, and handling events can seem as black box. Browsers model asynchronous I/O thru events and callbacks, enabling users to press keys and click mouses while XHR requests and timers trigger in code. Understanding how events work is critical for crafting high performance JavaScript. In this post we’ll focus on the browser’s built-in Web APIs, callback queues, event loops and JavaScript’s run-time.

Code in action. A button and event handler.

<button id="doStuff">Do Stuff</button>

<script>
    document.getElementById('doStuff')
        .addEventListener('click', function() {
                console.log('Do Stuff');
            }
        );
</script>

Let’s trace a Do Stuff click event thru browser and describe the components along the way.

webapi5.png
From Philip Robert’s diagram

 Browser

Continue reading →


JavaScript’s Map, Reduce, and Filter

As engineers we build and manipulate arrays holding numbers, strings, booleans and objects almost everyday. We use them to crunch numbers, collect objects, split strings, search, sort, and more. So what’s the preferred way to traverse arrays? For years it’s been the trusty for loop which ensures iterating over the elements in order by index.

In 2011, JavaScript introduced map, reduce, and filter as powerful alternatives when translating elements, finding cumulative values, or building subsets based on conditions. These methods help the developer manage less complexity, work without side effects, and often make code more readable.

In this post we’ll cover the usefulness of Array’s map, reduce, and filter methods. You’ll see use cases, code samples, behavior, and parameters of each method.

shell400-2.jpg
reduce() can find a Fibonacci sequence in O(n)

 Drawbacks of Looping

Say I’m working on a

Continue reading →


Data Model Architecture in Angular

This post highlights my AngularJS Portland presentation in Feb. 2015 about building a data model to handle difficult JSON. It’s used on the search landing pages at Bodybuilding.com that average 125,000 daily views.

You may have had the luxury of working with well-structured, concise JSON data, ready to be bound to $scope and rendered on page when building your Angular apps. For various UI components maybe the server’s JSON data is a single list of objects or a list of lists.

On a recent project using 3rd party web services, we weren’t so fortunate. The data set was very large at about 150KB of raw JSON, or about 14,000 lines, and filled with objects for multiple UI components. But more the data was in poor shape and needed refining. In this post I’d like to share our solution to dealing with difficult data.

Our search pages have several UI components on each page. Here’s one

Continue reading →


Converting a Tree to a List in JavaScript

With the meteoric rise of JavaScript MVC frameworks, data structures and algorithms long handled server-side are now managed on the client. JavaScript references objects thru memory addresses, making linked lists, trees, even graphs all possible to build and traverse. So dust off the old computer science textbook, grab a cup of coffee and whiteboard pen, and check out this interesting problem I encountered a couple months ago.

Scenario: The 3rd party web service your app consumes generates JSON in a tree structure with data values in the leaf nodes (example below). You need to convert these tree leaf nodes to a list for Angular’s ng-repeat to iterate over in your View. Not only must the nodes’ ordering be maintained, but any duplicate nodes should be removed.

funcobjbot9.png

Question: How can we convert a tree’s leaf nodes into a list while preserving order and removing the duplicates? We’ll

Continue reading →


What’s “new” in JavaScript?

Few syntactic features highlight JavaScript’s object oriented nature more than the new operator. Many of us have been using it for years but do we really know what it does? In languages like Java it allocates memory for an instance object, invokes a constructor function, and returns a reference to the object. And the same holds for JavaScript. But with the language’s use of first class functions and prototypal inheritance, there’s much more to new.

In this post I’ll cover the relationship between function instance objects, prototype objects and instance objects, what happens when new invokes functions, and which functions can be used as constructors.


 Function Instances & Prototypes

Before we explore how new works let’s quickly review JavaScript functions. When a function is defined a function instance object is created under the hood, having a prototype property that

Continue reading →


The Anatomy of a JavaScript Function

Functions in JavaScript are like classes to Java. They’re the fundamental modular unit: the cell in life, the note in music, the word in language, the funky chicken in dance. JavaScript functions are full fledged objects, often called first-class objects[1], having properties and methods, mutable values, and dynamic memory. Douglas Crockford, one of the early gurus and longtime critic of the language wrote[2]:

The best thing about JavaScript is its implementation of functions.

In this post I cover the qualities of functions as objects, how function objects are created, the difference between constructor, prototype, and instance objects, how the new operator works, and useful properties of functions.


 First Class Objects

Functions have the same capabilities as other objects. So it’s no secret they can be:

passed as arguments

function a() { ... }
function b(a) { ... }
b(a);

Continue reading →