An Ember.js application with a Rails API backend

by Wojtek Gorecki on September 10th, 2015

Alright, fellow fullstack developers. In the last few weeks I had the chance to dive into Ember.js and I would like to give you a complete example of a blog application with Ember CLI for the frontend and Rails as backend server. This article contains lots of code. I will not explain all of it in detail. I’ll just reference the sources that helped me to understand the aspects shown here. You will need to have basic experience in Rails and JavaScript to walk through this.

Rails Backend

Let’s get the started. First we create our Rails backend server. We use the rails-api gem to generate the server.

Here, we generate the scaffold for posts and comments.

Don’t forget to add the has_many relation to post model.

To set up CORS we use a gem called rack-cors. It makes configuring CORS in a Rails project as easy as writing an initializer. So add this to your gem file:

Run the bundler to install the new gem.

Add here is the initializer:

Ember Data expects the transferred JSON data between frontend and backend to be in a certain format. To meet that format we have to update the controller actions in the posts controller and the comments controller. Read this and this to learn more about the JSON format in ember data and check this out as well.
Here’s the code:

To have some test data, just create a post record and a comment record in the Rails console.

And finally run your development server.

That’s it for the backend. The rest of this article will be all about the Ember application.

Ember Frontend

Alright, now let’s get to the really cool stuff. First of all you need to have ember-cli installed and then we’re moving on like this.

Ok kids, security is a very important issue, but to keep this demo quick and simple we’ll remove the following line from the package.json.

Learn more about the content security policy here and here.

You can configure the URL of your backend inside the application adapter. So run

to generate it and make it look like this

As you will probably know, this is the URL of your running Rails dev server. ;)

Now lets create models, templates and routes.

This will generate a bunch of files. I’ll leave it up to you to learn what is what. Check out the following links: Models, Controllers, Router Request Lifecycle, Routes, Templates.

Add titles to the following templates to see if the routing works correctly later on. Just replace the

with something like:

Now let’s update the router. The generators already added some routes, but I learned from Andy Borsz’s blog post that it should be more like this.

You can run the development server and check out the generated paths.

Install the Ember Inspector and visit the generated routes to see what already works.

Let’s move on. Now we add the model attributes according to the backend models.

Here comes first bit of functionality that actually reads data from the backend. Let’s implement the model function in the posts route. This will define what should be rendered in the post.hbs template. This and this will help you understand what happens here.

In the posts.hbs template we loop over the posts and render a simple li tag with the title and a link for deleting. We add a link to the ‘Post New’ page as well.

Check out the index page in the browser.

You should already see the first post we created in the rails console. The delete button should work as well.

Now, let’s create the the detail page for one post. Just update post.hbs to this:

Go to /posts/1 and see if it works!

And now let’s make the delete button work. Here is the post.js route.

Next we create a form to create a new post. This is the post/new.hbs template.

To implement the action handlers and save the form data to the backend, we need to update the post/new.js route to this:

Creating posts should work now. Go to /posts/new and try it out. Also, check the Rails logs to make sure the data is being saved correctly.

So far, so good. Are you still with me? We’re almost done. Moving on to the comments.

Here’s the template for the new comment form post/comment/new.hbs.

Now we have to implement the /post/comment/new.js route. It defines the model and handles the actions triggered in the comment form.

Read this to understand why we need the renderTemplate() function here.

You made it, you reached the end of this article. Creating posts and adding comments should work now. Yay! \o/

One last Note

I found it really exciting how fast and simple it has become to build a frontend application along with the backend server. In my opinion, Ember.js and Ember CLI in particular are indeed great tools to build ambitious web applications. You don’t have to put a puzzle together before you can start getting productive. On the other hand you spend quite some time trying to understand the Ember magic and why your code actually works. I hope this article helped you with your learning curve. ;)

Project launched: WEF Inclusive Growth Report 2015

by Sebastian Deutsch on September 8th, 2015


This week, the World Economic Forum launched “The Inclusive Growth and Development Report 2015″ with combined forces of 9elements and the help of our friends.

The report, which covers 112 economies, seeks to improve our understanding of how countries can use a diverse spectrum of policy incentives and institutional mechanisms to make economic growth more socially inclusive without dampening incentives to work, save and invest.

The Stack

9elements has done many data visualization projects in the past. For the OECD Data Portal, we’ve mainly used D3 and d3.chart. D3 is a great library for smaller or isolated visuals, but when the project grew larger and the code started to become difficult to maintain, incorporating mobile support on top was manageable but a daunting task. To avoid these sorts of problems in the future, we’ve decided to switch to a better front-end development stack.

For the main visuals we’ve chosen to render SVG with React.js. We love React.js for its fresh approach to write reusable web components and its blazing fast virtual DOM. The build system was based on Gulp.js for automation and Webpack for transpiling and packaging. We’ve used Babel to write ECMAScript 6 ECMAScript 2015 and compile to JavaScript that even older browsers understand. We’ve made heavy use of the new module syntax and ECMAScript 2015 classes to structure our code.

Not only did we want HTML components with React, but we also intended to incorporate the component approach with CSS: All CSS was developed using the BEM methodology and we’ve created some nice React and SASS helpers that speeded up our progress while keeping the CSS maintainable and sane.

Being able to export individual visualizations as PDF files was a fundamental requirement in this project. After all, we have to conclude that using React had the big advantage of being able to render all the visuals on the server and simply convert the HTML/CSS into PDF files using PrinceXML. With D3 that requirement would have become a nightmare and on top of that we would have had to use a very fragile stack with many components (like PhantomJS).

Bottom Line

With regard to the front-end stack we would definitely recommend using React.js with Webpack and Babel, especially with mobile usage in mind. If you like our work and have a project in mind feel free to contact us.

The ethereal Frontier

by Nicolas Luck on August 14th, 2015
Comments Off

Some of you may have heard of the new big thing: Ethereum.


You may have heard that Ethereum's co-founder Vitalik Buterin was awarded with $100k within the Peter Thiel fellowship programme. That Ethereum which pre-sold it’s cryptocurrency, the Ether, last year gaining $18 million in a self-made crowdfunding move. The same Ethereum that is sometimes called Bitcoin 2.0 and that aims to be the Web 3.0. Ethereum launched its production blockchain two weeks ago after bootstrapping a community and doing quite some testing on several proof of concept test nets.

At 9elements, we are quite curious about new technologies – especially of this scale. So we took a deeper look at Ethereum and got our hands dirty with mining Ether and writing smart contracts. There will be follow-ups to this blog post in which we’d like to show a hands-on approach on Ethereum contract code. But first we probably should answer the question: smart… what?!

Bitcoin was proof of concept for a new technology that is called blockchain. As the name suggests, it is about a chain of blocks. While this being a rather technical detail of its implementation, a blockchain is best described as a decentralized database. So what does that mean?

The values that are stored in a blockchain represent a consensus knowledge of all clients that are participating in this network. Every client that looks up a specific field in this database will find the same value. With blockchain technology, this is accomplished without having a central server that hosts or has any sort of authority concerning this database. Instead, the protocol that defines the interactions of its clients makes sure that this consensus about the blockchain’s values is distributed and synchronized among all clients and is protected against fraud.

Applied to the use case of currencies – like Bitcoin – a central authority like a bank is not needed any more for people to use the currency and make transactions. That’s why people call Bitcoin electronic cash. You don't need to trust anyone – not even your bank. (You just have to trust in cryptography…)

Now, Ethereum takes it even one step further…

While Bitcoin uses the blockchain only to store the amount of Bitcoins per wallet, one could imagine blockchains for all sorts of data. For example, there's also Namecoin which stores DNS entries on a blockchain. Ethereum uses its blockchain to even store code in it. By adding a virtual machine to the equation that executes the code stored in the blockchain during the mining process, Ethereum is best characterized as a decentralized computer

Wait, what?!

Ethereum introduces two kinds of accounts both of which are able to hold Ether (the currency in Ethereum). First, there are accounts that are controlled by a person via a private key. This is the same as with Bitcoin. In order to transfer Ether or send other transactions from this account to another, the private key’s owner needs to issue a transaction and sign it with their key (which is done by the client software automatically after the user has entered the key’s password).

Then there are accounts that are controlled by the code that is stored within that account. Every time a transaction is send to such an account, the miner that creates the next block containing this transaction runs the account’s code on the Ethereum Virtual Machine (EVM). Depending on that code, this account – also called smart contract – could respond to this transaction by sending a transaction itself, by doing nothing, or by altering values within its part of the blockchain, which is the equivalent of the hard disk in this computer analogy.

With this flexibility, most existing blockchain applications could be written inside and on top of Ethereum. For example, Namecoin could be implemented on Ethereum with the following contract code:

  1. if ![[0]]: # Is the key not yet taken?
  2.     # Then take it!
  3.[[0]] =[1]
  4.     return(1)
  5. else:
  6.     return(0) // Otherwise do nothing

It is easy to imagine how use cases such as crowdfunding or financial derivatives could be implemented based on Ethereum and smart contracts. Also voting mechanisms and all sorts of distributed organization structures are already popping up at the horizon. With the Ethereum client geth (which is written in Go) having an RPC interface and the Ethereum devs providing a JS library called web3.js to talk to geth, it is really easy to write apps that are interacting with the blockchain. Or to be more precise, apps that are talking to contracts that live on the blockchain. Applications that consist of a web/mobile/native based frontend and contracts living on the blockchain as the backend are called Dapps, distributed apps.

The genesis block of Ethereum’s production blockchain was launched on July 30th, 2015 using an interesting decentralized manner of creating this first portion of consensus. The current release is called Frontier and it is meant to be used by developers and early adopters. There is no GUI client yet, though Mist is already on its way and will probably part of the next release.

We have already tinkered with the blockchain, wrote our own contracts and got an impression of what Ethereum could be capable of – and we are quite impressed. There are already frameworks available which support coding of contracts and which we will talk about in our next blog posts.

So, after this short introduction, stay tuned! Practical Ethereum hacking hints coming soon!

Our NanoMCU arrived

by Jacob Dawid on July 13th, 2015
Comments Off

The NanoMCU is tiny, low-cost device featuring an ESP8266 SoC by Espressif Systems. At a price point of only 10 € (incl. shipping costs, price for 1 pc) this small all-in-one computer presents a strong offer. The technical specifications of the ESP8266 have been released to the general public by the chip manufacturer along with an SDK, which led to many different firmwares being developed within an extremely short amount of time. Hardware manufacturers developed similar devices like the MOD-WIFI-ESP8266-DEV by Olimex or the ESP8266 add-on module for Arduino.


The key features of ESP8266 based devices like the NanoMCU are the ready to use integrated WiFi chip, direct IO, low power consumption, low price and open specifications.

Developing for Ubuntu Phone

by 9elements on July 8th, 2015
Comments Off

Our Ubuntu Phone finally arrived! At the end of June Meizu released their latest Ubuntu Smartphone. With the MX4 being the first high-end Ubuntu Phone available on the market, we feel like we're ready for development.

Ubuntu Phone Meizu

Ubuntu Phone OS is using Qt as the development foundation framework, sporting QML, a brand new declarative language for designing state-of-the-art native speed applications capable of running on all major platforms. Speaking of today, we’re not sure if the Ubuntu Phone and QML will attract a larger market in the future, but it's a really exciting piece of technology. We have already experienced how ressource-efficient developing mobile apps with QML can be. In any case, we keep an eye on this interesting trend.

German Valley Week Review

by Sebastian Deutsch on June 12th, 2015
Comments Off

San Francisco

I just returned from my German Valley Week trip to San Francisco and the Silicon Valley. German Valley Week is an organized trip where entrepeneurs, investors and politicians from Germany visit disrupting startups ranging from new ones like Uber or Stripe to established companies like Google or Facebook. Each day we visited two or three companies and got an idea how they started, grew and eventually scaled out to unicorns.


The first thing you notice when visiting one of these companies is that they radiate a special company culture. Company culture is the most important thing besides having a great idea and kick ass engineers. John Collison puts it straight: "You want to work with enjoyable people. And nowadays companies don't hire the best talent. People are joining companies." A lot of these startups create workspaces that focus on self expressiveness and creativity. Some foster living a healthy lifestyle: most of them had a cafeteria that served fresh healthy food. The borders between working and living blur. Radiating the company values is important, so they have motivational posters or art in their offices. (Facebook: No problem at Facebook is someone elses problem).


All startups we visited try to keep their employees educated all the time. Teams present their learnings, often across departments. Sales learns from devs. Devs learn from sales. And it never stops. If you use the men's bathroom at Facebook there is a "Developer Learning Snippet" and a marketing update above or in front of the toilet. They have walls that reiterate what value means for their customers. They've streamlined the onboarding process for new employees to perfection. Most startups have multiple big infoscreens showing progress, traction and sometimes even sales data. This kind of communication embraces deep understanding of the business in all units.

Think big

There is a german rap song by Deichkind called "Denken Sie Groß" (Think Big). One line goes: "Don't build a terraced house, build a suburb... where you rule like a warlord. Think big!". It's true for everything that I've seen. Uber has big info screens that show realtime usage in every major city that they have expanded to so far. Facebook built a fucking Disney-esque campus to retain and entertain their employees. Sometimes a company has a very simple product - but it still takes a hundred engineers to improve it to stay ahead of the competition.


These were my key impressions. There was more like meeting great people like Andy Bechtholsheim, Tim Chang and many more. It was overwhelming and too much to put it in one blog post. Big thanks to Kathrin Zibis, Chris Tegge and Nathan Williams for organizing such a great event. Also thanks to Stefan Peukert and Tom Bachem for nudging me come with you. I would definitively do it again.


Go in Production

by Sebastian Deutsch on March 6th, 2015
Comments Off


Some of our projects are gaining traction lately. That's why we need to scale some parts of the infrastructure. 9elements started the search for a language that gives us more performance but that's also expressive and easy to write. Since Go is used by some high profile projects we decided to give it a shot.

Go is a very simple language: It is typed statically. It is garbage collected so you don't have to worry about memory issues. It has built-in support for concurrency. The most powerful feature is the absense of classic objects with methods. You have structs like in C. And you have functions that can have receivers so that they can operate on structs, but there is no direct concept of inheritance - though you can imitate it with anonymous fields. The most powerful concept are interfaces. Have you ever seen a bigger Java or C++ architecture where almost every class had an interface so that you can swap out the implementation. Go is like "Hey, let's get rid of the classes and just focus on interfaces!"

But Go also has some drawbacks: Coming from a Ruby background the language is not very expressive. You can do some meta programming using struct tags (it's like annotations in Java for structs) together with reflection, but the possibilities are limited. Especially if you're overusing struct tags your code becomes quite illegible. All in all I think that the pros weigh more than the cons so we decided to use it in production.

Since we're mostly building web applications it was a natural thing to build a web application. The next step was to check out the Go ecosystem to do so. We've taken a look at the following web frameworks:

  • Beego - Beego is a full stack web framework. It seems to be pretty popular but we were searching for something more lightweigt.
  • Revel - Same goes for Revel.
  • Martini - Martini is also one of the more popular Go web frameworks by Codegangsta. But it is abandoned by it's author due to that it's source is not very Go idiomatic.
  • Negrino - It's by the same author like Martini, but it is broken down to smaller components and written in Go idiomatic code.

Eventually we went with Negrino since it is lightweight and we didn't want to swap out a monolithic framework (Rails) with another monolithic framework. We wanted something small that does a few things really well. We went with GORM for the database management, which seemed to be the best object relational manager (didn't we say earlier doesn't have objects?) out there.

The application we've written is a small service that does autocompletion for German cities and ZIP numbers and it also provides the geolocations for it. We were able to drive down response times from 50ms to 7ms which is quite awesome. All in all it was a great experience to rewrite that service in Go and in the future we'll probably use Go as a great sidekick technology for Rails.

If you like what you're reading and you also want to play with these technologies - 9elements is hiring.

Using qt-pods to share your code

by 9elements on February 9th, 2015
Comments Off

Adding dependencies to your project can often be very painful, because technically there are many ways to include foreign code. In very simple cases you might just copy over code, in most cases you are going to link against a library and sometimes you have to compare whole feature sets of frameworks and make up your mind, if the implications imposed by that dependency are a good trade-off compared to the benefits.
From a developer’s perspective this is a nightmare. Usually you just want to add a certain ability to your app, whether it is to decode an audio format, communicate via SOAP, send mails, speak to a certain REST API or analyze images, or whatever you are in need of. Luckily, there is a guy on Github who did just what you need. Just imagine you could just click on a button and within seconds you would be up and running using his code. Scary? You might think so, but this is what qt-pods was designed for.
Calling qt-pods a package manager feels a bit odd, because this doesn’t describe precisely what it does. It is managing dependencies of your project via Git’s submodules. While Git submodules can be a tweaky thing in general and there are good reasons not to use Git submodules in all cases, qt-pods does its best to tell Git not to make any mistakes.

QT pods architecture
qt-pods works within a qmake’s “subdirs”-project template, that is a pool of projects aligned next to each other (well, technically you can tweak it not to be like that). “Pods” are being compiled into static libraries and are then linked against your target application. With a bit of .pri-magic (which is not magic at all, if you take a deeper look), pods can specify their own dependencies to the final app. As the pods are Git submodules, they are all independent repositories. That means, if you ever encounter foreign code to fail, you can fix it by yourself, but even better: you can generate patches or propagate these directly to the maintainer of the project. This is why the definition “package manager” fails, because what you actually get is not just an end product, a packaged result of some code, it *is* the code in a fully working environment. If included properly, the maintainer himself will include his code as a pod (from the same source like you, actually) and embed into a test project.

QT pods list
In order to get you started quickly, I sat down and defined fixed rules based on my previous experiences and then wrote an application that you can use to manage your pods. There is a graphical user interface and a command line version (which still needs some development).

You can find qt pods on GitHub and on

New project: OECD Data Portal

by Mathias Schäfer on September 8th, 2014
Comments Off

In July, we have launched a new client site, the OECD Data Portal. The OECD is an international organization that analyses national economies to coordinate the policies of its member states. The OECD conducts well-known studies like PISA and publishes reports and statistics on social and economic topics.

Data Portal home page

The goal of the Data Portal is to ease access to OECD publications and statistical databases. It is a central gateway to all OECD data for the broad audience, as well as for researchers and journalists. The concept and design for the Data Portal was developed by Raureif and Moritz Stefaner.

Data Portal: Country dashboard

A key component of the Data Portal is the visualization of economic and social country indicators. Using different interactive charts, the user can query and visualize a large amount of statistical data. For each country, a dashboard gives a quick overview for comparison. Each chart and country overview can be shared on social media and embedded into other websites. It’s easy to access the source database, find related studies, and download the underlying data.

9elements developed the HTML and CSS for different page types, and the JavaScript application for the chart component and query interface. The chart component uses the D3 and d3.chart libraries to render interactive SVG data graphics in the browser. Currently three types of visualization are available: bar chart, line chart, world map and an accessible table fallback. On the country dashboard, there are three additional custom charts to visualize income inequality, PISA ranking and CO2 emissions.

Our work fits into the existing OECD IT infrastructure, for example OECD’s content management system and the .Stat data querying API. The OECD editors select and configure the charts per indicator to render a meaningful chart.

The Data Portal is still in the beta phase and we’d love to hear your feedback. In the next months, several features will be added. Among others, we’re improving the mobile usability and we’re adding small charts to the topic, country and search result pages. We would like to thank the OECD staff as well as Raureif and Moritz Stefaner for the great cooperation!

→ Browse the OECD Data Portal

Developing a custom watch face for Android Wear

by Sebastian Deutsch on July 9th, 2014
Comments Off


The brand new Samsung Gear Live has arrived and we took the time to play with it and more important to develop something for it. For a head start into Android Wear development you should check out the official docs and this Video from the latest Google IO. When we take a look at the watch faces we found them hideous and not very digital. So we sat down and implemented our own watch face - unfortunately the official docs are covering that topic. But digging around we found this Reddit thread which explained that it's not too difficult to modify you AndroidManifest.xml so that your activity can be used as a watch face. The code is freely available on Github and if you have questions you can ping us on Twitter.

You can download the watch face for free in the Google Play Store.