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
Solutions
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 True and documented with SassDoc or KSS.
(still fleshing these out ↓ )
Phase 1
Build out pmc-scripts:
Audit dependencies across brands
Simple webpack config for JS
Linting
Sourcemaps
Babel
node-sass via npm scripts
Sourcemaps
Linting
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
Phase 2
Set up infrastructure for collecting re-usable code.
Problems
Solutions
Phase 1
Adopting a mindset of front-end tasks as separate from back-end tasksPhase 2