In July 2018, a big part of the Ralabs team visited Odessa.js – the largest Ukrainian conference for JavaScript developers. The company co-founders, CEO Andrew Yasynyshyn and CTO Roman Rodomansky, shared some secrets on how to create the modern media on Hromadske.ua example. But don’t be sad if you missed the speech. You can watch the full presentation or read the most interesting ideas right here.
Ralabs & Hromadske
Andrew Yasynyshyn: Few words about the company. Ralabs is two years old. We have over 50 engineers in the team and develop JavaScript almost exclusively in Ukraine. Also, we have a small Data Science (Python) team, as well as UX / UI designers. Ralabs works not just with the media and Ukrainian projects, but with IoT, FinTech, and Mobile App Development projects, too.
In September 2017, our team decided to compete for a tender on Hromadske website development. Why was it important to us? We share their ideas of transparency and objective journalism that we really need nowadays. Even Elon Musk want to create a resource for credibility testing of journalists and media. You could read about that recently on his Twitter page.
Hromadske.ua takes into account our information needs. Compared to many other Ukrainian media that subordinate to politicians or oligarchs, this is a great achievement. Also, it is the first independent media that have its own satellite broadcast, and it is the only informational BBC partner in our country. So, it was our priority to work with Hromadske, and we made a great effort to get this project.
Research
Roman Rodomansky: Hromadske.ua has over 2.5 million unique users every month, and each of them spends on average 1.5 minutes on the website. From the beginning of 2018, journalists have published 52,000 minutes of different video-stories, and that is equal to four hundred movies.
Before making an offer to a big high-load project, you need domain knowledge and a solid analysis. Our research covered Ukrainian and global media markets. Choosing the tech stack, we relied on our technical experience and future of internet technologies. Also, we took into account the positive experience of successful media resources. Finally, we chose right and scaling architecture approach and stack.
Hromadske.ua released the current website four years ago. Of course, the full technical stack protected by NDA. But we can say the platform was built on Ruby On Rails; all video is hosted on YouTube, static files – are on the Amazon S3. They don’t have any trend technology in the front-end, too.
Competitors
Roman Rodomansky: ICTV, one of Hromadske’s main competitors, for example, has 8.5% of the Ukrainian media market, but their website is written on the WordPress. In the front-end, they have jQuery and libraries like jQuery. The same story about other popular media like 1+1, TV channel “Ukraine” etc. – mostly Ruby or PHP.
Global media like BBC have more interesting technologies. There can be Angular or even React sometimes. But this kind of media usually closed to the third-party developers. You cannot find any technical architecture description of their websites. Smaller media are more open. Meduza, for example, runs a blog on the Medium. They told about some problems they had during the development, explained, why they chose React, etc. You can ask the company’s CTO for a Skype-call.
Technical stack
Andrew Yasynyshyn: After our research, we chose JavaScript-everywhere stack. Node.js might be faster, but only if we talk about executing only one stream. Obviously, Go is faster but only when you facilitate all of its concurrency and parallel execution capabilities. Go is a leader in Scalability and Concurrency, too. If we talk about Error Handling, all languages have mostly the same qualities.
As for a Learning Curve, you will need to learn some new Go concepts. To master Ruby and Ruby On Rails, you will have to spend time on meta-programming. And the last one is Availability of developers. It is hard to find Go-developers today. Python-specialists all interested in Data Science, while Ruby-styles are looking toward Elixir or Crystal. So, we choose Node.js and Koa.js.
Scalability & traffic
Andrew Yasynyshyn: Scalability is another important question for the media. As an example, on September 9, 2001, after the tragedy in New York City, many informational sources collapsed in the US. The same thing happened once with both Meduza and Hromadske.ua, too. So, a media website need to give traffic to millions of users as well as to few of them. Every millisecond of downloading is a lost user.
Roman Rodomansky: Hromadske has 60% of organic traffic that comes from Google and social networks. When you transfer the website to a single page application (SPA), you lost incoming traffic up to 30%. There are many simpler solutions, such as Prerender.io, for example. This is a middleware between your app and a client, and it is working over some browsers like Phantom.js.
Next.js has a Webpack, React / Redux, Babel, built-in Routing with a simple configuration. If we give the SPA to React or Angular, search engines like Ask or DuckDuckGo can also generate some extra traffic. If you write on Vue.js, Nuxt.js will work; if you use Angular, you can choose Universal, Rendr.
In the case of .js, we give a user a generated and cached by HTTP page. There we have a benefit – Next.js gives SPA for every next transition. It means when a user moves from page to page, navigation is provided by a single page application.
Koa & administrative panel
Andrew Yasynyshyn: What do I like about Koa? It is minimalistic and can be used for microservices. It is modular, and every next module can be connected as a separate package. As for benefits – it’s much easier to define custom middleware comparing to, for example, Express.js. Also, comparing to Express.js, I really like how Koa solves the callback hell using generators in the previous version, and now using Async/await. But for a media website, you will need also Facebook Pixel Articles, different metrics, scroll maps, heat maps etc.
The administrative panel must be clear and convenient because it can save a lot of time for editors. You can find Medusa’s example here. It shows that even experienced developers can make mistakes. You can see how they fixed these mistakes and improved the admin panel with publication planner, autosave, a better editor and so on.
Conclusion
Roman Rodomansky: As you can see, it is really important to make a deep research before the project, it will be your base for the best results.
We had a task to get high traffic as cheap as possible. According to our prices, infrastructure will cost about 600 euros, and that is quite cheap in this case. If we had a bigger budget from the client, we would have used Serverless that saves time for developers.
Want to know more? Here are our previous works.
