UI Development Process Optimizations

From past few weeks I did have to devel a lot on changing JavaScript files and Sass compilation I did manage to put some optimization in the process to save so I thought I will just make it into a post.

For JavaScript development in edx-platform

For Ora Block Selector I had to deeply look through BackboneJs, in order to figure out control flow. So I had to put debug points and see what information is changing where which requires to change the JavaScript file and as we all know make lms-static takes a lot of time. So I just dived into what all things are happening and I figured out I can just compile the JavaScript file and not just that I can keep a watch for change and keep compiling it. To do this:

  1. Drop in your lms-shell
  2. Run paver watch_assets

This will run webpack bundler and keep a watch on changing JavaScript file.

Right now I was doing some comprehensive theming and again for each sass change I need to make static file so the first level of reduction can be brought down by using:

python manage.py lms --settings=devstack_docker compile_sass lms

instead of make lms-static and also make sure your devstack_root/src has just one theming repo, I have noticed that this ends up compiling all the themes that are present.

I am experimenting now with

time paver compile_sass --system=lms --theme-dirs /edx/src/themes --themes kkux-theme

this takes about 2 minutes to compile all the sass files which is still a lot, but I check most of my changes on the browser before putting in the file to save some time.

Hope this helps, and if you have any doubt or there is anything this is not working feel free to leave a comment.

1 Like

Convenient one-liner to compile & serve new files:

paver compile_sass --system=lms --theme-dirs /edx/src/ --themes kkux-theme && ./manage.py lms collectstatic --noinput

Replace --theme-dirs and --themes as needed

1 Like