pixelhandler

Pushin' & pullin' pixels on the net

Develop a RESTful API Using Node.js With Express and Mongoose

For the past couple months I’ve been developing with Backbone.js and mocking data for an application. I’ve worked in the ecommerce industry for a few years and thought it would be a good idea to create a serious of posts on the topic of developing with Backbone using an example with some complexity, perhaps more than a ’todos’ or ’blog’ application, so the example will utilize a familiar Web application, an online store. To program a data-driven asynchronous application using a language I already know, JavaScript, the best way to learn is to write some code. So, I researched a few example applications using Node.js with a MongoDB database. This article is intended to be the first in a series on the topic building an online store using REST and Backbone.js to structure the code. This tutorial is not intended for production code, but rather an exploration of developing interactions with a RESTful API. This first post lays down a foundation for developing with a local API, then I can get into using the application with Backbone; but let’s get into the server-side for a bit first.

API Design for Mock Ecommerce Application

Goals for the Web service:

  • Simple API design and pragmatic REST Web service, with only 2 base URLs per resource
  • Keep verbs out of your base URLs
  • Our HTTP verbs are POST, GET, PUT, and DELETE (Create, Read, Update, Delete)
  • Concrete names are better than abstract

Example : two (2) resources (/products and /products/XX) and the four (4) HTTP verbs

Resource POST
(create)
GET
(read)
PUT
(update)
DELETE
(delete)
/products create a new product list products bulk update products delete all products
/products/1234 error show 1234 if exists update 1234, else error delete 1234

Developing a Modular JavaScript Application With RequireJS and Backbone.js

A few reasons I enjoy the JavaScript development community

Currently I am developing a JavaScript application using open source frameworks and libraries. Included the mix are… jQuery Mobile, Underscore.js, Backbone.js, RequireJS, mustache.js, Node.js, Jasmine, Sinon.JS, Jasmine-jQuery, and the Asynchronous Module Definition (AMD) specification. The web application is backed with a RESTful API. So, in researching on all the JavaScript based MVC type of frameworks, comparing Knockout, Ember.js (Sproutcore 2), JavaScript MVC, and Backbone.js I ended up selecting Backbone as my first choice. The community of developers using Backbone appears very active, there are plenty of blog posts, articles, tutorials, and videos on how to author code using Backbone.

I find it refreshing that many of these libraries have a fair amount of adoption within the development community. One of the primary objectives on this project is to build the application with modular code. Also to load modules when the specific components are needed for execution rather than the entire library which becomes the finish application. The AMD specification and the compatibility with RequireJS and other libraries is very attractive. RequireJS gives me the ability to author various modules and manage the code dependencies efficiently. Also with the build and optimization features of RequireJS I am able to organize the modules within packages. I broke down the file organization by having common directories for models, views, collections (objects defined using Backbone) and a few other directories, like syncs, utils to extend the functionality of Backbone. The modules in each directory are built into a single common package of modules and the package can be required by other modules which reside in other packages (groups of code for specific feature/component implementation, e.g. site chrome). I forked an open source book Backbone.js Fundamentals on these topics adding an explanation on how I am building and optimizing using packages of modules; see the section “Optimize and Build a Backbone JavaScript application with Require.JS using Packages”. I posted this section on the HauteLookTech.com blog as well.

Use Newer jQuery Features When Your App Is Stuck on Older Version

So, your app only uses a certain version of jQuery from last year sometime, e.g. v 1.4.2

Not a problem, you can add in the newer features you need by copying form the source and defining any dependencies used by the newer code, also copied from the source. Use the Source, Luke

This example shows how to add $.Deferred and the jQuery promise methods to your app which is still using version 1.4.2; perhaps some mission critical plugin or other code is preventing you from an upgrade to the lasted jQuery release.

Links on the topic of Deferreds / Promises

Short explanation

  • You really want to use jQuery methods : $.Deferred() .promise() .done() .fail() .isResolved() .isRejected() .then() .always() .pipe() .when()
  • You may be using a service to get some data e.g. via .ajax()
  • You need both ajax actions to complete (with success) then your code responds after both actions are done.
  • See Gists below … https://gist.github.com/1273143 | https://gist.github.com/1273133

See working example at : http://pixelhandler.com/downloads/code/deferred-promise/

HTML5 Video Package for CMS Using VideoJS

Screencast: Demo of HTML5 video used in a CMS block

videojs_player package as add-on for Concrete5.org CMS

The screencast below shows how to use the videojs_player package and also notes the tools used to prepare video for the block.

Screencast Demo

Notes: For info on HTML5 video see : http://diveintohtml5.org/video.html which has a tutorial for video conversion for web using the (free) Miro Video Converter. As HTML5 video implementations vary per web browser, to use this block you will need to prepare (4) files: .mp4, .ogv, .webm and have a preview or “poster” image. Also, if needed, Flowplayer (free) plays your .mp4 as flash media content.

CMS Block supports videos playback using the following supporting files

  1. Preview Image: Choose a ‘Poster’ image, file with a .png or .jpg extension; e.g. still frame from video.
  2. MPEG 4 (.mp4): Choose a file with a .mp4 extension as common HTML5 video format; also used for flash fallback
  3. Ogg video (.ogv): Choose a file with a .ogv extension; “Theora” file, HTML5 video format e.g. for FireFox
  4. WebM video (.webm): Choose a file with a .webm extension; HTML5 video format e.g. for MSIE 9+
  5. Maximum Dimensions: Input the maximum width and height in pixels

Links and References:

A Few Reasons I Decided to Switch to Octopress (From Wordress)

Over the weekend I noticed a few coding bloggers had switched to Octopress. I noticed the advantages for a developer who doesn’t need a content management system (CMS) using web forms to update a website. It may sound like I am reverting to the way people blogged 10 years ago with a static HTML website; but is not at all the case. With modern programming tools like…

  • Ruby gems like capistrano for deployment,
  • Git (SCM) to manage both the code to generate my site and generated code,
  • local development using Ruby to build my now Jekyll powered website,
  • and my favorite text editor, TextMate, to generate, edit and preview the content

Wireframing Templates for Magento Commerce With User Experience Notes

Building an ecommerce site and considering magento commerce as the code base? Well then, I have a treat for you. I’ve decided to share my magento commerce wireframes, click below to view the PDF and/or download the templates files:
  1. PDF of wireframe templates: magento-wireframes
  2. ZIP of Adobe Illustrator files: magento-wireframes
The following is a summary of the annotations that accompany the wireframe templates. These notes can be used to establish/inform your client of the user experience(s) that can be expected from an online store build with magento commerce.

Event Pooling Example Using jQuery

Example of using custom events in jQuery for event pooling. Elements broadcast (trigger) events and the document listens (binds) responding with calls to handlers based on. So, the methods to handle the events are loosely coupled with the UI elements and their behaviors. similar to other bind and trigger type of pub/sub (observer pattern).