Front End Development¶
Our modern front end development stack includes the following tools:
We use the following libraries:
The requirements for modernizing our front end code are:
Reduce code duplication.
You will need to follow our guide to install a development Read the Docs instance first.
The sources for our bundles are found in the per-application path
static-src, which has the same directory structure as
static. Files in
static-src are compiled to
static for static file collection in Django.
Don’t edit files in
static directly, unless you are sure there isn’t a
source file that will compile over your changes.
To compile your changes and make them available in the application you need to run:
Once you are happy with your changes,
make sure to check in both files under
and commit those.
If you are creating a new library, or a new library entry point, make sure to
define the application source file in
gulpfile.js, this is not handled
automatically right now.
If you are bringing in a new vendor library, make sure to define the bundles you
are going to create in
gulpfile.js as well.
Tests should be included per-application, in a path called
tests, under the
static-src/js path you are working in. Currently, we still need a test
runner that accumulates these files.
There are several components to our bundling scheme:
- Vendor library
We repackage these using Browserify, Bower, and Debowerify to make these libraries available by a
requireand will back down to finding the object on the global
Vendor libraries should only include libraries we are commonly reusing. This currently includes
Knockout. These modules will be excluded from libraries by special includes in our
- Minor third party libraries
These libraries are maybe used in one or two locations. They are installed via Bower and included in the output library file. Because we aren’t reusing them commonly, they don’t require a separate bundle or separate include. Examples here would include jQuery plugins used on one off forms, such as jQuery Payments.
- Our libraries
These libraries are bundled up excluding vendor libraries ignored by rules in our
gulpfile.js. These files should be organized by function and can be split up into multiple files per application.
Entry points to libraries must be defined in
gulpfile.jsfor now. We don’t have a defined directory structure that would make it easy to imply the entry point to an application library.