What are some exceptionally well-designed open-source projects to study? Part 1

Care to share?

There’s no doubt about the role of Open Source, which is that Open Source projects are often a catalyst for change. Community driven development allows people to experiment and try new technologies. Actually, as the projects are not commercially driven, the only motivation of contributors is usually achieving excellence, learning new things, and proving themselves as developers and architects. 

Take an example I saw pretty often in my career: say, you’re doing a legacy platform development at work, but are a passionate software developer at heart. You are probably going to want to contribute to some products, libraries just to be around like-minded people and to feel that you are developing your career. In my view, going through those steps is the best way to do just that and learn a whole lot while you’re at it.

An enterprise investing in Open Source also wins – being the first at a table of innovators shows that you are able to develop your own people. It will also allow you to build your brand and give you an innovator reputation. That’s’ why we used to habitually encourage our people to be part of the open-source community at Divante.

In the CTO-CTO podcast, I speak to a lot of Open Source founders so I thought I could share some of the most interesting projects that prove that Open Source has true business value. The examples I would like to show are at the same time also exceptionally well-designed so by contributing to those you can develop your skills designing enterprise-grade software.

Rocket.Chat case study

Rocket.Chat is not an “Open Source Slack”. It’s much more than that.

Why Open Source is so important to our DNA and business model: Rocket Chat founder Gabriel Engel

With organizations like Audi, Deutsche Bahn and even the U.S. Navy using it, we’re discussing all sets of different use cases:

Sometimes the use cases are about how they tuned Rocket.Chat or changed slightly for a specific industry. For instance there is one that is really cool. When I was in the UK, we built a Rocket.Chat version that was designed for tutoring children. These kids didn’t have enough money to pay for tutors. So if they were not doing well at school or in their studies, they could join these websites, fill out their profile and they would be added to channels with teachers who were volunteers helping children in need with their homeworks and assignments.

So we used these APIs to automatically create this student-teacher pairing. And then we put those two people in the same room together. At first they thought,why not have this on Zoom? But turns out this type of relationship is much more text-based. Students want to take a picture of their homework, send it to the teacher, etc. And because you’re talking about kids, they need to be able to have a complete auditing trail and auditing tools of all the conversations from teachers and students. They needed to have full privacy from the external world about the data of the kids that are being there. So it was one of those scenarios where we never thought about this, but Rocket Chat turned out to be the perfect tool.

Being a software developer or architect – studying Rocket Chat you can learn a lot including:

  • Web-socket’s based real time communication,
  • designing extensible, customizable application architecture,
  • maintainable, upgradeable package architecture,
  • audio-video communication,
  • building desktop JS applications with Meteor.

More information about Rocket.Chat

Next.js case study

If you’re a React developer, then Next.js is probably the best place to learn all the new trends and techniques regarding frontend development. They started around Vercel (previously Zeit) enabling people to make most of their JAM stacks long before this got popular.

Next.js, Open Source and Google: Next.js lead, Tim Neutkens

Then they enabled the serverless extensions/API’s, mixed models (server generated + server rendered). At the moment, by closely working with Facebook and Google Next.js is probably the easiest way to improve the Web Vitals scores for your frontend works. They even support experimental features like React Server Components.

We work together with a bunch of open source projects. […] For example we’re working with the Google Chrome team where they have a bunch of people working with Next.js to improve the WebVitals metrics. […] We’ve introduced Next Analytics letting you track and improve metrics like Largest Contentful Paint […] that really helps improve performance and improve conversion rates.

The framework is being developed at a rapid pace. Some of the coolest features include mixing SSR and SSG:

This year we spent a lot of time on making static site generation really good [..] providing more features than you would generally get from a static site generator […]. We regenerate the pages, we could also enhance them client-site. […] So we introduced this thing called preview mode where you can […] bypass the static generation and just get an immediately rendered page.

Some of the techniques you can learn from contributing to Next.js:

  • React server-side rendering,
  • Stale While Invalidate caching techniques,
  • Using advanced React techniques (including suspense/smart fetching, Server Side Components, etc)

More information about Next.js

This was just the first part of the blog cycle we planned around Open Source. Did you enjoy this story? Please let us know in the comments below so we can prepare part 2, which is going to revolve around Strapi.js, MeiliSearch, and some other really cool projects.

Published February 3, 2021