Under The Hood

How we engineer our applications.

Keeping up with the latest technologies in the rapidly changing world of web development can be challenging. You hear terms such as “single-page application”, “API” and “open source software”. If you're working with a software agency to develop a product, it’s important to have an understanding of what these terms mean and to have an idea of what’s going on under the hood of an application. Of course, you don’t have to understand every detail (that’s our job!) but it really helps communication if you grasp the basic concepts. How do backend and frontend tie together and become the secure, scalable, beautiful application you want us to build for your business?

How we stay on top of it all.

There are countless tools, libraries and technologies out there; staying ahead of things, even for us developers, can be a challenge. We try to avoid using the very latest cutting-edge tools (there’s a lot of risk and bugs working with unproven technology) but to stay just behind the curve and use modern libraries and frameworks that are well-supported, have widespread industry adoption and great developer communities.  Over the years, we have developed a consistent stack of basic libraries which allows us to build software efficiently and in a way that everyone on the team understands. To keep our development strategy aligned, we share ideas and knowledge on a daily basis among the dev team and have regular dev meetings to discuss interesting tools and libraries in more detail.

Open source software (OSS).

All of the software and tools we use to deliver a product are open source. So what does that mean?

OSS is software of which the source code is openly available to everyone to read and to make improvements to. Working on open source software essentially means collaborating with the entire dev community around the globe. It’s a wonderful feeling to be part of, and contributing to, this worldwide collaborative community. The main reason for using OSS from a technical point of view is security and quality. All developers that use the software need it to work well and securely, so bugs are normally fixed quickly by someone in the community. Furthermore, using open source software gives a lot of flexibility. If there’s a particular feature missing, a developer can dive into the code and make any improvements necessary. All code changes will be reviewed by other contributors before it gets merged into the codebase. To be clear, the app we’re building for your business won’t itself be open source. We just use open source software and tools to realise the app that will be your intellectual property.

The DabApps development stack.

There are two main design patterns for web apps: multi-page application (MPA) and single-page application (SPA). Our stack has gradually moved from MPA to SPA, though both approaches are equally secure and scalable.

Multi-page application.

Since 2010, we have been using Django (written in Python) as a framework to write web applications. Django is well supported, relatively easy to learn, secure and offers a lot of flexibility. In the early days of DabApps, we used Django to both fetch the data, and prepare it for display to the end-user. With this approach, we were writing multi-page applications. Such an app relies on the server to do all the hard work. When going to a URL, such as https://mysite.com/, a request is made to the server. The backend does its magic, possibly talking to the database, and finally sends back a complete web page to the browser. The only responsibility of the browser is to display the web page. Every time a user visits a different page of the app, the browser sends a request to the server and displays the response. This is why an app that works in this manner under the hood, is called a multi-page app.

Single-page application.

Even though MPA’s are still a sensible approach to use in many cases, it seems that the community has been moving towards a different approach to web development, where the server is doing less of the work, and more work is done in the browser.

A single-page application initially retrieves all of the code with a single page load and any added information is dynamically loaded to the page. Any interaction with the database will happen asynchronously in the background and the page never needs to reload. This makes apps much faster and greatly improves the user experience.

Navigating to different URLs in a single-page app won’t trigger a request to the server, instead the frontend will work out which bits of the app to render. Requests to the server are only made to create, retrieve, update or delete data from the database. The backend can be seen as a machine that takes and returns data, and no longer needs to generate the entire page. For the backend, it is sufficient to write an API (Application Programming Interface), an interface that lives on the server and only knows how to input and output data. But for the frontend, we now need a bigger development framework. 

React and React Native.

Single-page apps enable interaction styles and user experiences that are impossible on a multi-page app. Furthermore, for businesses that want to create both a web application and a mobile app, the single-page app approach is the way forward. By letting the backend purely focus on handling data, we can use (almost) the same API for both mobile apps and web apps. At DabApps we’ve adapted, hiring more Javascript developers (the main programming language that frontend frameworks are written in) and developing our stack. We mainly use Django REST framework to write API’s to take care of the data in the database, and use React on the frontend for web apps and React Native for mobile apps.

The best thing about React Native is that we only need one codebase (mostly) to create an iOS and Android app at the same time. There are 'hybrid' apps, where you also have one codebase, but the UI (user interface) is not native and the feel of the app can be quite different to native apps. With React Native we can build real mobile apps that are actually indistinguishable from native iOS and Android apps.

As we are a software development agency working with lots of different clients, our developers often need to switch between projects. Applying our knowledge and way of working with mobile apps to web apps, greatly helps us to be able to change headspace quickly. So using React for our web apps and React Native for mobile apps was an obvious choice. But React is a great Javascript library for many more reasons: There is a great support community, the code is organised in nice reusable components, which makes the code easy to maintain, and most important for the end user, apps look slick and load fast.

Summary

We hope this blogpost gives a clearer picture of how we engineer our applications at DabApps. We’ve covered a lot in this post, so let’s quickly recap;

The tools and libraries we use to deliver a product are open source software. This is software of which the source code is openly available to everyone to read and to make improvements to, which guarantees security and quality of the software we deliver.

Our development stack in the early days was using Django (written in Python) to write multi-page applications. Django would both fetch the data, and prepare it for display to the end-user. The only responsibility of the browser was to display the web page.

Nowadays, we write single-page applications as they enable interaction styles and user experiences that are impossible on a multi-page app. A single-page app is structured in such a way that the server will function as an API, an Application Programming Interface, that only knows how to input and output data. All the hard work of rendering UI (user interface) components on the frontend are now handled by the browser. We use Django REST Framework to write these APIs, and React for our front-end engineering of custom web applications.

Furthermore, we use React Native to build real mobile apps that are indistinguishable from native iOS and Android apps, using one codebase for both platforms. For both mobile apps and web apps, we can use pretty much the same API to handle our data in the background.

If you have any questions or want to know more, please don’t hesitate to contact us at hello@dabapps.com