Full Stack

I've realized how much of my musings and blogging is centered on front-end dev, not that I even write a whole lot here. My resolution for 2014 is to actually write about the subjects near and dear to me: leadership, product, shipping product, cloud architecture, databases both ACID & object, messaging/reactive frameworks and start-ups. Stay tuned...

Hey Jade

Its been a few years but I think the romance is finally over, i'm breaking up with Jade. At first I thought Jade was weird, she was mostly naked and always very strict about her structure. After a couple of weeks of prodding by my peers I learned to like and even fall in love with Jade. I took her everywhere and to every company and start-up I could. I introduced her to E-Commerce, Financial Services, Security platforms and even a charity or two but she was always a bit out of place.After a while of enjoying her nakedness and terse nature things started to fall apart - it's not me, it's you.

I'm sure you all know that i'm really talking about the Jade template engine and syntax which is the nom de plume of folks building products with Express.js. I'll discuss what I've chosen to move to shortly but more of the pain after many years of joy.

Technology needs to get out of our way, it should be the tool we use and not the focus of the product we are trying to build. In short technology decisions, especially at the markup level, should enable and not become the conversation. Over the past year we've worked with UX experts, designers, front-end engineers as well as a top creative agency and in every situation I needed to make excuses for Jade. I would be heard saying "It's just like HAML, don't worry" or "just give us the HTML and we'll convert it to Jade". That last one really struck me, why are we obfuscating something as ubiquitous as HTML. For all of its tending towards verbosity HTML is simple and understood by the non-coders in your life. But us cool kids wanted to make it more expressive and cut out any unnecessary noise. Instead I'm afraid we've screwed the pooch by creating yet another esoteric piece of kit as we worship at the alter of technology progress and change in spite of users, in this case my users were the UX & design talent we've employed. So I decided today to stop the insanity and switch our front-end markup code base back to HTML while taking advantage of Swig templates.

<h1>{{ pagename|title }}</h1>
<ul>
{% for author in authors %}
  <li{% if loop.first %} class="first"{% endif %}>
    {{ author }}
  </li>
{% endfor %}
</ul>

Enter Swig, its HTML with handlebars style syntax, custom tag creation & fast server side rendering with pre-compilation options. I've converted over one mobile app and one web app so far and really am grokking its ease and HTML structure.

{% if foo %}bar{% endif %}

// Create a list of people, only if there are items in the people array
{% for person in people %}
  {% if loop.first %}<ol>{% endif %}
  <li>{{ person.name }}</li>
  {% if loop.last %}</ol>{% endif %}
{% endfor %}

I can now call on UX & front-end talent not worrying about making excuses for my odd companion named Jade, we had a good run. I am still dating CoffeeScript though, perhaps she'll also get thrown under the bus someday, probably once ES6 is a browser standard.

O'Reilly Fluent Conference 2012

Some observations on the first O’Reilly Fluent JavaScript Conference in San Francisco last month. The weather was great as it usually is in the Bay Area, we were cooped up in the hotel all day but that was fine. The food provided for lunch was excellent and the conference rooms were huge though all were packed every day. There were about 1,000 technologists in attendance with some decent vendors & exhibitors on hand. I think Twitter & Google brought the largest presence in terms of speaks & resources, they also threw the best after hours get-togethers.

TL;DR - Conference was great. I learned a lot but also I received validation that the approach the ECM Technology team is currently adopting with our client-side & web framework is the right one for our needs & team dynamic. There was also a heavy emphasis on Product/Design led development where folks lucky enough to have an engaged Product team can reap huge benefits from a collaborative approach with developers. The days of throwing stuff over a wall and moving on should be over as that never leads to thoughtful execution.

Day 1 was workshop day, a day to deep dive into certain tools & languages, I chose CoffeeScript in the morning & node.js in the afternoon.  The CS session put on by Caike Souza & Gregg Pollack from Envy Labs was pretty good, though most if not all we’re currently leveraging in the language. The bulk of Q&A centered around Object orientation, inheritance, fat arrow, & encapsulation. The v-next stuff looked interesting mostly in terms of further debugger support/parity with JS.

After CoffeeScript there was the Robust Node.js session for the rest of the day, really enforcing our current patterns and module choice and there was cool stuff regarding load balancing and/or cluster scripts that we should definitely try to take advantage of for multi-core running of event loops. This session was put on by Tom Croucher from Jet Packs for Dinosaurs  who’s a pretty cool British neck bearded fellow, read ex-Perl nut. We walked through Node streams which we take advantage of in our proxy layer, we dove into the once() call and how it can handle stopping repeated function calls, useful. For production deployments we walked through some nice tools like putting a production app into debug mode on the fly, node-proxy, squid, varnish & haproxy for load balancing, cluster scripts to handle multi-core, Cluster can also feed health stats to the IPC/console/log/scout to tell if node process is healthy or hanging. Good SSL acceleration approaches using modules like Unbundle SSL, stud or stunnel where we saw in some cases about a 35-40% speed bump.

A big theme in this node session was that Memcached should be set out to pasture as Redis is the new better Memcached, interesting. Also some of the upcoming features in Express 3 look really promising in terms of better built in asset handling & caching as well as performance & api call improvements.

Day 2 was the real start of the conference with keynotes from some heavy hitters like Brendan Eich, Ward Cunningham, Steve Souders & Tim O’Reilly. Eich talked about low level javascript, c/c++ inside JS, malloc, dealloc & other c style or actual c baked into JS itself, very cool and the demos he showed were VERY fast. He praised CoffeeScript as Ruby 4.0 and wants to support CS more as a JS/ECMA writing style vs something completely separate so more native support for code parity and style similarity. He ended his talk with pointing out this nugget http://alwaysbetonjs.com

Ward Cunningham continues to impress, he was like a college kid taking copious notes throughout the conference and really throwing himself into the JS world. I asked him why was he so into the current JavaScript scene and he said that he saw it as the future as it’s the most ubiquitous way to achieve the reach he’s striving for. Calling back to his invention of the wiki as a means to reach the masses as well. His keynote was great, he demoed this web client-side API builder that he used to repurpose popular web sites into consumable JSON API’s.

Steve Souders of Google was showing some case studies on web site bottlenecks, core concept here -> if you have a bottleneck in your web site its most likely on the front-end and more specifically it’s from using synchronous JS library references & API’s, async always. He used webpagetest.org & httparchive.org to illustrate his point.

The sessions for the day were pretty good, in 10 things you didn't know HTML5 could do we walked through asynchronous binary streaming, client-side file IO & native API's to system devices such as mics, 3D printers, cameras, etc.

Functional programming with Streams in Node.JS was a good one. Adam Crabtree walked us through the Event Emitter, Streams from the POV of chunks over time and while we use .on, .end for data streams I was also exposed to .drain, .pause and using the request object for req.pipe to stream to the console, file or http response.

Day 3 the focus was on mobile, CSS & JavaScript craftsmanship. Paul Irish from Google showed off the latest in Chrome Dev Tools as well as his personal toolkit, I think it mirrors what a lot of folks here use. One point he was trying to impart was to favor local storage to persist client-side only information as opposed to cookies that are always sent back and forth on the wire, makes sense.

Leah Veroe the “Queen of CSS & RegEx” talked about CORS - cross domain requests. CORS is the future of cross domain ajax and JSONP is relegated to a “hacky” moniker.

Ben Gailbrath & Dion Almaer from Walmart Labs then took the stage, great talk, watch out for walmart. Their topic was Web vs. Apps and how Walmart is betting their development on the Web as a platform approach with native apps losing favor. They utilize node.js as a common technology platform both client & server side using a conditional rendering engine in Node which decides whether a page is rendered client or server side based on input parameters or UA strings. They are big fans of Backbone.js regardless of whether they are building a Mobile app or a Website, they utilize a project called Thorax for web & mobile dev on backbone.

Alex Maccaw of Spine.js fame talked about modular patterns & building large applications in JavaScript. Build lots of small independent modules that perform simple tasks and orchestrate them together, the Unix way. Expose a simple API and use events for communication. Child modules should never know about their parents and favor clear simple code approaches as opposed to a blind DRY approach. His current project is Stylo - styloapp.com, open sourced example of the modular approach he walked through. Another big theme of his was to store client & data state in the controllers, not the models, not the view, I tend to agree with this as in developing a large single page application your controller is the arbiter that can provide any modules with the information they need. Snapshots in the Chrome Dev Tools was a nice approach to fix memory leaks, compare snapshots after introducing modules & backbone views to find bloated modules.

Then it was onto Trevor Burnham with Async coding patterns & Promises. His talk started out discussing Backbone’s simple wiring of events to model changes, not dom event wiring. jQuery promises is the way to untangle async in the JS language itself, works well on the client probably not the best approach with Node. In Node the approach for the promise pattern seems to be to use a CommonJS approach with "Q" or Promises/A. Q accepts jQuery promises and converts it to its own promises type so you can use the same syntax both client & server side. A promise is an object representing a task with 2 potential outcomes; resolved or failure, jQuery 1.5 was first to introduce promises. A Promise is definitely attractive to remove the async callback spaghetti although CoffeeScript handles this in a much nicer syntax than JS so the problem is lessened there. The debate surrounding this pattern seems to be Promises vs Pub/Sub - they are very similar why use one over the other.

Day 4 was for breakout sessions and deeper dives with folks who decided to stick around for an extra day. After meeting with the guys from Twitter Bootstrap in the morning and learning about some of the upcoming features and changes to our core CSS framework I was off to Mozilla HQ in Mountain View. At Mozilla we were given presentations on the latest firefox and firebug features and given a chance to play around with some cool offline technology coupled with their new Mozilla Mobile OS. Mozilla might be back to being a big player with an offering larger than just a web browser option, all of these browser or portal providers seem to want their own OS, it will be interesting to see this competition heat up in 2013 after windows 8. The overall browser sentiment seemed to be bated breath on IE until Windows 8 hits with no one regarding IE 9 as anything to worry about developing for too strictly.

The last event I wanted to mention was the D3.js meetup. I was blown away by some of the visualizations & canvas rendering being demoed. Examples that made Flash look so 1998, not that Flash needs more reasons to die ;-) I am really looking forward to implementing D3 here when appropriate and hope to show you guys what can be done with it and how extensible the library is. I was even inspired to build a real-time chart collaboration tool using Socket.IO, Node & D3, I’ll be opening this up on GitHub soon and will send out links when it’s ready.

San Francisco has a great technology culture and scene, the physical beauty of the Bay Area is tough to match however I think New York has the right mix of progressive technology and some of the best engineers in the world while at the same time a more diverse exposure to the global economy to ply our trade. There’s very exciting stuff on the horizon as JavaScript takes a seat at the big boys table of Computer Science and it’s no longer just for the client-side.

Tim O’Reilly on JavaScript & HTML5
http://www.youtube.com/watch?v=HC5wlxuzPrg

Realize that you are the product being sold

This whole kerfuffle over mobile apps like Path & Twitter stealing contact lists is interesting both from a marketing perspective as well as an anthropological one. I say interesting from the perspective that people are up in arms about this, really?! Haven't you heard the "old" product adage that if you are not paying for a product then YOU are the product being sold. Upon installation of Path, Twitter, Facebook, etc. there is a list of items that application can access on your device. For each of these Apps your Address Book is clearly listed. Ok, so access to the Address Book is step 1, but remember you are the Product being sold so with that don't you think that by "Access" there is the implication that they can then do what they will with that information? If you think not then my friend you are too naive for this modern world we have created and you should just get it over with and move to Easter Island and unplug from the Matrix all together. These companies are out right stating "Hey we now have access to all of this stuff you agreed to, our strategic partners and I wish to thank you for all of this data that we can in turn create money from" - this is exactly what's happening and I for one could care less. Great Path now knows that my Uncle's phone number is 555-1212 and that he lives on Maple Street. I just don't care and you shouldn't either, we live in public and stop your whining, otherwise toss your new iPhone 4S into the trash as Siri screams Nooooooo! </rant>

Achieve Two Column Layout with UL list element

Had an interesting challenge posed to me today...Can you achieve a 2 column layout with a single Unordered List <UL>? I am happy to say that the answer is...Yes! Ok so let's get right into the code as that will speak more volumes than I can muster on this topic.

First the HTML:

<ul class="colums-two">
      <li class="colleft">column 1</li>
      <li class="colright">column 2</li>   

      <li class="clr"><br class="clr" /></li>

      <li class="colleft">column 3</li>
      <li class="colright">column 4</li>

      <li class="clr"><br class="clr" /></li>

      <li class="colleft">column 5</li>
      <li class="colright">column 6</li>

      <li class="clr"><br class="clr" /></li>
    </ul>

Pretty standard really...(thx Leonard =)

Now the CSS:

ul.colums-two {
   list-style-type: none;
   margin: 0;
   padding: 0 0 0 0; }

li.colleft {
   width: 75px;
   float: left;
   margin: 0;
   padding: 0 5px 3px 0; }
      
li.colright {
   float: left;
   margin: 0;
   padding: 0 0 3px 0;
   width: 75px; }

li.clr {
   display: inline;
   margin: 0;
   padding: 0;
 }

br.clr {
   clear: left;
   width: 1px;
   font-size:1px;
   margin: 0;
   padding: 0;
   overflow:hidden;
 }

 

That's it! A two column solution for a single list, special thanks to Monorom for getting me pointed in the right direction.

Here's a jsFiddle to see it in action: http://jsfiddle.net/N3U5Z/

Cloning objects in C# to achieve pseudo byval with ICloneable

I came across this little nugget recently and while the ability to do this has been around for quite some time in c# I found it to be very handy and wanted to share. If you have an object (class) in C# where you’d like to clone an entire reference object to another without transferring id/hash, basically achieving a by value transfer. The approach is to use the ICloneable interface on your class. Here is my base entity class which most all entity’s in my application inherit from.

[Serializable]
public class EntityBase : IEntityBase, ICloneable
{
public Guid Id { get; set; }

public EntityBase()
{
Id = Guid.NewGuid();
}

public object Clone()
{
return MemberwiseClone();
}
}

Take note of the Clone() method, this is a required member of using ICloneable and it brings us to the usage for the object cloning.

MyObject origObj = querySomeRepo.FindOne<MyObject>(f => f.Id == Guid.Parse(id));
MyObject newObj = (MyObject)familyOrig.Clone();

That’s it and newObj is now a clone of the original retaining all property values without being the exact same object.

 

Debugging Visual Studio 2010 MVC or Silverlight Apps in non-default web browser

A while back I was constantly vexed by Visual Studio 2010′s apparent lack of non default browser support for debugging MVC and Silverlight applications. The problem is that I can’t stand for using any variant of IE as my default browser for reasons better suited for a different post. At face value VS has no way to accomplish this in it’s 2010 version for MVC or any non web-forms application, instead what one needs to do is “trick” the IDE, it’s a bit of a kludge but bear with me.

1. First you need to create your MVC, Silverlight, etc project of your choice, if you have an existing project then move on to Step 2


2. Next step is to create what I’ll term as a Dummy Debug project inside of your existing Solution, set the project’s type to ASP.NET Web Forms application, very important this must be a Web Forms project


3. Once you have the web forms project create any aspx file in the root of the Dummy project, doesn’t matter what its named, you’ll need to right click on it and select the “Browse With” option once it’s created
   
   
   
   
   
   
   


4. On the next dialog box simply select the browser of you choice and select “Set as Default”
   
   
   
   
   
   
   


5. Close this dialog

You’re all set, now when you debug your MVC app it will launch in the browser you’ve selected and your systems default browser won’t be affected!