WhoBuilt

Introduction to Hermes Engine

Jun 8, 2021· 5 min· 3.7K views·Watch on YouTube
#Mobile Development

Speaker

Sean

Sean, representing Facebook’s Hermes team, explains how Hermes is designed to improve React Native performance in a Callstack discussion.

What Hermes is built to improve

Sean describes Hermes as a JavaScript engine built for mobile React Native apps, with some benefits that also apply to desktop. He highlights three user experience metrics: time to interactive (TTI), app binary size, and memory use.

Reported performance gains

Sean cites Facebook data showing TTI cut in half, APK size roughly cut in half, and memory use reduced by about one third to one fourth. A video comparison shows a React Native app with Hermes starting faster than one without it.

Comparisons with other engines

Asked about V8 and Chakra, Sean says Facebook had not benchmarked Hermes against them internally. He points to an Andrew from Microsoft’s Hacker News comparison, which reportedly found Hermes gains in TTI, memory, and app size even against bytecode-enabled V8 and Chakra.

Why startup can be faster

Sean attributes the gains to bytecode precompilation. Hermes compiles JavaScript source into optimized bytecode ahead of time, so the native app ships with bytecode that Hermes can execute directly.

Takeaways

  • Measure TTI, app size, and memory when evaluating a JavaScript engine for mobile.
  • Sean reports Facebook data showing roughly half the TTI and APK size, with memory use reduced by about 25 to 33 percent.
  • Precompiling JavaScript to bytecode can reduce work at app startup.
  • Treat engine comparisons as context-specific: Sean says Facebook had not benchmarked Hermes against V8 or Chakra internally.

Mentioned in this talk

MetaMicrosoftHermes AgentReact NativeJavaScriptChakraV8bytecode precompilationAndrew

Search inside this talk

What was claimed 8

  • built
    Meta built Hermes Agent
    “Hermes is a new JavaScript engine built by Facebook.”
    YouTube
    Verified3 sources· Talk
  • feature
    Hermes Agent: Designed for mobile to improve React Native app performance; benefits also transfer to desktop.
    “It's designed specifically for the mobile environment to improve the performance of React Native apps.”
    YouTube
    Unverified1 source· Talk
  • feature
    JavaScript: Current default JavaScript engine for React Native on Android.
    “the current default engine for React Native on Android”
    YouTube
    Unverified1 source· Talk
  • metric
    Hermes Agent: Memory use reduced by about one third to one fourth.
    “cut memory use by about one third to one fourth”
    YouTube
    Unverified1 source· Talk
  • metric
    Hermes Agent: APK size roughly cut in half compared with the alternative shown.
    “APK size is roughly cut in half as well”
    YouTube
    Unverified1 source· Talk
  • metric
    Hermes Agent: Time to interactive cut in half in Facebook data.
    “time to interactive is cut in half”
    YouTube
    Unverified1 source· Talk
  • uses
    Hermes Agent uses bytecode precompilation
    “the magic behind all this is what's called bytecode precompilation”
    YouTube
    Unverified1 source· Talk
  • feature
    Hermes Agent: Compiles JavaScript source to optimized bytecode ahead of time, enabling direct execution from bytecode shipped with the native app.
    “Hermes can compile your JavaScript source code to optimized bytecode ahead of time”
    YouTube
    Unverified1 source· Talk

Related talks