Know What the Heck You’re Doing (KWHYD)

Developing for JavaScript has never been easier than it is today thanks to the plethora of freely available open source third party libraries. I’m sure I’ll be writing about many of these in the months to come, but today I want to introduce something that is crucial in JavaScript land. We’ll call it “KWHYD” (pronounced “Quid”) which stands for “Know What the Heck You’re Doing”. What can I say, I’m into naming things these days.

Knockout

I’m a big fan of KnockoutJS, Steve Sanderson’s now famous MVVM library for JavaScript. It may not be your cup of tea: I’ve talked to some pretty smart folks who don’t like mixing the bindings in with the markup. I’ve also met some pretty smart folks who love it’s power, simplicity, and ease of use. As a longtime XAML-head I’m certainly more aligned with the latter. Knockout made my transition to JavaScript and Single Page Applications (SPAs) not only tolerable but downright enjoyable. Whether you use Knockout or not won’t impact the point I’m making, so read on.

jQuery

Another tool that makes life in JavaScript land far more pleasant is the ubiquitous jQuery. My fellow MVP, ASPInsider, and recent founder of WinSitterKevin Griffin, is fond of saying “jQuery makes JavaScript not suck.” My version of Kevin’s statement is that “jQuery makes DOM manipulation not suck.” I’ve also heard it said that “if you aren’t using jQuery, you’re doing it wrong” but I’ll leave you to decide that for yourself.

Library Interaction

This is not an introduction to Knockout or jQuery, the Internet is replete with fine examples and tutorials. For me, these two tools are key components in modern web development, and it would seem Microsoft agrees since they are both installed by default with the new MVC4 templates:

Default scripts included in MVC4 template

Default scripts included in MVC4 template

One of the arguments against JavaScript is that you don’t really have to know what you’re doing. JavaScript is very flexible and ostensibly forgiving of simple mistakes. Using third party libraries can “enhance” this “feature”. Using multiple libraries exponentially increases the probability that something will go wrong.  The interaction between libraries may be subtle so it is exceedingly important you actually Know What the Heck You’re Doing.

The Symptom

To highlight the issue, I’m going to share with you something that happened to me recently. I was working on an application that uses Twitter Bootstrap (see, there’s yet another library at play) for the UI. The app makes heavy use of Knockout for data binding and jQuery for eventing. Here is some psuedo-code to outline the problem:

HTML:

JavaScript:

The problem is that the click event handlers for the option1 and option2 nav pills never fire. I stared at this for quite awhile, made a lot of incorrect guesses, and tried a lot of solutions, all to no avail. The frustration was exacerbated because at one point they DID work. Turns out a seemingly unrelated change was implemented and the UI was never retested, but I’ll address that shortly. Finally, I *saw* it and all was clear.

The Cause

If you are an experienced Knockout developer, you may have already spotted the culprit. If not don’t worry, I won’t make you wait: the offense here is in using the Knockout ‘if’ binding. On the surface, the if binding acts like the visibility binding, only showing the HTML element (and hence its children) if the matching condition is true. What if actually does is physically add and remove elements from the DOM, which is what caused the problem.

When the page loads, and the bindings are created, the value of Companies() is an empty observableArray, which caused the if binding to interpret as false and remove the DOM elements. Since the elements are no longer part of the DOM, jQuery had no targets to bind the events. In other words, it was functioning exactly as designed.

The Solution

It turns out I had recently moved this particular if binding higher in the DOM heirarchy. It used to be in the div after the nav-pills and moving it back there fixed the bug. Another solution would have been to change the binding from if to visible. I’m sure there are more complex solutions, like dynamically adding the jQuery bindings but that seemed unnecessary and nontrivial.

Conclusion

At the end of the day, it was not Bootstrap, Knockout or jQuery at fault: it was me. The true cause was my choice of if instead of visible because I liked the syntax better and not for any technical reason.

What really makes it worse is that by the time I moved the code that caused the problem to surface I DID know how the if binding functioned. I failed to see the unintended consequence and worse still I failed to test the app after the change. In other words, I failed KWHYD at several times during the process. The good news is I won’t make that mistake with if again…

Weekly roundup 09/21/12

Since I started at Lotic Factor I’ve been sharing a list of links with my coworkers we call “The Weekly Roundup”. There is no set schedule but typically I send out a list about once a week. The links mostly come from Twitter and various newsletters. The concept is nothing new, but it saves them from needing to spend as much time on twitter as I do! I’m sharing them in the hopes that some readers may find them interesting as well, and also as an archive of past links.

DISCLAIMER: The only qualification for inclusion is that I found them interesting. In no way are the links or articles vetted, nor does their inclusion constitute agreement with, adherence to, or support of any claim, position, prognostication, or statement contained therein, by either myself or my employer.


MISCELLANEOUS

WINDOWS 8

EXPRESSION BLEND

WINDOWS PHONE 8

HARDWARE

JAVASCRIPT

ASP.NET MVC

MICROSOFT OFFICE

MOBILE

DESIGN/CSS

 

 

Metro is dead, long live FIRST

On a recent This Week inWindows broadcast, Leo and Mary Jo Foley discussed some of the issues introduced by Microsoft’s abandonment of the Metro brand.  The problem is a serious annoyance to developers and especially technical teachers, bloggers, presenters, and authors. It’s also the source of some not-always-so-good-natured ribbing from the technical community. I’m a big fan of using proper terminology, so when Microsoft declared that Metro was verboten I dutifully tried to expunge it from my vocabulary, but I find it increasingly difficult.

Metro was used to refer to the new design language, but it also referred to the new Windows 8 experience. The tile-driven, blocky, clean and modern look and feel of Metro was already present on Xbox, Zune, and a host of other applications and websites. Discussing this UI approach without using the word Metro is a challenge, so what should we be saying instead? There was a period of uncertainty created by the void of Metro.  Some replacement names were floated around, some were not even all that bad such as “Modern”, and some were more in keeping with Microsoft, such as “Windows 8 Style”.

For a time Microsoft was quiet on the question of “what do we call it now?” but finally Visual Studio 2012 RTM’ed and we had the official answer. Metro is now rebranded “Windows Store”, so the style is now the “Windows Store Style” and the applications are “Windows Store Applications”.  Having spoken on Windows 8 development numerous times in the recent past, let me tell you that this is no fun at all, and it certainly doesn’t make sense in every scenario.

I’ve long referred to the new start experience as the Start page, but it makes no sense to refer to the new face of Windows 8 as “Windows Store Applications Start Experience”.  I tried to refer to it as just Windows 8, but that isn’t fair as the desktop is also part of Windows 8.  You can try just calling it Windows 8 Style, but let’s get real: life was much easier when we had “desktop” and “Metro”.

To address this issue, I’d like to suggest a community driven rebranding: let’s start using the phrase FIRST Apps. FIRST is an acronym for Fluid, Immersive, Responsive, Service-oriented, and Touch-friendly. Let’s discuss each of these in turn.

Fluid – Modern applications should be easy on the eye and engaging. Navigation should be animated and lively, utilizing animations, transitions, and easing. Effective use of white space and visual cues provide hints to more content.

Immersive – Content is King, and we should minimize anything that detracts from the content. These detractors, known as “the Chrome”, are very familiar to Windows users: menus, toolbars, status bars, navigation links, context menus, and so on.  These items do not need to be visible all the time: every pixel they use decreases the area available to present the thing the user cares about the most, the Content.

Responsive – Applications should start, load, and react quickly.  Heavy adoption of asynchronous techniques drive at least an illusion of performance and provide a non-blocking UI experience. Applications should start and reactivate quickly.

Service-oriented – I would also accept “Sharable” or “Social”.  This indicates an active reliance on content services, typically supplied by some cloud or web service or social interaction. It should be easy to share content with other people and applications.

Touch-friendly – non-traditional devices increasingly dominate the user experience, and the vast majority of these new devices are touch based. Touch support is included as part of WinRT but we still have to consider is as a design feature.  Adequate spacing, large friendly touchable items, and adherence to common gestures should be standard features.

I believe that FIRST embodies the intent and style of the brand formerly known as Metro.  It has the added benefit of being short  easy to say.  Metro is dead, long live FIRST!

Weekly roundup 9/14/12

Since I started at Lotic Factor I’ve been sharing a list of links with my coworkers we call “The Weekly Roundup”. There is no set schedule but typically I send out a list about once a week. The links mostly come from Twitter and various newsletters. The concept is nothing new, but it saves them from needing to spend as much time on twitter as I do! I’m sharing them in the hopes that some readers may find them interesting as well, and also as an archive of past links.

DISCLAIMER: The only qualification for inclusion is that I found them interesting. In no way are the links or articles vetted, nor does their inclusion constitute agreement with, adherence to, or support of any claim, position, prognostication, or statement contained therein, by either myself or my employer.


I’ve been busy and traveling, so it’s a short list this week.

WINDOWS 8

JAVASCRIPT

MISCELLANEOUS

 

Weekly roundup 9/7/12

Since I started at Lotic Factor I’ve been sharing a list of links with my coworkers we call “The Weekly Roundup”. There is no set schedule but typically I send out a list about once a week. The links mostly come from Twitter and various newsletters. The concept is nothing new, but it saves them from needing to spend as much time on twitter as I do! I’m sharing them in the hopes that some readers may find them interesting as well, and also as an archive of past links.

DISCLAIMER: The only qualification for inclusion is that I found them interesting. In no way are the links or articles vetted, nor does their inclusion constitute agreement with, adherence to, or support of any claim, position, prognostication, or statement contained therein, by either myself or my employer.

JAVASCRIPT

WINDOWS 8

DESIGN

WINDOWS PHONE

HARDWARE

MOBILE

MISCELLANEOUS

 

Let’s stop calling them self-executing functions

Before we begin, please understand that I dislike the argument “that’s just semantics”. For the record, I’m also not fond of “it’s all relative”, but I’ll save that rant for another post. If semantics aren’t important then neither are spelling, grammar, punctuation, and pronunciation. I have had a long uphill battle trying to convince my children that words and phrases have meaning, and the terms “whatever” and “you know what I mean” are not Get Out of Jail Free cards for proper use of the English language. They are surely sick of hearing me say “words matter”.

That said, I’ve noticed something in JavaScript land that bugs me. Managing variable scope in JavaScript can be challenging, especially for object oriented developers unfamiliar with function based scope. To mitigate these difficulties, it is a common practice to manage or protect variable scope by declaring a function inside parentheses:

This practice is commonly referred to as a “self-executing function” or sometimes “self-invoking”. The function, in this case anonymous, is wrapped in a set of parentheses which contains the scope of its variables within the function, hence protecting them from outside interference. The second set of parentheses trigger the execution of the code contained within the first set. In other words, the first set of parentheses defines the function and the second set immediately executes the function. This syntax is also used to differentiate between function declarations and function expressions.

There’s plenty more we could discuss about this, and even a few alternate syntax examples, but I don’t want to get too far away from my point, which is this is not “self-executing”. The parentheses that execute the function are defined outside the function boundaries. A truly self-executing function would cause itself to execute, which I don’t believe is possible. Recursion is close, but it still couldn’t account for the initial function execution. More accurately, this is an “immediately executed” function.

This post was going to be more long winded but I found a great article aptly titled Immediately-Invoked Function Expression by Ben Alman that does a much better job of explaining the details than I could have. The acronym (IIFE) may be pronounced “iffy”, but there’s no question in my mind it’s the better choice.

 

A fresh start

I used to blog extensively at http://developingfor.net, primarily about .NET topics but occasionally others.  Strangely enough, I hardly ever blogged about Microsoft Expression Blend (the topic I’m best known for), mostly because I had other outlets for that information.  I essentially quit blogging when I began writing my book, Expression Blend in Action: a developer’s guide.  Anyone who’s written a book will tell you it eats up a significant portion of your free time, so I’m sure it is no surprise that I had precious little time for blogging.

As the book neared completion, Microsoft threw us all for a loop with the first BUILD conference and the announcement of Windows 8.  Along with Windows 8 comes a brand new runtime and a new development stack.  I’ve always been a generalist, happily bouncing from technology to technology, even platform to platform, but .NET was my core for nearly a decade. Amid the changes in the Microsoft desktop stack, I began working on a large ASP.NET MVC project, a rewrite of an old CGI application I had written in 2000.  This project rekindled a passion for web development I had almost forgotten about.  Along the way I also changed jobs, a big step considering I had been with my previous employer for over 11 years.

As a Senior Technology Consultant for Lotic Factor, Inc., I am focused heavily on responsive web design and single page applications. Unsurprisingly, my language of choice these days is JavaScript, and I’ll have plenty to say about that in the near future.  I still use .NET for server side operations and I’m very interested in Windows 8 development.  I have several applications under development and I speak often about Windows 8 and Blend.  That being said, I realize that my focus on .NET has most likely passed, and so has the time for the old blog.  You can still find all the old content at http://developingfor.net, minus a few screen shots and broken links.

With a new job, a new focus, and a new platform, a new blog seemed fitting.  I hope you’ll join me as I begin anew.