Front-end Ops @ PMC
- Lack of consistency of architecture/organization of front-end code across brands, especially regarding:
- JS lint configs
- CSS architecture
- Naming and availability of mixins/Sass utils
- Slow build times and webpack config black-box
- Slow to impossible front-end debugging and testing due to lack of local data and database configuration
- Checking in compiled files is time consuming
- Redundancy in front-end code, and unclear where to find references of existing patterns w/out tedious “Find in Folder” adventures
- Documentation is not part of the workflow
- Onboarding is difficult
- United build step – pmc-scripts npm package
- npm run prod – ideally run in pipeline
- npm run dev – simple webpack config for JS, and node-sass via npm scripts for CSS
- npm run kss – build a static style guide and run a local server for front-end dev
- Overall separation of front-end and back-end in development via living pattern libraries
- HTML and CSS dev. happen in a static style guide – agencies already did this in RS and HL, but they haven’t been maintained
- HTML in Twig partials, output can be tested against corresponding PHP templates
- Local data available via JSON or WP-API requests
- Patterns adopted into a PMC Core pattern library as needed
- Can develop and QA front-end in parallel with back-end
- Business advantages – clearer communications and limitations when working with stakeholders.
- ITCSS architecture and refactoring via a design “refresh” – IW, for example.
- pmc-COMPONENT-assets – npm packages to track front-end assets of PMC Core Tech. These can be compiled in the build step of each theme, and the theme contains overrides and customization.
- pmc-scss-utils – SCSS mixins and utilities, no styles output. Essentially a PMC-specific Compass that contains mixins for breakpoints, utilities like SVG background images and encoding, etc. Can be tested with and documented with or KSS.
(still fleshing these out ↓ )
- Build out pmc-scripts:
- Audit dependencies across brands
- Simple webpack config for JS
- node-sass via npm scripts
- Autoprefixer for prod task
- KSS styleguide that can be generated and built upon over time
- Test scripts on different machines
- Prototype testing Twig output against PHP output
- Education around ITCSS architecture and CSS in general (pair programming, esp.)
Adopting a mindset of front-end tasks as separate from back-end tasks
Set up infrastructure for collecting re-usable code.
- Audit PMC Core components
- pmc-scss-utils – PMC's Compass