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.
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.
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.
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.
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.
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.
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.
See You Might Not Need Underscore for ES2015 equivalents of most Underscore functionality.