Refactoring: A Must for Supporting Web Projects

The modern Web is growing more complex and sophisticated every day. Dynamic pages, context-sensitive content, personalized services, and asynchronous communications all make the Web more interactive and fun for users, but can also create another level of hell for developers, mainly because of the many technologies involved.

The modern Web is growing more complex and sophisticated every day. Dynamic pages, context-sensitive content, personalized services, and asynchronous communications all make the Web more interactive and fun for users, but can also create another level of hell for developers, mainly because of the many technologies involved.

Developing Web projects now means managing very complex server and client-side applications -- including their connectivity and interoperability support.

Serious work demands serious tools. If several years ago you could develop and maintain a good Web service with, say, Notepad and a handbook on Web development, nowadays this will barely help you build an up-to-date homepage.

Web developers now face problems of similar difficulty in dealing with decent-size desktop application projects. Project support and continuous evolution involves lots of effort and requires the use of specific techniques. One particularly useful technique is refactoring, which comes in handy for working with large projects, increases productivity, eliminates errors and makes it much easier to update the project.

This article does not address basic questions like what refactoring is, or how it should be used. For that, we refer you to Refactoring: Improving the Design of Existing Code, the famous Martin Fowler book (Addison-Wesley Professional, 1999). It addresses the concepts better than this article has space for.

Here we'll have a look at how IntelliJ IDEA, a Java IDE, provides for refactoring of both front- and back-ends of your Web projects, and consider just what this means for you, the developer.

Refactoring Front-Ends

As you know, the front-end part of a Web project is what the users deal with in their browsers. Technically it is the thick layer of code organized in HTML, CSS, JavaScript and sometimes XML files.

IntelliJ IDEA provides three refactoring groups to help you evolve your Web front-ends:

  1. Rename a symbol.
  2. Move a symbol.
  3. Safely delete a symbol.

What do I mean by a symbol? It is any project entity: file, class, method, property, attribute or value. When you change anything -- renaming a file, CSS class, or a JavaScript function, changing parameters or doing anything else that impacts how the front-end works -- IntelliJ IDEA correctly changes all the related symbol usages throughout the entire project.

When you are about to rename a symbol, IntelliJ IDEA searches through the project, shows you where this symbol occurs and lets you selectively rename usages with the help of the Find Window.

The toolbar on the left side lets you view usages. Just filter out everything that distracts you from what you are focused on. Then you can group usages by file or type and navigate to next or previous symbol occurrences.

It's the same when you move a symbol (for example, changing a file location). IntelliJ IDEA will correctly resolve and update all paths.

Safe Delete lets you delete a symbol and be sure that it does not affect your project in a negative way. Select a symbol and press ALT+DELETE. IntelliJ IDEA then searches through your project for this symbol usage and shows you a dialog like this:

From here you can see whether this symbol is used anywhere and decide if it is safe to delete it. Click Ignore and the symbol is removed. If you want to view where it is referenced, click View Usages. You will then be taken to the Find Window where you can do the job yourself, examining what is shown there one usage at a time.

The point I want to underline here is that no matter what symbol you are dealing with -- class name, style, variable or function, file or folder, attribute value or tag name -- it is very important for both efficiency and fun-factor that your IDE can automatically determine its type and take the appropriate actions.

Refactoring Back-Ends

The back-end encapsulates the business logic of your Web applications, including data mining and processing, transformation, and delivery to end-users.

To the extent that this all is achieved through the use of pages containing Java code, the code is in no way different from any other Java code.

IntelliJ IDEA features refactorings that can be used to modify and optimize the Java code included in your JSP and JSF files. You can manipulate classes, methods, variables and packages. The full listing of applicable refactorings takes about nine pages, but is available with guidance to their use at the IntelliJ IDEA Web site.

This article covers the most frequently used back-end refactorings to give you a sense of what refactoring the back-end with IntelliJ IDEA can accomplish.

Extract Method

When it comes to optimizing code structure, you face code duplicates, located throughout your project. The solution to this code repetition is to replace duplicate occurrences with appropriate calls to an appropriate method.

With IntelliJ IDEA's functions, you can select the code you want to replace and press the CTRL+SHIFT+M shortcut to apply the Extract Method refactoring.

IntelliJ IDEA creates a method from the selected code, determining appropriate parameters that should be passed and returned, and then replaces the code you selected with a call to the newly created method.

This refactoring also lets you customize the method name, order and naming for its parameters and return value.

Introduce Field

When your code contains long repetitive expressions it becomes hard to read, understand and debug. You can opt to declare a field and assign that expression to it. You can then refer to the field instead of the expression to improve your code readability and make it easier to handle.

IntelliJ IDEA's built-in Introduce Field refactoring lets you improve your code in this manner by selecting an expression and pressing the CTRL+ALT+F keyboard shortcut.

IntelliJ IDEA will then perform the rest, from proper field declaration... replacing all expression usages with the appropriate reference (you may opt to replace the selected occurrence only).

IntelliJ IDEA automatically determines the correct field type.

Inline Include File

When it comes to building a site you typically have a template that defines a common layout for its pages. Headers, footers and various menus that are repeated on every page along with unique content will lead you to use the include directives to organize page structure. However, it may happen that you need to change this or that part, defined by an included file, uniquely for a specific page.

With IntelliJ IDEA you can replace include directives with the contents of the files they refer to. The process is automatic -- point to a directive you want to replace with code and press CTRL+ALT+N shortcut.

IntelliJ IDEA then retrieves the code contained in the file to replace the selected directive.

Notice that inserted code is automatically indented and formatted according to the style settings for the specific file to which this refactoring is applied.


To develop and maintain a good project using modern Web design principles, you need high-quality tools with a reasonable range of functions to let you use the latest technologies and techniques. More and more of these features are coming from the world of classic desktop application programming and Web developers have to seek the tools that meet their growing needs.

IntelliJ IDEA comes with a set of features including code refactoring, inspection, and quick fix, as well as support for client- and server-side code, to help create and maintain Java Web solutions.

About the Author

Egor Malyshev is an analyst and senior technical writer at JetBrains IIRC.

Dig Deeper on Software development techniques and Agile methodologies



Forgot Password?

No problem! Submit your e-mail address below. We'll send you an email containing your password.

Your password has been sent to: