Ben and I gave a presentation at JavaOne on what’s new with Ajax. Since this was JavaOne, we skewed a little more than we normally would to Java topics, and one of them was using the new Java Plugin, that has great new features such as being able to take a running applet out of the web page, and having it continue to live after shutting down the browser. Java is running out of process here, which also helps the “Java crashing the entire browser” problem.
Anyway, back to our demo. For some context, last year at JavaOne had us performing Guitar Hero on stage, so we knew that we had to use a gaming console in some way. This year it had to be the Wii, but instead of using the console, we decided to just use the controllers.
Wouldn’t it be cool to control a Web page using the controllers? We thought so, and we set to it. You can talk to the Wiimotes via Bluetooth, so we needed a stack that would allow us to do just that. Java has a bluetooth stack. We could get an applet to talk to the Java stack. Hmm.
It actually took quite some time to test out the various stacks out there. In the end we went with a native system called Wiiuse that a lot of Wii hackers use. There is a wrapper library called Wiiusej that gave us exactly what we needed.
A quick test later and we had an application that was talking between the remote and the program. It turns out that the main controller sees a series of IR lights that are in the Wii sensor bar, and this allows you to simulate the system with any decent IR source. In the presentation room the big lights that shine on stage were strong enough to act as a sensor bar so we won’t even have to use it. We can just point out to the crowd.
Anyway, back to the application. We then wrote a Java class that acts as a state machine for what the remote is doing. It understands the movements, which buttons are pushed, how fast you are moving the device. With this data we could build a simple darts game. With the state machine Java code, and an Applet wrapper that exposed the information, we were ready to get to the Ajax side of the house.
We painted a darts board onto the screen and then had JavaScript start polling the Applet for information via JSObject (As simple as: document.nameofapplet.pollmethod()). This turned out to be more stable than talking the other way, even though it meant we were polling instead of being entirely event driven. When the JavaScript code polled the applet it would pass back a data structure with the data for the coordinates of the remote, and whether the dart had been fired (button A to fire, button B to reload). We would move the dart image on the screen as you move the remote, and when fired we kicked off an animation to fire the dart at the board.
At first, it was all too simple. You setup the shot and it would get the right area every time. Not a fun game. We then decided to add some simple physics to the Ajax game. We took into account the velocity of the throw (if weak it would fall down) and how straight your shot was. If you wiggle around, the dart will not be accurate.
Anyway, this was a lot of fun, and shows that as much as we mock Java applets, if we forget about using them as fancy blink tags, and instead think of them as more extension points, maybe there is life for them.
The video below shows you a demo of the application, the source code with an explanation, and more details.
John Resig got in front of the camera, and the projector, as he gives us his thoughts on the state, and future of Ajax.
He starts out by discussing jQuery Core, and the features in the near term (1.2.4), short term (1.3) and beyond. He then delves into the UI side of the house with jQuery UI 1.5. He segues from jQuery to the future of browsers and JavaScript in general.
Ryan Stewart of Adobe and I got to give a joint talk this morning that covered Adobe AIR, Gears, and how you can build offline and desktop applications right now.
Obviously, Ryan gave an overview of AIR, and I did the same for Gears. We also discussed reasons to be excited about Web development, some of the ideas that are out there in the community, and how AIR and Gears can be seen as complementary.
We had some requests to put the slides online, so here they are below. I know it is hard to peruse slides without the talk over, but just think of it as a fun exercise to wonder what we said :)
Gareth Rushgrove has been talking a lot about API design; a true art amid the science of CSci. He gave a presentation at the highland fling (our own Christian Heilmann was there too) and starts out by walking through thoughts on the various ways that we (or robots, or rabbits) interact with the Web.
Then he gets on to the API design where he takes a look at some of the popular ones (e.g. Flickr, Twitter) and tries to find some general truths:
I covered the basics of JavaScript - targeted to a Computer Science major (in the case of the students at NU, they learn Scheme and Java so I emphasized the subject matter to that audience). I did a fast run-through of the whole language, covering the main points, and move on to a quick inspection of jQuery and the DOM - closing with some Q&A. The subject matter of JavaScript 2 (and 1.6-1.8) came up a couple times so discussion of that was interspersed throughout. There were a bunch of jQuery users in the audience and it was great to get to hear their feedback.
Andrew Dupont, Thomas Fuchs, John Resig, Alex Russell, Sam Stephenson. These were the folks that gathered at SXSW to talk about the “Secrets of JavaScript Libraries” in a panel that was full to the brim (as was the browser wars one the day before).
The slides are now up, and the podcast is forthcoming:
The group covered:
JavaScript the language
Cross browser coding
Events
DOM Traversal
HTML Style
Animations
Distribution
HTML Insertion
I hope that SXSW ramps up a little on the technical talks next year.
In this two part screencast, Jochen Krause and I talk about the Eclipse Rich Ajax Platform, or RAP for short. RAP is a front-end framework that uses the Eclipse RCP programming model to create Ajax front-ends in Java. In the first part, Jochen gives us an overview of RAP and how it fits into the overall Eclipse runtime and then shows a few demos of using RAP in the second part.
The scope of the presentation is to show how to speed things up right now, not in the future.
Optimizing Symbol Resolution
How to speed up in a late binding world. Discusses the scope chain from vars to the DOM itself, and how to make sure that you don’t keep running around the chain.
JavaScript Code Inefficiencies
To make string manipulation more effience in IE:
Use local vars
Cache strings from IE objects
Use Array.join for concatenation
(I prefict that array.join will stick around even when it isn’t faster, just like the equivilent in Java land).
Some other thoughts:
Don’t use eval unless you really have too. Instead of parameterized code
SWITCH is costly for large sets, consider a hash table wrapped in a try/catch
WITH is costly due to symbol lookups everywhere, use manual iterators
Don’t use your own get/set accessors
IE Performance Considerations
DOM is expensive in IE, especially due to the generic nature of the platform. Also watch out for layout improvements such as hover CSS style.
HTTP Performance
Simplify and reduce:
Script in on JS file
Styles in one CSS file
Fewer, smaller, unscaled images
Simplify layout
Use HTTP compression (lots of detail on cache control)
Tools and Techniques
Developer Toolbar
Fiddler: HTTP traffic watching
Ajax View: New from MS Research. On the fly rewrite the JavaScript and add instrumentation code.
Kevin Survance, CTO of MapQuest, gave a keynote speech at the last Ajax Experience show. Kevin came to the company and basically transformed the entire team to create the new MapQuest beta.
MapQuest uses Ajax on a massive scale and also provides commercial Ajax APIs. In this keynote, Kevin shares lessons learned from recent MapQuest development projects and offers insight into opportunities for developers to profit from current industry and social trends.
This talk helps developers better articulate the business advantages of Ajax to management, and help management grill developers on whether their technical choices are the right ones. In addition, a starry-eyed vision of the future of application development will be presented, including a demo this time.
Bio: Alex Shvedof, COO and co-founder, Isomorphic Software is also one of the architects of the SmartClient Ajax platform. He has played various roles at hi-tech companies ranging from enterprise software architecture to system and network security. Alex co-founded Isomorphic in 2000 to make zero-install rich web applications a reality.
Waldemar Horwat and Pascal-Louis Perez gave a tech talk at Google where they walk us through the new features of ECMAScript ES4:
After eight years of work in the standards committee, JavaScript will soon get an update. We present the highlights and rationales of the proposed changes to JavaScript.
The fourth edition of the ECMAScript (JavaScript) language represents a significant evolution of the third edition language, which was standardized in 1999. ES4 is compatible with ES3 and adds important facilities for programming in the large (classes, interfaces, namespaces, packages, program units, optional type annotations, and optional static type checking and verification), evolutionary programming and scripting, data structure construction, control abstraction (proper tail calls, iterators, and generators), and introspection. Improved support for regular expressions and Unicode, richer libraries, and proper block scoping are also added.
The nice thing about this presentation is that you see a lot of examples of the new features such as packaging (namespace, package, programming unit) and a lot of talk on the changes with optional types.
In this session, you’ll learn all about Silverlight from a developer’s perspective, including how to build rich, interactive applications using Visual Studio, as well as Microsoft’s powerful new designer tool, Expression Blend. You’ll also see how to create dynamic experiences with the Extensible Application Markup Language (XAML), how to manipulate the overall application or experience with code, and how to retrieve data and media from a Web service and incorporate it all into a Silverlight application.
Bio: In his current role, Peter works with the developer community in New York and New Jersey to support area user groups, code camps, and other events. Previously, he worked as a consultant in Microsoft’s services division. As a consultant, he worked on several application development projects and provided architectural guidance for large customers throughout the NY & NJ metro area. He lives with his family in central New Jersey and loves kayaking and biking at the Jersey Shore.
I love watching Brendan Eich speak. You know that before long you will be deep into a topic, and if you slip up for a minute you will be hopelessly behind. You have to listen closely. Even if you do, you will probably think that you missed a lot of it.
The presentation starts off having a bit of fun with the characters behind the JavaScript 2 debate such as Douglas Crockford (Yoda above). You can argue about the politics of ES4 but the piece I found most interesting was Brendan taking code that is written in current JavaScript, and evolving it via iterations. In fact, I would love to have seen that as the bulk of the talk as it really shows you what JS2 is all about.
And here it is after a set of evolutionary steps. You will see that this looks like a very different beast. Before you eek, we have to realize that most of the code that will be written won't be cleaned up like this, but rather hacky JS like we have now.
, Showcase
