Categories: Software Development

Perfect demonstration of the necessity of metaprogramming

An employee at SoundCloud has a guide on writing React.js and Redux. The current SoundCloud app is written in Angular.js 1.x and they have their own flux-like library. The guide is a guide on how to build a SoundCloud client web app using React.js and Redux. It’s a perfect demonstration of why metaprogramming is necessary for larger projects and in particular for the JavaScript ecosystem.

Instead of writing a new app from scratch, this guide could have been a guide on specifying the SoundCloud client app in a meta-description language. Then using that meta-description language to generate all of the React.js and Redux code that is needed.

Unfortunately, this guide is plain programming with no metaprogramming at all.

At this point in the game, a SoundCloud client has to have basic functionality and make certain API requests. Instead of writing at a low-level in particular web frameworks or libraries, it should be possible to generate the basics of a client from a description. Something like an XML interface file.

I hope to be publishing a metaprogramming description language of my own soon, so this guide is very timely and shows why metaprogramming is needed.

Update: 17 November 2018

I ended up not publishing the metaprogramming language description but I will explain what it was here. It was a language for building form validation.

Forms have input fields and each field and set of fields can be validated in a certain way. When there is an error on the field or the form, an error message should be displayed. When every field is valid, the form should be submitted or undergo some further processing.

The idea was to port the forms from the Ember.js JavaScript framework to React.js. Instead of rewriting the code for each specific form, we would write the form as a set of fields and validations in a more abstract language.

One example of a form could look like this:

login_form:
  fields:
    - username: text required
    - password: required
  on_submit: '/login'

signup_form:
  fields:
    - username: text required
    - password: required
    - confirm_password: same as password
  on_submit: '/signup'

Then this meta language could be read, like a configuration file, and then generate the appropriate React.js (or Angular) code. Instead of painstakingly trying to convert each form, it would be easier to write out a higher-level configuration and generate new JavaScript code that implements it.

The idea here is that to support future JavaScript frameworks (or newer versions of the same framework), it would be possible to just re-generate the code from the configuration/meta-description language.

We need more of this in the JavaScript world, and for backend development as well. It can be a huge source of technical debt to have code that is tied and coupled to a particular framework, especially to a particular version of a framework.

Rudolf Olah is a software development expert with over 8 years of professional software developer experience. He has produced the video courses "Reactive Programming in Python with RxPy, PyQt5 and Tornado" and "Learning AngularJS Testing" for PacktPublishing. Rudolf offers web development training courses for individual developers and for web development teams. He writes about tech leadership, career coaching and project management.