Helpful tips for building with Block Kit

Designing Dash for Slack with a customizable UI framework

Jeremy (managing partner at Postlight) and team recently launched Dash, a new Slack app. Dash gives teams an easy way to start a new Slack channel for a specific topic or conversation, set a deadline, and then archive the channel and share the outcome of the discussion when time’s up. Add Dash to your Slack workspace now — and read on to learn how we used Block Kit to style our app messages in Slack.

Using Block Kit

Just as we started working on Dash, we found out about Block Kit, which was in beta at the time. We were really interested to see what Block Kit could do, so we developed two versions of the app: The Block Kit version, and the non-Block Kit version. We launched with Block Kit.

Datepicker

Dash exists because Slack added a datepicker when they introduced Block Kit. The datepicker allows users in Slack to do something that wasn’t possible before: take actions that impact the future. In Dash’s case, the datepicker is used to pick the end date for a conversation.

The datepicker in action. We use Block Kit’s layout elements to carefully place an error message when the user selects a date in the past.

Dashboard

Dash makes unique use of Slack by providing a live Dashboard inside your conversation with Dash bot. The Dashboard is constructed with Blocks and allows the user to close or edit the end time of any of their Dash channels from one spot.

Lessons learned

Building Dash with Block Kit while Block Kit was still in active development was fun and educational. Here are some of the things we learned as we went.

Pick your integration points carefully

Slack is a robust platform with many APIs a third party app can leverage. We built the first version of Dash using threads, only to find out that many of our testers needed a tutorial on threads before they could make effective use of Dash. Experiment with as many features of Slack’s API as possible to find the right fit for your app.

Bots can’t do everything

Slack allows you to use their API on behalf of an authenticated user or your bot. It’s incredibly important to understand what features of Slack you can use as a bot and as a user, especially when dealing with private channels. We made it all the way to staging with some features that didn’t function properly because the bot user wasn’t able to take certain API actions.

Build for speed

You’ve got three seconds to respond when Slack calls your code. Here are some important things to consider:

• When using Function-as-a-Service providers, solve cold starts. Serverless has a wonderful plugin for fixing cold starts.
• Keep API access to a minimum, even Slack’s.
• Use asynchronous, event-driven, responses and show loading states. We use AWS Lambda’s Invoke feature to start background functions for complex logic, like updating the Dashboard.

Slack teams have different permissions

Slack’s feature set may seem uniform across different teams, but it is not. Some teams disallow channel creation and archiving. It’s important to create Slack teams to test how different Slack team setups can impact your app’s functionality.

Log errors

Sure, errors usually get logged in a text file somewhere. It’s far more important to log those errors somewhere actionable. We use Sentry for Dash and it is a lifesaver. Web app and native app errors are much more obvious to a user, but backend errors can go unnoticed. Be sure you’re sending your errors to a service that can alert you when your Slack app is having an issue.

Rapid fire tips

Here are a few more miscellaneous tips that will help you build your own Slack app.

• Read the Slack API Types documentation multiple times. Some things covered in these docs aren’t mentioned anywhere else in Slack’s documentation.
• Make sure the fields you use in the data Slack sends you are documented! Slack sometimes sends extra data that may someday be removed.
• Don’t use the tokens on the app page, instead implement OAuth from the start. It’s too easy to build an app that only works for one user.
• Setup at least three Slack apps (they’re free!): development, staging, and production.
• A serverless infrastructure is a great match for Slack. You can scale to bursts of activity much more easily. We used AWS Lambda with our starter kit.
• Log the responses you send back to Slack for easier debugging. You can copy paste the JSON right into the Block Kit Builder for UI polish.
• Analytics aren’t just for web and native apps. We found Mixpanel’s Node library a great fit for our Dash.
• Extract your app strings using an internationalization library. We used i18next.
• A not-immediately-obvious side effect of using chat.update to modify a message containing Blocks: Slack doesn’t show “(edited)” after the message, allowing for developers to seamlessly provide app updates without clutter.
• Slack’s Node SDK is written in TypeScript. Use TypeScript in your app to have validation of the requests you send to the Slack API.

Check out Dash, and let us know what you think, by emailing hello+dash@postlight.com.