Tailwind Update

A man getting blown away in a storm, her is trying to hold onto a windsock

I opted to try out Tailwind for my latest personal project. We (my wife and I) want our new App to have a more professional look than its sibling (less Boot strappy). I also wanted to try something new: enter Tailwind – below is my update.

So, the update, how is it going?

I’ve now used Tailwind in anger. I’m far enough into building the new App to provide an update on how things are going.

For someone who has used Bootstrap forever, there is a little to learn. You get nothing for free with Tailwind and what I mean by that is that you need to define everything, that is the point.

In Bootstrap you are using defined components, buttons, cards, everything has a pleasant default. When you copy the example for a card, it will have some nice padding, margins and fit with everything else. With Tailwind you need to define everything which is both a blessing and curse. Which it is depends on how you create your HTML and whether you have a vision of what you want.

I purchased a TailwindUI subscription which has been incredibly useful in helping me get started. If you are a solo developer and not that great at design, I recommend purchasing a subscription, you won’t regret it.

Components

I’m a huge fan of components, I’ve been creating reusable view components since the days of Zend Framework 1. If there is a chance I’m going to duplicate some HTML and it makes sense, boom, I create a component.

This approach works well with Tailwind. Yes, you need to define many more styles on an element, however, if it is all behind a reusable component that you define once, who cares?

If you tend to develop with the same framework, in my case Laravel, these days, the more components you create, the more components you will have for the next project. In the last four years I’ve created a substantial library of Bootstrap and Tailwind view components.

All Good?

I’m not done with the new App yet so my opinion of Tailwind may change but so far, yes, I’m very much enjoying it.

My biggest issue is having to context switch between Bootstrap and Tailwind. I have several personal and client projects which I support daily. Occasionally I run into an issue where I’m trying to use the wrong styles and wondering why it doesn’t work.

I might write another blogpost when I’m closer to release. At that point I should have hit more hurdles so should be able to provide a more detailed update on Tailwind.

OAuth2 and Business Central

Authentication written in block text

Background

I started developing a B2B App for a client which initially needed to integrate with Sage. However, midway through development the client decided to move away from Sage and use Business Central (Dynamics 365), that means OAuth2.

The integration requirements increased significantly; we went from a system needing to occasionally pass some information to Sage to a system which was heavily integrated with BC (Business Central) and required an almost constant connection.

In this post we will ignore the feature creep and other issue and just discuss the integration.

App registration in Business Central

Like most developers, I understood OAuth2, or at least thought I understood it. I’d worked on Apps using OAuth2 and had had to make changes and tweaks, but I’d never had to roll my own client and more importantly connect it to another service. That ended up being the biggest problem.

If you need to integrate with Facebook, GitHub or any of the other large providers, there will be a well-supported package, the league has you sorted for most things. In my case I was connecting to a customer’s instance of BC.

I spent a long time reading all the Business Central documentation and finally came across this, I needed to create an App registration in Azure. Once we had created a valid registration and confirmed it was working (thanks Postman) I needed to get my App to talk to BC, for that I needed an OAuth2 client.

OAuth2 client

I didn’t find a client or integration anywhere that suited my purposes, so I decided to roll my own using the OAuth2 generic provider by the league – yes, they don’t recommend this.

I created a wrapper class with four public methods, hasToken(), token(), refresh() and authorize().

hasToken()

This method does as the name suggests, it lets us know if we have a valid token.

token()

This method returns the token, however, before trying to return the token it calls an internal method called fetchOrRefresh(). This method checks to see if we have a token and whether it is valid. If it has expired, or due to expire, we wait and create a new token using the refresh token. There are several long running tasks, so we decided it was best to ensure we know the life of the token before starting a long running task.

refresh() and authorize()

These are wrapper functions which contain all the code necessary to authorize the client and save a token or generate a new token using the refresh token,

Usage within the App

So far, the integration with BC has been almost flawless. We keep an eye on request limits and catch all API errors. To date, we have never had a problem with the OAuth2 system, every hour a new token is created using the refresh token and it all works wonderfully.

So, how does this work in the code?

If a class needs to connect to Business Central, the first thing we do is check to see if we have an active token.

$oauth = new OAuth();
if ($oauth->hasToken() === false) {
    // Handle error state,
    // Send notification
    // Exit task and retry again
}

Now, assuming we have a token which should always be the case after the initial authorisation, all we need to do it fetch the token and pass it along with our request.

$token = $oauth->token();

if ($token === null) {
    // Handle error state
    // Unable to fetch the token or 
    // Unable to generate a new token using the refresh token
    // Exit task and send notification
}

A failure at this point is unlikely and typically will only happen if a service is down. As previously mentioned, the token() method fetches the token and if necessary, ensures a new token is created, other than an outage it is unlikely this code will fail.

The code above is just a simplified example, in the real app we have much more error checking and state management and throttling. The client can retry any retriable request and see a full log of all interactions between our App and BC.

Conclusion

Was any of this fun?

No. When under serious time constraints working all of this out was a little stressful, especially when I couldn’t find any examples online

Was it worth it?

Yes. My understanding of OAuth2 and integrating with Azure increased no end, I went from thinking I understood OAuth2 to knowing I understood OAuth2.

This is the App that keeps on giving. You might be interested in my next blog post in the series, UI and UX is tough for B2B Apps.