Golden rules to build a Trello powerup

Have you been searching for a Trello Power Up, but none has met your need or expectation? How about building your own? We want to show our readers what you should do and what you shouldn't do in order to create an efficient Trello Power Up. The SoftwareDevTools team recently worked directly with Trello, building an integration to Freshdesk. It’s simply called Freshdesk + Trello Power-up. As usual, we’d like to share our thoughts and learning from this experience.

What happens if you I don’t find the power-up that meets my needs? -Just build your own by following these simple rules.

So, What's Trello?

Trello is a collaboration tool to organize your projects into boards so you can easily tell what your team is working on. In the last years, it has become a very important platform for a lot of uses and areas including (but not limited to) software development. Trello is simple and easy to use. But simplicity doesn’t mean lack of customization. Trello launched the power-ups feature that allows you to turn your board into a living and powerful application.

There are several power-ups published in the Trello site. But it's possible that none has met your needs or expectations. If that's the case you should consider building your own to fit your needs as the software dev tools team has made.

Trello Power-Ups

As you may or not know, the SoftwareDevTools team has been working directly with Atlassian for a while now. We have built a few add-ons for Confluence & Jira, focusing on Agile teams: Agile Retrospectives for Confluence, Retros for Jira and Scrum Poker for Confluence & Scrum Poker for Jira. As add-on vendors we are invited to Atlassian’s #ConnectWeek (#ConnectWeek is an event organized by Atlassian where you can meet the teams behind their platforms and work on building your own add-ons). You can read more about our past experiences on our blog. This time around, we took the chance to work with Atlassian’s latest acquisition: Trello.

During the last Atlassian’s #ConnectWeek we met Anthony Marnell, Manager of Business Development and Bentley Cook, Developer Advocate from Trello (By the way, we did a very cool interview with Bentley and wrote about Remote work at Trello); with their help we built a power-up for Freshdesk that lets you resolve customer issues faster by embedding Freshdesk support tickets into Trello cards. Here we share some of the best insights we gained during the event:

Keep it simple, stupid (KISS)

Remembering this simple tip will make your Trello board more powerful. You don’t need to build a whole new platform just create a simple integration. You will only need a template and some Javascript code to make it work.
If you are gonna build something really big try to bundle the assets and the code.
What do you mean? -Combine all the code in a single one. -Uglify the js and the CSS: minify files by removing all the unnecessary spaces and line breaks. There are several tools to do this task for example webpack, gulp, grunt and some others. Webpack has a single command to perform all the bundle
webpack -p webpack

Fast as lightning

The Trello Powerup should respond as fast as possible, you need to remember that when the user is loading your integration, the browser will render all the Trello objects and your Powerup. In our case the request that is taking: 152.07 ms or 0.152 sec. We are looking to improve this time. To achieve this time we made some test using the Network Analysis inside Chrome.
Fast as lighting

Build something useful

Create something to use at any time. I know that the Powerup you are planning to create may need some configuration to work, but it should always display useful information even when it is not configured correctly.
Build Something Useful

Making sure you provide tooltips and also an initial set-up for the configuration through a How-To page or a Quickstart guide are always welcomed additions for the end user. All of this will make the install process much smoother, even though you are building it for internal use or to make it public.

“Making it useful requires that the user knows how to get the most out of the integration and documentation is key.”

We published some tips we learned during our first day at Connect Week Austin regarding documentation for Atlassian Add-on’s which can be applied to Trello Powerups. If you want to know more read this blog post in our Softwaredevtools blog.

Keep style congruence

Trello offers a base style to keep this under control. But if you need to do something very specific, keep using the fonts and colors from Trello. This is going to live inside Trello and you don’t want to mess the user experience. We recently wrote about the importance of User Experience (UX) in JIRA

Taking your first step towards building a Trello Powerup

As with many projects, you should keep it simple, fast and follow certain rules of design to keep the user experience.

What should I do next?

Read the Trello documentation https://trello.readme.io/v1.0/reference#power-ups-intro create a team, install your team https://trello.com/power-ups/admin and start developing your own power-ups.

Feel free to reach us on Twitter @softwaredevtool or FB page for your comments or questions and feel free to share any Software Development Tools that you use :)


Trying to improve your #Agile practices? OR are you getting started with Agile? Are you in a remote team? Check out our products for Agile teams at SoftwareDevTools. We focus on making agile ceremonies more effective and easier to adopt for remote teams.

Check out our Atlassian tools:


Follow us on our networks:
Facebook: /SoftwareDevTools
YouTube:SoftwareDevTools
Twitter: @softwaredevtool
Email: hello@softwaredevtools.com
And Subscribe to our blog below!

SoftwareDevTools

Agile transformation for distributed teams needs the right tools. At SoftwareDevTools we focus on building tools that enable #Agile in remote teams. Real-time collaboration and productive discussions.

Subscribe to SoftwareDevTools

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!