{"id":3889,"date":"2023-10-31T08:20:07","date_gmt":"2023-10-31T13:20:07","guid":{"rendered":"https:\/\/fgiasson.com\/blog\/?p=3889"},"modified":"2023-10-31T08:30:31","modified_gmt":"2023-10-31T13:30:31","slug":"orgweb-cli-org-mode-environment-for-web-like-development-without-emacs","status":"publish","type":"post","link":"https:\/\/fgiasson.com\/blog\/index.php\/2023\/10\/31\/orgweb-cli-org-mode-environment-for-web-like-development-without-emacs\/","title":{"rendered":"OrgWeb: CLI Org-Mode Environment for WEB like development without Emacs"},"content":{"rendered":"\n

There is a wide range of tools and framework currently available for doing literate programming<\/a> development. You have the ancestors like CWEB<\/a>, NOWEB<\/a> and nuweb<\/a>. You have full editors like Leo<\/a>. And then you have more modern approaches like nbdev<\/a>, PyWebTool<\/a> and FSharp.Formatting<\/a>. <\/p>\n

However, most of them are specific to a programming language. Some of them are general like NOWEB, but they are lacking some kind of integrations in modern IDE environments.<\/p>\n

For the last 8 years, I always fallback to the same: Org-Mode.<\/p>\n\n\n\n

Org-mode<\/h2>\n\n\n\n

Org-mode is many things, but its most interesting feature has always been its code blocks to me. Org’s syntax is clean and powerful. Org is not specific to a particular programming languages: it supports tens of programming languages or other kind of configuration\/scripting languages. Code blocks can be executed, tangled or weaved. <\/p>\n

Its drawback: the best (and frankly only) Org-mode implementation is in Emacs. Some, myself included, will say it is great because we love working with Emacs, and are happily willing to pay the cost. But we are not the norm, but the exception. Emacs is wonderfully different and it doesn’t appeal to all developers. I can understand that in today’s industry where the only incentive is to ship, ship, ship features.<\/p>\n

But, how could we get the best of Org-mode without having to force people to use Emacs? One possibility could be to develop Org-mode plugins for other IDEs, the first on the list would most likely be VS Code. But this is not a small undertaking.<\/p>\n\n\n\n

Org-mode CLI<\/h2>\n\n\n\n

There are some modules existing in other IDEs that support org-mode like on Vim<\/a>, VS Code<\/a>, etc. But those are mostly syntax highlighter, or implement some features mostly related to org-agenda and headings manipulation. It is a good start, but far from enough for a literate programming framework.<\/p>\n

The goal of OrgWeb<\/a> is to develop a simple tool that any developer could use to leverage the full power of doing literate programming using Org-mode and their preferred IDE. <\/p>\n\n\n\n

OrgWeb<\/h2>\n\n\n\n

OrgWeb<\/a> is a simple CLI tool that can be installed using this command:<\/p>\n\n\n\n

pip install orgweb<\/code><\/pre><\/div>\n\n\n\n
The tool only has four commands:<\/p>\n
    \n
  1. tangle<\/code>: extract code from code blocks into their source files<\/li>\n
  2. detangle<\/code>: sync source files back to their original Org-mode code blocks<\/li>\n
  3. execute<\/code>: execute code blocks such that they produce their side effects<\/li>\n
  4. monitor<\/code>: monitor local file system to tangle\/detangle files automatically<\/li>\n<\/ol>\n
    The tangle, detangle and execute commands can be performed on a folder (recursively) or one or multiple specific files.<\/p>\n
    Note: I am not covering all the details of how we can use Org mode to do literate programming. You can search my blog which has plenty of posts about that, but also refer to the Org-mode documentation to read about all and every features available to you<\/a>.<\/p>\n
    In addition to the orgweb CLI<\/code>, you will need Docker available in your environment. If it is not already installed, you can follow those instructions to install it on your system<\/a>. <\/p>\n\n\n\n
    VS Code + Org-mode<\/h3>\n\n\n\n
    For this blog post, I will cover how Org-mode can be used in conjunction with VS Code to develop an application using literate programming. To start, you can simply clone OrgWeb’s repository, install this Org-mode module<\/a> in VS Code. The general development layout is:<\/p>\n
    \"\"<\/a><\/p>\n
    In the bottom window, this is where we have the terminal instances. This is where OrgWeb commands happens. In the main edit window, this is where the Org files, or the tangled source files will be manipulated.<\/p>\n
    You can notice that the Org-mode VS code module does some basic syntax highlighting, even within the code blocks using Python’s syntax highlighter. This is far than enough to easily understand and follow the Org files.<\/p>\n\n\n\n
    Tangling<\/h3>\n\n\n\n
    Tangling is the action of extracting code blocks from a literate file into its executable source code file.<\/p>\n
    \"\"<\/a><\/p>\n
    Once ready to tangle the Org file, this command will tangle that specific file:<\/p>\n\n\n\n
    orgweb tangle . --file main.org<\/code><\/pre><\/div>\n\n\n\n
    It asks OrgWeb to tangle the current directory .<\/code> but to only tangle the main.org<\/code> file. It will find all the Org files recursively, and tangle only the ones specified. If no files are specified, it will tangle all the Org files it finds. Then the main.py<\/code> file will be generated from all the code blocks from main.org<\/code>.<\/p>\n\n\n\n
    Detangling<\/h3>\n\n\n\n
    Developers will often end-up working on the source files that have been generated from Org files. There are all kind of reasons for that, such as modifying a source file while debugging an application. When this happens, the literate Org files and the source files get desynchronized. Changes could be copy\/paste to the Org files, but there is a much easier way to do it: detangling<\/code>.<\/p>\n
    Detangling synchronize back any tangled code blocks from source files to their original Org file:<\/p>\n
    \"\"<\/a><\/p>\n\n\n\n
    orgweb detangle . --file main.py<\/code><\/pre><\/div>\n\n\n\n
    It asks OrgWeb to detangle the current directory .<\/code> but to only detangle the main.py<\/code> file. It will find all the Org files recursively, and tangle only the ones specified. Then the main.org<\/code> file will be generated from all the code blocks from main.py<\/code>.<\/p>\n\n\n\n
    Executing<\/h3>\n\n\n\n
    The execute<\/code> command is like the tangling command but instead of moving code in source files, it does execute the code blocks that needs to be executed. Code blocks that get executed produces side effects. It is those side effects that we want to force with the execute<\/code> command.<\/p>\n
    One example are the PlantUML code blocks in the README.org file<\/a>. When we execute them, the schema images will be generated.<\/p>\n\n\n\n
    Monitoring<\/h3>\n\n\n\n
    This is all good, but it is still inconvenient to have to run commands in the terminal every time you want to tangle or detangle some files.<\/p>\n
    This is why there exists the monitor<\/code> command:<\/p>\n
    \"\"<\/a><\/p>\n
    The orgweb monitor .<\/code> command will keep monitoring the specified folder. Every file that changes within that folder (recursively) will potentially be tangled<\/code> or detangled<\/code> by the running orgweb instance. If a .orgwebignore<\/code> file exists in the target folder, then everything within that file will be ignores by the monitoring process.<\/p>\n
    In the envisioned development workflow, developers will simply run the monitoring in background such that every Org and source files automatically gets tangled and detangled every time they are saved. That way, developers will be sure that both files are always in sync.<\/p>\n\n\n\n
    How does it work?<\/h2>\n\n\n\n
    As we know, orgweb<\/code> is designed in a way that developers can use all the power of Org-mode, in any IDE they like, without having to rely on Emacs directly.<\/p>\n
    To do that, it leverages Docker to build an image where Emacs is properly installed and configured to implement the commands that are exposed via the command line tool.<\/p>\n
    If the orgweb<\/code> docker image is not currently existing in the environment, then it will request Docker to build the image using the Dockerfile<\/code>. The build process will install and configure all the components required to implement all orgweb<\/code> commands.<\/p>\n
    orgweb<\/code> check if it exists every time it is invoked from the command line. This process will happen any time that the image is not available in the environment.<\/p>\n
    \"\"<\/a><\/p>\n
    If the image is existing in the environment, then the following will happen.<\/p>\n
    orgweb<\/code> will ask Docker to create a container based on the image. Once the container is running, it will execute a command on the container\u2019s terminal to run Emacs. Emacs is used directly from the command line by evaluating ELisp code it gets as input.<\/p>\n
    Every time a orgweb<\/code> command line is executed, a new container is created and when the commands finishes, the container gets deleted:<\/p>\n
    \"\"<\/a><\/p>\n\n\n\n
    Other possible avenues<\/h2>\n\n\n\n
    OrgWeb works fine, but it won’t ever be as interesting as a proper IDE integration, like what is available in Emacs. Another interesting option worth investigating would be to use Emacs as a Org-mode backend of a LSP server. That way, IDE modules developers could more easily develop fully fledged Org-mode modules for specific IDE integration. That way, we could “easily” get the full Org-mode power within any IDE, being able to not only leverage code blocks but org-agenda<\/code>, org-roam<\/code>, tagging<\/code>, date time<\/code>, org-capture<\/code>, etc.<\/p>\n","protected":false},"excerpt":{"rendered":"
    OrgWeb is a command line tool that enables any developers to leverage Org-mode to do literate programming using their preferred IDE environment.<\/p>\n
    In this blog post, we will explore how it works and the development workflow it enables.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[277,66],"tags":[274,323,324],"class_list":["post-3889","post","type-post","status-publish","format-standard","hentry","category-literate-programming","category-programming","tag-literateprogramming","tag-org-mode","tag-vscode"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/fgiasson.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3889","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fgiasson.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fgiasson.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fgiasson.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/fgiasson.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=3889"}],"version-history":[{"count":30,"href":"https:\/\/fgiasson.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3889\/revisions"}],"predecessor-version":[{"id":3926,"href":"https:\/\/fgiasson.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3889\/revisions\/3926"}],"wp:attachment":[{"href":"https:\/\/fgiasson.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=3889"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fgiasson.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=3889"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fgiasson.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=3889"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}