9.2. Front End Technologies

The rapid pace of development in front end tooling has created opportunities to greatly improve the quality of the Open edX user and developer experience. After an assessment of industry best practices, the edX Front End Working Group (FedX) has recommended the following technologies.

You can read more about the rationale behind these decisions in OEP-11: Front End Technology Standards. The Open edX wiki also has a full list of Open edX front end technologies.

9.2.1. Server-side content should be rendered with Django Templates

There are many template languages available for Django, but the simplest option is to use the built-in Django Templates. The Open edX codebase has a mixture of Django and Mako templates, but the former are easier to reason about because they don’t support arbitrary code evaluation.

Note: Mako templates can continue to be used within edx-platform for consistency with the existing code base. This is because the base templates and theming support are all provided via Mako, so it is too much to expect a new feature to be implemented with a different framework. There is much desire to replace Mako within edx-platform so this exception may eventually be removed.

9.2.2. JavaScript libraries should be installed via npm

It is important that JavaScript libraries are kept up-to-date, and one key component is to make it as simple as possible to perform upgrades. Projects that use npm maintain all of their library requirements in a single package.json file, which can be easily changed as the versions change.

9.2.3. Use React and Redux when building new client-side applications

React should be used for building new UIs, as it is widely adopted by the community and strikes a balance between flexibility and feature richness. For state management of complex client-side interactions, Redux should be used. This library was chosen because it sees strong use in the React community, but is also flexible enough to be used in situations where a hybrid React/Backbone architecture exists.

Note: When building new applications within edx-platform, it is currently acceptable to use Backbone. Backbone is a somewhat old technology in the JavaScript world and has seen a rapid drop off in usage within the community. The plan is to incrementally adopt React within edx-platform as it can interoperate cleanly with Backbone.

9.2.4. JavaScript should be bundled using Webpack

Webpack is the tool of choice for code optimization and bundling, as it is widely used throughout the industry, and because it seamlessly handles modern code bases as well as all of the older technologies used by edX, such as AMD Modules. Webpack should be implemented to handle as much of the asset pipeline as possible, rather than passing this responsibility on to Django.

9.2.5. JavaScript dependencies should be managed with ES2015 Modules

JavaScript module systems allow front end code to specify its dependencies and be grouped into bundles that minimize the assets needed to provide page functionality. The most prevalent module syntax is currently ES2015 Modules, which should be adopted everywhere edX code is written to the ES2015 spec or later.

Note: Much of edX’s existing (ES5) JavaScript uses the older AMD Modules syntax for modules. AMD Modules are interoperable with ES2015 Modules if Webpack is used for bundling, so AMD is an acceptable module definition if the code must remain ES5.

9.2.6. CSS should be generated using Sass

Sass’s SCSS syntax is an extension of CSS that adds power and elegance to the basic language. It makes the maintenance of large CSS files more manageable though the ability to use variables, mixins, imports and more. In particular, it makes theming possible with the ability to override variables that define colors, fonts etc.

You can find out more about Sass in the official Sass documentation. For more information about writing Sass for edX UIs, see EdX Sass Style Guide.

9.2.7. Legacy Technologies

9.2.7.1. Backbone

Backbone was an early JavaScript framework that provided a formal model/view/controller paradigm. It is used pervasively in the Open edX code base, but in 2017 React was chosen as the recommended framework.

9.2.7.2. CoffeeScript

The Open edX codebase made heavy use of CoffeeScript for several years, but its use at edX has now been officially deprecated. Most of the language benefits of CoffeeScript were made available in JavaScript as of the ES2015 spec, and CoffeeScript’s community has largely moved on.

For more information about writing JavaScript for edX applications, see EdX JavaScript Style Guide.

9.2.7.3. edX Pattern Library

The edX Pattern Library is an initiative that was started in 2015 to modernize the way that edX applications were built. Versions 3 and earlier of Bootstrap provided a distinct, opinionated look and feel which was widespread across the web at the time and determined unsuitable for edX. In addition, Bootstrap’s rules were defined using Less and so were not compatible with edX’s Sass-based styles. Finally, all sizing was done using pixels which was not compatible with responsive typography.

The pattern library project was somewhat successful, and a number of edX pages were built using it. However, it became clear that there were not enough resources available to build a comprehensive solution, and the non-standard nature of the project meant that the community chose not to adopt it. It was at this point that the decision was made to adopt Bootstrap instead.

For more on Bootstrap, see the chapter Working with Bootstrap.

9.2.7.4. jQuery

JQuery is used pervasively in the Open edX code base, but in 2017 React was chosen as the recommended technology.

9.2.7.5. Mako

Mako Templates are used throughout edx-platform, but the recommendation is to use Django Templates now. See Server-side content should be rendered with Django Templates for more details.

9.2.7.6. Underscore

Underscore is a utility library that provides a large number of helper functions that were not provided by early versions of JavaScript. The majority of this functionality has been added to JavaScript in the ES2015 standard, so Underscore is no longer recommended.

See You Might Not Need Underscore for ES2015 equivalents of most Underscore functionality.