Conferences Articles

I gave my HTML5 Essentials presentation in Israel Internet Association and in Evening of jQuery and HTML5 these last few weeks. Here are the slides.

One very memorable moment from Israel was riding a camel in Jerusalem so I have to share the picture with you!

This is part 2 of my series on JavaScript Industry Notes based on attending The Ajax Experience 2008, in Boston.

Smush It Image Optimizer

The Yahoo performance team unveiled a tool called "Smush.It" that grabs all of the images used on a website and compresses them. I tried it on my website and it cut 26.53% off the size of my images. Pretty Impressive.

Dreamweaver CS4

Kevin Hoyt of Adobe showed off the new features of Dreamweaver CS4. I was actually quite impressed with how far they've come from being simply a WYSWYG drag'n'drop HTML editor. The new version features four things worth noting:

1. Dreamweaver's JavaScript code completion auto-detects what functions you can perform on an object. It also reads external scripts that you include and then update the code completion accordingly.
2. Includes the Webkit rendering engine so you can view how your pages are looking in split view while you are coding.  It also has something called, "live view" where you can see the HTML being modified as the script runs, much like Firebug does.
3. You can pause JavaScript on the rendered page, right click an element and inspect its CSS properties, allowing you to even jump to the actual line item of the CSS file's class definition.
4. No more opening up dependent files as Dreamweaver CS4 already knows what files you have included and opens them for you.

Comet Basics

Greg Wilkins came up with an interactive way of describing to the audience what Comet is. It involved the audience acting as the web browser and Greg as the server.

Normal Scenario

Audience: "Hello, I'm Firefox/IE/Opera/etc. and I want to view my stock."
Greg: "Hello, I'm the server and here are your stock prices."
Audience: "Are there any updates to my stock price?"
Greg: "There are no updates to your stock price."
Audience: "Are there any updates to my stock price?"
Greg: "Your stock price went up 1 point."

Same Scenario with Comet

Audience: "Hello, I'm Firefox/IE/Opera/etc. and I want to view my stock."
Greg: "Hello, I'm the server and here are your stock prices."
*delay*
Greg: "Your stock price went up 1 point."

I pulled the above chart from his presentation later that day. Basically Comet is a way for the server to talk to the client when it has new information, rather than the client polling the server a bunch of times asking for new information, where latency can occur between each poll.

Firebug's Future

John Resig explained his involvement with Firebug. The two main points I pulled out:

• Resig is working on documenting and clean up the 35,000 lines of JavaScript that Firebug currently has. Firebug was previously maintained largely by one person and his job is to come in and make things readable and easier to maintain going forward.
• FireUnit - Resig demoed a test suite built into firebug that allows for a full test runner built directly into the browser.

Netflix explained that people were creating mashups via scraping Netflix's website, which led to broken links and bad applications. Now with their new API he was excited on what was being created.

Internet Explorer 8 and Visual Studio

The Microsoft product manager explained a new focus of IE8 was on us, the developers. He showcased the, "development toolbar" that will be packaged with IE8 in order to provide better debugging. Even though it is widely known as a clone of Firebug for IE, he managed to never mention Firebug in his presentation. Regardless, it will provide us developers a far better experience when developing for Internet Explorer in the future.

The next version of Visual Studio will be packaged with jQuery and will feature full IntelliSense for the library. Microsoft setup a standard for documenting JavaScript libraries and is hoping for community members to contribute in order for other libraries to be able to use Visual Studio IntelliSense.

I'll be covering more of the JavaScript industry in Part 3, until then please subscribe if you haven't already. Also check out Part 1 if you missed it.

Over the last 4 days I attended The Ajax Experience 2008 (Boston) and jQuery Camp 2008. Each day I had many intense discussions about JavaScript with industry experts. I've been forming a picture of the industry with each discussion and presenentation and would like to share what I've found out.  If you would like a play-by-play, Nathan Hammond wrote a great job on covering jQueryCamp and TAE day 1 and TAE day 2. Otherwise stay and read-up on my overview.

Google Chrome

Ojan Vafai spoke on "Google Chrome" Google's new web browser, which is built from the Chromium open source project.

"The browser crashing will be as drastic as the computer blue screen."

He stated that as we do more in the browser, it becomes much more important that the browser doesn't completely crash when things go wrong. He says that it will become increasingly more drastic to people when their web browser crashes. I agree, because it isn't as easy to bounce back from a crash when I am using web applications - I might have lost data in the last session that going back to that same URL won't get the data back.

Google Chrome tries to solve this issue with multi-processing. Running each tab as a task, to which there is a task manager that you can kill each process.  Also separate processes can take advantage of people running multiple processors.

"Browsers are what is holding up performance and that needs to change."

Ojan also stated that the bottleneck of writing JavaScript applications for the web is on the web browsers, and not the developers. That is why Google wrote Chrome, to increase the speed of their applications and allow them to write more robust applications in the browser.

"We want to fix bugs, instead of you having to hack around them."

Ojan also pleaded with the audience about getting involved in documenting bugs, instead of hacking around them. The Chrome team would rather a bug be fixed than to have someone hack around the bug.

Google Chrome chose WebKit as the rendering engine of the browser. He explained:

"We didn't want to create a new rendering engine for web developers to have to test against."

Overall Google Chrome is a great addition to the web browser landscape.  As competition increases, so does quality.

The JavaScript Library Panel

PPK, who runs Quirksmode.org interviewed the JavaScript library authors from Prototype, YUI, Dojo and jQuery.

The panel asked how their library worked within Google Chrome, and it seemed that there were no huge problems with the libraries, just a few minor issues that were not hard to deal with.

The panel got a little fired up though, when John Resig (jQuery) made the following declaration:

"Browser sniffing is used almost as bad as eval()."

He maintained that in order to support new and different browsers, the library needs to not contain browser sniffing. The other library authors thought this goal of not having browser sniffing in the library was a pipe dream.  I didn't understand their arguements for why this was the case.  But John's arguement seemed clear to me, "you test browser capabilities rather than browser types and versions". It seems like a relatively simple concept, although tough to execute.

John reassured me in person that he would not have made that statement if he didn't have code to back it up.

The panel was asked in the end, "If you had to use a library and couldn't use your own, which one would you chose." The audience laughed.

Prototype representative:

"It depends on the case.  If I am a designer, than I'd use jQuery. But if I was a Java developer, than Dojo."

Dojo representative:

"I would use the new Goog library because it looks a lot like Dojo."

jQuery representative:

"Prototype."

YUI representative:

"jQuery."

I'll be covering more of the event and industry in Part 2 - until then please subscribe if you haven't already. Thanks!

• Part 1: Ajax Experience Tutorial Sessions
• Part 2: My Ajax Experience
• Part 3: Ajax Experience Roundup

The final part of my coverage on The Ajax Experience in Boston.

jQuery Advanced

John Resig

Hands-on step-by-step demonstration of the power of jQuery. John started with a small server-side application and then wrote slick UI on top of it with jQuery. The final product of the presentation is a small social networking application that looks really nice (reset the demo by appending ?action=reset to the url). John wrote all 82 lines of JavaScript in front of us while talking through each step during the one hour session.

John's Slides

Ajax on Struts

Ted Husted

Ted explained how to use Ajax on Struts 2 by showing code examples - which ment for a very dry presentation. Most developers still use an old version of Struts (1.2) to which the code examples don't apply. Struts 2 looks like another framework that tries to do to much at once and fails to be widely accepted. It renders components with Dojo, which ties the application to a specific framework. It isn't a backend developer's responsibility to render front-end controls. I want the backend developers to give me the data rather than rendering components.

In order for a backend framework to be useful to me it must leave the presentation layer alone and be appealing to backend developers. Since most Java developers are not moving to Struts 2, it looks like the framework fails on both of those key points.

Ted's Slides

Design Patterns and Animation with jQuery

Paul Bakaus

Paul overviewed some of the recent happening online that replicate we know and love on the desktop, such as drag & drop and collapse & expand. He put a term to these interactions called, "design patterns". Design patterns are solutions for interactive, navigation and visualization problems. On the browser they are often JavaScript based. Then he showed off real world examples and how they are coded in JavaScript. He finished by showing the ready to use components in the jQuery User Interface library (JUI).

Paul's Slides

Hands on DWR

Joe Walker

DWR seemed to be the most valuable thing to bring back to the company I work for. With DWR, you can expose Java classes to JavaScript. The library seems to be the best for keeping seperate the data and presentation layers, which is key for frontend and backend developers to work well together. DWR doesn't try to bite off more than it can chew - it doesn't try to be a widget library like GWT and JMaki. Backend developers should deal with data and frontend developers should deal with presentation. Joe Walker goes to great lengths to make sure DWR uses secure practices. I am very excited to see if this will work out in our web applications.

Joe's Slides

Ajax Experts and Ajax Futures Panel

• Alex Russell - Sitepen and Dojo
• Joe Walker - DWR
• John Resig - Mozilla
• Douglas Crockford - Yahoo
• And other web app / UI experts

These panels were the highlight of The Ajax Experience for me. It really was hilarious to see such conflicting opinions come through on both sides. It kind of felt like a spectator sport as you root for the person that you identify most with. When I look back at it two memorable moments stand out to me.

The first moment was when John Resig made the point that paid licenses provided by frameworks - simply for the sake of having a license (no support included) - have no tangible benefit. Providing that type of licensing is an out-dated practice and they are, "appealing to companies who are boring and dull" [croud laughed loudly].

The second memerable moment was the debate on the new JavaScript 2 (ECMAScript 4) standard that Mozilla, Opera and Adobe have put together and are implimenting. The debate was largely between John Resig (for JS2) and Douglas Crockford (against JS2). Doug shared with us strong opposition to JavaScript 2. He said that it is introducing complexity into a language that is ment to be for anyone to pick up. He also said it would break existing applications. John countered these complaints by saying that JavaScript 2 is purely opt-in. That these complexities are purely optional and that JavaScript 2 is fixing the broken parts of the language.

I also asked Joe Walker (DWR) a question about JavaScript frameworks that are tied to a server side language. Although I didn't get a thorough answer, he said that he is only trying to do one thing really well, rather than getting wide appeal like the frameworks that widgets are being built on. I am impressed with Joe's attitude with DWR of sticking to doing one thing and doing it well.

Advanced JSON

Kris Zyp

Kris pulled off some crazy things with JSON, but I have to admit that most of it went over my head. He showed a demo of live editing an dynamic object tree, which was cool but didn't seem to me like anything you couldn't pull off with MySQL/Ajax.

Kris' Slides

Performance Analysis with YSlow for Firebug

Tenni Theurer of Yahoo

One of the biggest things I got from the Yslow session was the 80/20 rule. That is, that 80 percent of the performance of the website depends on the front end weight of the page. That article was eye-opening to me. That my job as a front end developer heavily matters to the overall speed of the web applications.

Yslow gives your website a grade in order to motivate you to increase the speed of your page. My website receives an "A" in almost all categories except for using a CDN and setting an expires header - pretty good I think. Thank you Yahoo for building such a great tool.

You may download the Yslow firebug plugin here and analyize your own website.

My Ajax Experience Overall

The registration cost was hefty ($1200), but the company I work for, RMG Connect paid for my registration fee. The overall experience was pretty amazing. I met some great people - especially the jQuery guys. Talking directly to the framework authors was an invaluble experience. Knowing the person's motivations behind creating their library really clues you into the longevity and energy behind a project.

If you enjoyed this series or have an constructive criticism, please let me know by emailing me, posting a comment below or subscribing to my RSS feed. This is the first time that I have covered something like this in so much detail so it is important to me to have your feedback.

• Part 1: Ajax Experience Tutorial Sessions
• Part 2: My Ajax Experience
• Part 3: Ajax Experience Roundup

First off, a quick note: Ajaxian featured my post yesterday on Ajax Experience Tutorials. Ironically in the same day Smashing Magazine published an article featuring my jQuery calendar script. I guess it was my day to be blessed - I was featured on two very popular tech sites for two completely separate reasons.

Day 2 - Geek Week @ Ajax Experience

Today seemed somewhat of a social gathering for me rather than intense Ajax information. Above shows Paul Bakaus (jQuery UI Lead), me (jQuery UI) and John Resig (jQuery Lead). All of the jQuery people went out to eat afterwords. I guess the world series was going on - really, I didn't know that Boston was in the world series - I am here for Ajax!

The dinner consisted of Rey Bango (EXT/jQuery) talking about balancing life with the passions of development as well as Jörn Zaefferer (jQuery Plugins Developer) and I dreaming up the existence of some sort of plugins web app.

What was really quite interesting was how much emotion surrounds these technologies. Since everything is relatively new and frameworks seem to be fighting for the "Ajax" space, people seem to commit to one tool and defend it with all their heart. Well, I can't say I am immune to that - I think I won a few people over to jQuery today.

Ajax Experience Day 2 Sessions

CSS Hate

There was a lot of CSS hate going on and discussions. Ben (Co-founder of Ajaxian.com) even suggested the need of a JavaScript framework for laying out page design. JavaScript is great for detecting browser window widths and adjusting the CSS layouts accordingly, but I can't see completely replacing CSS with JavaScript any time in the immediate future. Interesting idea, but I don't think I would claim that is the next solution. He showed an example of Google Images changing the number of columns as the browser window's width changed. CSS sure beats tables but I would welcome a styling alternative.

Mapquest Open Source-age

Kevin Survance of MapQuest rattled off the MapQuest team's stack of open source software:

• dojo
• DWR
• Apache Tomcat
• RedHat linux
• mysql
• java 5
• terracotta
• jboss rules
• freemarker
• hibernate
• spring framework

Other than that there were a couple of plugs about MapQuest. I don't use MapQuest - I use Google Maps but I have to say my girlfriend's Mom uses MapQuest and she loves it!

Future of JavaScript

John Resig of Mozilla

John showed off the features in the new JavaScript standard that Mozilla is writing. It simply makes JavaScript a more robust and feature rich language.

What is funny about this is that Mozilla has partnered with Adobe on this new version of JavaScript. So what this means is that even if browsers (IE, Safari, etc) don't support the new JavaScript than Adobe's Flash plugin will have the new JavaScript interpreter built in. That certainly works. Way to create the next standard, Mozilla! And thank you Adobe for supporting the advancing of the language.

Accessibility and Internationalization with Dojo

Adam Peller and Becky Gibson

This was the most interesting topic for me today. Apparently Dojo is the leader in some standardization specification called, ARIA - Accessible Rich Internet Applications. Dojo is pressing to be the first JavaScript framework that is fully compliant with the ARIA specs. I tip my hat to you, Dojo. Accessibility is awesome, that means that if my body starts falling apart (I pray that it won't), at least someone will cover my behind and let me use assistive technologies so I can still be wired to internet land - the land where your information fairytales become true.

Low Vision

Dojo demo’d something called a "high contrast" mode in Windows XP. Control Panel -> Accessibility Options -> Display -> Check "Use High Contrast" It than switches your computer into a mode with high contrast for people with low vision. This mode actually strips out the CSS background images from your website. This is where it is important to have text alternatives to your buttons and anything that displays text via a background image. A way to implement high contrast mode is to detect that it is active and include an alternative stylesheet.

Complete Vision Loss

People with complete vision loss use screen reader or brail display. Here are some things to consider when developing an accessible application for the users with complete vision loss.

• Must work both with mouse and keyboard (tabindex).
• Should give valuable feedback about the state of the application via a screen reader.
• Tool tips should activate on focus rather than simply on mouse over.
• Tab through widgets and than use arrow keys instead of each tabbing through each individual widget piece.

They then demoed a screen reader using their widgets. The application would give feedback like, "New Message, 1 of 2, combo box". Indicating that your first message is selected and you are focused on a combo box. This is great and I would love to understand how to do this. I could have, "close my eyes day" where I use my applications as if I was blind and develop from that perspective. If ybmit_type" Save

• Part 1: Ajax Experience Tutorial Sessions
• Part 2: My Ajax Experience
• Part 3: Ajax Experience Roundup

I'll be here in Boston for the next week at the Ajax Experience until Friday. Then on Saturday I will be heading over to jQuery Camp at Harvard where I am giving two sessions.

Day 1 - Geek Week @ The Ajax Experience 2007

I flew into Boston this morning from Minneapolis and ate lunch with my cousin. Had an interesting time and finally got here to the Ajax Experience. After spilling a pitcher of water - almost frying some guy's laptop and breaking a glass on the other side of the room, I finally sat down to view the first tutorial titled, "Ajax Tutorial".

Ajax Tutorial

Ben Galbraith - Co-founder of Ajaxian.com

Ajax Tutorial Presentation Slides

Ben gave an overview of Ajax and started getting his hands right into some demo code. He showed a very basic implementation of the XMLHttpRequest object to send data to the server.

Ajax Innovations

• Google Maps was the early innovator with Ajax. Proved to many developers that you actually can do more in a web browser.
• Housing Maps went out to craigs list and merged addresses with housing listing without the permission of Google. Housing Maps showed that Ajax is exposed to the world and there is really nothing the publishers can do to hide it.
• Google Suggest shows that the network response time isn't that slow and you can rely on quick response times from the server.
• Blinklist opened the door to cleaner and quicker UI.

The biggest lesson from Ajax that we learned is, "JavaScript doesn't suck after all".

Tools to develop ajax are Aptana and Firebug - check and check. I absolutely love these tools and use them every day.

Ajax is somewhat slow and processor intensive, but Tamarin is a project that will speed up processing of JavaScript. Adobe's ActionScript interpreter is faster (up to 10 times) and they donated it to Mozilla. Now Mozilla is working on implementing Adobe's ActionScript engine to interpret JavaScript faster in the browser.

JavaScript Libraries

John Resig - Mozilla

Three basic ways to implement JavaScript with libraries.

• Level 1 - Easily drag and drop in widgets into your web application.
• Level 2 - Some assembly required. Set of functions that allow you to not worry about the browser bugs. JavaScript Frameworks - Aids writing JavaScript code.
• Level 3 - Directly interact with the DOM API. Dealing directly with DOM and dealing directly with browser quirks and bugs.

You should use a JavaScript library so you don't have to deal with problems people have already solved. Hence wasting a lot of time.

Prototype, jQuery, Yahoo UI, Dojo - These four libraries completely dominated the open source, general purpose JavaScript libraries. These libraries are significantly more popular than any commercial solutions. GWT, DWR and etc are minuscule in their overall use than the open source JavaScript libraries.

Overview of Frameworks

• Prototype is the oldest JavaScript framework (3 years old) and is the default for Ruby on Rails. Prototype's function naming scheme looks like Ruby functions. Prototype doesn't include any animations. That is done by it's sister library, Scriptaculous.
• jQuery is focused on short code and is specifically focused on adding behavior to the DOM (HTML). Features can be added via plugins. jQuery pioneered using CSS selectors to interact with the DOM, which is now being included into the other libraries.
• YUI is an attempt to standardize internal Yahoo JavaScript. They didn't want to rewrite their code internally, so they decided to put their code into a framework.
• Dojo is largely backed by corporatations and manpower. Very standardized and completely focused on building web applications.

My laptop died after this so I'll summarize in my own words after the fact.

The philosophies behind the libraries are different. jQuery and prototype are built from the bottom up. They solve the core browser problems first and than build other features on top of the core. YUI and Dojo are built from the top down. They are built from the perspective of the end widgets and than built down to the core. The similarities between the widgets.

He than showed a variety of widgets that some people need and compared the libraries on what each one has. You can view this comparison on the presentation slides.

The overall mantra of the presentation was choose the best library for what you need by looking at their strengths and weaknesses. John did a good job of giving an overview of these strengths and weaknesses in his presentation.

Designing for Ajax

David Verba of Adaptive Path

He spoke on the elements of user experience. What I found most interesting about this presentation is that he said with the new user experience (that includes Ajax) Information Architecture artifacts no longer work. It is difficult to map the user experience. He talked about different tools that he has tried to use to to no avail. He said prototypes built with HTML/CSS/JavaScript seem to be the only way to go. It is the only way to really map the interactive experience without building the actual backend of the application.

I am sure the IA folks from back home would have absolutely loved this presentation. According to this, I - as an HTML/CSS/JavaScript developer - would actually have to be involved with the IA process.

Wrapping up Day 1

It was great tutorial day - a precursor to the actual Ajax Experience conference. I have to say I was absolutely locked to Resig's presentation, being that I am really involved with JavaScript development. David Verba's presentation was very important for developing client work, and Ben's was a great overview on Ajax. Tomorrow is when the actual conference starts. Here is my schedule:

I will attempt to document good sessions, but there aren't any plugins around here so it is going to be hard to save the laptop juice. 5 days total - 1 day down.