RavenDB Studio 3.0, and why we moved from Silverlight to HTML5

Summary: A big step for RavenDB: a new HTML5 Studio. Plus, some thoughts on the move from Silverlight to HTML5 and our experience in the transition.

Yesterday, I pulled the covers off something I’ve been working on for a few months, something I’m very proud of.

RavenDB, the most popular NoSQL database in the .NET world, announced a brand new RavenDB Management Studio, Raven Studio 3.0, built from the ground up using HTML5 and modern web technologies. Yes, we’re moving away from Silverlight and onto HTML5.

Ayende and myself demoed the new Raven Studio just yesterday in a live webinar:

This has been my pet project for the last few months, and it’s something I’m quite proud of! I believe this is a huge step forward for RavenDB (more on that in a minute), and the reception from the Raven community has been awesome, ego-stoking, and totally energizing.

The old Raven Studio was built in Silverlight. Some Silverlight fans have asked, why did we move to HTML5? Are we making a big mistake moving away from Silverlight and to HTML5?

No, on the contrary, we believe HTML5 is a damn good option.

  • The RavenDB community wants an HTML5 Studio. This has probably been the most-requested item from the RavenDB community. It came up multiple times in the Raven 3.0 Wishlist, it’s come up whenever Oren talks about the Studio, it comes up when we speak to the external developer community, heck, when I was in Israel for RavenDB training last year, one of the students brought it up right there in the Hibernating Rhinos office. Silverlight has served us well over the years, but Silverlight is a dying technology that our community doesn’t want to be tied to any longer. 
     
  • Silverlight tooling is a perceived barrier to Raven adoption. I speak at Code Camps and user groups, and when I speak on RavenDB, the love flows and the excitement grows…until I show Silverlight tooling. I get the raised eyebrow. “Silverlight? Oh. I see.” Others in the Raven community have reported this as well. For some, Silverlight is a stumbling stone. 
     
  • HTML5 is a step towards cross-platform Raven. RavenDB is the best NoSQL database for .NET. But, in time, we want Raven to spread her wings and be not just the best NoSQL solution for .NET, but the best NoSQL database, period. Moving to an HTML5 toolset is a step towards this goal. 
     
  • The software industry is moving away from plugins. Plugins like Silverlight added abilities you couldn’t do on the native web, such as audio, video, gaming, 2d drawing, documents, voice, and more. Plugins filled these gaps, but with HTML5, these gaps are disappearing. We don’t need Adobe Acrobat plugins anymore to view that high fidelity document. We don’t need Java applets anymore to run that simulation. We don’t need websites built entirely with Flash. And we don’t need Silverlight for Raven Studio. There is little reason today to build something in JavaFX, Flash, or Silverlight: the native web has supplanted them. Just as it’s rare – and often undesired – to see a Java applet out in the wild, so too it will be with Silverlight in the coming years.
     
  • The native web platform is a solid foundation for the future. Microsoft products come and go. 3 years ago, Microsoft was pushing Silverlight as the platform for line of business apps and islands of richness on the web. Today, Silverlight is prevented from running in the default browser of their newest operating systems.

    HTML, on the other hand, has been a stable, ever-evolving technology for decades, and because it is the very fabric of the web, things built in HTML live indefinitely. There’s a reason you can still visit and use the 17-year old Space Jam Website. Smile But your MS Silverlight app from last year? It won’t run even on the latest MS operating system’s default browser.

As a Silverlight developer who has built professional apps (e.g. 3M Visual Attention Service) and spoken at Code Camps and user groups on Silverlight, truth be told, Silverlight is a great developer platform. C# is an excellent language, Visual Studio probably the best development environment.

But, in the words of Miguel de Icaza, creator of Moonlight (open source, cross-platform Silverlight),

“I felt that Silverlight had a bright future, and that it could turn to fill an important void, not only for web development, but for desktop development in general.  And this was largely one of my motivators. I am very sad that Microsoft strategy cut the air supply to Silverlight.”

This, coupled with the mobile computing explosion and the software industry’s shift away from plugins, results in a sickly future for Silverlight and Silverlight apps.

RavenDB rocks, and we want the tooling to rock as well. Having our tooling tied to this technology was not an attractive proposition, and it was time for us to move on.

A new technology stack for Raven Studio 3.0

After much deliberation and considering all the options available to us, we moved off of Silverlight.

Instead of Silverlight, HTML5.

Instead of C#, TypeScript.

TypeScript is awesome. TypeScript is new language, a superset of JavaScript designed for building apps on the web. Silverlight fans will be happy to know it’s built by none other than Anders Heijlsberg, the much-respected language designer and author of C#.

In TypeScript, all JavaScript is valid TypeScript code, so it’s familiar to any web developer, but it gives us nice things like an optional, flexible type system, classes, modules, and enums, and features proposed for future versions of JavaScript, but compiles to plain old JavaScript that runs in every browser.

TypeScript tooling is Visual Studio, with all the nice debugging and refactoring that brings, but it can also be written in any text editor and debugged in any browser.

For infrastructure, because we wanted the look & feel of a web application, rather than a set of web pages, we opted to build a single page application (SPA). Durandal.js gives us exactly that: a nice means to load pages on demand and compose them into a cohesive web application.

For UI, Durandal uses Bootstrap for a consistent, pleasing aesthetic, and KnockoutJS for data binding and MVVM.

Using data binding, MVVM, and Durandal makes a great developer experience, one not too foreign to the MVVM stuff in Silverlight. (Indeed, the author of Durandal.js is the same author of the popular Silverlight MVVM framework Caliburn Micro.) Look at the code and judge for yourself; you’ll see classes separated out into small, logical view models, and a clean separation between view and logic.

What has been our experience moving to HTML5?

One immediate, measurable gain was performance:

  • Memory usage dropped from 140MB to 20MB.
  • Cold starts dropped from ~7s to ~2s.
  • Warm starts dropped from ~3s to ~1s.
  • General snappiness: XAML is rather heavyweight, and you’ll notice just moving around the application, loading your documents, collections, or editing – it’s all faster in HTML5. Snappy and responsive.
  • This doesn’t happen:
    image
  • This doesn’t happen either:
    image

A lot of the above we get for free simply by Doing Less Stuff™. No .xap files to download, no dlls to load, no CLR runtime to start, no plugin host process for the browser, no browser-to-plugin communication, no managed code to start executing.

This translates into faster start times and less memory usage.

Another free item we get is JavaScript and the blazing-hot modern JS browser runtimes. The major browsers – IE, Firefox, Chrome, Safari – are in a cut-throat competition to get the fastest JavaScript runtime, to squeeze every possible ounce of performance out of JavaScript. You’ll regularly see these browser vendors advertising their JS benchmarks as proof of performance improvement. This is a free win for the new HTML5 Raven Studio: as browser vendors continue to improve their engines in this cut-throat, cross-company competition of speed, Raven Studio will reap the performance improvements.

Moving to the native web platform fixes some plugin-induced workflow hiccups. For example, keyboard shortcuts: Silverlight and other plugins eat the keyboard. So say you’re got Raven Studio opened, and you want to open a new browser tab, so you hit CTRL+T. Surprise, nothing happens. Why? Silverlight ate your keyboard shortcuts, your browser never received them, and your workflow was just interrupted.

If you’ve ever used one of those old all-Flash websites, or full-page Java applets, you’ve probably noticed some things just don’t feel right. So it was with the old Silverlight Studio. Moving to HTML5 fixes these issues.

Conclusion

Transitioning out of the plugin ghetto and moving to HTML5 has been a delight, but more importantly, it’s good for RavenDB users as we move to a faster, more lightweight tool. It’s good for the future of RavenDB to have our tooling built on the solid rock of the native web.

I understand the Silverlight fans who are sad to see the old Silverlight Studio go. I’m a Silverlight fan myself, I understand their concerns. The most I can ask of you guys is to give us the opportunity to earn your trust. It will take time, but with a faster, more lightweight, stable tool that does what you need and gets out of your way, I believe that trust will be earned.

The new HTML5 Raven Studio is on GitHub and we’d love for you to give it a spin or even contribute to the code. I’m pleased to say we already have had a few contributions since it was released just yesterday. I’m proud of this work, and I really hope you guys enjoy it!

Microsoft.reboot()

Summary: With the departure of Microsoft’s CEO, what does the future hold? Irrelevance, unless a visionary comes to change course.

Microsoft’s original vision — a PC on every desk and in every home — was a grand, future-looking vision. And Microsoft succeeded, that old vision is today’s reality; everyone has a computer and Microsoft is largely to thank for that.

But today? Microsoft’s Ballmer-guided mantra, "We are a devices and services company", is not a grand vision. From the outside, Microsoft appears to be directionless, reactionary, playing catch-up.

Directionless: What’s the grand Microsoft goal, what are they trying to achieve? The answers seems to be the mundane business goal of selling more copies of Windows. OK, that makes business sense in the short term. What about the future?

Reactionary: Microsoft got a PC on every desk. But instead of pushing computing forward via the web & mobile devices, they’ve been reactionary: letting these revolutions happen outside the company, then retrofitting their old stuff to the new paradigm.

Catch-up: Microsoft had a PDA, but never advanced it; it couldn’t make phone calls. Microsoft won the browser war, then did nothing; it couldn’t open multiple tabs. Microsoft had a tablet, but never pushed it to its potential; it never optimized for touch.

Instead, Microsoft stagnates while a competitor steps in and blows us away with PDAs that make phone calls, tablets that boot instantly, app stores that reward developers for developing on your platform, and browsers that innovate in speed and security and features. Microsoft continues to play catch-up, when they should be leading technology forward.

Microsoft needs a grand vision and someone to drive it. They need a forward-looking leader to drive this vision. If they want to be a devices company, innovate with hardware – maybe flexible, haptic displays for Windows Phone, for example. The huge R&D budget — $9.4 billion in 2012, outspending even Google, Apple, Intel and Oracle — could play into this.

Will the next Microsoft CEO be a forward-looking tech visionary? Microsoft is headed towards consumer irrelevance and business stagnation. I’m convinced it will arrive at that destination unless a future-minded visionary reroutes the mothership.

Tagged ,

Charlatan developers and the Blunt truth

Summary: A rant on political correctness in the programming world.

Ayende, developer of RavenDB and author of popular ayende.com programming blog, has been blogging the ugly, cringeworthy interviews resulting from his company’s recent hiring round.

Some developers couldn’t sort a list of strings. Others didn’t know what framework they were developing in. Aptly summing the lot, one developer with 6 years experience and a CV mentioning multi-threading experience said, "I only know BackgroundWorker."

The short of it is, we have a lot of charlatans in our industry. (See Why can’t programmers…program?)

But the comments to these posts tell a different story: bleeding hearts sympathizing with the interviewee and chiding Ayende for blogging about the bad interview.

Kelly Somers (@kellabyte), big data extraordinaire, complained:

"As an employer, I don’t think posts like this are a professional way to behave. Although they are anonymous, there is a human trying to make a living being humiliated here and I can only imagine how they might feel after having a bad interview only to then read it up on the internet in the public eye."

Patrick Smacchia, creator of NDepend, chimed in agreement,

"I am with Kelly here…You’d better mention only positive things that happen in the interview room."

“Only the positive things.” ಠ_ಠ

I have much respect for both Kelly and Patrick and the things they’ve built. However, what’s more important, a person’s hurt feelings or telling the truth?

If I was that interviewee, I’d feel bad, sure, but I’d also come to appreciate the truthful feedback. I’d want to know that I’m failing to use loops. Had I interviewed at DataStax or NDepend, I’d probably be calling them repeatedly, receiving uncertain answers about whether I’m hired or not, everyone beating around the bush and no one telling me just why it is that my calls aren’t being returned.

Contrast with Ayende’s approach, I’d just know straight up my current skills are lacking, and that I shouldn’t be advertising my many years of developer expertise if I can’t work with for loops.

When I visited Israel the other year, people were blunt, to-the-point, and honest. It was jarring, but good. Having lived in the US for my entire life, it’s been drilled into me that you never say what’s really on your mind. Criticism should be withheld for sake of politeness. If it will offend someone, nobody really tells the truth here.

Ayende’s honesty is wonderful for that reason. Yes, even if it were my code being criticized, I’d appreciate the honesty. Wouldn’t you?

I suspect this blunt honesty is foreign to most folks from the US, and is the reason some people are chiming in with bleeding hearts. They think "positive only" is better. “Think of the human being searching for a job!” But this sort of thinking is not really thinking at all, but rather emoting, thinking with your emotions rather than intellect. Compassion to the point of untruthfulness is not actually helpful to human beings.

I’d rather know the truth, even if it hurts. Wouldn’t you?

/rant

Tagged ,

Startup! Use your software superpowers

Just finished giving this tech talk:

image

image

It may sound grandiose, but it’s essentially true: developers have a superpower. We’re the inventors of the modern age. We have a unique power that is new to humanity: we can build useful things and instantly put a thousand eyeballs on it. All for about $0 and very little time investment.

(My startup company, BitShuva internet radio, was the product of about a weekend’s work, where I churned out a minimally viable product and published it in 2 days. The net result is several radio stations across the web and a few thousand dollars in the bank.)

The things we’re doing with software are diverse and jaw-dropping:

Software is doing that, and more: giving us turn-by-turn directions, driving our cars, winning Jeopardy!, challenging Chess champions, letting us communicate with anyone in the world at anytime…the list is staggering and is only increasing.

And we, software developers, are the ones who make it all happen. This bodes well for our careers.

Building software is a superpower that shouldn’t be wasted building CRUD apps for insurance companies. That may be necessary to pay the bills, but developers should build their side projects to advance their goals and tackle the things they want to tackle.

Build your side project, build what’s interesting to you, build what you think the world needs. If nothing else, you’ll expand your horizons. And if it works out, you might just have contributed something useful to the world and even made a little money on the side.

Tagged ,

My beautiful web development soup

Summary: Web development is chaotic, overwhelming, and beautiful. How many technologies does it take to build something useful on the web? You might be surprised. Advice for developers getting into web development.



3654636770_3b1a5d470bThis week I was working on my open source startup project, BitShuva Radio. I acquired a new client this week, but this client was unique because he’s a Java developer and wanted to know how to edit the open source code for his new radio station.

As I typed out my answer, it dawned on me that the sheer number of  technologies utilized in building a useful web application is staggering. That they actually work together is a testament of the beautiful soup that is web development today.

How many technologies does it take to build something useful on the web? Here’s my answer:

  • I use TypeScript, rather than plain JavaScript, for all client-side code. A superset of JavaScript with optional types, TypeScript is a well-structured, typed language with excellent tooling. I use it for practical reasons: as the app grew in complexity, the need for a more structured language became apparent. I ported the JS to TypeScript last month, and I’m quite pleased with the results.
  • KnockoutJS is used heavily absolutely relied on. BitShuva is a dynamic single page application, meaning we’re doing lots of dynamic updates to the UI in real time. Knockout lets us make dynamic UIs very easily without resorting to tons of DOM manipulation code. Instead of DOM manipulation, Knockout lets you change your objects, and your UI automatically updates. For example, songsOnScreen.push(new Song()) will automatically show the song in the UI, no jQuery DOM manipulation required. 
  • I use knockout.postbox for decoupled pub/sub communication between client-side code components. For example, when I hit the play button, the click handler doesn’t need to know about HTML5 audio or any infrastructure concerns. Instead, it calls ko.postbox.publish(“Play”). Whoever is in charge of playing audio simply calls ko.postbox.subscribe(“Play”, …). This way, the click handler and the HTML5 audio component don’t need to know about each other. Nice and clean. Bonus: it works with Knockout observables, so you can say currentSong.publishOn(“SongChanged”) to automatically publish messages on a particular topic.
  • UbaPlayer is used for playing HTML5 audio with a Flash fallback. 
  • For styling, we use LESS, the CSS superset. We use LESS because CSS is redundant; LESS lets us use variables and functions for code reuse, but still compiles down to plain CSS.
  • jQuery is still there, but not as much as you might think. Because KnockoutJS handles the DOM <—> code interaction, jQuery is only needed in rare cases where we need special DOM manipulation (e.g. to fade in/out an element). We also use jQuery to do AJAX calls.
  • The site generally uses Twitter Bootstrap UI toolkit for styling and consistency across the UI.
  • We’re using Google Web Fonts for typography. 
  • For images like thumb-up/down, play button, etc. these are actually font characters, from the special Font Awesome web font. Because it’s just a font, they scale infinitely without losing fidelity, and you can change their appearance (size, color, etc.) using plain old CSS stylings. Icon fonts are awesome.
  • We use Asp.NET MVC Razor view engine to actually render our UI. Because of heavy reliance on KnockoutJS, Razor isn’t needed much; it’s mostly just plain HTML that is dynamically swapped in through AJAX and KnockoutJS.
  • The server code is written in C# 5 using Asp.NET MVC 4 + MVC Web API
  • ASP.NET Web Optimization Framework is used for minifying and bundling the scripts and CSS.
  • The database is RavenDB, a modern, 2nd generation document database, easily the best NoSQL database in the .NET world. I use it because it’s blazing fast and simple to just start dumping objects into.
  • ReactiveExtensions (RX)  is used on the C# server end to treat events as observable streams, which can then write LINQ queries on top of. We also use its sister project, Interactive Extensions, for some useful extension methods to IEnumerable objects (such as .Do and .ForEach).
  • To load up the whole shebang and edit the project top-to-bottom, I use Visual Studio 2012 + TypeScript tools plugin (for editing/compiling TypeScript) + Web Essentials (LESS compilation, better tooling for HTML5 web standards, and more).

Holy cow!

Here’s the final tally of languages, frameworks, and tools used:

  • 5 languages – C#, TypeScript, LESS, .cshtml Razor syntax, plus bits of plain JavaScript here and there
  • 5 UI JavaScript frameworks – KnockoutJS, jQuery, UbaPlayer, Knockout.postbox, Twitter Bootstrap.
  • 6 server-side .NET frameworks – RavenDB, MVC 4, MVC Web API, Reactive Extensions, Interactive Extensions, Web Optimization Framework.
  • 3 tools – Visual Studio 2012, TypeScript tools plugin, Web Essentials plugin.

The sheer number of tools required to really build something useful on the web is staggering. You get the sense of why desktop developers — who often work in just a single language + UI framework (e.g. C# + WPF) — are hesitant to embrace the web. It requires massive retooling.

And to be truthful, this is only my beautiful web soup. I chose C# + KnockoutJS + TypeScript + LESS, but other web devs might prefer Ruby + BackboneJS + CoffeeScript + SASS. Or something entirely different.

The great thing is, there is so much evolution going on in web development space today, and this produces unique and specialized toolsets that help move the web forward. For example, languages like CoffeeScript and TypeScript are influencing the future direction of JavaScript.

It’s a fun time to be in web development.

My advice for developers? Learn a few web technologies that pique your interest and cook up your own beautiful web soup.

Tagged

The big list of developer conferences in 2013

Looking for good software & technology conferences in 2013? I did a bit of scrounging around, talked with some colleagues, and came up with this big list of 2013 dev conferences, ordered by date.

  • W3Conf
    February 21-22
    San Francisco, California
    The W3C’s annual conference for web professionals. Latest news on HTML5, CSS, and the open web platform.
  • Web Summit
    March 1st
    London, Great Britain
    "Our events focus on giving attendees an incredible experience with a mix of world-leading speakers, buzzing exhibitions and effective, deal-making networking opportunities. Our illustrious list of past speakers includes the founders of Twitter, YouTube, Skype and over 200 international entrepreneurs, investors and influencers."
  • MX 2013
    March 3-4
    San Francisco, California
    UX and UI conference. “Managing Experience is a conference for leaders guiding better user experiences”
  • SXSW Interactive
    March 8-12
    Austin, Texas
    "The 2013 SXSW® Interactive Festival will feature five days of compelling presentations from the brightest minds in emerging technology, scores of exciting networking events hosted by industry leaders, the SXSW Trade Show and an unbeatable lineup of special programs showcasing the best new digital works, video games and innovative ideas the international community has to offer. Join us for the most energetic, inspiring and creative event of the year."
  • Microsoft VSLive Vegas
    March 25-29
    Las Vegas, Nevada
    .NET developer conference. “Celebrating 20 years of education and training for the developer community, Visual Studio Live! is back in Vegas, March 25-29, to offer five days of sessions, workshops and networking events – all designed to make you a more valuable part of your company’s development team.”
  • anglebrackets
    April 8-11
    Las Vegas, Nevada
    anglebrackets is a conference for lovers of the web. We believe that the web is best when it’s open and collaborative. We believe in the power of JavaScript and expressiveness of CSS the lightness of HTML. We love interoperability and believe that the best solution is often a hybrid solution that brings together multiple trusted solutions in a clean and clear way. We love the expressiveness of language, both spoken and coded. We believe that sometimes the most fun at a conference happens in the whitespace between conference sessions. More details at
    Hanselman’s blog.
  • Dev Intersection, SQL Intersection
    April 8-11
    MGM Grand, Las Vegas, Nevada
    Visual Studio, ASP.NET, HTML5, Mobile, Windows Azure, SQL Server conference. Focused on .NET and SQL developers.
  • TechCruch Disrupt
    April 27th-May 1st
    New York City, New York
    Technology and startups conference.
  • Microsoft VSLive Chicago
    May 13-16
    Chicago, Illinois
    .NET developer conference
  • Google I/O
    May 15-17
    Registration opens March 13th at 7am.
    San Francisco, California
    Probably the most anticipated developer conference in the world. Expecting some news on Google Glass, perhaps some haptics support in Droid devices, maybe a bit on self-driving cars…what’s not to love?Registration to be opened up early February. Tickets usually sell out immediately.
  • GlueCon
    May 22nd-23rd
    Denver Colorado
    "Cloud, Mobile, APIs, Big Data — all of the converging, important trends in technology today share one thing in common: developers. Developers are the vanguard. Developers are building in the cloud, building mobile applications, utilizing and building APIs, and working with big data. At the end of the day, developers are the core."
  • Microsoft TechEd
    June 3-6
    New Orleans, Louisiana
    Longstanding Microsoft developer and technology conference.
  • Mobile Conference
    June 6-7
    Amsterdam, The Netherlands
    Conference for mobile devs, focusing on the future of mobile app development.
  • WWDC
    June 10-14
    Apple’s highly-anticipated Worldwide Developer Conference. Tickets go on sale April 25th.
  • Norwegian Developer Conference (NDC)
    June 12-14
    Oslo, Norway
    Huge developer conference featuring some of the biggest speakers in software, including Jon Skeet, Scott Meyers, Don Syme, Scott Allen, and Scott Guthrie.
  • Microsoft BUILD
    June 26-28
    San Francisco, California
    Microsoft’s one big Windows developer event. All the big Microsoft names –from Guthrie, to Hejlsberg, to Hanselman — will be there. Expect great technical presentations, tablet giveaways, and an all-hands-on-deck Microsoft powerhouse conference.
  • SIGGRAPH 2013
    July 21-25
    Anaheim, California
    40th international conference and exhibition on computer graphics and interactive techniques. Graphics, mobile, art, animation, simulations, gaming, science.
  • OSCON
    July 22-26
    Portland, Oregon
    Biggest open source technology conference.
  • ThatConference
    August 12-14th, 2013
    Kalahari Resort, Wisconsin Dells, WI
    Spend 3 days, with 1000 of your fellow campers in 150 sessions geeking out on everything Mobile, Web and Cloud at a giant waterpark.
  • <anglebrackets>
    October 27th – 30th
    MGM Grand, Las Vegas, Nevada
    Hosted by renowned developer and speaker Scott Hanselman, <anglebrackets> is a conference for lovers of the web. We believe that the web is best when it’s open and collaborative. We believe in the power of JavaScript and expressiveness of CSS the lightness of HTML. We love interoperability and believe that the best solution is often a hybrid solution that brings together multiple trusted solutions in a clean and clear way. We love the expressiveness of language, both spoken and coded. We believe that sometimes the most fun at a conference happens in the whitespace between conference sessions.

    Author’s note: I attended the spring <anglebrackets> in April, and it was positively fantastic. Highly recommend this conference.

  • DevConnections and WinConnections
    Week of November 18
    Mandalay Bay, Las Vegas, Nevada
    Microsoft developer event

If you’re into futurism and technology evolution, The Singularity Summit might be for you, with speakers like Ray Kurzweil and Peter Norvig. The dates for 2013 are yet unannounced.

As for me, I’m headed to anglebrackets/DevIntersection in April. This dual conference will host speakers like Scott Hanselman, Phil Haack, Damian Edwards, Elijah Manor, Christian Heilmann. Should be a blast!

Know any good conferences not listed here? Let me know in the comments.

Tagged , ,

Stop writing for loops in Javascript

You have an array; you want to find an element in the array. What do you do?

Most developers go with the old procedural for loop:

var items = [
   { Name = "Matthew", Id = 1 },
   { Name = "Mark", Id = 2 },
   { Name = "Luke", Id = 3 },
   { Name = "John", Id = 4 }
];

// Find the item with Id === 3
var matchingItem = null;
for (i = 0; i < items.length; i++) {
     if (items.Id === 3) {
       matchingItem = item;
       break;
     }
}

  // Do something with matchingItem
}

What’s wrong with this?

It’s the classic procedural programming affliction: over-specification. It painfully specifies all the steps the program must take to reach the desired state.

All you want is the item with an Id of 3, but instead you create a new loop variable, increment that variable each loop, use special loop iteration language syntax, index into the array, check if it matches your condition, store the match in a mutable variable.

The how obscures the what.

Thank you sir, may I have another.

This obfuscates the intent of your code via over-specificying pageantry.

It’s also error prone. The above code omitted the var declaration for the loop variable i, (did you catch that?), thus adding it to the global scope (oops!). Developers often forget to break; out of the for loop when a match is found, resulting in superfluous loop iterations at best, unintended behavior at worst.

Can we do better?

How about .filter?

Today’s JavaScript (1.5+) includes the built-in .filter function:

var items = [
     { Name = "Matthew", Id = 1 },
     { Name = "Mark", Id = 2 },
     { Name = "Luke", Id = 3 },
     { Name = "John", Id = 4 }
  ];

  // Find the item with Id === 3
  var matchingItem = items.filter(function(item) {
     return item.Id === 3;
})[0];

  // Do something with matchingItem...

.filter is a higher-order function that returns all elements in the array that match your predicate. The above code calls .filter(…) and then gets the first matching item.

This is better, but still not right.

What’s wrong with this? Like a for loop that forgot to break; out of the loop after finding a match, .filter will iterate over your entire array, even if it already found a match. This will result in superfluous iterations. And if your code doesn’t account for multiple items matching your condition, you’ll get unexpected behavior.

Solution

There’s no way to do this efficiently or succinctly using any of the built-in JavaScript array functions.

Because of this, most developers just do the ugly one, or the inefficient one.

A proper solution would be a function added to the Array prototype chain. In lieu of the browser vendors doing that, we can do it like this:

if (!Array.prototype.first)
{
   Array.prototype.first = function(predicate)
   {
     "use strict";   
     if (this == null)
       throw new TypeError();      
     if (typeof predicate != "function")
       throw new TypeError(); 
     
     for (var i = 0; i < this.length; i++) {
       if (predicate(this[i])) {
         return match;
       }
     }      
     return null;
   }
}

Here, we’ve defined a .first method on the Array prototype. It uses the efficient-but-ugly for loop. But instead of coding up this for loop every time, we can now just call our higher-order function:

var items = [
   { Name = "Matthew", Id = 1 },
   { Name = "Mark", Id = 2 },
   { Name = "Luke", Id = 3 },
   { Name = "John", Id = 4 }
];

// Find the item with Id === 3
var matching = items.first(function(i) { return i.Id === 3 });

// Do something with match...

Much cleaner, syntactically similar to .filter, but without the superfluous iterations.

JavaScript has no lambda syntax (yet), so it’s not as clear as it could be. Ideally, we’d write it more succinct, something like:

var matchingItem = items.first(item => item.Id === 3);

We’ll have to wait for the proposed arrow function syntax for the next version of JavaScript before we can get that succinct.

In the meantime, Array.prototype.first is a nice polyfill with decent syntax, allowing your code to focus on what, rather than how.

Follow

Get every new post delivered to your Inbox.