Building a Great Developer Experience
What we did to make building a Tictail app a simple and exciting process.
Tictail is built on simplicity. Throughout whatever we build, we always keep this core concept at heart. The Tictail Apps platform is no exception to this.
Apps is our way of opening up Tictail for other developers to build features on. We recognise that we alone could never fulfill all the requirements each and every unique store in the e-commerce world would have. With the help of the developer community we have a better chance of satisfying more store owners, while also giving app builders the opportunity to earn extra money on the side, or even build businesses around Tictail.
I spent a big part of my time in the Tictail Apps project with building the tools that third party developers use today to build their apps. We put a lot of effort into making the app building process as simple and exciting as it could possibly be, so I’m proud to talk about some of the things that we created during the project.
We divide our apps into two categories, Native and External Apps. The External app category is for those who already have a running service and want to integrate it with Tictail. An External app is mostly a connection between a Tictail account and an account on another service, and the app is used outside of the Tictail dashboard. Native apps are on the other hand embedded right into the dashboard, and can be experienced just the same way as our other features.
Most developers who build a Native app will have to start out from scratch, so we wanted to focus on this process to make developers delighted to start working on their new project. To lower the barriers to entry, we needed to remove many of the inconveniences and intimidating aspects that are usually related to app development.
One of the first things we started out with was simplifying user interface design and development. We created the Tictail UIKit — our own extended and restyled version of Bootstrap 3.
By default, Bootstrap 3 comes with a lot of useful CSS classes and jQuery plugins for building well structured and consistently designed websites. We extended this with important features that we felt were missing in building great web apps. This includes, among other things, custom styled form input elements, searchable select boxes, lightboxes for displaying full size images, and even a complete WYSIWYG editor for writing well formatted content. All of these features are activated by the developer by simply applying a class to the appropriate element in the HTML code, without requiring any extra JavaScript to be written. This lets the developer specify the components they want while the UIKit takes care of the functionality and styles of them, leaving the developer time to work on the things that are unique for their app.
As an example, a feature in the UIKit that we spent a considerable amount of time polishing is form validation — something that is usually a hassle to build as a developer and that tends to irritate the user when implemented poorly. With the UIKit, all you have to do is to specify the input requirements directly in your HTML code, and all the rest is handled by us to create a beautiful, validated web form.
We know that not all developers have a keen eye for design, but that shouldn’t hinder them from building a great looking app. The UIKit is there to reduce the amount of custom CSS a developer has to write to make their app beautiful. It also allows us to create a consistent user experience across all the different apps, so a user won’t be confused when navigating between them.
We value design highly at Tictail and we only publish a developer’s app once it has reached a quality we are happy with. The UIKit helps us guide developers to build apps that hold up to our standards, and I think it goes a long way in creating enjoyable experiences, both for the developers using it and for the end users of their apps.
Another pain point in app development that we wanted to address was making sure that user authentication is completely transparent. Our API authentication is based on OAuth 2.0, but the developer doesn’t actually have to know anything about the protocol to build an app.
To bridge together the Tictail dashboard and a Native app, we provide a small JavaScript library called TT.js. This allows us to handle all of the user authentication within our Tictail dashboard code, and only pass down the access token that Native apps use to speak with our API. We run through the OAuth 2.0 Implicit Grant Flow in the background without bothering the developer with the implementation details.
Even with the access token directly handed to the developer, we wanted to take the abstraction further and also handle all of the API communication inside TT.js. We provide helper methods that automatically include the access token in the appropriate header in all API requests. Here’s an example that demonstrates the complete authentication flow for an app:
Because all the user authentication is handled on our part, you as a developer can write an entire Tictail app that doesn’t require a single line of backend code. If you wish, you could just upload your files to a static file host, such as Amazon S3, and have a fully functional app. In fact, this is how the Tictail API Explorer is hosted — our open-sourced Native app that you as a developer can use to play around with our API.
Even if most of the current Tictail apps have some sort of backend for doing more interesting things, it is still important that you can start hacking on an app in nothing else but a single index.html file right away. I believe that instantly getting into the feedback loop of building something and not having to write a lot of boilerplate code makes for an exciting platform to work with.
These are two of the many things that we worked on to make Tictail an attractive platform to build apps on as a developer, and so far we’ve had the honor to publish apps to our app store from talented developers all over the world. In case you are interested in building a Tictail app, head on over to our Tictail Developers page to get started!
If you want to look more into the details of our TT.js library, I’m happy to announce it is now open-sourced and available on GitHub! You’re very welcome to share any feedback you might have through the issues page of the repository.
