- We design and build extraordinary applications for companies looking to make the next great idea a reality.
- learn more
“Ajax Overhaul, Part 3: Retrofit existing sites with jQuery, Ajax tabs, and photo carousels” Up on IBM Developerworks
Part 3 of my colleague Brian Dillard's series on retrofitting your web site with Ajax is now up on the IBM Developerworks site.
In this installment, you'll tame unmanageable product-details pages by placing content inside a tabbed interface. You'll also keep product images under control by displaying them in an image carousel. You'll learn how to employ both techniques using simple Dynamic HTML (DHTML) or more complex Ajax code. Either way, you'll again use the principle of progressive enhancement to keep your pages accessible even when JavaScript isn't enabled. To accomplish all this, you'll use two additional jQuery plug-ins: jCarousel for image slideshows and jQuery UI Tabs for tabs.
You'll also want to look at parts 1 and 2.
Topics: Ajax Development, Announcement, jQuery
6 GWT Resources for the iPhone
We're starting to do some work at my firm for the iPhone (see my colleague Noel Rappin's recent release of a Rails Plugin for iPhone development), so I've begun some investigations and experimentations of using GWT for iPhone development. The sad truth is that, despite the initial hoopla around GWT on the iPhone, not much has been happening.
- GWT + iPhone == Pretty Tasty - a nice discussion of the development of the GWT Feed Reader for the iPhone and what went into building it. A great starting point if you're just getting started with GWT on the iPhone.
- GWT App Dev for the iPhone - from the GWT Blog, a slightly different take on the GWT Feed Reader project discussed above.
- GWT Feed Reader source code - open source. If you learn best by doing, read the code. See how it's done.
- Fake the iPhone User Agent - testing the iPhone specific versions of sites and apps is easy if you have Mac OS X, but if you don't this quick little tutorial shows you how to fake the User Agent in Firefox.
- iPhone Debug - an attempt to make debugging Ajax on the iPhone easier, sending debugging info back to the server. Uses Jetty with its support for COMET.
- Firebug for the iPhone - the idea that inspired the above. A bridge between your iPhone and the Firebug console in your desktop browser. Now you can see those debug messages in the comfort of your laptop instead of having to do it in the little iPhone window.
I'm going to put together a little bit of a iPhone/GWT howto/tutorial/investigation in the next couple of weeks, starting with a close analysis of the Feed Reader above. Stay tuned.
Topics: Ajax Development, GWT, iPhone
My IBM developerWorks series, part 2: Tooltips, lightboxes and more jQuery goodness
IBM developerWorks recently published my second "Ajax overhaul" tutorial. This series teaches intermediate-level developers how to layer Ajax features atop old-fashioned CRUD applications. My colleague Dietrich Kappe calls this the "Christmas tree" approach to Ajax development, and it's a valid choice for many companies. It's not the sexiest take on Ajax, but it often provides a lot of value for relatively little cost.
"Ajax overhaul" tackles a fictional shopping site for its use cases. Each installment examines a particular deficiency in the existing application's user experience and improves it using Ajax and progressive enhancement. Because I focus on the interface layer, the code examples feature only client-side code. I've completed four installments so far, each one employing some combination of jQuery, custom JavaScript and custom CSS.
I previously posted about the first installment. Here's the direct link to the second:
Looking for a front-end jedi/ninja/warrior/whatever
Pathfinder is recruiting! Although it's not yet listed on our career portal, we're looking to beef up the Ajax practice at our Chicago office with a talented front-end programmer. This person should be a jack of all trades, master of several, and flexible about which warrior metaphor to adopt for professional use.
Please give me a shout if the following describes you:
- You enjoy hand-coding complex DHTML and Ajax applications. JavaScript is your passion ...
- ... but not your only passion. You also make room in your heart for standards-compliant HTML markup and expertly crafted CSS.
- Speaking of CSS, you're chomping at the bit for CSS 3. Table-free, CSS-based layout is old hat to you.
- You've used more than a single browser and a single operating system in the last five years. You can debate the merits of Gecko vs. Webkit till the cows come home. You can rattle off browser bugs like the names of old high-school friends. The phrase "Opera 9.5 beta 2 on 10.4 Tiger" doesn't sound like nonsense to you.
- You've written production code using more than one open-source JavaScript toolkit and, more importantly, you know how to code without one. You have opinions about why Dojo is better than GWT (or vice-versa) and can intelligently discuss the pros and cons of jQuery vs. Prototype vs. MooTools.
- You're passionate about front-end developement as a discrete category of software engineering, but you can jump in on the server-side stuff when you have to. SQL, Apache and the command line don't scare you.
- You've worked with templating systems in JSP, Rails, PHP or some other framework.
- If you don't have direct experience with Flash, Flex, Adobe Air or Silverlight, you're at least willing to give such competing UI technologies a shot.
- You aren't necessarily a visual designer, but you don't need somebody who went to art school to swoop in and Photoshop a rounded corner or a background pattern for you.
- You have experience working for an Agile shop - or you desperately want to.
- You may not be an information architect, but you understand the world of user experience design. You're comfortable reading wireframes and requirements documents and participating in the design of complex software systems.
- You're not scared of acronyms like XML, XSL and XSLT.
- In short, you know how to put the "V" in MVC.
If this sounds like you, I'd like to take you out for lunch and a little chat about Pathfinder Development. See our jobs page for all the boilerplate about relocation, etc.
Photos (Creative Commons Attribution License from Flicker): PhillipWest | R'eyes' | dizznbon.
Topics: Ajax Development, Javascript, Jobs
Whitepaper - Ajax Roadmap: How to tranform your website without starting from scratch
My colleague Brian Dillard has written a rather decent whitepaper entitled Ajax Roadmap: How to tranform your website without starting from scratch, that lays out an approach to transforming your website or application without having to reengineer the whole darned thing. It offers a number of case studies, rationals and justifications for launching Ajax projects, pitfalls, quick wins -- in short, everything you need to start an Ajax transformation in your own company.
We're quite pleased with it. Come on by and have a look.
Topics: Agile Development, Ajax Development
My Web 2.0 Expo slides now available online
Photo: James Duncan Davidson
Web 2.0 Expo is closing up shop. I think my talk went pretty well. Despite being the last session of the last day, I had about 100 people, most of whom stayed till the bitter end. Not a lot of questions, but quite a few folks stopped by to chat afterwards - including Mark Meeker, a friend and former colleague from Orbitz who's no stranger himself to the conference circuit.
I made a conscious decision not to focus on code, but rather to provide tools and advice to developers who want to be a part of the conversation between standards bodies, browser vendors and library authors about the future of the web. I'm not sure how much of it makes sense without my narration, but I've posted my slides to Slideshare.
Now, out for Afghani food with old friends. More about Web 2.0 Expo next week!
Topics: Ajax Development
GWT, Remote Models and the Need for Better Replication Algorithms
- PESSIMISM, n.
- A philosophy forced upon the convictions of the observer by the disheartening prevalence of the optimist with his scarecrow hope and his unsightly smile.
-- Ambrose Bierce, The Devil's Dictionary
I frequently crawl through the various GWT project hosted on Google Code, as well as the few that aren't (like the almost venerable GWT Widget Library). One type of solution that is emerging is what I would call model synchronization libraries. These build on top of the GWT-RPC mechanism and allow a synchronization of an object model on the client-side with a corresponding one on the server-side.
Right now there are two major choices available:
- hibernate4gwt - Number one with a bullet. Elegant and powerful library that allows you to ship domain objects back and forth between the GWT client and the Java server, persisting changes, all at the cost of extending one class: LazyGwtPojo. There are two basic flavors -- stateless and stateful -- with a couple of different subflavors to support a variety of development use cases.
- Gwittir - Developed by the two dudes who wrote GWT in Practice, this library provides domain object bindings without forcing a dependency on Hibernate (should we add "Hibernate infected" to our lexicon along side "Maven infected?").
It's clear why these libraries are gaining in popularity. The whole idea of writing applications in GWT is to have a commonality of language and domain model. You want to be consistent and not have to navigate the OO/RPC boundary every time you modify or retrieve your client-side model. (An additional alternative worth mentioning is IT Mill Toolkit 5, which as a server-side ajax framework with it's widgets realized in GWT, already has the client-server synchronization baked in.)
Topics: Ajax Development, Gwittir, GWT, Hibernate, MVC
Web 1.0 to 2.0: What Kind of Application do you Have?
Of each particular thing ask: What is it in itself, what is its nature?
-- Marcus Aurelius
We get asked quite often to convert Web 1.0 applications into Web 2.0 applications. We do it so often that we've developed tools, written frameworks, published articles and whitepapers and given conference talks on the topic.
So far, there are and remain three different approaches:
- The Christmas Tree Approach - decorate an application with lots of Ajax widgets.
- The Reboot - reengineer your application from scratch.
- The Resurfacing - leverage the MVC nature of your application by turning your controllers into web services, your views from HTML into XML or JSON, and deploying a single page JavaScript client to access your new backend.
Which one to chose? That depends on what kind of application you have. Is it a Web 2.0 application masquerading as a Web 1.0 application, or is it really a rather dull Web 1.0 application that you need to tart up with a few widgets?
Topics: Ajax Development, Web 2.0
Ajax Testing: Doubling Down with Selenium and JMeter
This idea comes from my colleague John McCaffrey, but since he's having a bad case of blogger's block, I get to post about it.
For anyone who has developed tests for web applications with a tool like Selenium (or Watir), you know it is a sysiphean task, rolling the boulder of automated tests up the hill of a constantly changing application. The DOM changes, the text changes, the url's and parameter's change, iframes and onload events don't always play nice with your test recorder. Depending on the framework you are using, id's may change in unpredictable ways, forcing you to hack together brittle xpath expressions. Still, functional testing is important, so you persevere, spending countless hours in making those tests run clean.
Topics: Ajax Development, Best Practices, Selenium, Testing
Book review: Advanced Ajax by Lauriat (Part 2 of 2)
Back in February, I reviewed the first half of Shawn M. Lauriat's "Advanced Ajax: Architecture and Best Practices" (Prentice Hall, 2008, 360p). The first four chapters of Lauriat's book, which focused almost exclusively on client-side technologies, impressed me considerably. But it's taken me several weeks to get through the remainder of the book, and there's one reason why: PHP.
The server-side portion of "Advanced Ajax" uses PHP code to illustrate its many and varied lessons about Ajax architecture. It's not that I have anything against the popular web-development framework and scripting language. It's just that, after spending my career in the ASP Classic and JSP trenches and slowly ramping up on Rails in the last year, I'm not the ideal target audience for these code samples. Adding "PHP" to the title of the book might have limited its potential audience, but it also would have been more accurate.
That said, there's a lot of value here for adherents of any server-side framework. Lauriat discusses each topic from a general perspective before diving into the code. The technical approach to a given problem would obviously differ by framework, but the high-level approach wouldn't. If you don't mind skimming past the content that doesn't apply to you, Lauriat's advice about developing stable, scalable, accessible and secure Ajax applications transcends framework allegiance.
Topics: Ajax Development, Books, Review
Two Years of Agile Ajax: Web Killed Off GUI Techniques Just in Time for Ajax to Need them Again
I launched this blog just a little over two years ago, on March 21st, 2006. Appropriately enough, my first post was about User Experience (UXD) and Ajax. The blog has come a long way since then -- we've added another full-time blogger (Brain Dillard), published nearly 700 articles of original Ajax and Agile related content, and covered the major new innovations in Ajax and Web 2.0 -- but in many ways Ajax technology is still struggling with the same issues that I wrote about back then:
As it stands, Ajax is still in its infancy (or in its wild west phase -- pick your metaphor), and Bill's simple three part "patterns" are emblematic of this.
Topics: Ajax Development, Design Patterns, Desktop RIA, Web 2.0, Web Development
jQuery Form and jQuery UI Tabs: Two great tastes that taste great together
I spent last week holed up writing part 4 of Ajax Overhaul, my series of articles for IBM developerWorks. Aimed squarely at Ajax beginners, the series shows how to progressively enhance Web 1.0 sites with jQuery and Ajax. Each installment starts with the pre-Ajax version of an example e-commerce application and takes readers through the steps of retrofitting it to improve and modernize the user experience. The tagline for this installment is "Streamline multi-step processes with tabs and Ajax forms," a topic that allowed me to employ two of my favorite plug-ins for the jQuery open-source Ajax toolkit:
- jQuery Form, which gives jQuery several methods for serializing form data and submitting the results via Ajax.
- jQuery UI Tabs, which turns a series of divs and unordered lists into a tabbed interface.
I feel like I've run on and on about my enthusiasm for jQuery on this site, but I can't help it. One of the cool thing about its plugin ecosystem is the ease with which you can cross-pollinate a couple of plugins to create novel effects. In this case, I wanted to take a series of web forms - the checkout process for my example shopping site - and turn them into a single-page, tabbed interface in which each tab represented one step of the process. The biggest additional requirement was progressive enhancement; with JavaScript absent or disabled, the checkout process has to work like it did before I retrofitted it. All it took to accomplish these goals was a judicious mix of my two plugins.
Checking in from AjaxWorld East
Just a quick update from the conference (which is now over). I gave my talk at the AjaxWorld East 2008 and got some interesting reactions. The talk really had three parts.
- What is GWT and how do you use it?
- How do I resurface an existing J2EE app?
- Where are all of the alligators?
There is always a risk that someone or other feels that too little or too much time is spent in one part or the other. In fact, while converting a JSP to produce JSON so it could be consumed by the GWT client app, I had one person raise their hand and as "what does this have to do with GWT."
So, in the end, I had half the people nodding their heads, yes, and the other half shaking their heads, no. I was peddling a very pragmatic approach, rather than a product or service, and that might have thrown some folks off.
Met a lot of cool folks, put some faces to names, got to sit on a panel with Douglas Crockford. Cool beans. More next week.
Topics: Ajax Development, GWT, JSON
Comet 2008: The State of Play in Reverse Ajax
Just as with advertising measurement for Ajax, I continue to follow the technology known as Comet (open up an HTTP request from browser to server, then keep it open, pushing content down periodically) to see if it is ready for prime time. I thought I'd share my reading list from the last few months:
- 20,000 Reasons Why Comet Scales - Greg Wilkins achieved sub-second latency using Dojo Cometd/Bayeux and Jetty. Yes, it's a benchmark, and benchmarks can't be swallowed whole, but it's still quite impressive to see just two load balanced servers manage this kind of load.
- Comet: Reverse Ajax for streaming data from the server - Daniel Rubio of TheServerSide take an introductory look at Comet, but from the Enterprise/SOA perspective. If you're looking to convince your CTO to adopt Comet for your enterprise, you can adapt some of Daniel's arguments.
- A Comet Implementation for Google Web Toolkit - somehow I missed this one from last July. Does the usual hidden iframe implementation for Comet on the client. Simple design with lots of code.
- Comet Daily - Yep. The Comet technology now has its own blog (though it isn't quite daily). Lots of juicy articles, reviews and tutorials.
- Comet Support in GlassFish - Jean-Francois Arcand writes a compact little article on how to do Comet with GlassFish. Has links to lots of little demos.
- Comet Ruby on Rails - not to be left out, the Rails folks are trying their hand at Comet with the Juggernaut plugin.
While there is some progress, I have to say that Comet still seems to me like climbing up the down escalator. If you really want this kind of functionality in the browser, develop a new protocol and lobby for built in browser support.
Technorati Tags: ajax, comet, gwt, rails, dojo
Topics: Ajax Development, COMET, Dojo, GWT, Ruby on Rails
Stop, Reload, Error Loading Page 404: Converting Web 1.0 to 2.0
OK, onwards in our effort to convert Web 1.0 apps to Web 2.0. Today we'll focus on some of the differences between Web 1.0 and 2.0 from the user experience perspective. When we think about our web interface, we usually think about the links, forms and controls we've put in place. But the reality is that often things go wrong with our app -- sometimes network problems, system problems or application errors -- and we get errors like 404 or 503, or a "page did not load." How does the user respond to these issues?
Usually they make use of the Stop, Reload, Back and Forward buttons. Most times application developers see the use of these browser buttons as a problem, to be mitigated ("Please don't submit this form twice..."; "Don't use the back button or your order will be submitted twice..."). If you think about it a little more carefully, you'll find that these buttons form a vital safety net for web applications, without which users would be crying in frustration at the "Unable to connect..." pages and spinning cursors that have brought your app to a halt.
Topics: Ajax Development, Best Practices, Tutorials, Web 2.0, Web Development
About Pathfinder
Recent
- Making GWT JSON not Quite so Painful
- IDEA - preconference workshop 06 Oct 08
- HTML5, Ajax history management, and The Ajax Experience 2008 Boston
- A Look Back At Past Posts
- Flash Player on iPhone gossip
- Microsoft to Jump on Board EC2
- TAE Boston 2008: The Unsexy Presentations
- The Ajax Experience 2008: Hope to see you in Beantown
- TankEngine: New plugin for Rails iPhone Development
- Symphony of Ruby on Rails and Flex through RubyAMF
Archives
- October 2008
- September 2008
- August 2008
- July 2008
- June 2008
- May 2008
- April 2008
- March 2008
- February 2008
- January 2008
- December 2007
- November 2007
- October 2007
- September 2007
- August 2007
- July 2007
- June 2007
- May 2007
- April 2007
- March 2007
- February 2007
- January 2007
- December 2006
- November 2006
- October 2006
- September 2006
- August 2006
- July 2006
- June 2006
- May 2006
- April 2006
- March 2006
Topics
.NET
2d physics
3d
3D GPS
3D physics
37signals
Accessibility
actionscript
activerecord
Add new tag
Adium
ADO.NET Entity Framework
Adobe
Adobe AIR
Advertising
agile
Agile Development
AIR
Ajax
Ajax Applications
Ajax Bookmarking
Ajax Components
Ajax Development
Ajax Examples
Ajax Experience
Ajax Frameworks
Ajax history management
Ajax Intervention
Ajax libraries
AJAX Obfuscation
Ajax Performance
Ajax Products
Ajax Tools
Ajax Widgets
Amazon
amf
Analysis
Android
Announcement
Announcements
antennae
Apollo
Application Architecture
Application Development
AS3
ASP.NET
Asynchronous Processing
awards
Back Button
Benchmarking
Best Practices
BitmapData.draw
BJAX
Blaze Advisor
blog
blogging
Books
Browsers
Business
Business Reasons for Ajax
Business Rules
C#
Canvas
Case Studies
chess
Chicago
Cloud Computing
CMS
COBOL
code art
Code Generation
Color
COMET
Conference
Consistency
Content Management
CRM
CruiseControl
CSS
Custom Flex Component
data visualization
Degrafa
Design
Design Patterns
Desktop
Desktop RIA
Developer's Notebook
Diagnose
Dojo
Domain Knowledge
Drools
EC2
Echo2
Echo3
Editorial
ERP
Ethnographic Research
events
externalinterface
Ext JS
Facebook
ferret
FileReference
Firefox
Firefox Extensions
Flash
flash awards
flash player
flash player 10
Flex
flexunit
Flock
Flow
Frameworks
front end
front end development
Games
Gauge Component
getting things done
Git
Google
Google calendar
Google Gears
Grails
Graphics
Greasemonkey
Groovy
GStreamer
GTD
Gwittir
GWT
Healthcare
Hibernate
Hudson
IDE
Ideation
IE
IE6
IE7
IE8
ILOG JRules
Information Architecture
Innovation
Instructional Design
Interaction Design
Interview
iPhone
iTunes
Java
Javascript
JavaScript frameworks
Javascript Libraries
JBoss Rules
Jess
Jetty
JIT
Jobs
jQuery
JSF
JSON
JSR-94
JsUnit
Lazlo
Legacy Systems
lightweight
LinkedIn
LINQ
Logical Model and Conceptual Model
Low Pro
Mac
Mash Note
Mashups
Meebo
MetaWidget
Methodology
Microformats
Microsoft
Mobile
Mootools
mouse scroll
mouse wheel
Mozilla
Music
MVC
MySql
NetNewsWire
Object-Oriented
Object Relation Mapping (ORM)
Office
OOP
Open Screen
Open Source
Opera
Oracle
ORM
osx
pagination
Pair Programming
papervision3d
Patterns
Peer Creation
Performance
Personas
PHP
physics
physics engines
plugin
preloader
process
Web/Tech
Product Definition
productivity
Progressive Enhancement
Project Website
Prototype
Prototyping
PV3D
QA
qooxdoo
Radiant CMS
rails
Really Simple History
References
Requirements
Requirements
Alice Toth
Requirements Visualization
Restlet
RETE
Review
Rich Interactions
ruby
rubyamf
Ruby on Rails
SaaS
Safari
San Francisco
Scalability
Scenarios
Scriptaculous
SDLC
Search
Security
Selenium
Semantic web
SEO
Server Side
Silverlight
SOA
Social Networking
Software Processes
Songbird
SpiderMonkey
Sprajax
Spreadsheets
Standards
Startups
STI
Story Telling
Struts
Tamarin
Task Flows
Test Driven Development
Testing
The Ajax Experience
Tilt Component
Tools
TraceMonkey
Training
Trends
Tumblr
Tutorial
Tutorials
Unit Tests
Usability
Usability Testing
User Experience
user experience design
user interface
User Interface Standards
User Research
UXD
Venture Capital
Video
Vision
Visualization
VLC
Volta
Web/Tech
Web 2.0
Web Design
Web Development
Webkit
Weblogs
Web Services
Web Standards
Widgets
will_paginate
Windows
Wireframes
WordPress
workflow
work life balance
XML
XML Metadata
XUL
Yahoo Map AS3 API
YUI
Zeigarnik
Zeigarnik Effect
ZK