At the Open edX Conference in Madrid the talk “The future of front-end development in Open edX (FedX)” by Ari Rizzitano, Senior Software Engineer at edX, outlined a new perspective on the future of front-end development in Open edX.

The future of front-end development in Open edX (FedX)

At the Open edX Conference in Madrid the talk “The future of front-end development in Open edX (FedX)” by Ari Rizzitano, Senior Software Engineer at edX, outlined a new perspective on the future of front-end development in Open edX.

Current status of front-end development in Open edX

As of today, front-end development in Open edX appears to be a very complex and at times quite daunting exercise. This is due to the fact that by growing the code base, different technologies have been adopted. As a consequence, contributing developers are often being confronted with an even more complex architecture.

The required technological stack is composed of:

  • JQuery
  • Backbone.js
  • Underscore.js
  • Coffeescript
  • Sass
  • UX Pattern Library

In addition, in order to understand how HTML is being generated on the server and how assets are managed and compiled, it is mandatory to be familiar with Django and the Mako template library.

This translates into:

  • code duplication
  • difficulties in understanding how to maintain or contribute to the code for the edX front-end team as well as for the community
  • code quality suffers 

Those aspects, together with the pain points regarding performance in the rendering stage, accessibility on mobile devices, and on slow connections, were highlighted and analyzed.

Modernization and decoupling

In order to improve user as well as developer experience, the following proposals were made:

  • achieve better loading times 
  • produce code easier to write and to maintain
  • modernize the technological stack

The adoption of ES2015 standard is just one example. Nearly every aspect of the development process has been rethought and updated to up-to-date patterns and technologies:

  • Asset management:
    Django → Webpack
  • CSS Framework:
    UX Pattern Library → Bootstrap 4 (Still in alpha version, in proposed status for Open edX)
  • JS libraries and frameworks:
    Jquery, Backbone.js, Underscore.js → React

The general direction for the Open edX architecture evolution points towards a decoupling of the various layers of the application, with the front-end layer being no exception. The goal consists of achieving the front-end as a distributed system, with the clear separation of data, logic and rendering. The adoption of React and Webpack almost completely excludes Django, effectively separating the back-end from the front-end. The usage of Web Fragments to render the parts of the client-side interface independently, like Xblocks already do in courseware, allowing for pluggable user interfaces and making this separation even clearer.
With a framework like React, also code duplication can be reduced with components that can be defined once and reused globally, since they can define their own HTML and CSS independently from the back-end, can require the data they need from standardized Web APis endpoints and can manage their own status and logic.
Furthermore, the fact that a CSS framework like Bootstrap is designed to build responsive and mobile-first applications is another aspect to be taken into consideration.
Can this be the required turning point in order to finally achieve an “out of the box” responsive edX Platform ? This perspective is definitely encouraging!

Theming

If what has already been said represents a huge step forward, the practical implications for theming would be very appealing to say the least. Using an extensible and customizable CSS framework such as Bootstrap together with React components that centralizes the definition of HTML, JS, and CSS seem to provide a complete, effective, and efficient solution for theming.
Could this be the end of Comprehensive Theming? I do not know how you would feel about it, but we wouldn’t miss it in the slightest! Of course, it would be necessary to rewrite the themes, but it will surely be worth it.

Upgrading and integration

The upgrade process will take place gradually. React integrates well with the legacy code and if that seems like a big advantage it actually represents a double-edged sword, as it reduces the incentive to re-implement chunks of the code, effectively preserving its obsolescence. Every new development will take place using React and the advice from the Open EdX front-end Team to the community is  - whenever there is the need to work on some parts of the front-end of the edX Platform - to rewrite it by adopting new patterns and technologies. In any case, the community will play a crucial role in the success of this transition. 

Teilen auf

Share |

Zu gleichen Themen

Kommentare

comments powered by Disqus