Optimizing web development workflow

Abstract

The goal of this final year project was to research different JavaScript-based tools and techniques from the perspective of optimizing the different phases of web development. Node.js, a JavaScript runtime environment, and its principles were also examined in this project, as it serves as the basis for most of the tools introduced in the project. The purpose of the project was to compare the traditional and modern web development workflows, from scaffolding a new project to transferring the application to the production server, and to research which problems the modern tools are trying to solve.

In the traditional workflow most phases include manual, repetitive tasks, that tools such as npm and Gulp are trying to run faster and more efficiently. Tools that provide optimization and automation to web development were compared in the project. These tools were divided into three sectors: dependency management tools, task runners and scaffolding tools that help start a new project.

The end result of this project, namely, a collection of tools suitable for developing a single-page application was selected. The selected tools were the development dependency management tool npm, front-end dependency management tool Bower and task runner Gulp. A setup eliminating the need to running different recurring tasks manually was created for these tools. The functionalities of these tools were also integrated, for example the front-end dependencies managed by Bower were collected and concatenated to a single file with a Gulp task. Other Gulp tasks provided among other things a Node.js development server, with which it was possible to develop and test the application with multiple devices in real time, and a way to build and deploy the production version of the application with just a few commands.

During this research it was noticed that the progress of modern development tools is extremely fast, as new tools are being introduced on a weekly basis. It takes effort to try to keep up with the progress, but the most important thing is not to learn the differences of each new tool, but rather to understand the underlying concepts and principles of those tools, and which problems are they trying to solve.

Insinöörityön tavoitteena oli tutkia moderneja JavaScript-pohjaisia työkaluja ja tekniikoita verkkokehityksen eri vaiheiden optimoinnin näkökulmasta. Työssä selvitettiin myös Node.js-ajoympäristön toimintaperiaatteita. Node.js toimii lähes kaikkien työssä esiteltyjen työkalujen pohjana. Työn tarkoituksena oli vertailla perinteistä ja modernia verkkokehityksen työnkulkua aina projektin aloittamisesta lopputuotteen siirtämiseen tuotantopalvelimelle sekä sitä, mihin ongelmiin uudet työkalut yrittävät löytää ratkaisuja.

Perinteisessä työnkulussa suuri osa työvaiheista sisältää manuaalisia, toistuvia tehtäviä, joiden nopeampaan ja tehokkaampaan suorittamiseen sellaiset työkalut kuin npm ja Gulp pyrkivät. Insinöörityössä tutkittiin ja vertailtiin työkaluja, joiden avulla verkkokehitystä voidaan optimoida ja automatisoida. Vertailtaessa työkalut jaettiin kolmeen osa-alueeseen: verkkosovellusten riippuvuuksien hallinnan työkaluihin, tehtävänsuorittajiin ja projektin aloittamista tukeviin työkaluihin.

Insinöörityön lopputuotteena valittiin SPA-arkkitehtuuria (single-page application) noudattavalle verkkosovellukselle sopivat kehityksen eri vaiheita tukevat työkalut. Valitut työkalut olivat kehitysriippuvuuksien hallintatyökalu npm, front-end-riippuvuuksien hallintatyökalu Bower ja tehtäviensuorittaja Gulp. Työkalujen käyttöä varten luotiin myös kokoonpano, jonka avulla toistuvien tehtävien manuaalisesta suorittamisesta päästiin eroon. Kokoonpanon avulla valitut työkalut ja niiden toiminnot saatiin lisäksi integroitua: esimerkiksi Bowerin avulla hallinnoitavat front-end-riippuvuudet saatiin koottua yhteen tiedostoon Gulpilla suoritettavan tehtävän avulla. Gulp-tehtävien avulla saatiin lisäksi aikaan muun muassa Node.js-kehityspalvelin, joka mahdollisti sovelluksen kehittämisen ja testaamisen reaaliaikaisesti monilla eri laitteilla, ja sovelluksen tuotantoversion automaattinen kokoaminen sekä siirto tuotantopalvelimelle muutaman komennon avulla.

Insinöörityössä huomattiin, että työkalujen kehitystahti on erittäin nopea: uusia työkaluja luodaan viikoittain. Kehityksen mukana pysyminen vaatii vaivannäköä, mutta tärkeintä ei ole opetella työkalujen eroja, vaan ymmärtää niiden konsepti ja periaatteet sekä se, mihin ongelmiin ne kehittäjälle tarjoavat apua.