Step 0: Make coffee
(I write the following paragraph a bit tongue-in-cheek, but there is a sense in which this is actually a semi-important step.) Before beginning any work it’s important to have a full cup of whatever type of drink helps keep you alert and focused the best. By creating a routine you get your body and your mind in a routine that prepares you for the work to come. When beginning writing code it’s important to make sure you are alert, awake, and thinking clearly about not only the next line of code you write, but the larger picture at all times. Once you’ve settled down with your beverage of choice it’s time to begin.
Step 1: Start with a yellow legal pad and a pen of any kind
Almost all of our projects have begun on a yellow legal pad. You may prefer a paper of another color, this is completely your preference. I recommend yellow for a variety of reasons but it’s certainly not mandatory. I also recommend a pen above a pencil. Pencils tend to smear, ideas get lost, lines get blurred and the point here is not to write a perfect plan but rather to brainstorm, scribble, and simply get ideas down on paper. It is quite often not pretty in the end. Using a pen encourages you to think like this; otherwise a pencil tends to encourage erasing, re-writing and other brainstorming no-no’s.
Step 2: Determine your needs, target market, & problem to solve
Ok, so you should now be seated with your hot beverage and a legal pad and pen and ready to begin the next step. Begin writing down your ideas. Start with the problem you wish to solve, why are you writing this extension, what are the key ideas you will focus on and what do you need your extension to do. It’s also important at this point to do a bit of research. Does the component already exist? Has someone already released a similar product that might be viewed as competition for yours? How large is the target market for the component you are seeking to write? This is important to consider and there are several precautions to which I would draw your attention.
First, don’t try to write a "Lord of the Rings" component (one component to rule them all, one component to bind them...), determine the core problem you wish to solve then focus, focus, focus. You’ll find your life much easier and your marketing to be much smoother this way. Secondly, be sure that your target market exists. Don’t assume because your component is something you need that everyone else needs it as well. Be realistic in your expectations and you’ll be more confident as you progress.
Step 3: Write out the overall flow of your application / extension
Once you’ve scribbled out your ideas, your target market, and the problems you wish to solve, the next step is to write out the overall flow of your component. More than likely this is done at the same time as the previous step, and even as you write your ideas, and more you will find yourself beginning this outlining process. Write out the controllers, models, and views you’ll need. This is probably the appropriate time to step aside and discuss the first important part of Joomla! 3.0 component development, Model-View-Controller (MVC) architecture and Joomla!.
Joomla! implements a fairly standard MVC structure, however it tends to differ slightly from the MVC framework used by other platforms. Joomla! 3.0 views each task as a controller. This means you would more than likely have controllers named “save”, “add”, “edit”, “delete” etc... Each controller performs one and only one task. At first this may feel like you have an excessive number of files, but ultimately provides an intuitive flow through the component and also assists in allowing the chaining of multiple commands together (I will address this in more detail when we begin writing the controller files later in this series).
The models in Joomla! handle the actual manipulation of the data. Here is where you want all your logic and code. The models are typically created to represent the key units, or objects, of your component (e.g. category, item, etc...). Within the models you have a number of functions relating to that particular object (e.g. list, get, save etc...).
Lastly you have your view files. Joomla! incorporates a standard methodology for how these views are constructed and again we’ll look into that in more detail later in this series. Suffice it to say at this point, the views typically follow a similar structure to the models with multiple views relating to each key unit, or object, of your component.
This should provide a brief (although perhaps simplistic) overview of the Joomla! MVC structure and hopefully enough to give you an idea how you should then write out your overall component flow and begin the next step.
Step 4: Organize data structures and table schema
While there are many approaches to the first step in actually developing an extension, we have found this next step to be the most logical and intuitive one to follow. Once we’ve written all the above information down and figured out the key parts of our component and the overall flow, we take the next step and organize our data structures and table schema.
In this step we begin breaking out each of the models (or key areas) which we determined earlier, and write down each of the fields we expect to use on that model or table. With most components you will need a table to associate with each model to store the corresponding data. There are several fields that are considered standard table fields to use when writing a Joomla! component and we will outline those later in the series as we write more of the code. As we write our table structures out, we try to follow some standard conventions. For example, if we plan to associate an item with a particular category we will include a category_id on our item table, similarly we will include a user_id if we expect items to be associated with a user. This helps us later as we take our handwritten tables and begin inputting them into our SQL builder. Sometimes we’ll even draw lines between our tables to help visualize how everything is linked.
Step 5: Setup a method for version tracking (GitHub)
This step does not necessarily have to be done next but we typically find that it’s just as good a time as any to begin setting up our version tracking. We prefer GitHub for a variety of reasons. If you’re not familiar with GitHub you can have both public (free) and private repositories (very minimal monthly fee) and then track all your code changes and keep a secure offsite backup of all your hard work. Not to mention it allows you the convenience of multiple users writing code without fear of overwriting each other. It’s ok if you choose not to use GitHub, it’s certainly not the only option available, but it is critical that you find something to use backup, track, and secure your code.
Step 6: Configure your local environment
The last step in this initial article is to configure your local environment. I would quickly say that we have a variety of options available here, and rather than expound upon the different methods you can use to write your code I would simply say that this is the point in the development process that we setup our environment. We will create the local Joomla! 3 installations, clone our GitHub repository, and symlink our directories as necessary. Personally, I use Sublime Text 2 for managing my code and I find the Git tools integrated to be satisfactory for the majority of my code writing. There are many software applications you can use, and rather than disparage them I would encourage you to find the one that works best for your workflow and your style of code writing.
Up next month: Beginning Development