front end walk through notes
-
frontend.sh setup script running locally to build front end
-
scripts.js - builds bundles including modernizr, es-5.shim in global header
-
base.html: base HTML template
-webpack to bundle stuff. webpack-config.js.
- common_bundle used on all pages
- wagtail pages bundle
- logic determines which bundle appears where inside base.html
- sheer.js = components for sheer pages
Front End Components:
- wagtail components like organisms/expandable.html are saved as a template
- associated script for expandable.js loads required dependencies
- using vanilla JS as much as possible
- checkDom function: looks for element on html page. if it isn't there then error is thrown.
- most JS is at the organism level
Protractor for JS browser tests
- about-deputy-director.js is a good example
Atomic Design
- atom, molecule, organism, template, page
- http://bradfrost.com/blog/post/atomic-web-design/