Learning Magento Coding Standard in Detail

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 visual (CSS) layer from the specific functional (JavaScript) layer.
  • – Dissociate 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 merge 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 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 a 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 eliminate 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 the 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 into the DOM structure, you need to utilize jQuery templates

      • – Restores focus on jQuery templates.
      • – Cuts down the maintenance efforts need to 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 the tag) 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 of 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 requirements of Magento along with protocols for including inline code documentation, termed as – DocBlocks.

        Coming to some sections of Magento code, they 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 the 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 document.

        The Standard for JavaScript Coding

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

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

        When it comes to Magento, it makes use of

        jQuery Library along with custom & standard jQuery widgets

        When it comes to Magento Development Coding Standard for jQuery widget 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 that – 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, if developers (using for general purpose) 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, code formatting for 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 a clean and transparent code.