How to Refactor a Mess into an Organized Web Application (Part 0: Teaser)

Getting Organized Soon...

Ever found yourself as the front-end coder of a fat-client project, where the project has the following characteristics:

• The project has been going on for over for serveral years,
• The JavaScript is spread all over the place (I mean “all” over the place; inline, inside php snippets, within templates… here, there and everywhere!),
• The project is utilizing an extensive collection of JavaScript libraries and plugins,
• Some (okay… most) of those libraries are outdated, but it’s virtually impossible to upgrade them because they have been patched with the project’s proprietary code. Needless to add the fact that those libraries’ usage is widely decentralized and unmodular.
• There has been an effort to use namespaces, with no avail. The code is more like a disorganized salad of global variables and functions.

If you are following this blog, I bet you have been in this situation before; or you will be in the upcoming years — unless you decide to pursue your career as a carpenter instead of being a web programmer .

A Sneak Peak of What’s Upcoming

This is just a teaser to get you excited .

In the upcoming articles we will be converting this…

<p><a href="javascript:void(showVcard())">show vcard</a></p>
<p id="VcardContainer"></p>

… into this:

<?php
namespace o2js\vcardapp\presentation\script;
?>

<?php
/*
 * ROOT NAMESPACE
 */
?>
<script type="text/javascript">var VCardApp = {};</script>

<?php
/*
 * EXTERNAL LIBRARIES
 */
 ?>
<script type="text/javascript" charset="utf-8"
src="/vcardapp/js/lib/o2/o2.js"></script>
<script type="text/javascript" charset="utf-8"
src="/vcardapp/js/lib/o2/o2.stringhelper.core.js"></script>
<script type="text/javascript" charset="utf-8"
src="/vcardapp/js/lib/o2/o2.eventhandler.constants.js"></script>
<script type="text/javascript" charset="utf-8"
src="/vcardapp/js/lib/o2/o2.eventhandler.core.js"></script>
<script type="text/javascript" charset="utf-8"
src="/vcardapp/js/lib/o2/o2.eventhandler.extend.js"></script>
<script type="text/javascript" charset="utf-8"
src="/vcardapp/js/lib/o2/o2.domhelper.core.js"></script>
<script type="text/javascript" charset="utf-8"
src="/vcardapp/js/lib/o2/o2.domhelper.traverse.js"></script>
<script type="text/javascript" charset="utf-8"
src="/vcardapp/js/lib/o2/o2.domhelper.style.js"></script>
<script type="text/javascript" charset="utf-8"
src="/vcardapp/js/lib/o2/o2.ajax.js"></script>

<?php
/*
 * CONFIGURATION CONSTANTS
 */
?>
<script type="text/javascript" charset="utf-8"
src="/vcardapp/js/config/constants/constants.js"></script>

<?php
/*
 * PRESENTATION TIER
 */
?>
    <?php
    /*
     *  Controllers
     */
    ?>
    <script type="text/javascript" charset="utf-8"
    src="/vcardapp/js/presentation/controller/render.js"></script>

<?php
/*
 * COMMUNICATION TIER
 */
 ?>
    <?php
    /*
     * Callbacks
     */
     ?>
    <script type="text/javascript" charset="utf-8"
    src="/vcardapp/js/communication/callback/ajax.js"></script>

    <?php
    /*
     * Proxies
     */
     ?>
    <script type="text/javascript" charset="utf-8"
    src="/vcardapp/js/communication/proxy/ajax.js"></script>

    <?php
    /*
     * Controllers
     */
     ?>
    <script type="text/javascript" charset="utf-8"
    src="/vcardapp/js/communication/controller/ajax.js"></script>

<?php
/*
 * BEHAVIOR TIER
 */
?>
    <?php
    /*
     * Controllers
     */
     ?>
    <script type="text/javascript" charset="utf-8"
    src="/vcardapp/js/behavior/controller/vcard.js"></script>

<?php
/*
 * DELEGATION TIER
 */
 ?>
    <?php
    /*
     * Callbacks
     */
     ?>
    <script type="text/javascript" charset="utf-8"
    src="/vcardapp/js/delegation/callback/event/event.js"></script>
    <script type="text/javascript" charset="utf-8"
    src="/vcardapp/js/delegation/callback/event/click.js"></script>

    <?php
    /*
     * Controllers
     */
     ?>
    <script type="text/javascript" charset="utf-8"
    src="/vcardapp/js/delegation/controller/event.js"></script>

    <?php
    /*
     * Factories
     */
     ?>
    <script type="text/javascript" charset="utf-8"
    src="/vcardapp/js/delegation/factory/callback/event/click.js"></script>

    <?php
    /*
     * Delegators
     */
     ?>
    <script type="text/javascript" charset="utf-8"
    src="/vcardapp/js/delegation/delegator/event/click.js"></script>

<?php
/*
 *BOOTSTRAPPER
 */
 ?>
<script type="text/javascript" charset="utf-8"
src="/vcardapp/js/bootstrap/bootstrap.js"></script>

So fasten your seatbelts, and stay tuned for the first part of the series .

Volkan Özçelik

It's me: Volkan! Jack of all Trades, Samurai of JavaScript ;) Since 2003, I’ve been doing front-end development on client-heavy AJAX web applications. Currently, I'm a JavaScript Hacker at "SocialWire". Before that I was a VP of Technology at "GROU.PS", a well-known do-it-yourself social networking platform that allows people to come together and form interactive communities around a shared interest or affiliation. Before that, I was a JavaScript Engineer at "LiveGO", a globally known social mash-up. Before that, I was the CTO of a business network ("cember.net") which was acquired by Xing AG for around 4.2M Euros. See my linkedin profile to find more about me; I also share worth-following bits an pieces on twitter.

VIsit Volkan Özçelik's website