JSFoo: round the year submissions

JSFoo: round the year submissions

Submit talks on JavaScript and full stack engineering round the year

Rahul Kadyan


Demystifying dark art of SFC compilation

Submitted Apr 24, 2018

Vue single file components empower developers with the ability to write declarative render functions using plain HTML-like syntax. The so-called SFCs also provide features like collocation and scoped styles. We tend to use these SFCs effortlessly as any other JavaScript file but to reach that level of ease, Vue does the heavy lifting of transpilation. This talk takes a deep dive in the compilation process of Vue components and explains how to write a custom block processor. It also discovers some less known facts about SFCs.


The talk explores following steps in SFC compilation:

  • Template Parsing
  • Render Function CodeGen
  • Style Processing
  • Assemble Stage
  • Runtime Helpers

Speaker bio

I am open source enthusiast who happened to work for Myntra as a software developer. I contribute to vue ecosystem, and I am also a member of core team maintaining vue.



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

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

{{ errorMsg }}

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