From monolith to service-oriented ReactJS framework

Christian Broberg
ODEUM Code
Published in
4 min readSep 5, 2017

Rebuilding ODEUM into an open source service-oriented JavaScript framework with ReactJS.

Community of services

It’s always nice to begin a story with a nice picture. In this case our story is initiated in Benalmádena Pueblo in sunny Costa del Sol of Spain.

What does this picture have to do with going from a monolith software architecture to a service-oriented JavaScript framework?

Not much really, except that all the small “pueblo” white-painted brick-houses create associations of a myriad of smaller services or components, interconnected and joined by paths and streets — a community of services and access-ways and not a huge monolithic highrise concrete building.

What is ODEUM?

ODEUM is a cloud-based platform for designing and developing mobile and web applications that help professional designers and developers create innovative solutions ... 

So why rebuild ODEUM?

At WebHouse we needed a new ODEUM frontend design and wanted to be able to more rapidly build new web applications and services in a completely revamped design and package.

  • “Our existing web application frontend was deprecated and part of a huge monolithic LAMP stack web application”
  • “We wanted a new design with better UX, faster and easier to use and understand for our customers”
  • “We wanted to be able to do fast prototyping and develop new web apps very fast (RAD)”
  • “We wanted a Single-Page-Application (SPA) design with a support friendly interface with intelligent routing for deep-linking”
  • “We wanted to reuse existing ODEUM server backend (PHP/MySQL) through a Restful API”
  • “We wanted a component and colocation based architecture optimized for reuse for all ODEUM Apps (web/mobile)”
  • “We wanted a service-oriented architecture and a decoupled client-server architecture”
  • “We wanted to use Open Source technology through a super fast evolving community”

Enter ReactJS and React Native

At WebHouse, we have been building ODEUM and ODEUM Apps (modules, extensions, plugins, integrations) in PHP/MySQL on Linux/Apache for nearly 16 years.

Now we wanted to do things differently.

We began researching and feeling our way through a jungle of existing technologies, frameworks and paradigms for building software in a more service-oriented and component-based way. And at the same time I fell in love with NodeJS and ReactJS when I started on a journey to get back into programming again. Read about my journey here.

All senior developer and architect forces joined in, and our primary choice was to go with React. Here is why:

  • “ReactJS and React Native looked very promising”
  • “A component based model with encapsulation of design and functionality (colocation) — write once — use everywhere”
  • “Exciting community with tons of eye-balling open source stuff” (and loads of JavaScript fatique to follow)
  • “Possibility to reuse technical knowledge with React Native for our ODEUM mobile apps”
  • “Top tier company approval (Facebook, Instagram, Twitter, Netflix, AirBnB, Microsoft and many others)”

Mission Statement

At WebHouse we set out on a new mission in 2016.

A mission, not just to renew our existing web application UI and UX of our long productline of ODEUM Web and Mobile Apps, but a mission to do something amazing. Something new, something exiting, and through that mission give something back to a development community we have been a part of since 1995.

ODEUM Code — the framework

The idea of ODEUM Code originated from our described need of a new UI and UX framework for ODEUM Apps.

This idea slowly evolved into, not just wanting to produce something that we would be able to use ourselves, but something others would be able to use and contribute to.

We were all JavaScript and React novices and the best way to learn the NodeJS and JavaScript software paradigm fully, was to produce a framework of our own, suited for our needs, and not just reuse an existing one.

The idea of open sourcing our work began to evolve. And the ideas just kept flowing in and the process is rocked-fueled with passion.

  • We Love to Code
  • We Love Open Source
  • We are gradually beginning to love … React
ODEUM Code logo work in progress!

Our mission, which is still very much in progress, we will share with you on this Medium blog. And the mission is to make a state-of-the-art, open source React-based UI framework for building Web & Mobile Applications.

Made with Love for JavaScript and React, made with passion and help from our friends.

We love our ODEUM Code logo type

Please stay connected and ready for much more on our process with ODEUM Code, and which React technologies we have selected for our framework, and while you wait, please give us some love here and on Github :)

--

--

Christian Broberg
ODEUM Code

IoT platform architect, CEO/Founder at Senti.io Passionate about open source IoT platform architectures build with NodeJS and React