Using Your App’s YUI Components on the Server

By Eric FerraiuoloApril 23rd, 2012

For my first sprint of 3.6.0 development I’m writing up (and showing by example) how to develop an app using YUI on the client and server, which works on both the desktop and mobile devices. Code sharing and reuse FTW! To start this process, I wanted to first build something using the development approaches that we want to promote. I’ve done that and I want to report in on my first experience running YUI on Node.js (spoiler: it was awesome!)

Photos Near Me, an app that shows you interesting photos near your current location, is a project I started almost a year ago to dogfood the YUI App Framework while Ryan Grove and I were writing it. I’ve been keeping the app up to date with the latest changes and additions to the App Framework, including the use of Y.App, the newest component in the App Framework. Photos Near Me has always been a client-side only app up until now!

My plan was to power the Photos Near Me server using Node.js, Express.js, and YUI, and I set two goals: share the app’s model objects and share its Handlebars templates between the client and server. Thanks to Dav Glass who has put in a ton of effort to make YUI run on Node.js in an intuitive, seamless way, I was able to easily accomplish these goals after several hours of refactoring the app. I was pleasantly surprised that my first try instantiating one of the model objects server-side and calling its load() method, which fetches data from YQL, just frickin’ worked!

Photos Near Me now renders the initial state for a request on the server then hands off control to the client-side Y.App instance. From there, in modern browsers which can use HTML5 History, all routing, data fetching, and page rendering will be done client-side; while older browsers will perform full page loads handled by the server. The time from request to seeing photos has been drastically reduced, it was especially noticeable on my iPhone when refreshing the page.

Being able to use the exact same code for the models and templates between the client and server makes following the best practices of progressive enhancement much easier to implement.

Check out Photos Near Me:
http://photosnear.me/

And its source:
https://github.com/ericf/photosnear.me

Watch for my comprehensive tutorial on building apps with YUI which will use Photos Near Me as an example to describe and show in detail how to use YUI on the server and client to build apps which run in desktop and mobile browsers while following the best practices of progressive enhancement.

6 Comments

  1. InSuperposition said:
    April 24, 2012 at 8:19 am

    Wow that is very cool!

    Was there a specific reason for choosing Express.js on the server instead of YUI App for both client and server?

    I can’t wait to hear more on YUI theatre.

  2. @InSuperposition Currently, Y.App assumes that it is running on the browser and requires things like window.location, DOM, and the browser’s history APIs to operate. That said, our goal is to make Y.App also run on the server by decoupling it from its browser-specific dependencies. The plan is to start with making Y.Router run on the server, which Y.App uses.

    Y.Router was inspired by Express.js’ routing and Express.js is awesome so that’s why I chose to use it on the server.

  3. Felipe Gasper said:
    April 26, 2012 at 4:45 pm

    Eric, parts of this seem not to work?

    http://photosnear.me/photos/2194011224/

  4. @Felipe It must be that the photo doesn’t have the correct derivative for some reason. Did you notice this on other requests as well, or just that one photo?

  5. Felipe Gasper said:
    April 26, 2012 at 11:36 pm

    I saw it in other requests, too, like this:
    http://photosnear.me/photos/3083535/

    It’s reliable when I find a photo that errors, but I can’t see a clear pattern for what loads and what doesn’t.

  6. Will this make mojito obsolete?