Tell us about the best practices for building simple web applications in PHP + JS + jQuery?

Question

PHP

I've been doing JavaScript puzzles at codeacademy.com for almost 3 months now, took the free 30 days to learn jQuery course on net.tutsplus.com and found that I can write pretty good php, jQuery and jQueryUI applications. I have a feeling that during the development process I invent one bicycle after another: how to organize files, how to “chain” (how is it in Russian, by the way?) ajax requests, and so on.

The training courses give the simplest examples of the form “request a function / method - response”, but where can I read / listen / see what is called the best practices for using language features together when solving typical problems?

Answer 1

AJAX applications have been made not so long ago, therefore it is not so easy to find best practices gathered together. Many developments are simply not posted to the public, but are used by developers for some of their projects. Therefore, you need to show diligence and figure it out yourself.
First look at what others are doing. But here it is important not to take bad examples (for example, monsters like Zend Framework and ExtJS. jQueryUI, by the way, it’s also an ugly thing - have you looked at its sources?) Look at how the clientside is written on Vkontakte. Look at Facebook (although the code is shaved there, but you can figure it out). Have a look at the Zforms library. Check out the Google Closure Library (Google has a lot to learn, especially in terms of code organization, check it out).
In general, it is useful to look at someone else's code. it is not always well written, but even in this case, it is an occasion for reflection on the topic “what is the right way?”.
Now about the theory. When building more or less complex AJAX applications, you have to solve approximately the same problems as on the server side, namely:
- splitting the code into loosely coupled components (so that changing one of them does not break everything else). This includes both the organization of a 3-tier architecture (for example, MVC), and splitting into modules, dynamic loading of modules (look at yepnope.js and do the same, but simpler). Choosing a means of module interaction - Dependency Injection or an event system (Observer pattern). I prefer Observer.
- organization of a data warehouse - you need some kind of module to receive data from the server with caching, validation, possibly with locks and notification of changes. See, for example, how Google Docs behaves if you open 1 document in 2 windows and edit it. You need a server half for receiving / validating / issuing data.
- View organization: this is a solution to the issue of choosing templates (jQuery Templates for a beginner - they will do), creating a widget system (for example, you can insert a chart widget into a form widget and everything works) - I don’t know, however, any normal widget library , write yourself.
- router and controller - well, this is simply written without any libraries. If you don’t know how, look at how it’s done on VKontakte.
- code reuse - copy-paste is not allowed.
Also, there are problems specific to the clientside:
- the need to reduce the number of requests (wrong: we load the dialog, find out that it needs CSS and JS files and load them) - it is better to do this with one request. The same about requests to the storage: select everything with one request. Several AJAX requests are trash and horror, especially with pings of 100-200ms.
- the need to minimize the volume and speed of the JS code. For the sake of it, you need to abandon heavy / overloaded libraries like ExtJS, kendo and jQueryUI.
- gluing / compressing JS files is elementary, you can glue it even with bash scripts (or make), plus you can use tools like Google Closure Compiler. Find out how they work.
- the need to create an adaptive layout - there are libraries like Modernizr for this, but in my opinion, this is an overloaded monster. For example, a simple inline script is enough for me, included immediately after the body, which puts the classes with / without-js, with-css3, with-ie, as a result, users of modern browsers save traffic and see rounded corners and CSS gradients, and IE users download them as images.
And, here is the script, if anyone is interested: paste2.org/p/1947136
- the need to support navigation using browser tools - look at the history.js library (although IMHO, it should also be cut 2-3 times, there is a lot of superfluous).
Well, to consolidate knowledge, practice is naturally needed.
Write
1) your own grid (in this case, a grid is a widget that displays some data in the form of a table), with sorting, filtering and paging. Everything should work through AJAX (and if javascript is disabled, then by the classic method). If the table fits on the screen without paging, sorting and filtering must be done 100% on the client. Add caching (when you open already cached data, they are displayed from the cache and a request is sent to check their relevance).
2) Make a form for editing/adding data to this grid with validation.
3) And now make it work when the Internet is lost (that is, you add some data, it is saved, survives when the browser is closed and sent when the connection is restored)
4) if you do not experience negative emotions in relation to VKontakte, solve this problem: vk.com/page-1_42054413 . It is well suited for practicing AJAX application development skills.
As for PHP, in an AJAX application, it just serves as a backend and a smart data store, nothing more. Blind the simplest ORM, it will be enough.
PS And never repeat the mistakes that the clumsy developers of Habr make. The textarea for comments should be at least 20-25 lines long.

Answer 2

jQuery
PHP
Further you understood I think where what to look for\read.
For learning javascript, I would recommend looking towards Backbone.js and Underscore.js require.js
And for learning PHP, go the spartan method and immediately get into learning the Zend Framework. It tempers with its monstrosity (naming conventions, MVC and other patterns out of the box, code style, etc.). Having studied it, you can easily understand any other framework.
And for starters, your task is to write a RESTful feedback collection system, with the ability to comment and vote for comments. For all this, make an API (xml||json||etc). When you can do it, you can draw the first star on the monitor :)

Answer 3

Self-learning for one's own tasks is almost always bicycle building. Look towards Zend and YII frameworks. Understand the structure. Read manuals, communities (fortunately they are perfectly accessible).

Answer 4

Well... try to implement something yourself first, let's just copy the functionality of some small service. Then start asking questions about how it would be better to implement this or that.
There is usually nothing special about using jQuery UI in conjunction with PHP. In fact, jQuery UI has nothing to do with the server side - it is data preparation on the client side. I prefer the approach where almost all preparations take place on the client, and then something very important is processed on the server.