Programatori.info

web programming blog

Archive for category Node

Progressive enhancement using nothing but JavaScript?

Sep 17

Posted by Web Design CLuj in Front Page, Node, WEB 2.0, Yahoo!, YUI | No Comments

Progressive enhancement is still a confusing matter for a lot of people who are very excited about the capabilities of JavaScript in modern browser environments. It can feel anachronistic to write your solutions for a non-JS environment and then once more enhances in JavaScript. I grew up like that so for me it is a simple matter of doing the right thing but with today's world of JavaScript libraries and out-of-the-box widgets it can seem a drag.

Enter Dav Glass of the YUI team. He's been turning the concept of progressive enhancement around in his head and as a JS lover and backend code "endurer" he set out to solve this issue once and for all in a pure JavaScript way.

Here's the issue: you cannot assume JS to be available on the client side as your visitors might be on a slow mobile connection or are paranoid enough to turn off JS or actually have it turned off for them by company policy or many other cases.

So in order to use pure JavaScript to render a solution that works for everybody the natural thing was to move the JS solution to the server side and re-use it on the client when it is possible.

If you say server-side JavaScript you end up quickly talking about Node.js and so did Dav.

Check out the following demo:

Express.js, Node and YUI3 for progressive enhancement by photo

All of what you see is driven by JavaScript - there is no server-side PHP fallback. Yet if you turn off JavaScript in your browser, you get the same experience.

The reason is that Dav uses Express.js and Node to render the HTML of the application server-side with JavaScript and YUI3. The code is available on GitHub and a video of him giving a talk about this is available soon on the YUI blog.

This is an exciting concept as it means that we can build progressively enhancing solutions using any widget library if we just think of the server-side case, too. This can mean a lot less code and easier maintenance as the only skill needed to build bullet-proof solutions is JavaScript.

The missing piece to the puzzle though is a fully fledged DOM renderer on the server side. DOMJS works but a C++ version would be much better in terms of performance and have all the features of DOM-2.

pushState + node.js on the Server Side

Sep 15

Posted by Web Design CLuj in Front Page, Node, WEB 2.0 | No Comments

pushState is a nifty way to manipulate browser history state without having to mess with the #hash value. You can use this to change the full path portion of the URL:

PLAIN TEXT
JAVASCRIPT:
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");
 

This would change the URL bar to http://example.com/bar.html without forcing the page to reload, allowing full JavaScript applications on the client-side. This is supported in Firefox 4, Safari, and Chrome.

Ben Nolan has been doing some interesting work exploring using pushState + JQuery but on the server-side using node.js in order to get the advantages of pushState while still being search-engine and accessibility friendly:

The number one downfall of javascript apps, is that there are now pages in your app that can’t be linked to - nor can they be crawled by google, or scraped by any other site that uses the http protocol. Building exciting new apps that ‘break the internet’ isn’t cool.

But if you can run your entire app on the server side - then if someone goes to http://yourapp.com/search/myterms - node.js can load your page on the server, recognize the url, run the correct javascript code to update the state as the browser would - then send it down the wire. So that non-javascript clients can access the same content that a desktop browser can.