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?

1. 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.
2. 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.
3. 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.
4. 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.
5. 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:

• https://jamstack.org/resources/
• https://jamstack.wtf/#what-is-jamstack
• https://snipcart.com/blog/jamstack
• https://www.freecodecamp.org/news/an-introduction-to-the-jamstack-the-architecture-of-the-modern-web-c4a0d128d9ca/

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.