JSFoo 2016

Tackling speed and performance for JavaScript

Supreet Pal Singh


How to build your own JavaScript compiler

Submitted Aug 20, 2016

With the popularity of the latest ECMAScript standard and before that CoffeeSript, JS compilers are everywhere. JS projects are now using them in one way or another, most for source to source compiling, many for code coverage etc. Babel being the most popular compiler. Apart from its native features, it also allows us to extend the language by developing custom Babel plugins. We will discuss the development of custom Babel plugins. However in this talk, we will go a step further and learn about Abstract Syntax Tree. Use that knowledge to put together our own compiler. This compiler will allow us to transform or compile JS to anything. The project will be a super tiny compiler. It will be easily extensible and opensource. By the end of the talk, an attendee should be able to use it as a boilerplate and build their own version.


  • Introduction.
  • Brief discussion around Babel Plugins.
  • What is an Abstract Syntax Tree?
  • How to consume an AST from a JavaScript parser.
  • What is the setup required to build your own compiler?
  • Bringing together a super tiny compiler.
  • Code overview and demo.
  • How to acquire and extend the demo compiler.

Speaker bio

I am a developer who loves working with JavaScript. My current full-time work is with Fybr (fybr-tech.com) as an Applications Engineer. The role consists of setting up JS build systems, maintaining repositories and developing JS applications.
I have been contributing to open source communities since 2010 (KDE and X.Org being the main ones). I am one of the authors of the official KDE Developer’s Guide book (https://flossmanuals.net/kde-guide/).
PULUG (https://groups.google.com/forum/#!forum/pulug) is an open student developers’ community which I helped establish and now also hosts the annual SFD in Chandigarh where I mostly speak. (http://softwarefreedomday.in/)


{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

JSFoo is a forum for discussing UI engineering; fullstack development; web applications engineering, performance, security and design; accessibility; and latest developments in #JavaScript. Follow JSFoo on Twitter more