Learning Magento Coding Standard in Detail

When it comes to Magento development Magento core developers need to follow certain Magento code demarcation standards. The article would discuss those standards suggested by 3rd party extension developers.

These standards were developed to ensure the following aspects

• Dissociate the visual (CSS) layer from the specific functional (JavaScript) layer.
• Dissociate the functional (JavaScript) layer from the HTML (markup).
• Restore focus on utilizing jQuery templates.
• Restore focus on dissociating HTML, JS, CSS, from PHP classes.

Semantics

You need to use meaningful, shortened lowercase words consisting of Latin characters linked with (-) hyphen.

It allows merging and simply the naming conventions used to that are used to put visual styles to different page elements.

A Semantic representation can be dependent on the ID attribute

• Encourages engineers to focus on the page components that can be used again rather than separate singleton components.
• Decreases the maintenance efforts required for the long term.

  Here you need to follow the dissociation of presentation & content methodology.

  The list given below will let you differentiate between the exact meaning of any document and the way this meaning is portrayed to the readers.

  Content (Semantics) comprises

  • Data
  • logic
  • model
  • information
  • message
  • outline

  Presentation comprises of

  • graphics
  • aesthetic
  • view
  • design
  • visualization
  • style

  Also, you need to utilize only semantic HTML markup and then should not utilize presentation markup.

  Code Demarcation

  Here, the visual presentation should be based on

  • CSS pseudo-classes
  • HTML class attributes
  • HTML tags
  • Pseudo-elements
  • Form attribute of element type
  • Form elements state attributes

  For example, checked, disabled

  In JavaScript files, you should not implement hard code CSS styles

  Exception is

  CSS attributes wherein the values should be calculated values must be calculated after CSS-topics/Less code.

  • Makes it easy to alter to its default layout by including CSS classes to and then eliminating them from the elements.
  • Enhances style extensibility.
  • Cut down the maintenance efforts required in the long run by embedding CSS styles in just one place.

  Remember, inside the HTML tags, do not utilize inline CSS styles

  • Enhances style extensibility letting engineers load styles easily by just toggling classes.
  • Impost strict and clean split between visual presentation & markup.
  • Lets front-end teams clean up the old styles faster and effortlessly.

  Business Logic & JavaScript

  The business logic should be based on just the following

  • • Form
    • Form element name attributes or
    • Data attributes
    • Imposes strict and clean spaces between visual & business logic layers.
    • Allows both front and backend staff to function independently.
    • Enables modification of business logic and that too without influencing styling & vice versa.

  Here you need to allot HTML helper classes in your JavaScript to change the presentation layer

  It needs an underscore symbol to be used in the beginning and should be included in lowercase.

  Do not choose HTML structure-based DOM elements based

  • Helps frontend staff to change markup & themes thereby not disturbing business logic.

  Also, to include repeatedly appearing markup in the DOM structure, you need to utilize jQuery templates

  • Restores focus on jQuery templates.
  • Cuts down the maintenance efforts that need to be put in the long run by getting markup code saved at one location.
  • Making debugging efforts easy.

  PHTML templates and PHP files

  You must not hard-code inline CSS styles in PHP classes

  • • Reduces long-term maintenance efforts by having styles stored in one place.
    • Makes debugging easy thereby reducing the count of files that needs modification.
    • It makes the styles extensible and simpler to override when required.

  In PHP classes, avoid using hard-code inline JavaScript

  • Decreases the efforts needed for long-term maintenance by keeping frontend business logic saved simply at one place.
  • Decreases the count of files that needs modification.

  You must not hard-code HTML markup (used in thetag) in PHP classes

  • Reduces long-term maintenance efforts by having markup stored in one place.
  • Reduces the number of files to be modified.

  ---

  The standard for PHP coding

  The team for Magento core development working with professional eCommerce development services makes use of this Magento coding standard. It is recommended that the Magento developers who are engaged in creating Magento extensions & customizations should also utilize this standard.

  The Coding Standard for Magento offers certain rules that comprise the below-mentioned points

  • Utilization of insecure functions
  • PSR-1 & PSR-2 compliance
  • Unescaped output
  • Code syntax for PHP code
  • Using detested PHP functions
  • Using PHP superglobals
  • Vacant code blocks
  • Naming convention
  • Raw SQL questions along with other common issues related to PHP & Magento based code
  • Incorrect exception handling

  ---

  DocBlock Standard

  Talking about this particular standard is about the requirements of Magento along with protocols for including inline code documentation, termed – DocBlocks.

  Coming to some sections of Magento code, may not follow this standard.

  It is optional for 3rd party Magento developers to follow these standards, but if followed it will let them create clean, consistent and simple-to-read inline docs.

  Possibility of the Standard

  The main objective of this standard is to merge code DocBlocks for the files not limited to a specific language.

  Here are some points that may be considered by default

  • The requirements are applicable for all the files irrespective of their programming language. However, a DocBlock standard for any specific particular language might not override it.
  • Formatting is done as per the standard for PHP documents.

  ---

  The Standard for JavaScript Coding

  In this case, you need to use the ESLint rules of Magento to ensure the code written abides by the coding standards of Magento.

  The developers who are into writing JQuery and JavaScript code for Magento should abide by these rules and follow all the standards mentioned here

  When it comes to Magento, makes use of

  jQuery Library along with custom & standard jQuery widgets

  When it comes to Magento Development Coding Standard for jQuery widgets you need to check out the coding standard for jQuery.

  JSCS and Eslint Tools

  To make sure that you maintain the quality of JavaScript code, you need to use JSCS and ESLint tools

  ESLint

  It is a community-operated tool that identifies errors and possible issues in JavaScript code. The tool utilizes certain rules to apply certain coding standards.

  • Magento JSCS rules
  • Magento ESLint rules

  ---

  The Standard for JavaScript DocBlock

  If you have to include JavaScript code – inline documentation, then follow the guidelines.

  You may find some sections of the guidelines do not abide by the standard, but it is under improvisation.

  When the 3rd party Magento developers follow these standards, they can create transparent inline documents that are easy to read too.

  Make use of JSDoc

  Inline comments need to be of the following type “//”

  You are suggested not to include broken sentences in documentation blocks. You should use capitalization (sentence style) and insert a period right at the end.

  When it comes to sentence fragmentation, it is allowed in inline commentaries to keep them short.

  ---

  Coding Standard for jQuery Widget

  In Magento, the jQuery UI widgets & interactions are created on a reusable and simple base – jQuery UI Widget Factory.

  This factory offers a convenient base for creating complex plug-ins and also flexible API.

  The factory is engineered not just for creating plug-ins but also, they belong to jQuery. But, developers (using it for general purposes) wanting to create object-oriented components can use it without working on a common infrastructure.

  Here, this standard is compulsory for all the Magento core developers and is also recommended for 3rd party extension developers.

  Again, some sections of the Magento code may not abide by this standard but it is under improvisation.

  ---

  Less Coding Standard

  When elaborating on this standard, it can illustrate the internal Magento requirements for code styling, and code formatting for the developers’ team that creates CSS and Less code.

  Also, some sections of this Magento code may not abide by the standards of the code but it is still under improvisation. The improved outcome would happen gradually.

  Again, this particular coding standard is optional for 3rd party Magento developers.

  Standard Rules

  About Indentation

  Only spaces to be used for indentation-

  • Indent size – four spaces
  • Tab size- four spaces
  • Continuation indent- four spaces

  ---

  Style Guide for HTML

  This guide is about Magento’s internal requirements, particularly for HTML code style for those teams that are involved in the development of CSS and Less code.

  The developers who build Magento extensions & customizations are recommended to make use of these standards.

  This guide is about Google HTML/CSS style guide including some modifications

  Indentations

  Spaces that should be used for indentation-

  • • Continuation indent – four spaces
    • Tab size – four spaces
    • Indent size- four spaces

  The above coding standards should be followed by every professional and beginner in Magento development to get clean and transparent code.