Full-stack web development using Django REST framework and React

Abstract

The purpose of this thesis was to investigate Finnish Esports League’s (FEL’s) web service and how it could be split into two separate services. FEL’s old service is on WordPress, which consists of two different sides, a news site and a tournament platform for Esports players. The goal of the split is to ease further developing of the service and maintenance. Secondly, this study investigates full-stack development and frameworks chosen for the new project.

A full-stack developer is an expert who understands every aspect of the stack (toolset). Full-stack developing has been gaining popularity and stacks such as MEAN (MongoDB, Express.js, AngularJS, Node.js) have been favoured for their uniform programming language.

A new service was built with Django REST framework. Building a complete service can be achieved with Django only, but the development team wanted to separate server and client side. Therefore, REST was used for back-end, and the front-end application was created with React, which connects to back-end using REST API.

The project did not end while writing this thesis, but the development continues. As an experience, working with Django REST was smooth. Splitting up server and front-end development was a good decision and it made developing easier and helped to manage the project. Because frameworks were new for the developers, getting to know them was time consuming.

Insinöörityön tarkoitus oli tutkia Suomen Elektronisen Urheilun Liigan (FEL) verkkopalvelua ja sitä, miten se toteutettaisiin uudelleen jakamalla palvelu kahteen erilliseen osioon. FEL:n verkkopalvelun vanha järjestelmä toimi WordPress-kehyksellä ja sivusto koostui uutissivustosta ja pelaajille tarkoitetusta turnauspalvelusta. Jaon tarkoituksena oli hakea helpotusta jatkokehittämiseen ja ylläpitämiseen. Samalla insinöörityössä tutkittiin, mitä on full-stack-sovelluskehittäminen ja mitkä sovelluskehykset valittiin uuteen projektiin.

Full-stack-sovelluskehittämisellä tarkoitetaan, että sovelluskehittäjä hallitsee ohjelmistokehitysprojektin jokaisen osa-alueen ja kehitystyökalun. Full-stack-kehittämisestä on tullut suosittua, ja valmiita kehyspaketteja, kuten MEAN (MongoDB, Express.js, AngularJS, Node.js), suositaan niiden yhtenäisen ohjelmointikielen vuoksi.

Uuden järjestelmän palvelinpuolta alettiin rakentaa Django REST -kehyksellä. Django-kehyksellä verkkosivujen luonti onnistuisi yksistään eikä vaatisi muita kehyksiä, mutta kehittäjät halusivat erottaa palvelinpuolen kokonaan käyttöliittymästä. Siksi selainpuolen näkymien hallintaan otettiin käyttöön React-kehys, jolla on helppo luoda itsenäinen ohjelmisto vain käyttöliittymää varten. Se ottaa yhteyden palvelimeen REST-rajapinnan kautta.

Lopullinen järjestelmä oli insinöörityöraporttia kirjoitettaessa vielä kesken ja sen työstäminen jatkui. Kokemuksena Django REST- ja React-kehyksillä työskentely oli sujuvaa. Palvelin- ja selainpuolen ohjelmiston jakaminen erilleen oli hyvä ratkaisu, ja se helpotti kehittämistä ja ylläpitämistä. Koska kehitysalustat olivat kehittäjille uusia, ongelmia esiintyi lähinnä vain uusien kehyksien kanssa työskentelyssä. Uusiin kehyksiin tutustuminen vei kehityksessä aikaa.