Operation Frontend Steward

Update [2014-02-16] — Many (but not all) of the artifacts produced for Operation Frontend Steward have been migrated into this repo. We are working directly with Magento 2's product teams to ensure these concerns are addressed within the product. We are preparing a survey for partners and independent developers to provide feedback to Magento on each issue. Please read through the articles and we'll let you know when the survey is ready.

---

Operation Frontend Steward is a four-pronged offense to improve Magento 2's frontend

1. Define strategic overarching principles Magento 2's frontend needs to uphold (think "10 commandments").
2. Create public documentation of frontend patterns used in Magento 2.
3. Refactor outdated, ignored, and abused frontend code with standardized, lean, extensible, and future-friendly code.
4. Propose frontend architectural changes outside the Hackaton's scope to modernize Magento 2.

---

Table of Contents

Project Charter — The Origin Story

1. Why it matters
2. Proposed schedule of events
3. This project's audience
4. Out of scope
5. Project info

Principles — Overarching Frontend Goals

1. The perfect CMS does not constrain or coerce its frontend output
2. The core frontend package cannot be Magento's demo
3. Invest in Magento's frontend patterns. Stay lean and framework agnostic
4. Treat frontend performance as the bottleneck it is compared to backend performance
5. Use tools to evaluate and test frontend code quality
6. Decouple HTML, CSS and JS from PHP classes
7. Decouple visual (CSS) layer from the functional (JavaScript) layer
8. Decouple functional (JavaScript) layer from the markup (HTML)

Pivots — Major Technical Shifts Needed in Magento 2

1. Mobile First — Adopt a mobile-first methodology across the design system.
2. Atomic Templates — Write templates atomically to contain the smallest possible output.
3. DRY Principles — Embrace DRY (Don't Repeat Yourself) principles consistently.
4. Checkout UX — Use (Woven Checkout) not (Accordion + Sidebar) for OnePageCheckout.
5. CSS Architecture — Write HTML classes for (OO-CSS) not (chained-classes CSS).
6. CSS Pre-Processors — Use (Sass + Compass) not (LESS) for CSS pre-processing.
7. JavaScript Architecture Use (RequireJS) or (Browserify) not (HeadJS) for JS loading architecture.
8. Responsive Images — Use (PictureFill) and plan for the technology to change.
9. Retina Icons — Use (SVG Sprites + PNG Fallback) or (Retina PNG Sprites) not (Icon Fonts) for icons.
10. Comments — Write comments in code, and sign comments as Magento.

Issues — Specific Code-Level Problems in Magento 2

See: https://docs.google.com/spreadsheet/ccc?key=0AgkHIW0ExJHqdGFydXNoQnNFR010MUx3V3V1S1dIbmc

Patterns — Extensible UI Components and Markup States

Code Style — Writing Consistent, Readable Frontend Code

---

Contributors

This resource was entirely community-driven, and was created during (and after) the January 2014 Magento Hackathon: http://www.mage-hackathon.de/passed/online-hackathon-worldwide-31st-jan-1st-feb.html

• David Alger @ http://www.classyllama.com
• Kris Brown @ http://www.briteskies.com
• Brendan Falkowski @ http://gravitydept.com (Project Lead)
• Erik Hansen @ http://www.classyllama.com
• Tom Robertshaw @ https://www.meanbee.com
• Kimberely Thomas @ http://www.redlightblinking.com