PHP/JavaScript Design patterns for web based infosystems

Question

I've been coding for years and have found myself in a point of frustration. I am working on a new web based service that also has a UI and it will be developed from ground up. It will use some open source components, but is mainly a new thing in its own right.

But here's my problem. Building such a system means building all of those components:

• PHP backend
• HTML views
• CSS styles
• JavaScript front-end
• AJAX asynchronous connections

I want all of them to follow the same 'pattern', in a way that a module in the system consists of a folder or set of files that incorporates all of those components within that module.

But I am having a tough time with getting the architecture so that I would like it. Here is what I have so far:

• The entire main system is more or less written in procedural PHP. This solves the request URL, deals with caching, logging and debugging and loads in other components.
• PHP, when building the page, loads in module specific javascript files, CSS files, HTML files and other components based on the current module. This means that every module is as lightweight as possible, while being able to be extended however much based on current modules needs.
• System also incorporates OOP components of objects (such as 'users' or other type of classes) that can be used system wide.
• The system is built with MVC principles, though without OOP.

But I do feel really -dirty- for having built the main system in a procedural way. I did start writing it in OOP at first, but quickly found myself in headaches due to having to get everything fit the same system. It was OOP, but it was tightly coupled, which I disliked for while it was written the OOP way, components were really not that independent or were just a hassle to manage.

Are there any patterns or guides I could follow to get a better result? What I like about the current system is that I can call in anything, pre-view-rendering PHP, or HTML views, CSS styling, additional Javascript functions and AJAX communication per-demand, keeping the footpring wonderfully small, but it feels dirty. I even use a global for main database connection (though it is a global object).

Any ideas? It would not be a problem at all if it were just one language, but trying to make everything work together is a bit of a headache.

Thanks!

Answer 1

http://agiletoolkit.org/ implements exactly what you are looking for. It's source-code is available on http://github.com/atk4/atk4 so you can learn from there.

What I learned many things while creating Agile Toolkit.

• Look at desktop systems. - Cocoa, Objective Windows and other object-oriented desktop systems have solved those problems long time ago. Create views, connect actions, define call-backs. This maps into HTML-templated views, JavaScript bindings and AJAX requests.

• Runtime Object Tree. In Agile Toolkit, the first phase is initialization. During this phase objects are inserted into each-other. For instance you add Button into Form and add Form into Page. Then there is rendering phase which recursively produces HTML from everything. This makes much more sense that having components echo HTML.

• jQuery UI widgets. Using those was a great way to solve many problems. Views in Agile Tolokit can talk with respective jQuery UI Widgets.

• Objects you have mentioned are "Models" in Agile Toolkit. If you are looking for stand-alone version, you can rely on some ORM framework. I've made my own to have it tighter integrated with the Views.

• Reconsider de-coupling. If you are developing all the system by yourself then coupling gives you lots of benefits. Especially if it's object-oriented architecture and you inherit things. You would need some Java experience or Desktop development experience to get this thing right.

Links:

• What is Object Oriented Web Development
• Object Oriented Programming in PHP
• Execution steps in Agile Toolkit

Answer 2

Without knowing anything else, my thoughts:

• If you didn't like your OOP code, you probably designed it wrong. The idea with object orientation is that objects represent things quite naturally and as such they should be quite painless to deal with. If it's the coupling that you don't like, there are techniques to fix that.
• It sounds like your MVC pattern is wrong. The HTML/CSS/JavaScript stuff should all be handled in the View aspect. It seems to me that you have used some MVC principles while disregarding others. Of course, without your code this can only be a suspicion.