Edit and Minify APEX Static Javascript and CSS files directly in APEX

The Problem

The APEX builder has improved so much since the release of APEX 5.0. As developers our productivity has increased by orders of magnitude, but for one area  i.e. editing Javascript & CSS files stored under static application files or within the definition of plugins, we have had to rely on external tools, like Sublime or Visual Studio Code. To workaround the pain of deleting and re-uploading of files and minifying them, you might be using APEX Nitro (and Node JS).

These tools combined offer a good workflow, but also depend on having these tools installed on your laptop. Sometimes you might not be on your laptop and need to make a change to a file, or sometimes you company might not allow Node JS to be installed on your laptop, or installing/using APEX Nitro might just be one step too far for you. When this is the case, making changes to these files is quite an arduous task.

The Solution

Since we’re a company that focuses on improving end user productivity through good design, we decided to solve this issue. How you might ask, since this is the APEX builder and we have no control? Well, you actually have more control than you think, thanks to modern browser extensions! We’re introducing a new one for the APEX community that its sole purpose is for APEX Builder improvements for regular APEX applications. It’s called the “APEX Builder Extension by FOS”. If you’re wondering who/what FOS is, well it’s simply an acronym for “FOEX Open Source”.

The extension combines the Visual Studio Code Editor with Javascript and CSS minification, Less compilation with the ability to edit and create new static application or workspace files and plugin files using the existing APEX Builder screens. It has zero dependencies on external resources, apart from the extension itself of course!

Overview

Installation

It’s free to use and open-source, no strings attached! Simply click on the button below to add to your browser. You can also find the project on Github if you want to take a look behind the scenes.

Add to Chrome
Add to Firefox

Dark Mode

Light Mode

 

Features

Create and edit static application, workspace and plug-in files

Once you’ve installed the extension, on each of these 3 pages you will find a new region, called “Edit Files.” Either choose a file from the dropdown list to open it, or click the “Add File” button to create a new one. You can then edit your file, and click the save icon to save it. No page submit required.

Enjoying editing one file? Try editing 2 files. Although… why stop there?

You can open as many files as you want. What’s more, you can drag and drop a tab to enter split screen mode. Although the most common use case will probably be having a JavaScript file on one side and a CSS file on the other, you can arrange the panels any way you want. Also note that the gutters between panels are actually splitters. So you can resize them as well. Check out this demo for an idea of the behaviour….

Fullscreen mode and keyboard shortcuts

The extension attempts to provide as good of a programming experience as possible, so in order to feel more like editing in a conventional editor, you can enter fullscreen mode. You now have a better, more focused view, and can’t accidentally scroll beyond the editor. Want to exit fullscreen mode? Hit Escape. Another handy shortcut is crtl-s on Windows, or cmd-s on Mac. While having the focus in an editor, hit this shortcut just like you would on a desktop editor, and your changes will be saved.

The editor

As you might have noticed, this extension doesn’t use the Code Mirror editor, like the rest of the APEX Builder. It instead uses Monaco, the same editor as the one behind Visual Studio Code (VS Code). Were you aware that VS Code was written in Javascript and HTML5? Amazing huh, and since it is, we can also use it within APEX! By using Monaco, it means that it comes packed with many of the same great features that VS Code has to offer, such as descriptive error and warning messages, autocomplete, intelli-sense, and much much more.

JavaScript file minification and Less file compilation

The extension also introduces the ability to minify JavaScript files. Just click the “Minify” icon, and your file will be saved and minified. You should then see a .min.js version of your file appear in the select list and in the files report.

There’s also functionality for compiling Less files. This is already possible via the Theme Roller, but we’re bringing this functionality to the static files as well. Just click the “Run” icon and your file will be compiled. You should then see a .css version of your file appear in the select list. In the future we’re looking to include SASS compilation too.

How did we get this to work?

In short, we fetch the file contents by leveraging the already present file download links on the page, and behind the scenes open and submit the Upload File(s) page to save the newly updated content. There’s nothing additional that we do code wise to save the files on the backend, it’s all handled by the APEX engine. It’s really fast too, so you probably won’t even notice it, since we’re doing this without submitting/reloading the page i.e. Single Page Design style, which is how we’ve been designing and building the majority of our APEX applications for years. We know APEX inside and out!

Roadmap, technical details, and more

There’s a number of things we’re looking at doing, you can see the Github page for more details. You can log your own feature requests and report any bugs/issues there too. Stefan Dobre is the lead developer on this project and really passionate about APEX & super talented! You can follow him on twitter and read his APEX ramblings on his blog. We’ve got him working on quite a few interesting things that you might find very helpful in the near future, so keep an eye out for his tweets and posts.

We hope you find this extension useful and are looking forward to your feedback.
#LetsWreckThisTogether

Add your comment

Your email address will not be published. Required fields are marked *