I'm developing a web application and I'm using PHP and Javascript. Today, I'm starting to draw all the design class diagrams, but I don't know exactly how to mix both technologies.

I think that something like the following should be good:

But, really, I'm not sure if typing the .php extension in the class name is sufficiently clear, or what I need is to separate diagrams in two: one for Javascript classes and another one for PHP classes.

I'm using CodeIgniter (MVC pattern) and Javascript. Any suggestion will be really appreciated.

Thanks!

I'm developing a web application and I'm using PHP and Javascript. Today, I'm starting to draw all the design class diagrams, but I don't know exactly how to mix both technologies.

I think that something like the following should be good:

But, really, I'm not sure if typing the .php extension in the class name is sufficiently clear, or what I need is to separate diagrams in two: one for Javascript classes and another one for PHP classes.

I'm using CodeIgniter (MVC pattern) and Javascript. Any suggestion will be really appreciated.

Thanks!

• php
• javascript
• design-patterns
• uml

• Is your ment about your model (chart) or about how to bine them into an application? – gnur Commented Feb 1, 2011 at 11:51
• I have some classes in Javascript and others in PHP, so what I need is how can I bine them in a single diagram (because some PHP views are using my JS code). Thanks! – Fran Verona Commented Feb 1, 2011 at 11:53
• So the question is how you should represent them in the diagram and not as files on the server? – David Mårtensson Commented Feb 1, 2011 at 12:19
• Voting to migrate to programmers.stackexchange. – Mchl Commented Feb 1, 2011 at 12:24

3 Answers 3

Usually, you don't want to do this. It's a problem of latency when viewing the web page in a browser. Each separate javascript file defeats caching and requires additional transfer time before a page can load. It's monly advised to bine JS files wherever possible and practical to better take advantage of browser caching. So my first suggestion is to not arbitrarily split up your JS for architectural reasons...

Now, with that said, to answer you question in entirety, I think it depends on how you view JS. If you're looking at it form the perspective that it enhances your PHP application, then dividing it up along side your views is not bad (the above suggestion not withstanding).

However, I usually see JS as a separate application layer on top of the PHP application. The JS interacts with the PHP layer through defined APIs. So it's basically just a full blown GUI application that just so happens to use the API defined by the PHP application. So with that in mind, I usually build the JS application with its own architecture that's more dependent on itself then the PHP application. So in other words, just because a piece of the JS application interacts with PHP doesn't mean that the piece of code belongs with the PHP application.

Does that make sense?

Trying to put all your classes (even within one application - you have two: a PHP applicatoin and a JS application) on one UML diagram is pretty much a way to waste a lot of time and gain nothing.

Use UML to show dependecies within a package or a group of classes working together, but don't try to do it for a whole app.

I don't know the way you do things usually but in my projects, I tend to separate PHP and JS. First of all, its easier to develop and debug if you go that way, secondly, if you treat javascript as a second layer instead of being on the same level of programming as PHP you will get a working fallback in the case that your JS doesn't work, or the user of your web app have javascript disabled.

I tend to make everything work in PHP and later on I override some actions with javascript to get them working through ajax instead of the traditionnal way of working in old school Web.

--- Revision following first ment ---

Then, you might want to treat the PHP and the Javascript part as separates applications. The first system (PHP) generate the initial state. Upon user action the second system (JS) makes a query to the first one and wait for the answer, this way, you will setup some sort of API that will standardise your transactions.

I used to work with design information specialists and they often refer to Jesse James Garrett as a "Guru" in that field of expertise, you might want to check his site (there are premade stencils for omnigraffle, visio and few others).

Through his writing and example you might be able to find the right symbols and elements to represent your system.

Jesse James Garrett's website