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 a working version of Node (tested with
v10.17.0) and NPM to get started.
We won’t cover that here, as it varies from platform to platform.
To install these tools and dependencies:
Next, install front end dependencies:
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 test changes while developing, which will watch source files for changes and compile as necessary, you can run Gulp with our development target:
npm run dev
Once you are satisfied with your changes, finalize the bundles (this will minify library sources):
npm run build
If you updated any of our vendor libraries, compile those:
npm run vendor
Make sure to check in both files under
We run Gulp through an
npm script in order to ensure
that the correct version from
package.json is used.
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.