Olyro Blog

When we first started developing software commercially, we were often unsure what technology stack to pick when starting a new project.

But now, a few years richer in experience, we found a solid stack to work with that we usually pick as a base for new projects.

The Architecture

Almost all of the software we build is web based and consists of a backend service (mostly a REST-like service) and a fronted (usually a SPA). Authentication is usually handled by a token that is passed to the server as an http header (cookies set by the server have given us quite a few headaches in the past, especially in the safari browser, so we try to avoid them).

The Backend

The backend is JVM based and mostly written in Java or Scala. There are numerous advantages in choosing a JVM language for our company and while most are not unique to the JVM in combination they provide a pretty compelling argument.

  • The sheer size of the ecosystem including tooling and libraries
  • The JVM as a runtime environment with its state of the art garbage collector
  • The size of the hiring pool is massive (this applies only to java of course). Practically every university teaches at least some Java today
  • Java received quite a few new language features in recent years making it not nearly as boilerplate heavy as it used to be (lambdas, streams, local type inference, records)

In some projects we chose scala to utilize its powerful type system. With the release of dotty we hope for an even better scala experience especially in the tooling area.

Automatic creation of typescript definitions

To prevent boilerplate and tedious work we are using tooling to make the exchange of typed objects between the backend and frontend via JSON easier. These tools generate typescript definition files for us based on the backend classes (either POJOs in Java or case classes in scala). For Java, we can really recommend the excellent typescript-generator maven plugin. For scala, we have built an in-house solution (just send us a comment if you are interested in the implementation).

Javalin

We are really big fans of the javalin framework which is a no thrills easy to use web/http library with a focus on being simple (yeah we know that is quite a loaded word). To quote from the website:

You never extend classes and you rarely implement interfaces.

A really refreshing approach. No inheritance, no annotations, no magic. But still very concise. The great list of tutorials (e.g. creating a native image using graalvm) completes it.

Postgres

Another staple for us is the postgres database. It is rock solid and provides many important features like enums (to prevent magic strings/constants) and json columns if you need a more dynamic approach to data storage (without pulling in a document store like couch or mongo as a dependency).

Docker-(Compose)

For deployment we often rely on docker (though we had some problems deploying docker on desktop computers, but we will leave that to another blog post) and docker-compose. We are especially fond of docker-compose, since the container + network + volume definitions have solved a lot of configuration and deployment headaches for us.

The Frontend

The frontend is written in typescript with react for view binding which is almost the de facto standard nowadays. We have had mixed experiences with using angular 2 in the past (especially the change detection mechanism has caused quite a bit of trouble). I think react will be a reliable part of our frontends for quite some time to come.

While we have tried technologies like scala.js and similar approaches in the past, either the generated output size or the Javascript interoperability always left something to be desired. Furthermore the growing capabilities of the typescript type system (it really is quite impressive by now) have made it difficult for competitors to enter the field. But maybe this will change with the advent of webassembly.

What stack are you using? What experiences have you had on your journey?

It has been over a year since we started using Figma at Olyro. We use it for our corporate design as well as for prototyping apps and websites.

It has been a been a real pleasure to use for 3 reasons:

  • Simple, clean and intuitive UI
  • Great performance especially considering it is a web app!
  • Seamless Synchronizing – Want to continue on your Windows Desktop after working on your MacBook? No Problem!

The last point is especially important since it allows you to share your work with a coworker or customer.

Figma is certainly not as powerful as tools like Illustrator or Affinity Designer (which ironically feels quite slow on my 2015 MacBookPro, despite all the marketing claims on the Website), but you can get going really quickly (I am Computer Scientist by trade and not a Designer, so take that with a grain of salt) and utilize existing examples and UI kits.

The component feature is really powerful, speeds up the creation process, makes it ideal to prototype apps and just makes plain sense to everybody who is working with web components all day. We further hope to try the Prototype Mode and Presentation View in the new year, which allows you to create an interactive preview of your app.

There was only a single case where I had to fall back to Affinity Designer. I had to produce a pdf in the CMYK color space with exact dimensions for our business cards. That was not possible in Figma, but could be achieved with the SVG export and performing the task with Affinity Designer.

Wishlist for 2018

Nevertheless I have a small wishlist of features I would like to see in Figma in 2018:

  • Snapping to an Objects Outline
  • More Export Options (as mentioned before)
  • More than 4 possible effects

When wanting to draw diagrams we tried using Figma, but ended up having to go back to TikZ, since there is no real auto layouting functionality. Neither is there a way to snap to an objects outline (afaik at least, I would love to be wrong here though!)

Considering the fact we are currently going through a phase of what I would call the flat UI hype the last point does not seem to be that relevant, but a nice “emboss” or a similar effect will help when UI design will inevitably go back to using the third dimension (and I am talking about more than just shadows used in e.g. Material Design).

We at Olyro wish the Figma Team all the best for 2018!