longhorn-js-client: how I became an Okapi contributor
How did I get there?
I have been meaning to dive into React.js for a while but never found the time. At Lingo24 we went for Backbone.js & Underscore.js and we have a mature set of apps using it, with plenty of known reusable patterns, so it’s hard to justify bringing in a new framework.
So there I was patently keeping an eye out for an opportunity to do a bit more than a ToDo app tutorial, and actually solve some problems using React.js.
At the same time I followed my other half, Anaïs to Shanghai where she was teaching design at Donghua University. To put things in context, that meant my job managing staff in Cebu a lot easier, since we’re on the same timezone, but that’s a different story when it comes to staff in Romania (+6h), UK, (+8h) and Panama (+13h).
As I’m writing this blog post, this is my last day in Shanghai after 5 weeks, I went to bed at 1:30AM this morning, woke up at 6AM with Anaïs, and couldn’t get back to bed after that; a common pattern. So I have had plenty of time awake in the past few weeks, and not so much sleep. Global challenges are always interesting to experience. I did experience a bit of the Shanghai lifestyle, but we’re not here to talk about that now.
So what is it?
As I was saying longhorn-js-client is the result of my frustrations with the original web ui, need for a power full web client for Longhorn, and time to get this done!
The web app is written using React.js & ES6, and uses native APIs such as fetch.
It’s completely OpenSource (Apache 2.0) and you can clone it from:
- https://bitbucket.org/clementmouchet/longhorn-js-client (mirror)
It supports all the API features of Okapi Longhorn
This project was bootstrapped with Create React App.
As usual I’ve used Docker to containerized the application for Development, and facilitate running both the API (.war) and the Node servers at the same time, solving CORS issues etc. by using an Nginx server as a reverse proxy.
I’ve also played with Heroku a bit and their Docker deployment which I really like for Demo
I’ve deployed a custom build of Okapi Longhorn on Heroku: https://okapi-longhorn.herokuapp.com/okapi-longhorn/ using Docker and a Jetty Runner dependency.
There’s also various other deployment examples,
- https://clementmouchet.github.io/longhorn-js-client using GitHub gh-pages static deployment.
- https://longhorn-js-client.herokuapp.com using a Node Server on Heroku.
The last two use the API from the custom build of Okapi Longhorn with a proxy in the middle to that adds the CORS headers (this is a dirty hack, but it’s just a demo)
And why is it so special?
Well it isn’t so special! It’s just like any other Open Source project, it serves a purpose, and hopefully helps others as well as me and my team.
It is to me because it’s my first React.js app, I’ve learnt a lot playing with this new library/framework and ES6, and I can say it was a lot of fun.
I’m looking forward to bringing this back to the team and start using more ES6 and React.js at Lingo24 and beyond.
Why I love React.js
- Components — While the components here are not going to be so reusable it’s still nice to separate them and make the app structure a lot clearer.
- React DOM — React manages its own DOM in memory, making it super efficient, far better than most apps/libraries mutating the DOM (which you can always tell at scale).
- Declarative — React is declarative; but in a nice way that doesn’t mean lots of code & configuration, just the right amount.
- Light — I’m still a big fan of Backbone & Underscore, I like libraries that aren’t bloated and force you to do things you don’t want/need. React is just like that, but more modern.
- Tooling — This is one of the things I look for with any kind of library or framework, for front-end or back-end. Good tools make your life easier and your code better. I’ve been using IntelliJ IDEA Ultimate (Open Source licence!) and this is fantastic. It feels like developing a Spring Boot app on a maven project. It’s fully code aware, the dev server is great, debugging, watching, everything is there, and easily.
- KISS — “Keep it simple, stupid”, it doesn’t take days to understand how the API works, and once you’ve developed your first component, things just keep getting faster.
I’ve not yet dived into Redux and the stores but that’s on my list!
longhorn-js-client is going to become the default Longhorn client in the next release of Longhorn, which I’m very proud and excited about, and I’m sure there’s going to be more.
The Longhorn API is very useful, but missing a few things, so the next steps will be around what it can do, and be sure the client will keep up with the new features to come!