Developing Large Web Applications

Tenet 1

Large web applications are built from modular components that are highly reusable, maintainable, and reliable.

Tenet 2

The use of object orientation in JavaScript and server-side scripting languages improves reusability, maintainability, and reliability in large web applications by promoting modularity.

Tenet 3

Large-scale HTML is semantic, devoid of presentation elements other than those inherent in the information architecture, and pluggable into a wide variety of contexts in the form of easily identifiable sections.

Tenet 4

    Large-scale CSS forms a layer of presentation that is separate from the information architecture, applied in a modular fashion, and free of side effects as we reuse modules in various contexts.

Tenet 5

    Large-scale JavaScript forms a layer of behaviour applied in a modular and object-oriented fashion that prevents side effects as we reuse modules in various contexts.

Tenet 6

Dynamic data exchanged between the user interface and the backend is managed through a clearly defined data interface. Pages define a single point for loading data and a single point for saving it.

Tenet 7

Pages are constructed from highly reusable modules that encapsulate everything required (e.g., HTML, CSS, JavaScript, and anything else) to make each module an independently functioning and cohesive unit that can be used in a variety of contexts across various pages.

Tenet 8

Large-scale Ajax is portable and modular, and it maintains a clear separation between data changes and updates to a presentation. Data exchange between the browser and server is managed through a clearly defined interface.

Tenet 9

Large-scale HTML, JavaScript, CSS, and PHP provide a good foundation on which to build large web applications that perform well. They also facilitate a good environment for capturing site metrics and testing.

Tenet 10

The organization of files on the server for a large web application reflects the architecture of the application itself, including clearly demarcated scopes in which each file will be used.

Every member of a class (data member or method) has specific visibility that defines where it can be accessed. PHP defines three visibilities: public, protected, and private:

public

The public members of a class are accessible from anywhere (inside or outside of the class). Use public for members of a class to which users of the class and implementers should have access.

protected

The protected members of a class are accessible only from the class that defined them as well as within any classes that inherit from the class. Use protected for members of a class to which you are willing to give access to implementers of a class derived from your class.

private

The private members of a class are accessible only within the class that defined the members. Use private for members to which only implementers of the class should be allowed access.

Note:

Because there is no invoking object for static methods, you cannot use $this within a static method.

GET

The following method executes an Ajax GET request with jQuery. The method accepts one object as a parameter whose most common members are shown below. The dataType member can take a number of values, of which the most common are text, xml, or json, indicating that the data argument passed to the function specified for success is a string, DOM, or JSON object, respectively. The url member is the destination for the request. You can specify the query parameters for the GET as an object in the data member. The timeout member is measured in milliseconds:

jQuery.ajax
(
   {
      url:       "service.php",
      type:      "GET",
      timeout:   5000,
      data:
      {
         "key1": "val1",
         "key2": "val2",
         ...
      },
      dataType:  "json",
      success:   function(data)
      {
         // Do what is needed when the Ajax call returns successfully.
      },
      error:     function(xhr, text, error)
      {
         // Do what is needed when the Ajax call returns on a failure.
      }
   }
);

                                          

POST

The following method executes an Ajax POST request with jQuery. The parameters for the method are the same as described for GET except you set the type member to POST:

jQuery.ajax
(
   {
      url:       "service.php",
      type:      "POST",
      timeout:   5000,
      data:
      {
         "key1": "val1",
         "key2": "val2",
         ...
      },
      dataType:  "json",
      success:   function(data)
      {
         // Do what is needed when the Ajax call returns successfully.
      },
      error:     function(xhr, text, error)
      {
         // Do what is needed when the Ajax call returns on a failure.
      }
   }
);