Front-End Standards of Practice

front-end_standards-of-practice.md

Front-End Processes, Workflows and Standards

1. Definition: The front-end consists of any code that is run on the client (browser): HTML, CSS and JavaScript.
2. Agnostic and independent front-end code is priority. Front-end code should not represent server/back-end architecture.
3. Modularity and encapsulation is vital to increase reusability and following the DRY philosophy.
4. The MVC philosophy (when developing web-applications) should be closely followed, but exact replication may be unnecessary. The structure goes as follows:
   • Model: Models do not technically exist in the client (unless using client-sided storage (localStorage, et cetera), but act more as temporary data stores between getting and setting data with the server. So, this temporary data store will be considered and called a Service. Data should always exist as native JSON either as objects or arrays.
   • View: Views should be pure HTML containing virtually no logic. Element attributes (data-, classes, ids, ng-model, et cetera) are to be used to hook the View to the Controller. Views should never contain inline styles or inline JavaScript. HTML should be kept as semantic as possible with the fewest elements possible to structure the data.
   • Controllers: Controllers are the glue that ties the "model" to the View. They should contain as little logic as possible, be as small, sensible and clear in purpose.
   • Services: Services contain the code that manages the data between the View and the server and contain the majority of all the logic.
   • Directives: Directives are the modularized widgets that contain reusable HTML snippets, DOM manipulation, input validation and other small intimately related logic that relates to that widget.
5. Web Application Development & Scope: In a web application environment, any code that is unique to the application should live (read encapsulate) within AngularJS (JS app framework, see below), so should be contained within a Service, Directive or Controller. Code that lives outside of AngularJS "scope" should be project agnostic and UI & Ix framework related.
6. Validation & Linting: All HTML should pass HTML5 validation, all CSS should pass CSSLint, all JavaScript should pass JSLint (at its default setting). Linting and validation should be done live within your chosen editor or IDE.
7. JS Strict Mode: All JavaScript will be written in strict mode ('use strict';). See It's Time to Start Using Strict Mode
8. Style & Conventions: All HTML, CSS and JavaScript will follow the style and conventions guide located here: Cerebral Coding & Conventions Guide.
9. Unit Testing: All JavaScript will be unit tested with Jasmine and testing framework will be Testacular. JS with DOM manipulation will most likely be tested with QUnit.
10. AJAX & JSON: If AJAX is implemented (which it will most likely be used), only JSON should be sent to and from the server, HTML partials are not allowed.
11. Preprocessors: Compass and Sass (SCSS) will be embraced as the CSS preprocessor of choice. HTML preprocessors have not been chosen yet, but Jade will most likely be chosen. CoffeeScript will not be used.
12. Compilers & Builders: Node.js with Grunt.js will be used for compiling (SCSS to CSS, MD to HTML), linting and testing JavaScript and building (concatenating, minifying, uglifying). This adheres to front-end and back-end separation.
13. jQuery & jQuery plugins: jQuery is not to be used unless DOM manipulation is necessary and the intention; jQuery code needs to be contained within a Directive. jQuery is not to be contained within a Service or Controller (and of course not in the View, but you already knew that ;). jQuery plugins should not be used unless absolutely necessary as it creates an additional dependency and code bloat.
14. Animations should be done with CSS3 and not jQuery or JavaScript.
15. The UI & Ix framework to be embraced is a customized version of Zurb's Foundation v3 with a more modular structure, widget'ized elements and lighter code base. This forked and customized version will be called Phi.
16. The application framework to be embraced is AngularJS and should use and follow the starter structure that exists with Phi. Again, all project specific code should live within the Angular "scope".
17. Feature detection & conditional, asynchronous script loading will be done with Modernizr. Again, front-end files should be agnostic and independent from back-end, server-side code.
18. No Browser Sniffing!