A WebApp is not just a simple website! From the user’s point of view, it is, above all, an application. To achieve this, many rules must be respected. These combine notions as diverse as ergonomics and design, adaptation to the terminal used, and client-server transactions.
Create HTML “Templates”
Rather than composing the elements of the interface by successive jQuery requests with big appendTo strokes, it is much more efficient to place them at the end of the HTML code div blocks, which will contain HTML code ready to be used. They are generally qualified by the Anglo-Saxon term “template,” meaning “model” or “template.”
It is recommended to give each block a unique identifier and a class name familiar to all. For example, in “template,” this class has the display: no rule, so the templates are not visible. To use one, make a copy using the clone command, edit its content, insert it into the DOM, and remove the template class to make it visible.
A Web Service Should Only Return Raw Data
No need to overload the server to create an HTML layout. Better to use the computing power of the browser on the client side for this. The web server can then devote itself to more critical tasks. The ideal format for transferring data from the server to the client regarding tables or data structures is the JSON format. It is natively managed in JavaScript but also PHP. In the opposite direction, the data transfer also benefits from being carried out in JSON format, and in this case, it is recommended to use a POST-type request.
Specify The MIME Type Of The Returned Data
We do not always consider specifying the MIME type in a PHP script because if it is a simple HTML page, the display will be correct. However, if the script needs to return data in JSON format, then it is strongly recommended to specify the MIME type explicitly.
This allows the browser to treat data as JSON and not as plain text, and jQuery commands (ajax, get, or post) will directly return JSON data, so there will be no need to do any conversion using JSON.parse. To specify the MIME type, add this line at the beginning of the PHP code (don’t forget to leave a space after the colon): header(‘Content-Type: application/JSON).
Use The “Important” CSS Rule Sparingly
Although the “!important” rule can be convenient, it’s best to avoid it whenever possible. The operating principle of CSS defines that when several selectors apply to the same element, it is the one that most precisely targets the element that is used to select the rules to apply. If a rule does not want to apply, you must start by going through the F12 development panel to display the rules and find the selector that applies. All that remains is to modify the selector that must be active so that it becomes predominant.
Take Advantage Of CSS Classes To Avoid Browsing The DOM By Hand
It is one of the great strengths of CSS classes to allow you to modify many elements at once. Besides simplifying the code, because there is no loop to do, the operation will be much faster because the browser will perform it. To do this, we use a selector, which can be a simple CSS class, and thus add or remove another CSS class to a whole group of elements in a single operation: $(‘.classeDeBase’).addClass(‘classeEnPlus’)
Use The CSS “Calc” Function To Make Precise Layouts
We regularly intend to distribute the layout (grid, flex, or table) mixing proportional dimensions, where we use the unit % and fixed dimensions, defined in px, em, etc. The CSS calc function is used to determine proportional dimensions with precision. For example, to create a large block of text with a small border on each side, rather than defining: “2em 95% 2em”, which would cause difficulties with a responsive application, you need to use the calc function this way: 2em calc( 100% – 4em ) 2em
Use CSS Classes For A Functional Purpose And Not A Technical One
It might be tempting to reproduce in CSS the principle of formatting already used in HTML, and therefore, for example, to define a bold rule {font-weight: bold} that we could use each time we want to put a text in bold, in the same way as with a tag b. However, CSS classes must correspond to functional notions, not technical ones. If we want to highlight an element because it is used to indicate an error, we will not put two classes, bold and red, but an error class that will correspond to the rule error {font-weight: bold; color: red}
In Conclusion
Building a WebApp without applying best practices means taking the risk of getting stuck at one time or another and then having to redo part of the development already done. The web is constantly evolving, and so are good practices. Pascal Barlier has presented some of them to you in this article. There are many others.
Those presented here are valid today but may be less relevant in a few years. This is why we recommend that you implement them without further delay and keep yourself regularly informed of new practices and updates to guarantee the proper functioning of your web apps.
Also Read: Google BERT: Google News On The SEO World