We Open-Sourced Our Dashboard and Here’s Why

Adam WardeckiAdam Wardecki

Ben Balter, a product manager at GitHub, once said that open source isn't a fad, or a bunch of hippies out in California passing around tie-dyed laptops like they would illicit substances. Open source is how modern organizations build software. We couldn't agree more with that and that's why we are opening the code of one of our core services.

The Syncano Platform

Syncano automates large chunks of the process of building an app (web, mobile, IoT, you name it). It enables developers to launch their applications faster with fewer resources. They can get their minimum viable product into the market quicker and get ahead of the competition by focusing on improvements and growth.

Running the backend on our platform means you don’t have to worry about scaling problems when your app hits the big time. We run on top of the industry leading cloud infrastructure and offer a straightforward pay-as-you-go pricing.

We basically:

Our more than 40k users -- including startups, independent developers, software houses and enterprises -- have put their trust in us because they know that Syncano is all about ease & speed!

Why are you open sourcing your Dashboard?

We started the development of the current Dashboard version in May of 2015. The previous one was written in Backbone, and we felt that it was time for a change. Since we are always eager to experiment, and we don’t mind getting our hands dirty with the cutting edge software, we chose a trending React JavaScript library developed by Facebook and Instagram. Thousands of commits, tanks of coffee, and a couple of months later, we’ve managed to release the new version.

Why we decided to open source? Because we believe in transparency and are always searching for new ways to give back to the community:

And since we believe in transparency, it wouldn’t be fair to not mention the PR benefits. We’ve built a great product over the last couple of years and we want you to know about it, and hopefully use Syncano in your upcoming projects.

The Syncano Dashboard is released under the über liberal MIT license. Copy, modify, merge, show it to your grandma, publish, sell, profit. Seriously, have fun!

What is it made of?

Syncano Dashboard is written in JavaScript. I’ll write about the most important libraries below. When it comes to the backend - we eat our own dog food. We are using the same Syncano JS lib that our customers are using, and the same endpoints that are available to our end users. Here’s a simple high level diagram.

React

We’ve chosen to use React as the main library for building the user interface. Here are the main reasons underlying this decision:

These are just a few from an ocean of reasons why we decided to go with React. To learn a bit more, you can always check out this post: “Why React? 6 Reasons We Love It”.

Reflux

The official Facebook proposition for managing the application state and data flow is Flux. Here’s Facebook's diagram that should explain it:

Confused? So were we, and that’s why we decided to go with something a bit more compelling at the time - Reflux. The idea behind it is to “introduce a more functional programming style architecture by eschewing MVC like patterns and adopting a single data flow pattern.” In practice, it means that the above diagram, representing a data flow in your app, turns into this one:

Components listen to Stores and call Actions on change events. Stores listen to Actions and inform the Components that it’s time to re-render. Plain and simple! That’s why we chose Reflux. (Currently there are more and more options for managing the data flow within React apps: Redux, Relay and MobX to name few of them. We are considering abandoning Reflux and using a different technology. More on that below in the “Future” section).

Material UI

We chose the Google Material Design as our design principle. We liked it for its minimalistic approach and clean visual language. Also, the philosophy behind material design and its components is a perfect match with React’s components. You can clearly see that in Material UI - the React implementation of Google Material Design that we use extensively in our Dashboard. Although now we are making steps towards defining our own design and are steering off from the Material Design components, we’d like to give a big shout-out to the awesome guys at Call-Em-All and all the contributors who made the Material UI happen.

Webpack

We use webpack as a module bundler and a development server. Since we are writing in ES6, we needed a bundler and webpack is a bit more suitable for bigger projects than Browserify. Plus, it comes with a hot reloader that propagates changes to React components on the fly, which is very handy during the development.

Gulp

Currently, the two major competing Node.js build and task automation tools are Grunt and Gulp. When we chose Gulp in 2015, it was less popular than Grunt. The “code over configuration” philosophy behind Gulp seems to have taken the hearts of frontend devs, because now it has more contributors, downloads and GitHub stars than Grunt does. In the Syncano Dashboard, we use Gulp for automating the processes of copying files, starting the dev server, build and deployment. You can check out the full list of Gulp tasks here.

Nightwatch.js

Since I have a testing background, I have to mention the testing tools. We are using Nightwatch.js as an end-to-end test framework. It’s a Node.js tool that uses Selenium Webdriver API to interact with the UI elements. There are several reasons behind this choice. Nightwatch:

If you’d like to know how to setup Nightwatch in your project from the ground up, you can check out this post.

Other

Of course the list of software we use doesn’t end with the ones listed above. Here are a couple that also require a mention:

See the package.json file for a detailed list of modules we use in the Syncano Dashboard.

The Future

Over the last year, we’ve worked really hard to deliver the most value to our users and we are planning to keep doing so. We want to make this project better and better, and we are fully aware that there’s a long road ahead. The main challenges that we’ll be facing are:

As you can see there’s a ton of work ahead. Come back once in a while and see how this project evolves.

Useful Resources

We’ll be updating this post with more details about the project. Here are some direct links that you might also find useful:

Contributing

If you’d like to contribute or simply learn more about the project you can:

You can also always send us a message at [email protected] and our twitter handle is @Syncano.

Acknowledgements

The Syncano team: Patryk Kopyciński (Frontend Team Lead), Hubert Wesołowski, Marcin Godlewski, Wojciech Pasiński, Daniel Siwek, Piotr Owerczuk, Tomasz Ciecierski, Maciej Kucharz (Head of Engineering) and me.

Former contributors: Daniel Kopka (currently Sauce Labs).

Build powerful apps in half the time

Use our serverless platform to set up your backend in minutes.

Learn more
Adam Wardecki
Author

Adam Wardecki

Tester, Software Engineer and Product Owner @ Syncano