Zendesk CHAT

​​​​​​​Zendesk Apps development with App Framework v2

Meeri Saksman

Meeri Saksman

Päivitetty

Zendesk App Framework (ZAF) makes it possible to build new features and integrations into Zendesk. Zendesk announced App Framework v2 in June 2016 and App Framework v1 deprecation in March 2017. This text gives an overview of Zendesk Apps development with App Framework v2 and offers tips for setting up the development environment and starting a project.

Zendesk App Framework v2 is a significant update, as it gives developers more freedom to choose the used technologies and libraries. Unlike v1, it does not enforce any libraries, like Handlebars. Apps develop​ed with front-end technologies, i.e. JavaScript, HTML, and CSS, can be installed and hosted in Zendesk. The app is embedded to Zendesk with iframe. It is also possible to use server-side technologies to generate the content for the iframe if the app can send HTML pages in response to HTTP requests. In this case, the app must be hosted outside Zendesk.

Tools, libraries, and resources that make working with ZAF easier:

$ gem install zendesk_apps_tools​
  • Zendesk App Framework SDK (ZAF SDK) is a JavaScript library to simplify cross-frame communication between iframed apps and Zendesk App Framework. To be able to interact with ZAF APIs, import ZAF SDK. For example:
<script src="https://assets.zendesk.com/apps/sdk/2.0/zaf_sdk.js"></script>
  • Zendesk Garden is a stylesheet designed to be a style baseline for Zendesk products. Zendesk Garden makes is easier to follow Zendesk styles in your apps. It can be included with an HTML link tag:
<link rel="stylesheet" href="https://assets.zendesk.com/apps/sdk-assets/css/1/zendesk_garden.css" type="text/css">

​To get started Zendesk offers an introductory blog series. It introduces ZAT and ZAT SDK and uses Handlebars templating for the user interface and Bootstrap for styling. It is a good place to start, but after familiarizing the framework, it is better to move to App Scaffold boilerplate.

App Scaffold boilerplate includes Babel compiler to transpile ECMAScript 6 (ES6 or ES2015) to ECMAScript 5 (ES5). This allows the use of latest JavaScript language features in browsers that have not fully implemented them. App Scaffold boilerplate also uses Handlebars templating, but replacing it with some other user interface library, like React, should be straightforward. For styling, it offers SASS stylesheets to extends CSS. Webpack module bundler is used to run Babel, transform SASS to CSS, and to load Handlebars templates. App Scaffold provides internalization (i18n) module and translations-loader, which enable Webpack to include localized strings in the JavaScript bundle. It also offers storage module for interacting with browser localStorage, and view module to simplify Handlebars template rendering.

It is recommended to start with from-scratch branch, which is aimed for new apps. Master branch is for migrating from App Framework v1. The included libraries may be outdated, especially in the master branch, but updating the development libraries is straightforward. Getting the build tools up to date requires some more work, mostly if you want to update Webpack from v1 to v2.

Overall Zendesk Apps development has improved greatly after the introduction of App Framework v2. When the framework does not enforce libraries, developers have more flexibility and development can more easily leverage existing JavaScript development tools, like Webpack. A minor annoyance is that ZAF SDK and Zendesk Garden are not available via NPM and must be included as external resources or managed manually. Otherwise, I gladly welcome the new wave of Zendesk Apps development. I’m looking forward to start building Zendesk Apps with React and Redux.

Arttu Hanska​

Software developer