Tag Archives: html5

The Holy Grail: Full-stack JavaScript MVC with Rendr

Spike at Airbnb just mentioned during a live TechTalk webcast that the Rendr framework they built was open sourced earlier this month: https://github.com/airbnb/rendr. The framework leverages Node.js and Backbone.js to allow full-stack JavaScript MVC using a common set of code–greatly improving time to content, improving crawability, and reduces overall application complexity.

During the talk, Meteor and Derby were mentioned, and Mojito *sigh*. And Stitch was also mentioned, as a part of the stack they’re using. So anyway, there you have it. The Holy Grail I talked about. It’s out, but admittedly, according to Spike, not quite “finished”. Caveat emptor.

Later in the talk Spike mentions they were heavily inspired by Chaplin, which you can set up quickly by reading my recent post on developing modern web applications.

Developing modern web applications on Windows with Vagrant

3 Replies

I earlier this month I spent way too much time writing an article on how to SFTP to Ubuntu Server with Sublime Text. The purpose of the SFTP effort was to set myself up for developing modern web applications on a new Windows 8 machine I bought to play SimCity 2013. And after getting everything working I realized the SFTP method had some gremlins and the file syncing reminded me of Dreamweaver–it simply wasn’t fast enough.

Lately, unless you were running a Linux machine or had the pleasure of owning a Mac with OS X, developing modern web applications has been a bit of a kludge. Enter Vagrant.

Vagrant is a tool for building complete development environments. With an easy-to-use workflow and focus on automation, Vagrant lowers development environment setup time, increases development/production parity, and makes the “works on my machine” excuse a relic of the past.

In this article I’ll explain how to set up a development environment in Windows using a virtualized Linux box, suitable for rapid prototyping. Then I’ll take it a step further and explain how to integrate a Backbone-based application framework with Vagrant and Sublime Text, greatly increasing the speed for developing modern web applications on Windows.

Continue reading →

The Holy Grail of Rich Internet Applications

One of the largest perceived drawbacks to creating a SPA or other Rich Internet Application is that they’re not SEO friendly or very accessible. With the advent of technologies such as ARIA, HTML5 and Node.js, things are changing. Web apps are becoming more usable and accessible, though also making them crawlable and highly performant is a formidable challenge. To solve this problem I for one am behind Derick Bailey’s approach for using HTML5 pushState and PE to achieve SEO and accessibility. After all, the hashbang method suggested by Google has a major problem: the URLs are not semantic.

It seems as though I’m not alone in my belief that Progressive Enhancement is possible in a single-page application, and the following article by Airbnb points toward the fact that they were able to achieve PE in a RIA using a technique they’re calling The Holy Grail. Under the approach, and per my understanding, content is rendered server-side first using both the same templating logic, routes and models, served up to the user agent, and then progressively enhanced afterwards with JavaScript.

A successful quest for The Holy Grail should yield a fully-crawlable Rich Internet Application with phenomenal “time to content” that doesn’t tax crawlers with ajax and will function in most any browser, even with JavaScript disabled.

Check out the Airbnb article referenced, which depicts the Holy Grail in a linked image, and ask yourself if you’re drinking from the right cup. You must choose, but choose wisely.

Amp up CoffeeScript coding with Sublime Text

2 Replies

Sublime Text with CoffeeScript is a JavaScript developer’s dream, but one that doesn’t evaporate in the fog of sleep shortly after waking. After learning about Sublime Text at Fluent Conf 2012 during a plenary talk by Paul Irish, I immediately began looking for ways to incorporate it into my workflow. And now, after having used it for over 8 months in my day-to-day work, I wanted to share a quick primer for those who want to amp up CoffeeScript coding with Sublime Text too.

Continue reading →

Remote projects in Eclipse

Remote projects in Eclipse can be a great way of managing websites from thin clients and sites with existing backup processes in place. To create a remote project use RSE to establish a new connection using one of the available connection types, such as SSH. (Note: SSH may need to be explicitly enabled via the site’s web hosting control panel to function correctly with Eclipse.) Once a remote connection is established successfully, open up the Remote Systems view and drill down into the site via the tree view control. Find the the folder containing your desired project starting point, open its context menu and choose the Create Remote Project option to create a new remote project in Eclipse.

Once the remote project is finished syncing, it will appear in the Project and Package Explorer views. Opening the context menu for a remote project from one of the Explorer views will bring up additional options, such as project type configuration. The same menu also provides easy access to the Remote Systems view, helpful for file transfers.

Visit the Target Management page at Eclipse.org to learn more.

Get sideways with HTML5 in Eclipse

Leave a reply

There are few front-end web developers I know who actually use the Eclipse editor for development. Whether it’s the complexity of the IDE or simply resistance to change I cannot say. Working with Eclipse on enterprise apps has some serious advantages when it comes to working in multidisciplinary teams. And wrenching on a UI is no exception.

Continue reading →

Web Development and Debugging Tools

3 Replies

Following is a  list of cross-browser/platform web development and debugging tools useful for client-side developers. Depending on the application, one or all of these tools can be valuable in completing work on a website front-end.

Check out the Web UI Engineering Resources page for an actively maintained list of web development resources.

Continue reading →