Sep 04

JavaScript in all of the tiers

JavaScript, Tech 1 Comment »

CouchDb is the Next Hot Thing in databases, created by Damien Katz of Lotus Notes infamy, and now MySQL hacker.

CouchDb is a distributed document database system with bi-directional replication. It makes it simple to build collaborative applications that can be replicated offline by users, with full interactivity (query, add, update, delete), and later “synced up” with everyone else’s changes when back online.

There have been some exciting updates which now mean that JSON is the data representation of choice, and for views, you can simply use JavaScript functions:

CouchDb now internally uses the JSON representation to handle documents. We got rid of a whole lot of XML-related boilerplate code in the process

Jul 17

Forget the Feed URL

Ajax, Google, JavaScript, Tech No Comments »

Having to type in feed URLs, or grep them from view source (as you don’t use the browser specific system) can be a pain.

The Google AJAX APIs team has created a simple way to find feeds, and to locate feeds in a URL.

findFeeds will do a Google search and return entries and feeds related to the search.

Here is an example at work:

findfeeds.png

The code you will write will look like this:

google.feeds.findFeeds(query, function(result) {
var el = document.getElementById("feedControl");

if (result.error || result.entries.length <= 0) {
el.innerHTML = 'No Results Found';
return;
}

// create a feed control
var feedControl = new google.feeds.FeedControl();

// Grab top 4..
for (var i = 0; i < 4; i++) {
feedControl.addFeed(result.entries[i].url, result.entries[i].title);
}

feedControl.setLinkTarget(google.feeds.LINK_TARGET_BLANK);
feedControl.setNumEntries(2);
feedControl.draw(el);
}

lookupFeed takes a URL and returns the feed. E.g.

function newSlideShow(user) {
showStatus('Resolving feed for ' + user);
var url = 'http://www.flickr.com/photos/' + user;
google.feeds.lookupFeed(url, lookupDone);
}

function lookupDone(result) {
if (result.error || result.url == null) {
showStatus('Could not locate feed for user');
return;
}

showStatus('Found Photo Feed');
// We need to switch over from Atom to RSS to get Yahoo Media for slideshow..
var url = result.url.replace('format=atom', 'format=rss_200');
showSlideShow(url);
}

Very nice indeed.

Jun 13

GSpreadsheet: JavaScript Helper for Google Spreadsheets

Google, JavaScript, Tech 10 Comments »

I am finding that more and more little applications that I have use Google Spreadsheets to store some data that I use in an Ajax app. After using the core API, you find yourself looking at fun code like foo.$t.

Most of the time I want a simple tabular view over a spreadsheet that has the first row as a header, and other rows as the data.

To do this I created GSpreadsheet which lets me do:

GSpreadsheet.load("pSYwzniwpzSFnt8Ix3ohQQA", { index: 'firstname' }, function(gs) {
// display all
document.getElementById("displayall").innerHTML = gs.displayAll();

// show one
var row = gs.select('Bob');
document.getElementById("onebyindex").innerHTML = row.email;

// show by row number
row = gs.select(1);
document.getElementById("onebyrownum").innerHTML = row.email;

// display one row
document.getElementById("displayrow").innerHTML = gs.displayRow('Bob');
});

You will see that you call GSpreadsheet.load(..., callback(takesAgsObject))

This is because of all of the asynchronous work going on. To get the JSON from the Spreadsheet back end you are always using the json-in-script output, and getting it by dynamically creating a script tag. The real dirty hack in this code is how to do that, and have the callback give you back the info to create the new object. To do this, I am creating a static method on the fly with eval() and calling into it passing in the right info. It’s real ugly:

GSpreadsheet.load = function(key, options, callback) {
if (!options['worksheet']) options['worksheet'] = 'od6';
var worksheet = options['worksheet'];

var callbackName = "GSpreadsheet.loader_" + key + "_" + worksheet;
eval(callbackName + " = function(json) { var gs = new GSpreadsheet(key, json, options); callback(gs); }");

var script = document.createElement('script');

script.setAttribute('src', 'http://spreadsheets.google.com/feeds/list/' + key + '/' + worksheet + '/public/values' +
'?alt=json-in-script&callback=' + callbackName);
script.setAttribute('id', 'jsonScript');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
Apr 16

Running Ruby in the browser via script type=”text/ruby”

Ajax, Java, JavaScript, Open Source, Ruby, Tech 36 Comments »

I played around with getting Ruby to work in the browser while watching some cheesy TV this weekend.

I was able to get things slightly working, and put this work in progress up on Google Code here.

That link sends you to a page that will evaluate Ruby for you, both from a script tag, and from your own input.

If you take a look at the top of the file, you will see:

<script type="text/ruby">
#class Foo; def initialize; @foo = 'whee'; end; end; f = Foo.new; f
Time.now
</script>

This script is found by the Ruby in the browser system, and is run through JRuby via a little applet. The page takes the output at the end and throws it into the container HTML on the right.

You can also edit the text area at the bottom left and run your own Ruby code, and the output will be placed on the right too.

Now, this is just the first baby step to get to something feature full like:

<script type="text/ruby">
document.ready do |dom|
dom["table tr"] <<"<td>test</td>"
end
</script>

Just being able to run some Ruby doesn’t mean much. We need to give it rich support for the browser to be able to interact with the DOM and Ajax libraries to do cool things, using the power of Ruby.

So, there are a lot of TODOs here:

  • The applet is a download of JRuby complete, which is huge, and isn’t all needed. I need to work with the JRuby folk to produce a slimmed down applet version.
  • Come up with a solution that allows you to puts data out (maybe put that data in a div somewhere), and more importantly, talk to the DOM directly from Ruby. Since the applet can contain Ruby files themselves, we can create a Ruby module that lets you do DOM stuff, that becomes JavaScript which will be eval’d to run in the browser. Or, we just give direct access. I am still playing with what makes sense there
  • Only tested in Firefox. There are some known issues in Safari.
  • I am lazily using an applet tag instead of the magic object/embed stuff that would make this work in other places

Any direction make sense to you?

Apr 13

script type=”my dsl” and script type=”ruby”

JavaScript, Ruby, Tech 2 Comments »

John Resig gave an enjoyable presentation on Javascript libraries.

This wasn’t a talk about choosing library A over library B. It was meta. It was about what libraries give you, and why they are here.

John also showed his text/jquery DSL that is up at jquery2 (a bad name that will not probably be jquery2).

We are seeing more and more of this. People are following the pattern of sneaking in their own script by putting in their own mime type and then using DOM scripting to go back and do the right thing.

I am hopeful that we will see a <script type=”text/ruby”> soon:

<script type="text/ruby">
document.ready do |dom|
dom["table tr"] <<"<td>test"
end
</script>

Yummy. Then Try Ruby would literally be… try ruby in the browser.

Apr 12

var self = this;

JavaScript, Tech 4 Comments »
$.fn.delayHide(time, callbackArgument) {
var self = this;
setTimeout(function() {
callbackArgument.call(self);
}, time);
}

I find that I have to use the var self = this; pattern far too often in JavaScript.

The darn magic scoping of this really gets ya.

I also had someone ask me why foo never ended up containing something:

var foo = bar(function() {
....
return something;
});

It made me more worried about adding closures to Java :)

Apr 24

Safari Issue: Cascading of mouse events and why input type=”submit” wasn’t working

JavaScript, Tech 5 Comments »

For some reason the submit button on a search widget wasn’t submitting under Safari. It works totally fine in the other browsers, but Safari? nothing.

Hmm. The onsubmit event wasn’t even getting called. You click the button, and nothing.

Is it one of the annoying bugs to do with naming the submit button or something lame like that?

Nope, this one turned out to be due to an event handler placed on the body element:

document.getElementsByTagName(”body”).item(0).onclick = function() {}

Safari would take this click and call this function, and wouldn’t run the click event that the submit button has intrinsically.

Of course, the line of code above didn’t actually exist, it was created via the myriad of JavaScript libraries that this web application was using.

Jan 10

Yes Ruby in the Browser, No it won’t take off?

JavaScript, Ruby, Tech 6 Comments »

Obie Fernandez wants No Ruby in the Browser, after Paul Hammant discussed it in Ruby vs. JavaScript for Web 3.0.

I am actually a fan of JavaScript these days. It isn’t as evil as you think.

However, I would love to have Ruby integrated as well as JavaScript it.

We could then have true libraries, and if we could version them all within the browser etc, we could share them between apps so we don’t duplicate painful downloads (not that we can’t add this to JS, but we could use rubygems).

Having true packages and namespaces, and a full environment like ruby in which we can share code in both worlds would be great. No need for Ruby to JSON etc. Send Ruby on down.

The reality is that it would be hard to get the ball rolling. JavaScript is part of the majority of browser suites, including the Flash VM, and getting groundswell around a Ruby plugin would be tough.

But in another dimension Marc A put Ruby into Netscape and we are all happy.

Sep 25

War of the Web: Revenge of the Dynamics

Ajax, HTML, Java, JavaScript, Lightweight Containers, Microsoft, PHP, Perl, Ruby, Tech, UI / UX, Web Frameworks 933 Comments »

As I was watching “24 hour party people” on DVD, I heard the main character talk about the ebbs and flows of the music business. He is talking about the scene in Manchester at the end of the 70’s, and into the eighties. Moving from Joy Division to Happy Mondays and New Order.

I think that we are in a new chapter for the web, and as is often the case, the wheel of time is repeating history for us.

There are a few dimensions to the current war though. They are on the client side (DHTML Ajax vs. simple HTML vs. Flash/PDF vs. XAML) and on the server side (Rails vs. Java vs. PHP vs. .NET).

Let’s start at the beginning.

Perl: Birth of CGI

Do you remember how the web changed as it moved from static HTML connected content to dynamic websites? That came about due to CGI, and how our nice web server would now fork off our programs to generate the HTML.

I remember my first CGI programs were written in C, and Scheme. I quickly moved on though, and found the beauty, and craziness of Perl.

I spent quite some time with Perl, trying to get by without writing too much NSAPI and ISAPI code (oops, I guess that core dump hurts the entire server?).

I really enjoyed the community at that time. #perl was interesting (some of the time), and CPAN became the holy grail. As soon as you thought you needed something, someone had kindly put that functionality up into CPAN. I even have some of my own modules hanging out there, and helped with others.

Over a short time period, we had developed some fairly rich web modules. We didn’t have to work with $ENV{’SOME_CGI_ENVIRONMENT’}, or STDIN or the like. Our framework abstracted all of that for us, and gave us a simple model. We lauched at the folks who generated html via methods such as b("whee") and we stuck close to HTML itself, allowing our design teams to simply open the html files and see what their stuff looked like. We even had the notion of components, and special tags that you could create. <$mytag name=”…” /> was nice because the name of the tag was the key for the framework to dynamically discover that functionality. No config files, or interfaces, in the strict sense. The coupling was based on a name.

In retrospect, life was pretty simple for web development, a lot simpler than some of the frameworks we have today!

But, we moved from Perl. CGI was not the nicest for our high load servers. It was crazy to think that we would fork a process for every little request that came in, and that a Perl interpreter would start up, load the program, do the work and then die off.

We naturally moved to solutions such as mod_perl, and that helped. It was so new though that it was buggy and we had a lot of problems. Some of the problems had nothing to do with mod_perl itself, but due to laziness and side-effects.

When you work in an environment like CGI you can be a very bad man indeed. If you don’t close something correctly, or don’t play totally nice with resources, baaaah who cares? The server is going to kill me in 2 seconds anyway, so I will get my job done and have him kill me. In mod_perl world though, these programs start to live longer, and they get fat and oily.

Java: No more stinking processes!

Remember the beginning of Java (Oak!). We were building applets, and feeling the pain very early on.

Servlets were the big thing though. We ported our Perl based framework over, and were able to see significant performance improvements at the time. Some of the team loved the change, others hated the verboseness and static typing.

The nice threading model that Java gave us was huge though, even with the poor JVMs back then (Microsofts was by far the best remember!).

This is when we moved from the world of Perl to having Java start to take over. That isn’t to say that there wasn’t competition. In the waters we saw the lurkers of ColdFusion, ASP, and the beginning of the PHP revolution. Java came up with JSP to compete with these tag based approaches, but it was the advent of the rich MVC style frameworks that really spurred everyone on.

In my opinion Java is still in the hot-seat, especially in the corporate world.

Preparing for the server war

The troops are being gathered. Strategies are being worked out. We are currently getting ready for a new battle on the server side.

What’s happening?

  • Ruby on Rails: Whatever you think about Rails, it has lit a fire under the server side web development community. Many have jumped on the bandwagon, claiming real productivity improvements. Some of the PHP converts enjoy a richer language, which is still nice and dynamic, with a framework that enforces clean MVC techniques. Some of the Java community are frankly a little bored of Java, and enjoy the new challenge. They also love the freedom of the language, and the fact that they now have just ONE stack to worry about. Will the Rails buzz keep growing? Will it be the Perl of Web 2.0?
  • Java: Java isn’t going down without a fight. Some argue that the problem with web development in Java is that it has been too complicated and heavy for much usage. I have personally called for the need of a common stack for Java, and people have stepped up to the plate. On one side we have companies that will certify a set of technologies (JavaServer Faces + Spring + Hibernate). Then we get frameworks taking on simplicity themselves (WebWork now embedding Spring). Finally we have initiatives like JBoss Seam, which is trying to combine the component models of JavaServer Faces and the backend. Seam aims to give you the power of the Java tier, but also giving you a simple productive environment. So, Java frameworks are rising to the challenge of Rails, and we will soon see how much of the success of Rails is Ruby, and how much can be duplicated in other platforms.
  • PHP: We can’t discount PHP. A lot of “serious engineers” (read: anyone who isn’t a PHP developer thinks they are serious) poo poo the PHP world. Yet, by all accounts, there is a LOT of PHP development going on out there. PHP has the advantage of being something written JUST for the web. Take a look at how Wordpress came along (PHP based blogging software) and in no time at all there were thousands and thousands of plugins that you could simply drop into your Wordpress system. Literally, you drop in a file and you are done. There are numerous PHP frameworks that are aiming to mimic, and compete with Rails, so we can’t forget about these guys. The question with the PHP community is: will it grow more into the enterprise, or will it be for script-kiddies.
  • .NET: Never discount Microsoft. ASP.NET keeps getting more productive, and it is hard to compete with their end to end story, which includes fantastic tooling in their latest Visual Studio. And, we get Avalon and XAML along for the ride, as well as the futures of C# 3.0 which takes a lot of ideas from the dynamic languages and puts them into a static structure (such as: var foo = new Bar(); and the relational/xml integration)

It is going to be an interesting couple of years, as all of these platforms mature, and take eachother on, trying to get mindshare!

Client Side: JavaScript is cool again

But what about Ajax? The battle for the client side is going to be just as hot as on the server. And they will even intertwine with eachother.

Firstly we have the big debate of how far Ajax is going to go. Is it a one hit wonder? or will it become a standard part of our toolbox and even just be called dhtml again?

As an Ajaxian, I obviously have my thoughts on this matter. But there is a lot of competition inside and outside of Ajax:

  • Flash/PDF: Adobe/Macromedia are a definitely force to be reckoned with. Flash is almost ubiquitous, and PDF is used everywhere. Now the companies are combined, what do they have in store for us?
  • Avalon/WPF/E/XAML: Microsoft announced WPF/E, which is a subset of XAML that will be ported on various platforms and available in many browsers. This means that you can build your rich application in the .NET set of tools, and have it run in Safari on Mac OSX. Impressive. When are we actually going to see this in a form that we can deploy to the real world?
  • HTML: How much do we want to work in the open (ish) world of HTML. A large group of developers do not want to jump into any monopoly, and will therefore want to stick to a more open environment. But, another set will just want to use the best tool to add business value. What will the split be?

JavaScript will play a big role in this war. JavaScript 2.0 offers big improvements, that many people will cheer for. Also, the same people who poo-poo’d JavaScript in the past have come to realise that it really is a great language. It may not be what they are used too (it uses prototype-based OO vs. class-based OO), but it is powerful and robust. There are some features missing, and a big question around libraries. JSAN and others are trying to build a CPAN for JavaScript. We also worry about the black box of the JavaScript VM in the browsers, and cross-browser bugs are truly real painful. Fortunately, frameworks like Dojo and Prototype are trying to help us out on that front.

We are also seeing that we need to take JavaScript from the former:

“That is just crappy code that the web dood View-Source’s and pastes into the web pages”

to the future:

“JavaScript also needs to be engineered, and is a first class citizen”

Thus we finally see more unit testing of JavaScript code, and professional ways of creating modules and namespaces for our code. We also see great advantages with features like E4X where XML becomes a native type.

JavaScripts increased popularity, thanks to Ajax (and Flash/ActionScript) has also drawn it into the server side. Mozilla Rhino gives you a quality Java-based approach, so why not use a cool dynamic scripting language for certain tasks on the server side? You don’t have to use JavaScript for everything, but it has its place, and that place is growing.

The Battles Join

This is where the battles are joining. We have JavaScript bleeding across the layers, and we have the need for server-side frameworks to support the new Web. It isn’t enough to generate simple HTML and be done with it.

Today’s frameworks need to be able to help us build Ajaxian components, and help us write this applications quickly and cleanly.

There are various directions that frameworks are going in here.

  • JavaScript Code Gen: Why not give you a simple macro that splits out the ugly JavaScript that you would have to write?
  • JavaScript Framework Code Gen: Spitting out low-level JavaScript is too much work. Many frameworks are writing on top of a higher level JavaScript framework like Dojo or Prototype. Now the code-gen is less, and you get the benefits of the rich functionality, browser compatibility, and visual effects available from these frameworks.
  • Tools and Widgets: Should developers even care if a piece of their page is Ajax or not? Some frameworks give you drag and drop editors that let you setup widgets or components. Some happen to be ajaxian. Some are not. Who cares?
  • Markup based: A lot of frameworks are giving us markup based solutions. That is one of the strengths of Microsoft Atlas, not the fact that they added support for $() etc. Are we going to want to build using markup or via programatic APIs?

Conclusion

It is hard to predict the winners of the new battles, and the losers will not die off totally, but it is an exciting time to be watching web development. The dynamic languages of Ruby, JavaScript, and PHP are making a big run, and people are realising that they aren’t just cheesy scripting languages that can’t be used. It’s time to take them serious.

We are going to start really working out what makes sense for usability on the web with rich interfaces. And, at the same time we will get simpler and simpler backend tools to make the generation of rich web experiences easier and easier.

I am looking forward to seeing this battle!

Jul 17

Native XML support in Dolphin

Groovy, Java, JavaScript, Tech 311 Comments »

Kirill Grouchnikov’s discusses thoughts on native XML support in Dolphin. There are definitely some interesting items, but I really hope that Sun takes a LONG look at what comes from C# 3.0 (send someone to PDC guys!), and look at the current E4X. It was BEA after all that came up with E4X!

Even look at Groovy’s XML builders and parsing w/ GPath.

I just want to be able to work with XML in a trivial way, instead of with the ugly mess of DOM/SAX/X APIs.

I like having a smart for() loop for XML, that is good….. but some of the “extends” stuff just looks more complicated than it needs to be.