back

Adobe Dreamweaver and the jQuery Mobile framework

by Scott Fegette

From the first beta builds of Netscape 2.0 featuring JavaScript (at the time called LiveScript), it was clear that client-side scripting would be a critical component of the standards-based development model. And we've certainly seen JavaScript come a long, long way since then — with many ups and downs.

Despite suffering some setbacks during the DHTML days of the late 1990s due to incompatible web browser DOMs and gratuitous overuse of the technology, the rise of Ajax brought JavaScript back to the forefront of web designers’ and developers' workflows, and today it's rare to see anything more than the most basic websites and applications not embracing client-side scripting via JavaScript. Largely due to the popularity of Ajax, designers and developers alike both started requiring more accessible ways to script the browsers, and the current crop of JavaScript frameworks rushed in quickly to fill the void. Adobe also joined in the rush with its own Spry framework for Ajax, an incredibly handy, lightweight framework that many use today and that powers many of the interactive UI elements included in Adobe Dreamweaver.

In many ways, the advent of frameworks has helped breathe new life into JavaScript for many developers who were either turned off by the overabundant eye candy of the early DHTML days or uncomfortable with hand-rolling their own JavaScript code. Cross-browser issues could be easily addressed within the framework itself, encapsulating the dirty work and giving designers an easy way to access advanced functionality that would hold up across browsers and not require back-breaking browser debugging. Developers could focus more on the form and function of their site or application, and get their projects up and running faster than ever.

The de facto web framework

Although today's web pro now has a plethora of JavaScript frameworks and widgets to choose from, it's hard to deny that over the last few years jQuery has risen steadily to the top of the heap as a nearly de facto framework for the general web professional. One of the key reasons it has reached such popularity is due to its accessible, declarative nature. As opposed to more obscure frameworks that inject their markup, attributes, and CSS selectors, jQuery is really just working with markup and attributes. It has always supported the principles of progressive enhancement, which are critical to modern, adaptive web experiences, and philosophically, it has aligned itself quite closely with the way web professionals already think, which makes the framework incredibly accessible and understandable for new web developers as well as seasoned hands.

Over time, the umbrella of jQuery-related projects has expanded to cover a wide range of uses, and the jQuery community was one of the first to embrace the coming mobile web explosion with jQTouch and the upcoming jQuery Mobile project. As designers and developers are increasingly tasked with delivering multiscreen projects, the Dreamweaver team has decided to get behind jQuery in a big way, and share our own successes and the lessons we’ve learned with our own Spry framework with the jQuery community.

If you attended Adobe MAX 2010, our second-day keynote featured a conversation between our VP of Engineering, Paul Gubbay, and jQuery Creator/Founder John Resig in which Gubbay laid out Adobe’s plans to contribute to the jQuery project. They presented demos of a new animation tool prototype (code-named Edge) that creates rich, animated experiences using standards-based technologies and jQuery Mobile integration directly within Dreamweaver (see Figure 1).

AlertThis content requires Flash

Download the free Flash Player now!

Get Adobe Flash Player

Figure 1. Paul Gubbay and John Resig discuss jQuery in this Adobe MAX 2010 keynote.

Although Dreamweaver CS4 took great strides toward strengthening its support for JavaScript in general with the inclusion of rich code hinting, the ability to freeze the JavaScript engine and work on interactive states of a design, and greatly expanded JavaScript code hinting, the next release of Dreamweaver will use this foundation to provide expanded support for jQuery in general and the evolving jQuery Mobile project in particular. Our engineering team has in fact already been working directly with the jQuery Mobile team and has contributed to the recent Alpha 2 release.

jQuery goes mobile

jQuery Mobile represents a key area of efficiency for mobile development while retaining the approachability and ease of use that developers have come to expect when working with jQuery. As the mobile web currently spans more hardware and browser variants than desktop web — and continues to expand — the need for a unified framework to make sense of the chaos has never been more necessary. With a robust page/view mechanism supporting transitions, UI elements, dead-simple navigation, and list management, the jQuery Mobile framework provides everything you need to get up and running quickly with a mobile-savvy website or application without a complete crash-course in a new development model. Simple attributes applied to basic <div> elements are all you need, and the jQuery Mobile API offers endless possibilities to those who wish to go under the hood.

In the next version of Dreamweaver, we plan to allow easy creation of a jQuery Mobile project and easy insert objects to let you build out your user interfaces quickly and with confidence. Greatly expanded jQuery code hinting will help professionals make the best use of their time and enable designers to more effectively understand the syntax and structure of jQuery. Combined with the WebKit-powered Live View introduced in Dreamweaver CS4, you’ll be armed with some of the most powerful tools available to help your clients and projects move swiftly into a multiscreen world.

Summary

Dreamweaver has always tried to adapt itself to the way web professionals currently work. Given all the incredible momentum and support jQuery has already created — and the jQuery Mobile project is starting to generate — it was a natural step for us to include it in Dreamweaver both to help ease the transition from desktop to mobile as well as to support the many, many ways the core jQuery framework is being used today. The next release of Dreamweaver will be the first step in what we hope will be a long and fruitful collaboration.

‹ Back


Scott Fegette is the Technical Product Manager for Dreamweaver at Adobe - focusing on web standards, community outreach and developer relations. After hours, Scott is a professional musician and photographer.