Implement the latest Web 2.0 bells and whistles so that you can provide not only the prettiest but also the smartest Web apps!

It's an axiom of human nature that people generally appreciate beautiful things more than plain ones. This is true of Web applications compared to 5250 applications, too. Although many of us die-hard green-screen fans may extol the virtues of green-screen apps for their ease of use and simplicity, they just don't look as pretty as good Web applications. Of course, prettiness and intelligence don't always go hand in hand, as seems evident by the notorious behavior of a certain hotel heiress. In the case of Web development, though, it is possible to produce applications that are at once functionally powerful and pretty.

There are a couple of approaches you can take to Web development:

1. Approach it like writing RPG code with SEU: Write every page from scratch, probably by copying in common pieces of user interface code and business logic, tweaking areas of the code that need customizing, and then adding more complex logic.

2. Use a unified approach, where business rules, overall look and feel of the application, UI design components, etc. are built up front, and all application details use these foundation components.

The first approach is probably what most System i developers are used to. We rarely write entire programs from scratch. Instead, we copy in an existing source member and modify key parts of it (file names, key lists, etc.) to create a new set of functionality for the application. This is really template programming in its crudest form. It relies on  the developer's memory to recall all the necessary places where code must be customized and his skills to write the correct customization code. 

The next level of sophistication involves using an application development tool that does the memory and skills work for you. For example, there are System i development tools that prompt a developer for all the required information to produce working programs, without requiring any programming knowledge at all. However, one of the weaknesses to this style of development is that it is not productive when handling application-wide changes. For example, with Web applications, it's not uncommon for companies to change their corporate image frequently, either with different color schemes, new logos, or things such as rounded corners on boxes instead of straight edges. Most recently, the rise in adoption of AJAX technology has meant an entirely different way for Web apps to interact with users.

In contrast, the second approach lends itself well to system-wide changes. By using templates up front, you can afford to invest time in isolating those components of an application that are most likely subject to change and work on customizing them. You can design your templates so that these components are accessed dynamically, at run time, from a central source. This gives you the ability to easily apply system-wide changes, simply by installing new versions of these commonly used components. 

Open-Source Templates and Frameworks

In the PHP world in general, there are several products that use templates in this manner.  For example, Zend Frameworks makes use of the Model-View-Controller (MVC) design approach and utilizes templates extensively. You can think of Zend Frameworks as consisting of a set of loosely coupled, powerful UI/code components that encapsulate lots of PHP code to implement commonly used functionality. For example, there are Frameworks that support AJAX implementation, PDF generation, and email capabilities.

These components can be aggregated into templates that can significantly reduce the number of steps a programmer has to go through to produce an application compared to traditional coding. However, one weakness of this approach is that the framework components are not tightly integrated with the Zend IDE. This means you don't get codeless wizards for integrating Zend Frameworks components. Instead, you have to write a couple of lines of code manually. This is not too big a deal, but anything that helps a developer's productivity is always desirable, and minimizing manual coding is generally helpful in this regard. Another thing you should know about Zend Frameworks is that it relies heavily on object-oriented concepts, which may still be somewhat daunting to RPG programmers.

Smarty is another tool that is designed to provide the benefits of  PHP development using templates. According to the Smarty Web site, "One of Smarty's primary design goals is to facilitate the separation of application code from presentation. Typically, the application code contains the business logic of your application, written and maintained in PHP code." The example provided at this URL shows how Smarty simplifies programming a page that produces a list of records from a database table

Here is an example of a skeleton template that loops through a list of articles and displays them in a table:

<table>

   {section name=art loop=$article}

      <tr>

         <td>{$article[art].headline}<td>

         <td>{$article[art].date}<td>

         <td>{$article[art].author}<td>

      </tr>

   {/section}

</table>

The output may look something like this:

<table>

   <tr>

      <td>How the west was won<td>

      <td>Dec 2, 1999<td>

      <td>John Wayne<td>

   </tr>

   <tr>

      <td>Team loses, Coach quits<td>

      <td>Feb 2, 2002<td>

      <td>John Smith<td>

   </tr>

   <tr>

      <td>Gourmet Cooking<td>

      <td>Jan 23, 1954<td>

      <td>Betty Crocker<td>

   </tr>

</table>

Normally, the PHP programmer would have to code a loop, along with some MySQL table access code, to produce a list. Smarty simplifies this by greatly minimizing the coding effort. Smarty is not tied to any particular PHP development tool, such as Zend,'s IDE, Eclipse, or WebSmart PHP. Like Zend Frameworks, you need to include a couple of lines of code in your application in order to plug in Smarty, as well as install it on your server.

Another open-source framework available for PHP is CakePHP. There's a great tutorial on CakePHP available at IBM's developerWorks site.

CakePHP is conceptually very similar to Zend Frameworks. It also relies heavily on the MVC approach to development, separating the user interface from the back-end logic. It's also heavily object-oriented. It uses three major categories of object classes: Model for the backend logic, View for the user interface/design/page appearance, and Controller for the messaging mechanism that communicates between the Model and the View. The Controller class utilizes AJAX functionality, for example, to handle conversations between the View and the Model. CakePHP also includes Helpers, which are shorthand coding constructs for building components. For example, the table Helper builds a table of values to display in a page with lots of functionality, using one line of code.   

Again, because CakePHP is not tied to any particular IDE, you still have to learn the tool and write code in it to benefit from its productivity gains. However, you can get considerable functionality with minimal code (compared to hand-writing PHP) by using CakePHP.

CodeIgnitor is yet another open-source PHP-based Frameworks tool. It also has a large collection of helper functions and other template-based components very similar to CakePHP and  Zend Frameworks. If you are interested in further researching the concepts behind these tools, you should also read about Ruby on Rails. While Ruby is a completely different language from PHP,  Rails uses the same Frameworks concepts. There are many good books that explain Rails.

CRUD Is Beautiful

One thing that many template-driven and frameworks software solutions provide is CRUD functionality. CRUD stands for Create, Read, Update, and Delete and is really just another shorthand for what System i developers commonly call the "Work With" function. Most CRUD templates provide standard functions such as the ability to list records in a table, ability to page through large datasets (R for Read), ability to add records to a table (C for Create), and ability to Update and Delete records, either individually or in sets.

Frameworks software such as  Zend Frameworks, CakePHP,  and Ruby on Rails all provide this kind of functionality. One advantage of using these CRUD components is that you don't have to reinvent the wheel. Trying to translate the functionality of a green-screen Work With subfile program into a Web-based equivalent can be difficult, since the two underlying technologies are so different. Using CRUD components gives you a baseline for your development efforts, a starting point provided for you that can sometimes contain the equivalent of many months of research and development. 

Web 2.0 Applications: More Than Just Server-Side Code

Modern Web applications (those written in the last three years!) utilize Web 2.0 technologies extensively. Any System i-based Web applications you write now should take into account these technologies. For example, the Gmail method of returning a dynamic list of search results as a user types in the search field is now almost a standard for many apps. These interfaces rely heavily on AJAX, which in turn requires considerable JavaScript code. The importance of JavaScript is often underrated. In my own Web development efforts, I often find I'm spending more time writing client-side code than server-side code. That's also the experience many of our clients have. Luckily, I recently discovered a software library that's made my life a lot easier. It's called JQuery. The name does not reflect its purpose. It's neither a query language nor a query tool. It's really a client-side framework and a set of loosely coupled components with helper functions (sound familiar?). It hides a lot of the complexity of JavaScript programming and ensures that pages are cross-browser-compliant. There are many JQuery plugins available, such as a datagrid component that encapsulates much of the functionality you'd expect to find in a Windows database application. JQuery is open source and available under the very liberal MIT license. It is being used by some high-powered sites, such as Dell, Google, Oracle, Intuit, Bank of America, and Barack Obama! Note that JQuery does not depend on PHP as the server-side language. You can use it with any language, including RPG CGI. However, if you do make the decision to use PHP for development, you should also consider using JQuery for your  client-side development efforts because using it will definitely improve your productivity. I'll be discussing JQuery more in an upcoming article in iTechnology Manager next month.

System i Vendor Solutions

Many System i vendors have had products for quite a while that utilize many of the concepts in this article. For example, template-driven programming has been around for a long time. If you are considering PHP development, look for a product that not only has templates but also allows you to create or customize them and that integrates the templates into the IDE. This allows you to do template-driven development with a minimum of coding effort.   

Get Jazzy!

Templates and frameworks can jazz up your Web sites by providing additional functionality compared to writing by hand. In addition, templates can help you make system-wide changes to your site easily, extending the life of your applications. Frameworks, whether PHP-based or JavaScript-based, can also help you implement the latest Web 2.0 bells and whistles so that you can provide not only the prettiest but also the smartest Web apps!