Rocking YUI on Node.js and Mobile

By Dav GlassNovember 7th, 2011

Just over a year and a half ago I broke onto the scene with some demos of running YUI on the server with Node.js. This started out as an exercise in just stressing YUI’s modularity and its ability to be used in more places than just the browser.

Back in April of 2010 I started this journey with this blog post followed by one of my most popular ones, Server Side DOM. After this series of articles, I began talking about YUI on Node.js to anyone that would listen. In Sept of 2010 I started with a small town hall style video, then again at YUIConf 2010 in November.

By that time, others had started seeing the possibilities that I had and started doing more awesome things. Matthew Taylor gave a talk after mine at YUIConf 2010 called YUI 3 & Node.js for JavaScript View Rendering on Client or Server. Many people didn’t realize at that time that Matt was working on an internal project at Yahoo! called Mojito, but he was spending some serious time tweaking YUI on Node.js and building some outstanding things. Satyen Desai also gave a talk at YUIConf 2010 called A Phone, a Tablet and a Laptop Walk into a Bar.

In May of 2011 I gave another presentation at our internal F2E Summit called YUI 3 and Node.js – Not Just for Web Pages where I highlighted using YUI on the server/commandline for utilities or services that do not involve web pages.

All of these talks led up to YUIConf 2011, where there were several talks on Node.js, YUI, and mobile development. It has often been said that YUI is not designed for mobile development. Well, we’re here to prove you wrong. One of my favorite quotes heard at YUIConf this year was something like, “YUI doesn’t need to branch and create a mobile code line, their shit just works”. This is something that I fully stand behind. YUI’s flexible module system makes it perfect for building mobile applications. From our core modules, to our conditional loading, to our new App Framework, we’re already powering high-profile mobile web applications today.

This brings me to the launch of Livestand. After launching, Livestand hit the #1 position in both Free Apps and News Apps in the Apple App Store. Not only is this app beautiful to look at, it’s a technical revolution here at Yahoo!. Livestand was built using new technologies that, if you haven’t guessed yet, are all based on YUI on the server and on the client. It brings together all the things I and others have been talking about for almost 2 years now, and delivers them in one fantastic application. In the coming months, the core technology powering Livestand will be released so you can start building kick-ass applications like it.

I’m proud of what the Livestand team has accomplished and I take great pride in knowing that YUI was there to push the boundaries and help them reach their goals.

I’ll leave you with one more quote overheard at YUIConf 2011: “YUI is kind of like a Transformer: more than meets the eye”.

We’re still editing the more than 25 hours of video recorded at YUIConf, but in the meantime here’s a preview of what will be coming to YUI Theater over the next few weeks.

6 Comments

  1. I don’t mean to hijack this post and detract from the achievements of cocktail and YUI in SSJS, but I just don’t see yui happening in the mobile space yet. Clearly it’s got mobile capability – but I need some guidance and whilst app framework looks great, I haven’t yet seen a simple mobile example I can pickup and run with. Looking at the iUI gallery (http://www.iui-js.org/gallery) there are mobile app samples that date back to 2007. 4 years later yui3 doesn’t have a single example, and in the meantime plenty of other mobile frameworks have stepped up from those early beginning with iUI. 3.5 perhaps?

  2. Marc Schipperheyn said:
    November 8, 2011 at 5:20 am

    Well, there is the gallery-slidecheckbox ;-) but I do agree that there is a serious lack of native style widgets that are plug-and-play. The app framework is great plumbing. Now we need some design faucets to complete it.

    On another note, given the advent of HTML 5 as a replacement for native apps, it will be interesting to see if the “native look” will remain as important as it is now. Regardless, the ability to easily use widgets in a way that is mobile friendly is crucial.

  3. What do you consider “native style widgets”? iOS? What do you consider mobile? A Phone? A Tablet? Perhaps my 3G enabled laptop?

    YUI is dedicated to making sure that we work in every environment and we work there well. You can not assume that iOS is the standard, nor can we. That’s style, it’s CSS that makes that “look” native. But your app may not want to look native. Livestand does not, it looks “ios like” but it sure doesn’t look like a native iOS app and most apps probably should not either.

    What we give you is an architectural platform to build your application (mobile or not) in a way that works for you.

  4.  I get the ‘we give you the tools’ mantra. I do love the tools. But there is a clear gap between what yui offers in the mobile space, to what jquerymobile offers (for example). I don’t have the resources to engineer a mobile app framework from the yui raw materials so using an out-of-the-box framework like jquerymobile lets me ship early.

    you might say ‘ok – but at yui we are not intending on doing a full blown jquerymobile type of thing. that’s for a third party to step up and deliver’.

    and if so, fair enough. only problem is that doesn’t help me today. I’d love to see appframework in a mobile context with a very basic iUI type demo. that would give me something to work from. 

  5. Simon,

    I do agree with you; we need to provide guidance, both in the form of example applications with accompanying documentation and tutorials which detail how we think web application should be built. We have a clear vision and strong opinions on this stuff, but we need to do more to publicize these viewpoints and techniques, and build [example] apps to back it up.

    This is on my plate. I will be building out these guides/tutorials and feedback like yours solidifies and helps validate that people need and want this. Expect us to get our act together and do some great things in this area over the coming months.

    During YUIConf I presented on the App Framework; I put special focus on what is coming in 3.5.0, and it’s big step forward. We will be introducing Y.App in the first Preview Release of 3.5.0. Y.App is a View and navigation manager which provides a major infrastructural component for building single-paged web applications, especially on mobile devices.

    If you would like to track the on-going development of Y.App and provide your feedback (please do so) we have an open, public, Pull Request on GitHub: https://github.com/yui/yui3/pull/37

    Also, I highly recommend you watch the video from my talk once it appears on our YouTube channel: http://www.youtube.com/yuilibrary

    Recently I built an example application, Photos Near Me, which is actually running on all the latest App Framework stuff including Y.App. This application was build targeting mobile devices as being the primary environment; it features a responsive design, and the same code that runs on your iOS devices also runs in Chrome on your desktop. The code is also available on GitHub: https://github.com/ericf/photosnear.me

    Inherently, YUI is mobile-ready (and server-ready). The library is built to be environment, device, browser, screen-size, and input agnostic.

    Combining this approach with more app-infrastructure, more high-quality widgets and controls, and more skinning options, things will continue to gel and build on each other. These are the fronts that our development is happening on.

    We definitely want to make sure that YUI provides the relavent tools, infrastructure, components, and guidance to allow you to maintain focus on building your web applications, including and especially mobile web apps. The early architecture decisions made with YUI 3 are providing un-tapped value for us to realize as we continue to build our higher-level and application-infrastructure components.

  6. Hi Eric,

    Thanks for your detailed and thoughtful response! It is both reassuring and great to hear what’s in the pipeline, and I’m looking forward to watching the YUI conf talks on youtube. Looking at photosnear.me I can see it certainly plays nicely on my iPhone. I’m a big yui fan so am definitely along for the ride.

    Cheers