I am new to the world of web programming, have come up with some rules of thumb for the design of my first project. Do these sound like reasonable rules to go by, or should my code for various aspects of the project be more or less mixed together, or organized differently for some reason? Of the two books I've read relating to web programming (one on HTML & CSS, the other on PHP & MySQL), neither has clearly addressed this. Any opinions from experienced web developers will be greatly appreciated!
Rules of thumb:
For relatively static content, use PHP to generate pages (i.e., fill in a news story) so HTML and PHP are mixed just a little here.
For dynamic features, implement as an XML/plain text API so the PHP back end is not mixed in with any presentation logic (i.e., a server side API/service is implemented with no knowledge of presentation in it, then an AJAX client is developed and presented to the user)
Determine how to break up AJAX client into different pages based on desire for user to be able to bookmark a page and navigate with browser.
See the MVC pattern for web applications. You don't need to resort to XML/plain text to separate presentation from logic. Using a PHP framework such as Symfony or Cake may help.
It may be best to develop a web application using HTML first and then sprinkle some AJAX on top so your application has a fallback if AJAX fails - e.g. mobile devices.
Hope that helps
You might want to investigate the MVC Pattern which is a great way to organize applications and separate the controller logic from the presentation logic.
Some popular PHP MVC frameworks include:
CakePHP
CodeIgniter
A more "difficult" framework (but the one I like the best), is Kohana
I would recommend starting with one of the first two.
Small, static sites: HTML only, or PHP with included header and footer, and common functions.
More complex: MVC framework that separates Views (templates) , Models (Database calls and data manipulation), and Controllers (Page routing)
AJAX: MVC framework on the backend, special page routes for getting page data (check for the right headers), history.pushState w/ hashbang backup for partial page loads. Depending on the complexity, perhaps having client-side templating.
Related
I recently started to build a large social network, and and I thought my structure was good but it turned out I built this logic up badly.
I mixed my views with AngularJS (bad idea), skipped blade extension, but since I'm using a lot of block and sidebar includes it became a pain in the butt.
Currently I am just handling form validations with angular, but actually all of my site pages will require ajax, data pulling, etc.
I was searching around the net and I saw that angular views are stored in the public folder, but since all my pages will use angular is it a good idea to store all my views in the public, and just use Laravel as a back end?
I know this is a silly question but I'm confused a bit.
Any help hint appreciated.
There are two ways to combine these frameworks:
Only client-side rendering
This is the easier way and used by most web applications. In this case you would use Laravel as an API endpoint which will return JSON. Angular can query this data through its $http or $resource service and compile the templates, which you store in the public folder. Angular templates are just HTML with directives and some {{var}} statements. This way Angular does all the routing too.
Server-side and client-side rendering
This is the harder way where Laravel would do the routing and compile some templates on the server-side. You would use Angular only for some interactions on the site in a way you would use jQuery for example. The benefit of this approach is performance as users will get the full HTML the first time they visit your site. The disadvantage is that you may have to write some logic twice and can’t use some of Angular’s features.
To actually benefit from most of angular's features you should write a Single Page Application. This means you will communicate with the server through web APIs and you won't have any Laravel server-side templates.
So yes, you should write two decoupled applications. One client-side, using Angular and one server-side that exposes a web API, preferably RESTful.
This way you could switch from JS/HTML/CSS on the client side to Flash or Silverlight or something else and from Laravel/PHP/MySQL to .NET or NodeJS or Meteor/MongoDB.
Sergiu is correct, but in some cases Laravel still offers benefits that cannot be achieved with client-side templates. This is related to SEO and WCAG (accessibility).
AngularJS renders content by way of DOM manipulation so search engines cannot determine what content is shown after those manipulations are complete. This is also the case for screen readers. For this reason some content must be delivered by way of server-side view constructs. That is why Wordpress and Laravel have long and healthy futures.
On the back-end or in cases where SEO and WCAG are not important, data binding client side templates such as those used with AngularJS and Ember will be used increasingly as more developers learn how to use them.
In terms of whether to use AngularJS or Laravel for view constructs it would be best to learn how to use both and apply where most appropriate.
So I have decided to take a project I have been working on, and project management system, and convert it from a standard multi-paged application to a single-page application. In the process I have looked at a number of javascript MV*ish frameworks (ember, knockout, backbone, etc...) and have decided to go with backbone.js as it seems the most flexible solution and that I already use underscore.js for both its utilities and template system.
The one biggest concern I have with doing this is the potential code duplication I am going to have for model and business/domain logic in both my PHP models and in my backbone models.
This is just a technical cost I have pay when going with an architecture like this or are there some things I can do to lessen this concern?
You may want to take a look at a previous question I answered involving Node.js:
Reusing backbone views/routes on the server when using Backbone.js pushstate for seo/bookmarking
What I'm currently doing right now is using Davis.js + Mustache + Java Spring MVC backened (based on my original question: Single page Web App in Java framework or examples?).
If the browser does not support Pushstate then I have the server do the entire rendering of the page using a Java version of Mustache (ie standard Web 1.0). If the browser does support Pushstate then the browser will make an AJAX request for a JSON version of the model. The model is then rendered client side use icanhz (ie javascript mustache).
This works fairly well if a large part of your logic is getting a model an then rendering it based on specific URL. That is your business logic is "based on some URL I'm going to render this". This is how most of the sites on the web work (including this one which is still rather web 1.0). Obviously this would not work for say something like real time chat or HTML5 game.
A python version of this design is mentioned here: http://duganchen.ca/single-page-web-app-architecture-done-right/
I'm sure someone has done a PHP version.
If you are using different languages in server and in client I think there is not possibility to avoid this partial logic duplication you are concern on.
If you definitely want to use same code in server and client you have to move all of it to the only common language: JavaScript.
There are multiple JS frameworks those integrate very transparently the development between server and client: derby, meteor, ...
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!
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 commonly advised to combine 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 comment ---
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
The web-based application I’m currently working on is growing arms and legs! It’s basically an administration system that helps users to keep track of bookings, user accounts, invoicing, etc. It can also be accessed via a couple of different websites using a fairly crude API.
The fat-client design loosely follows the MVC pattern (or perhaps MVP) with a PHP/MySQL backend, Front Controller, several dissimilar Page Controllers, a liberal smattering of object-oriented and procedural Models, a confusing bunch of Views and templates, some JavaScripts, CSS files and Flash objects.
The programmer in me is a big fan of the principle of “Separation of Concerns” and on that note, I’m currently trying to figure out the best way to separate and combine the various concerns as the project grows and more people contribute to it.
The problem we’re facing is that although JavaScript (or Flash with ActionScript) is normally written with the template, hence part of the View and decoupled from the Controller and Model, we find that it actually encompasses the entire MVC pattern... Swap an image with an onmouseover event - that’s Behaviour. Render a datagrid - we’re manipulating the View. Send the result of reordering a list via AJAX - now we’re in Control. Check a form field to see if an email address is in a valid format - we’re consulting the Model.
Is it wise to let the database people write up the validation Model with jQuery? Can the php programmers write the necessary Control structures in JavaScript? Can the web designers really write a functional AJAX form for their View? Should there be a JavaScript overlord for every project?
If the MVC pattern could be applied to the people instead of the code, we would end up with this:
Model - the database boffins - “SELECT * FROM mind WHERE interested IS NULL”
Control - pesky programmers - “class Something extends NothingAbstractClass{…}”
View - traditionally the domain of the graphic/web designer - “”
…and a new layer:
Behaviour - interaction and feedback designer - “CSS3 is the new black…”
So, we’re refactoring and I’d like to stick to best practice design, but I’m not sure how to proceed. I don’t want to reinvent the wheel, so would anyone have any hints or tips as to what pattern I should be looking at or any code samples from someone who’s already done the dirty work? As the programmer guy, how can I rewrite the app for the backend and front end whilst keeping the two separate?
And before you ask, yes I’ve looked at Zend, CodeIgnitor, Symfony, etc., and no, they don’t seem to cross the boundary between server logic and client logic!
You and everyone else with a brain is asking this question and it's a sticky one. A really good Information Architect thinks in terms of usability, behaviors and flow, although he/she may not even know how to use design tools or be able to draw or program. If they can get an interface into a sketch, the designers can make it pretty. Let the designers do the looky feely STATIC stuff--that's what they are good at. Provide IA with a library of front-end behaviors that they can specify for screen objects. They don't implement this stuff, they only USE it. This is much easier if you use a front end tool such as JQuery, and it's great if you have a front end guru who understands both design & the back end quite well. Separate your javascripts into their own directory and always link them as external files. All the PHP frameworks have methods to do this dynamically. I have toyed with the idea of a config structure that maps files to all the front end stuff that they load so each individual view only loads what it needs. But you are absolutely right: There is a whole nother sub-MVC for the clientside that lives primarily within the views of the overall MVC. I think you can partition off the Ajax stuff (when the view needs to refer back to the server) I document Ajax controller methods as ajax methods and don't call them otherwise. A lot of it is having everyone on your team buy into the division of labor paradigm. It will just cause them to write more decoupled reusable code whatever framework you ultimately choose to hang it on. And you're right, you can do the front end encapslation with all of them, but NONE of them enforce good front end encapsulation, I think that's still in the realm of DYI. Good luck.
I realize this is a very generic question, but I guess I'm not really looking for a definitive answer. Being new to PHP frameworks I'm having a hard time getting my head around it.
Javascript frameworks, especially with UI extensions, seem to have their sort-of MVC-like approach by separating your JS code from your design. It just seems like it would get confusing to use an additional MVC framework on the backend.
Is this commonly done for primarily AJAX-driven applications? Is there an accepted/common way of doing it?
It's the next logical step from MVC, in my opinion. You already separate your data access (model), from the business logic (controller), from the output (view) - now you're just separating behaviour from markup.
In my experience, it works really well with AJAX features, since you only need to change your View to return the necessary information as JSON or XML.
A quick example of how it can fit together for a Zend Framework app (and this is from a demo app I wrote a few months ago):
Use the MCV Framework to build a fully functional site (which works without javascript).
Modify the controller to understand the difference between a 'normal' request and an AJAX request (Zend's context switching makes this easy).
Add Javascript (in my example jQuery) to cleanly replace the links with AJAX events.
In the end, the PHP app knows that an AJAX request needs an AJAX response (less bandwidth, less processing, only JSON or HTML 'snippet'), but a normal request needs an entire page generated.
Basically, you're just using AJAX to request (or update, or add data to) the 'view' template, without having to process the entire layout. The Zend Framework Context Switch Action Helper may help this make more sense.
It's worth mentioning that context switching works well in making a request available in different formats - HTML/XML,CSV,etc.
Its a very good idea, since the PHP MVC frameworks are bundled with JS frameworks:
Zend comes with Dojo
Symfony comes with Prototype and script.aculo.us
CakePHP comes with Prototype and script.aculo.us or jQuery (future release)
updated link, thanks "Exception e".
Personally we are using Zend (MVC as well as other aspects of the Zend framework) with jquery and it works very well together. Since not all of your interaction from the html page will be via jquery (ajax) then a standard MVC architecture is highly recommended. You certainly want the layers of your architecture (separating the model and the view) and having jquery is (at least to me) and additional "feature" of being able to execute your MVC asynchronously.
It just seems like it would get confusing to use an additional MVC framework on the backend.
No need to worry about that. You can use zend framework and extjs for example independently while developing, they are really separate products. The dependencies between these layers should be kept simple. No need to worry.
The coupling is low, you only need to set up means to query data from your server-app and do whatever you want with in on the client side. The line between these systems is simple and won't confuse you.
Extjs doesn't really has an mvc structure imho. It offers predefined rich components. You glue these components with some configuration and set up the urls of your server where data can be fetched from.
How do you get your zend mvc respond to ajax? I recommend you to view the presentation about zf ↔ ajax from the zf's project lead.