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/