A Web Toolkit

The Web Architect’s Toolkit

Simon Bisson takes a look at the essential tools for the web developer on the move, by seeing what he keeps on his laptop’s hard drive…

Introduction

Developing web applications is an important part of any developers’ role in this age of eBusiness and systems integration. With project timescales shortening, and rollout schedules accelerating to match, every developer is going to need a toolkit that will help them produce solutions quickly and effectively. So what tools do I keep on my laptop, and what do I use them for?

Design Tools

As web applications become more and more complex, developers will need to work closely with infrastructure and application architects to design effective and scalable solutions. One of the most effective tools in the web architect’s toolbox is a flowcharting package – though these days these can do a lot more than just draw flowcharts…

One of the most powerful tools around is Microsoft’s Visio 2000. Recently purchased by Microsoft, Visio had made a name for itself as the developer of an extremely flexible drawing package. As well as providing tools to help you draw flowcharts, Visio has grown into a powerful software engineering package that also includes features for the network designer and infrastructure architect.

Visio 2000 comes in several different versions, but the two that the web architect will need to choose from are the Professional and Enterprise versions, which add software engineering features – including tools to allow you to reverse engineer databases. I’m a big fan of the Enterprise edition, if only for its huge library of templates that cover equipment from virtually every manufacturer. If you’re designing a large network, then this is the tool for you – as you can create network diagrams, and even lay out the racks and cabinets you’ll be installing the equipment for your web application.

Data designers will find the ability to reverse engineer SQL databases a benefit, especially when you’re trying to document a legacy system. It’s very easy to find your self with an unmanaged central database that needs to be at the heart of your web services, with no documentation. Just load your laptop with Visio, hook it into the network, and pull in the tables. Once the information has been imported in to a diagram it’s very easy to start creating the documents you need. Another useful reverse engineering tool is Visio’s network discovery tool. This will allow you to detect the devices in a network, and to draw up a fully annotated network diagram. If you’re going to have to redesign an existing network for your new web application, then this is a feature well worth using.

You can even use Visio to handle the early stages of application design, from developing Object Role Modelling (ORM) data models, to creating UML models or using Yourdon or SSADM notation. If you’re going to treat web application development as object development then these are techniques you’re going to have to get familiar with. This is going to become more and more important as technologies like J2EE and Microsoft .NET become more and more widespread. Visio also includes tools for documenting web sites, and for creating high-level conceptual diagrams of web application flow. You’ll find these useful features, especially if you’re going to be mapping out an existing web site.

If you’re going to be working with any form of directory service you’re going to need a design tool. Visio 2000 comes with the tools you need to document and design the three most common forms of directory service – LDAP, Novell Directory Services and Microsoft’s Active Directory. You’ll find stencils for most of the common objects used in each directory. It’s a pity that there’s not one directory design tool, as one of the more complex tasks around is defining a meta-directory structure that will allow you to use all three directories in a single network architecture.

Microsoft’s purchase of Visio makes more sense when you look at the betas of their BizTalk XML enterprise application integration tool. If you’re using XLANG to document business processes for BizTalk, then you’re using a subset of Visio modified for creating XML schema. Let’s hope that this ends up in the full Visio package very soon now – as one thing XML is lacking is a good tool for creating schema and DTDs. The appearance of Visio in the MSDN Universal CD set is a promising sign, as Microsoft moves to a distributed development model with the forthcoming Visual Studio .NET and the component-oriented C# language. With Visual Studio’s next release not likely until summer 2001, may be we’ll see a version of Visio merged into Visual Studio as its object documentation and XML design tool.

Visio is a jack-of-all-trades, and a master of many. You may find tools like Rational’s Rose better for producing object models and handling your use cases, but Visio has most of the features you’re likely to use in one place. When you’re under pressure to get that design out, that’s what counts.

Visio isn’t the only design tool around, and it’s certainly not the cheapest. An alternative is the shareware package SmartDraw. If all you need to do is document or design, then SmartDraw is well worth a look. Not only is it substantially cheaper than Visio, its also easier to use – and can import and export most common drawing file formats. Where it does fall down is in the limited selection of software design templates, and its inability to reverse engineer object models and database diagrams. Version 5 of SmartDraw has just been released, and it now includes a library of network equipment as part of the professional edition. Version 4 users were able to purchase an add-on library, which whilst not as comprehensive as Visio’s, at least covered most of the network equipment you’re likely to use.

Development Tools

Of course there’s more to life than writing documentation and drawing diagrams. Some days we even have to write code. Whether it’s a prototype or a full-blown web application then you’ll need tools to help you produce your web application.

If you’re planning on quickly putting together a data-driven web application, a copy of Dreamweaver UltraDev 1.0 is a useful tool to keep around. I find it a powerful prototyping tool for developing the front end for a web application. Dreamweaver UltraDev is designed to turn the classic Dreamweaver web page layout tool into a web-application front-end development environment. And of course you can still write HTML with it…

If you’re a designer Macromedia’s Dreamweaver has long been seen as the best web design tool around. You can use it do just about anything you need to do on a web site, from designing CSS style sheets to including complex DHTML scripting elements on your pages. But one thing remained missing from Dreamweaver: full support for server side scripting. If you wanted to add scripting to a page, you could use the round-trip HTML editor built into Dreamweaver to edit your code, but there was no way to actually see the effects of data or application calls on the page’s design. It’s quite possible for a good-looking page could be completely wrecked by subtle variations in the content in your database, if you’re dealing with dynamic content generated by database queries.

One key feature of Dreamweaver UltraDev is its live data design views. You’ll need to be working with the application server you’re using to run your web application to use this feature, as it actually runs the page’s HTML whilst still giving you access to Dreamweaver’s editing features. Of course, for test and development purposes there’s no reason why you can’t work with a local web server like Windows Peer Web Services or a copy of Apache. You’ll need to make sure that UltraDev is configured with the details of the root directory of your site. Once that’s done, UltraDev requires a connection to a database in order to define the record sets you’ll be designing against. This can be an ODBC connection for an ASP site, JDBC for JSP (UltraDev comes with a JDBC run-time) or a Cold Fusion data connection.

Once you’ve created a database connection and its associated record sets, you can use UltraDev’s data binding inspector to work with the database tables you’re using to add dynamic content to a page. UltraDev lets you add generated content in a page’s HTML – including in the attributes of HTML elements. With the ability to dynamically generate HTML as well as content, you can use UltraDev to handle dynamic images and even modify the actions of a client-side behaviour. You’ll need to understand how UltraDev works with data before you use it in anger, and we found the tutorials provided a useful start – and it’s well worth spending some time working your way through them. These help you get to grips with the Master and Detail pages used to handle database connections. A Master page contains pointers to the more detailed information held on a Detail page – it’s a good idea to think of it as an index pointing to specific information. If you’ve used the database publishing tools in NetObjects Fusion you’ll find this technique very familiar. This is an excellent way of exploring hierarchies of data, but the world doesn’t always work that way! UltraDev doesn’t force you into working only with general database queries, and it’s quite possible to create sites that personalise generated pages based on database queries.

This is a tool for prototyping or simple web applications, so don’t expect to use UltraDev to build complicated web applications from scratch – there’s still a place for using WebSphere Studio, Visual InterDev or Cold Fusion Studio (or a good old text editor) if you’re wanting to construct complex business logic on your server side scripts. Where UltraDev really shows promise is its reliance on the extensible Macromedia Dreamweaver framework. If you’re willing to spend a little development time you can take your existing JSP or ASP code and turn it into a new server behaviour, ready for reuse in all your UltraDev pages and sites. You can also share your behaviours with other UltraDev users by turning them into UltraDev extensions, and then uploading them to the Macromedia Exchange web site (http://exchange.macromedia.com). And of course you’ll be able to use the Exchange to download Dreamweaver and UltraDev extensions like Nokia’s WML Toolkit, which will help you create more complex pages and sites.

Whilst supporting ASP, JSP and Cold Fusion is enough for most demonstration purposes I’d have also liked to see support for PHP – especially as Linux-based web servers are finding their place in the SME marketplace for intranet and Internet purposes – and PHP is forming the basis for the Midgard content management system. There is one ray of hope for the Open Source-committed developer though, as Macromedia or third parties could develop a PHP extension using the Dreamweaver extensions environment. Of course, if you know enough JavaScript you could even do it yourself! If you’re interested in doing more with UltraDev than creating prototypes and demonstrators it’s probably a good idea regularly check for new features on Macromedia’s UltraDev Exchange web service.

Text Editors

Of course the real big gun in the Web Developer’s arsenal is the text editor. Who really needs a WYSIWYG web development package when a well-configured text editor and a couple of Wrox or O’Reilly books can help you bash out the code you need to write…

The long running UNIX religious war between vi and emacs is really one of philosophy. With vi, you get a stripped down editor that does nothing but allow you to enter text. Powerful search and replace tools enable you to manage your code easily, but these do take some getting used to. At the other extreme is the LISP-based emacs. If you want a flexible tool, with plenty of additional features just a download away then emacs is well worth a look. Of course, these packages aren’t just UNIX tools anymore, and versions of vi and emacs are available on most platforms. The latest Windows release of Xemacs is a popular tool, though Windows users will find that it breaks a lot of regularly used metaphors – including the file open dialogue.

Windows-based developers should start mourning now, as one of the most flexible development tools PFE (the Programmers File Editor) is now an orphan project. If you wanted a good, free, tool that gave you the power of vi with some of the flexibility of emacs. I used it as my main Perl development environment for many years. Version 1.1 is the last release, and development has ended. However, you’ll still find it out there, ready for download. The buttons may look a little primitive, but it’s a powerful beast.

The future of the development environment is an interesting one. Microsoft is opening up the Visual Studio IDE to third party tools in the .NET release; with ActiveState’s Perl and Python among the first languages announcing support, and Borland is developing a version of the Delphi IDE for Linux. The next year is one that could see a big shift in the contents of the web developer’s toolkit.

Summary

Visio is a useful tool for the web application developer, with various features including network and application design.
The Enterprise edition of Visio 2000 includes reverse engineering tools that will document application, network and data structures.
Macromedia’s Dreamweaver UltraDev is a powerful tool mixing WYSIWYG design and live-data views.
UltraDev is currently limited to database generated content and limited number of application servers. However, an online Exchange contains downloadable extensions.
The real heart of the web application developer’s toolbox is the text editor. On UNIX vi and emacs are worth using, whilst Windows users could try downloading PFE.