Monday, August 26, 2013

Dynamically Creating Game Rooms using Socket.IO and NodeJS

As I ventured into some real-time work with the browser, it made sense to jump into Socket.IO and see what it had to offer. My primary focus was to build a turn-based game in the browser which allowed 2-4 players to play the game in real-time. I liked Socket.IO because it handles the details of normalizing the mechanism for providing real-time communication in the browser, integrates out-of-the-box with NodeJS and Express, and already contains a "room" feature to isolate messages. I found some quick and dirty examples floating around but nothing that really addressed how to dynamically generate a room and get everyone connected. The approach I ultimately took was a hybrid solution using a handful of traditional REST API end-points to handle registering a new game and other players joining that game and switching to Socket.IO events to manage the game play once the registration phase was complete. In this post, I'm not going to present a full game but, instead, strip down the code samples to what I believe is the basic boilerplate to create a game and coordinate the process of adding players. Along the way, I'll point out some issues related to concurrency and address a few failure scenarios.

Wednesday, August 21, 2013

Create Fly Over Notification Messages with Bootstrap

Twitter Bootstrap provides a very solid foundation for structuring a page. Even if there is not a specific component available in the framework's library, you can usually adapt something to meet your needs. Additionally, the framework establishes patterns that are worth understanding as you construct new types of content. If you look at how a modal dialog is transitioned into the view, you'll notice it uses all CSS3 to perform the animation. It does this by using a "fade" class defining the initial positioning and transition to use. An additional "in" class is defined which contains the final position of the modal box. By toggling the "in" class on and off, you can animate the modal in and out of the visible page. When I wanted to create notifications that would fly into view, I thought I could leverage that concept to do a similar thing. Additionally, the Jumbotron class provided the layout structure I wanted for the content so I figured I would build on that to create my fly over message.

Friday, August 16, 2013

A Walk-Through of the Backbone.Fiber Demo

As a follow up to my post about the Fiber framework, I wanted to step through how the demo was assembled to utilize various features offered in the framework.  My goal was to create a basic, single data source application that explored several different patterns you will encounter when building a SPA.  Even though its read-only, its still a good example of the capabilities and project organization.  While concepts like two-way binding and state management are all possible extensions, the framework itself is not really concerned with how data is bound and rendered but more with how different parts are loaded and work together to create a functional application.  Additionally, I'll touch on how the project is organized to leverage various developer tools.  You can find the source on GitHub and use the live demo here



Monday, August 12, 2013

Building a Modal Progress Bar with Twitter Bootstrap 3

I needed a progress bar to show when loading some data and wanted the screen to block. It sounded like a job for a modal dialog. Bootstrap had both so I tried to combine them to create the desired effect. The idea was to show the modal and then cause the progress bar to animate from 0% to 100%. Bootstrap already has the transition defined in the framework, you just need to change the width to reflect the progress. In my case, I really didn't know the status, I just wanted to make it look like I did. So I created a class that changed the width to 100%. Thinking everything was all set, I tried it out and found it always showed at the 100% point:

See the Pen Bootstrap Modal Progress Bar by bseth99 (@bseth99) on CodePen



Knowing that there are usually issues around elements considered "hidden", I did some digging and found that transitions will not be run on elements with display: "none". Well, I had the show method just before it so it must be some kind of timing issue. I tried adding a setTimeout to force the code to run after the current execution stack completed:

  setTimeout(function() {
    $bar.addClass('animate');
  }, 0);


See the Pen Bootstrap Modal Progress Bar by bseth99 (@bseth99) on CodePen



This worked well, except every few clicks on the button resulted in the progress bar appearing in the final state. So something still wasn't working consistently. I upped the timeout to 10 milliseconds and it "seemed" to work fine. However, I wasn't going to risk it so I decided to really understand what was happening. As it turns out, browsers try to be pretty smart to speed things up so they'll try to batch changes to the DOM before really "committing" them to the DOM. In our case, we're going from display: "none" to display: "block" and then trying to add the animate class. This will get batched into one operation. The 10ms just tried to get outside that window to force a redraw before it was applied. However, this could change or vary between browsers so its probably not a good solution. A better approach is actually quite simple and avoids the setTimeout entirely:

  
  // Force DOM repaint with is()
  $modal.modal('show').is(':visible');
  $bar.addClass('animate');



Because $.is queries the DOM, the browser must render out anything its queued up. I could use anything to trigger it, but checking for ":visible" seemed related to what I was doing so I went with it. Now, the next line can run immediately knowing the progress bar is actually displayed and the transition will occur:

See the Pen Bootstrap Modal Progress Bar by bseth99 (@bseth99) on CodePen

I also fixed the styles to properly show the modal backdrop with a 50% opacity (this is corrected in a later release of Bootstrap 3). Knowing what happens made it easier to understand how to work around it. It looks odd, so a comment is probably good to avoid a friend from removing it and breaking everything, otherwise, this beats the setTimeout approach.

Thursday, August 8, 2013

Managing URL End-Points in Backbone Models and Collections

I had some trouble trying to get my end-points to work properly in Backbone lately. It was further complicated by the fact that what worked in one version stopped working in a newer version. Both the model and collection have a URL property. In theory, you should be able to use different end-points as necessary, however, depending on where you specify it, the behavior is different and, at times, undesirable. I've found that the source for my collection and the source for model are not always the same. In many instances, the collection will use a search API which provides a smaller fieldset but with many filtering options while the model with use an API that includes all the fields and has your normal REST operations. In that situation, you will want to define similar, but not the same URL for the source of the collection and model.

Saturday, August 3, 2013

Extending BackboneJS to Build Better Web Applications

I was reading Cody Lindley's Backbone.js Deconstructed and he pointed out that
... a framework calls your code, while a library is code that you call ...
And makes the statement, given the above definition, that Backbone is simply a library not a framework. That got me thinking about what truly defines a framework. Some people might include development workflow tools, visual components, and, various other helpful technologies. My definition boils down to simply these two concepts: modularization and life-cycle management.

Motivation


Before digging into anything real, I took a step back and tried to reason through what really defines these two concepts and only loosely tie these back to Backbone. I am interested in how these ideas relate to browser-side application development and thinking in terms of larger single page applications. I'm really interested in going beyond "hello world" and todo lists and want to find ways to factor out common functionality. In the context of building data-driven applications, I need to present the data to the user, allow them to interact with it, and then persist any changes along the way without having to write reams of code to accomplish it.