Jambo Overview | Yext Hitchhikers Platform

At its core, Jambo is a static site generator (SSG) that relies on the JAM architecture (outlined here: Jamstack | JavaScript, APIs, and Markup ). Written in Javascript, Jambo operates on a set of JSON files and Handlebars templates to produce static HTML files that can be served from a CDN.

In addition to generating the static files to serve to consumers, Jambo also provides some additional commands to make developing experiences on Yext easier for users of various technical skill levels. We call these Jambo Commands.

What is Jamstack and why is it so great?

Jamstack is a modern way of building websites and apps that delivers better performance, higher security, lower cost of scaling, and a better developer experience. This modern architecture enables you to use JavaScript (J), reusable APIs (A) and prebuilt Markup (M) to build digital experiences.
Building with Jamstack enables better performance. With Jamstack, you generate pages at deploy-time since they are mainly stored as Markup and can be delivered over a CDN. As a result, the most recent and up-to-date version of every page is online and accessible from multiple points of presence across the globe. This structure allows you to deliver better performance through fast page load speed, no run-time errors, continuous updates and more.
Running a Jamstack web app also enables low cost of scaling. The cost of running a Jamstack web app uses fewer resources since things like servers and databases are not necessarily needed - these are cumbersome, expensive investments. In addition to providing better performance, CDNs help with scalability too, since they can serve deployments from anywhere.
Building with Jamstack delivers better security due to minimal exposure and ease of maintenance. Traditional server-side and CMS applications expose lots of APIs and services to manage data and content. All of these are at risk of attack and require continuous effort to patch and maintain. In contrast, when using Jamstack, you’re using static files - these are read-only and not susceptible to the same types of attacks. There is no code to run and therefore no vulnerabilities to exploit.
Building with Jamstack delivers a much better experience to developers. With the Jamstack, there is no tight coupling between the application backend and frontend. This means that you can select which solution works best for you among different CMS and content infrastructure options. Developers have access to more targeted development and debugging due to the loose coupling and separation of controls.

Want to know more? You should - it’s awesome! We recommend some of the following additional reading materials when you have the time:

Jambo vs. the Theme

Jambo itself is not a super complex piece of software. It is a command-line tool that follows a set of generic rules, and uses Javascript and Handlebars (a templating language in Javascript that you’ll learn more about in this training) to take an input set of template files and generate static HTML that can be hosted in a CDN and deployed as your website (aka it takes the code in the Code Editor and turns it into web pages that you and your consumers are used to).

It doesn’t know anything about the Yext Search UI SDK or that it even exists. Jambo’s sole purpose is to build the website quickly, efficiently and easily. Like other website generators, it doesn’t rely on any magical server-side code that determines what the frontend will render - all of the display code lives entirely in the website’s templates. The backend servers exist only to provide data to the page (in our case, search from the search system).

What does this mean to you (especially if the above statements go over your head)? You have one consolidated place to update the code, improved page loading performance and better scalability!

So, we’re saying Jambo is dumb and it knows nothing about the Search UI SDK or Search API. How is that even possible?!

That is where the Theme comes in.

All of the knowledge about setting up the SDK/API and the workflow to configure it are defined by the Frontend Theme. You can think of the Theme as an architect and Jambo as the contractor. The architect’s role is to specify the overall design with blueprints. The contractor takes material and blueprints and produces the finished product, in this case, web pages. The theme leverages the templating power of the Jambo tool to allow users to work with an intuitive set of markup and configuration files, converting these files into raw HTML files that make all of the needed, complicated calls to the Search UI SDK. It takes all of the complication out so that you don’t need to be a developer to build an experience!

Jambo has a set of built-in commands, available for any kind of site, like “Add Page”. The Theme can additionally add extra, custom commands, such as “Add card”. These are known as Jambo Commands. Everything about the theme exists to streamline the process for users to set up a Search site. It can and will be iterated on in the future as users discover common workflow patterns that would benefit from more automation!

Jambo Commands

To do things like add pages or override the theme, you will use “Jambo Commands”. As mentioned, Jambo is a Command-Line-Interface (CLI) and in the Yext UI we are using it under-the-hood in the Code Editor.

Jambo has a number of built-in Commands, plus Themes can add on their own custom commands. The Answers Hitchhikers Theme adds a number of commands to make developing Search faster and easier.

Below are the full list of Jambo Commands available when using Jambo + Theme together that you will see in the Code Editor UI. Some of these commands you’ll use frequently, while others you may never use.

Command	Description
`Add Card`	Use this to fork a card from the theme and customize it. Use this if you want to modify a card from what’s in the Theme to modify layout or data mappings
`Add Direct Answer Card`	Use this to fork a Direct Answers Card from the theme and customize it. Use this if you want to modify how we handle direct answers by Entity Type or Field Type (for field-value structured direct answers) or to modify the featured snippet card, like modifying the CTAs.
`Add Page`	Use this to add a page to your search experience. You’ll be prompted to pick a page layout from the theme, like `universal-standard` or `vertical-grid`. You will need to manually add things like verticalKey and cardType once the file is created.
`Add Vertical`	Use this to add as a faster way to add vertical pages by creating the page and setting the verticalKey and cardType all at once. Note: This is only available once you’ve upgraded to the Theme 1.20 or later.
`Build Pages`	Use this if you are developing locally to run Jambo Build. This should automatically be triggered when you change a relevant file if you are using the typical Jambo/Theme setup.
`Override Theme`	Use this if you are developing locally to run Jambo Build. This should automatically be triggered when you change a relevant file if you are using the typical Jambo/Theme setup.
`Upgrade Theme`	Use this command to upgrade to the latest version of the theme. By default, it will upgrade to the master branch of the latest Theme version (recommended) but for more advanced users you can choose to upgrade (at your own risk) to a branch that is still under development, like the early-access branch during the early-access period.
`Extract Translations`	Use this if you are adding translation strings to your site to easily extract the strings that need to be translated into a .pot file. You can then upload this file to your favorite translation SaaS (like Smartling) to produce the needed .po files that you can save to your repo’s translation directory. The command will analyze the usage of translated strings throughout your repo and save you some time!
`Initialize Jambo`	Use this if you are starting from a fully blank repo to add the scaffolding / core files Jambo needs for a Jambo Build to work. You’d want to follow with Import Theme to use the Frontend Theme.
`Import Theme`	Use this command with Initialize Jambo if you start from a fully blank repo in order to import the Frontend Theme.

Back

< Custom Data Formatting

Theme Repo Structure >

<% elem.innerText %>