Friday, February 22, 2013

Non-framework approach to JavaScript apps - hexagonal.js

This week we have officially launched and announced hexagonal.js.

The announcement was welcomed with a fair amount of interest. Jan Filipowski at the Arkency blog did a great job of explaining the basic ideas.

I'd like to cover the topic of hexagonaljs not being a framework.

What is a framework?

Some time ago I asked "What is a framework?". I liked the following answer:

In the case of a framework, your code is called by it. In the case of a library, your code call it. Rails is a framework, and provides libraries too.

I have a love/hate relationship with frameworks. That's why I struggled for months, what to do with the ideas that we're now calling hexagonal.js. I didn't want it to be a framework. That would ruin the whole experience.

Let me tell you a story on how it all started and why we didn't want it to be a framework.

The technical story of haxagonal.js

The first ideas were created when we were working on social web games at GameBoxed. Given the scale we were operating on (sometimes 4-5 social apps/games a month) we needed a high degree of reusability. Reusability requires good modularity. Often, we've had apps that have the same "logic", but they had much different GUI, sounds, FB integration etc.

We got the idea of use cases as objects from the DCI approach (DCI is much more than that!). We've experimented with the concept that it's the use-case that drives everything. Driving something (like playing sounds) meant calling it. Calling it directly meant creating a coupling between the use-case and the SoundAdapter, which didn't sound like a good idea.

One approach was to use events. The use case would trigger an event and the adapter would bind to it. It resulted in less coupling. It wasn't bad. To me, it wasn't yet the final solution, though. I didn't like the fact, that the use-case objects were full of "trigger someEvent" statements.

When I looked at the events, I realised that they happen usually at the beginning or at the end of a method in the use case.

Before, After....

Wait, wasn't that what AOP was about?

Introducing some simple AOP techniques (thanks to awesome Raganwald's library!), we have achieved exactly what was needed. This is what we currently call a Glue code. It's almost like a configuration, in most cases. No logic, just declarations.

Hexagonal architecture

We started with MVC in mind. The most basic rule of MVC is that when the model changes, the views are notified about it. After some time, we've realised that it's not only about views, unless you try to fit "playing sounds" into the View layer ;)

In a hexagonal architecture, GUI is just one of the adapters. It's usually the most important one, but technically, still, just an adapter.

In many apps, the GUI is the only adapter.

ServerSideAdapter, PusherAdapter, SoundAdapter, FirebaseAdapter, FacebookAdapter, LinkedInAdapter - those are just examples of the adapters, that we used so far.

It's not a framework

Given all of the above, we were struggling on how to bring this idea to people, without making them depend on any framework. The whole idea is a bit anti-framework.

Hexagonal.js is not even a library. It's mostly an architectural style adapted to JavaScript apps. We provide many examples (and more in progress..), that can guide you. You can copy them, fork them and have a good starting point.

It's probably a slightly unusual approach to deliver some ideas to you. It's not a framework, not a library.

Hexagonal.js is a set of good patterns that are extracted from real-world production apps. It was used to build dozens of apps, with a good speed of development.

You can look at the examples we already have. Look at the use case object, the glue and the adapters. It's a pattern that reappears in every hexagonaljs app. There is also an example of using it from a Rails app.

Tell us what you think about this approach. We've published it to bring more ideas. We're open for suggestions!

Thanks for reading.

No comments: