Brave 3.0 - Part 4 - Technologies behind and final series recap

January 31, 2020

Archive

Mariusz Smenżyk

10 min

Brave 3.0 - Part 4 - Technologies behind and final series recap

We are a Python & JavaScript software development company with experience in building dedicated apps based on Django. We wanted to have a customizable website that we can improve day by day and where marketing people can edit content in a convenient way.

There are tons of available Content Management Systems...

Why have we decided to use Django-CMS?

Brave 3.0 - Part 4 - Technologies behind and final series recap

Django-CMS is a modern (and quite different than WordPress) CMS used by companies such as:

  • National Geographic
  • NASA
  • Parrot
  • PBS
  • AAMC
  • Salt.
  • L'Oréal Paris

For now, it is a mature piece of code written in Python. Django-CMS has over a dozen built-in plugins. We can easily build our own, and that is another factor why we decided to use this software.

We need to know that there is no perfect CMS. Sometimes WordPress will be enough, but as far as we are Django enthusiasts, it was easier to use our favorite language and framework.

Why monolithic?

Brave 3.0 - Part 4 - Technologies behind and final series recap

How many times have you been asked about generic SEO? Whenever you hear it - ask yourself either you have monolithic or “modern” frontend app built-in with React.js/Angular/Vue.js?


If you forget about SEO before programming, you will have a lot of problems with hacking your software to work correctly for generic SEO, e.g. you will have to use the Server Side Rendering techniques. Our previous website was built with Angular2. From the SEO point of view, it was a big mistake. Owing to the fact that we have lost one year of generic SEO (sic!), Angular wasn’t the best choice for that kind of website.

Technologies and tools around the website

Building the website is not only about marketing communication, mockups, wireframes, designing, and coding. There are tons of libraries and tools which enable us to build a highly performed website. If you don’t know them yet, you can check them now:

DockerHow many times have you been asked about generic SEO? Whenever you hear it - ask yourself either you have monolithic or “modern” frontend app built-in with React.js/Angular/Vue.js?


If you forget about SEO before programming, you will have a lot of problems with hacking your software to work correctly for generic SEO, e.g. you will have to use the Server Side Rendering techniques. Our previous website was built with Angular2. From the SEO point of view, it was a big mistake. Owing to the fact that we have lost one year of generic SEO (sic!), Angular wasn’t the best choice for that kind of website.

Technologies and tools around the website

Building the website is not only about marketing communication, mockups, wireframes, designing, and coding. There are tons of libraries and tools which enable us to build a highly performed website. If you don’t know them yet, you can check them now:

Docker

Brave 3.0 - Part 4 - Technologies behind and final series recap

mple website, simple database, simple server setup… sure but maintaining it without Docker is a simple way to spend more time on DevOps rather than on coding new features. Thanks to Docker, programmers can easily install and start development with-in 5 minutes of work.

Sentry

Brave 3.0 - Part 4 - Technologies behind and final series recap

A project without events logging is a brutal thing, especially when something wrong happens on your server, in a backend, or frontend app. Therefore, you can use Sentry which monitors your application and notifies you when your app breakdown.

Newrelic

Brave 3.0 - Part 4 - Technologies behind and final series recap

Have you ever had a problem with bottlenecks on your website/app performance?
If yes, you need to check the powerful Newrelic platform. In the free plan, you can easily monitor common problems on different layers, such as databases, external services, etc.. In a paid plan, everything around performance problems is very easy to find and analyze.

Cloudflare

Brave 3.0 - Part 4 - Technologies behind and final series recap

We want to have a website that loads quickly from every place in the world. It is not only about our performance obsession. It is about malicious traffic, caching, and attacks. The Cloudflare free plan gives us everything that we need to start. If you want some extra features like image resizing (which is a very cool feature), you will have to pay for the Business plan.

Brave 3.0 - Part 4 - Technologies behind and final series recap

Hotjar

Brave 3.0 - Part 4 - Technologies behind and final series recap

Our goal was to transform the company image into a focused Python / TypeScript software development company by creating a more user-friendly and efficient website.
However, how can we check what is wrong when the users left our page just after they opened it? The answer is a Hotjar platform. It is a useful tool to analyze users’ behavior and catch the weak points of the website.

Iubenda

Brave 3.0 - Part 4 - Technologies behind and final series recap

Iubenda enables us to generate policies around tools that we use on our website. Thanks to it, we don’t have to spend time updating our website policies when we add or remove some of the tracking tools, e.g. FB Pixel. Iubenda is a low-cost and simple solution which identifies external tools around the website and generates documents that we need to include. Additionally, you can customize pop-up themes, colors, and layout.

Brave 3.0 - Part 4 - Technologies behind and final series recap

GTM

Brave 3.0 - Part 4 - Technologies behind and final series recap

Google Tag Manager is a powerful wrapper to place additional external services on your website. We use it for Google Analytics to measure the website performance as well as for a Facebook Tracking Pixel. From the developer’s point of view - GTM is a three line code. From a marketing point of view, it is a very easy way to implement a new tool without interfering with any line of code on the website.

Facebook Tracking Pixel

Brave 3.0 - Part 4 - Technologies behind and final series recap

Yes, we have and we want to display our services advertisements on Facebook to potential clients who were browsing our website someday ago. For now, we are only gathering the data. Remarketing is in our Marketing Plans for 2020, so if you see our advert someday, it will be because you’re reading this article now :D

A few words about SEO

Brave 3.0 - Part 4 - Technologies behind and final series recap

As was mentioned, our previous website was based on Angular2. We thought that the modern frontend framework will allow us to build a lightweight website. However, the effects were very bad. Our SEO measurements decreased to zero, ajax-loaded content was invisible for search spiders, and the bounce rate was 95%. We have learned a hard lesson, but now our new website has everything that we need to do marketing better. Everything on our page is rendered by the backend. Technical aspects such as metatags, og:tags, and good performance for desktop and mobile are very important to start thinking about SEO or content distribution.

What does performance look like?

Brave 3.0 - Part 4 - Technologies behind and final series recap

Everyone knows that slow sites do not sell. We wanted to have a CMS, so we needed to use a database that is often a performance bottleneck. Therefore, we use some tricks to improve performance:

  • Redis cache
  • Cloudflare cache
  • Optimized templates (e.g with a statement in Django)

PWA - Web Progressive Apps

During the development process, we decided to adjust the setup in order to use our website as a PWA application. Hopefully, we have found the Django app, which could handle everything that we needed to start. The Django app allows us to set up every PWA option via Django settings. Here, you can find out more information.
Some time ago, we wrote an article about PWA, where you can read about the advantages and disadvantages of the approach of doing mobile apps. If you want to see more examples of using PWA in action, please visit our partner’s site: https://onilab.com/blog/20-progressive-web-apps-examples/.

Pros & Cons of the tech stack

The transformation of the website enabled us to meet our marketing and performance assumptions. Of course there is always room for improvement. We are aware that we use a niche CMS and that for typical websites, Python is less popular language than PHP, so from my perspective:

Pros

  • Modern and customizable CMS
  • Complete website - not only a simple page but with full of marketing tools
  • We can improve things really fast


Cons

  • Niche CMS with fewer plugins than WordPress

Plan for the future development

Brave 3.0 - Part 4 - Technologies behind and final series recap

From the beginning, we have been using an Agile approach. After a few weeks of development, we have published the first version of the website. Since than, we have been deploying improvements almost day by day.

For now, we are going to develop and polish some unfinished modules, and then we will start to improve the content quality.

Summary

We decided to build the website ourselves. However it was not easy to make this decision. There is a belief that Software Houses cannot build their own website because of a lack of agreement during the designing process. Yes, it was difficult to ensure that everyone, who was involved in the project, is on the same page. Moreover, there are always commercial projects to do.Therefore, the internal projects are often put aside. One of the biggest challenges is to always set objectives and priorities. As a manager, you need to be sure that you will find time to manage the in-house project.
Finally, we haven’t decided about the project’s deadline. We assumed that the project should be improved continuously. We finished core development and now we are focused on the content and quality improvements.

You need to remember that tools around the bravelab.io are very helpful in building custom web applications too.
If you want to improve your app please,let us know, we will help you.

Stay connected

Don't miss out on gaining more insights – opt-in to our monthly newsletter, and stay ahead in the ever-evolving world of music technology!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

By submitting this form, you confirm that you have read and agree to the Terms & Conditions.

Need help?

No matter if you are just getting started or have an advanced concept - reach out to us and let's discuss.

Maciej Dulski

Maciej Dulski
Senior Business Consultant

In need of software development?

At Brave we specialise in Web Software Development. We wiil help you to get your project done.

CONTACT

LET’S TALK

FILL IN THE FORM BELOW, OR REACH OUT TO US DIRECTLY — OFFICE@BRAVELAB.IO

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.