Zeven onmisbare tools voor professionele webdevelopment

Bij het in teamverband ontwikkelen van moderne websites en webapplicaties komt een breed scala aan complexe activiteiten kijken. Om het veelzijdige ontwikkelproces te ondersteunen bestaan er gelukkig heel wat handige tools voor webdevelopment. In dit artikel kijken David en Floris naar zeven soorten tools die het ontwikkelen van een digitaal product in teamverband makkelijker maken.

1. Versiebeheersysteem voor de broncode

Voor het in teamverband ontwikkelen van websites en webapplicaties is een flexibel en betrouwbaar versiebeheersysteemabsoluut noodzakelijk. Daarin wordt de huidige versie van alle broncode van het project opgeslagen. Maar niet alleen de huidige versie, ook alle eerdere versies. Zo is eenvoudig na te gaan welke wijzigingen er in het verleden hebben plaatsgevonden en kunnen eerdere versies geïnspecteerd en desgewenst hersteld worden.

Ook bieden moderne versiebeheersystemen de mogelijkheid om verschillende wijzigingen van meerdere teamleden aan eenzelfde onderdeel van de broncode grotendeels automatisch “in elkaar te schuiven”. En wanneer dat om wat voor reden dan ook niet mogelijk is, helpt het systeem om de wijzigingen alsnog handmatig toe te passen.

Binnen Inspire maken wij gebruik van GitHub.com. Vrijwel al onze andere ontwikkeltools koppelen met deze serivce en het staat dan ook centraal in ons ontwikkelproces. GitHub biedt een verfijnde webinterface rondom het door de bedenker van Linux ontwikkelde Git versiebeheersysteem. Git heeft de laatste jaren snel aan populariteit gewonnen ten koste van andere systemen als SVN en CVS, omdat het ontwikkelaars in staat stelt om gemakkelijker met elkaar samen te werken.

Tools voor webdevelopment

GitHub is een betaalde service voor commerciële activiteiten, maar biedt kosteloos ruimte voor open source projecten. Een open source alternatief voor het GitHub platform is GitLab, dat deels in Nederland wordt ontwikkeld. Het biedt de mogelijkheid om via een webinterface zelf broncode te hosten en beheren.

Wijzingen broncode

Met behulp van kleuren maakt GitHub snel inzichtelijk wat er in een bepaalde versie aan de broncode is gewijzigd.

2. Continuous Integration & Deployment

Een testgedreven ontwikkelproces (‘test driven development’) draagt bij aan de stabiliteit en de kwaliteit van de te realiseren website of webapplicatie. Met deze aanpak schrijven programmeurs éérst softwarematige tests en pas dan de eigenlijke broncode. Zo fungeren tests in feite als specificaties en helpen ze bij het uitwerken van de beste oplossing.

Als er eenmaal een aantal tests is geschreven, dan is het wenselijk om de tests automatisch uit te voeren zodra de broncode in het versiebeheersysteem wordt gewijzigd. Zeker als meerdere developers tegelijkertijd aan één webapplicatie werken, kan het enorm helpen om min of meer direct te weten of een wijziging per ongeluk een fout in het systeem veroorzaakt. Een Continuous Integration (CI) systeem helpt daarbij.

"Met deze aanpak schrijven programmeurs éérst softwarematige tests en pas dan de eigenlijke broncode. "

Er zijn online diverse CI oplossingen beschikbaar. Tools als Codeship.io, Wercker, Semaphore en CircleCI monitoren het versiebeheersysteem op wijzigingen. Bij nieuwe of gewijzigde broncode starten ze automatisch een nieuwe ‘build’ van de software. De betreffende programmeur krijgt vervolgens binnen enkele minuten een seintje als zijn of haar wijziging tot fouten leidt.

Vrijwel alle CI tools bieden ook de mogelijkheid om, als alle tests slagen, de nieuwe versie van de webapplicatie automatisch te ‘deployen’ (uit te rollen) naar een server. Zo hebben wij voor elk project waar we aan werken een testomgeving waarop te allen tijde de nieuwste stabiele versie van de webapplicatie draait.

Wijzigingen broncode

Zodra er iets aan de broncode wijzigt, voert een Continious Integration & Deployment tool automatisch alle tests uit. Faalt een test, dan wordt het ontwikkelteam direct op de hoogte gesteld.

3. Digitaal scrumboard

Bij softwareontwikkeling wordt steeds vaker gebruik gemaakt van user stories. Het beheren van die user stories kan simpel met pen en papier of Excel, maar met de populariteit van Scrum en andere ‘agile’ projectmethoden is er een flink aantal gespecialiseerde tools ontstaan. Bij Inspire maken we gebruik van een digitaal scrumboard dat inzicht verschaft in welke stories er gepland staan voor de huidige sprint, wie waar aan werkt, welke problemen er spelen en welke stories gereed zijn. Twee bekende online tools voor het beheren van digitale Scrumboarden zijn Jira Agile en Pivotal Tracker.

Sprinten naar succes

Een introductie tot het ontwikkelen van succesvolle sites en apps

Download e-book

Zelf gebruiken wij Jira, omdat het mogelijk is om de onderliggende workflows van het pakket aan te passen en zo volledig aansluit op de specifieke kenmerken van het Inspire ontwikkelproces.

Jira

Jira Agile geeft de user stories en hun status weer op een digitaal scrumboard. Zo is voor iedereen inzichtelijk wat de status van het project is.

4. Kwaliteitsbewaking

Voor ons is de functionele en technische kwaliteit van webapplicaties erg belangrijk. Zo voert een developer van buiten het reguliere projectteam minimaal eens per week een review op de nieuwe en gewijzigde code uit. Een “extra paar ogen” kan enorm helpen om fouten te voorkomen en veiligheidsrisico’s te beperken.

Naast deze handmatige vorm van controle bestaan er diverse softwaretools die helpen om de kwaliteit van broncode te bewaken. Wij gebruiken onder andere Code Climate. Elke keer als er iets gewijzigd wordt in het versiebeheersysteem van een project, dan analyseert Code Climate de broncode op potentiële problemen en veelvoorkomende veiligheidsrisico’s. Ook kijkt de tool naar de complexiteit van de broncode. Alle té complexe code en code die meerdere keren op dezelfde plek voorkomt wordt opgemerkt, zodat de developers gemakkelijk zien welke onderdelen van de software verbeterd kunnen worden.

"Elke keer als er iets gewijzigd wordt in het versiebeheersysteem van een project analyseert Code Climate de broncode op potentiële problemen en veiligheidsrisico’s."

Code Climate toont belangrijke statistieken over alle onderdelen van de webapplicatie.

Een andere tool die we gebruiken is Coveralls.io. Telkens als de Continuous Integration server een een nieuwe ‘build’ van de software maakt, worden belangrijke statistieken over het resultaat van de tests bij Coveralls opgeslagen. Op basis van die gegevens maakt Coveralls inzichtelijk in hoeverre de verschillende onderdelen van de software daadwerkelijk getest worden. Voor developers is zo gemakkelijk te zien welke onderdelen nog onvoldoende getest zijn.

Coveralls

Coveralls.io maakt voor elke build inzichtelijk wat het effect op de test coverage is.

Zeven soorten tools die webdevelopment in teamverband makkelijker maken.

5. Testserver

Voor opdrachtgevers en eindgebruikers is het prettig om de nieuwe webapplicatie, tijdens het ontwikkelproces, regelmatig te kunnen testen. Op de manier kan gevalideerd worden of de oplossing in wording goed aansluit bij de behoefte en wordt het ontstaan van voortschrijdend inzicht gefaciliteerd. Een testserver stelt de opdrachtgever dan ook in staat om het ontwikkelteam van feedback te voorzien.

Zelf richten wij bij elk nieuw project twee testomgevingen in, bij onze vaste hostingpartner True of bij Heroku. Eén waarop continue de laatste stabiele versie van de webapplicatie draait (zie ook het kopje ‘Continious integration & deployment’) en één waarop we eens per twee weken de nieuwste versie plaatsen. De eerste omgeving gebruiken we vooral om intern te testen. De tweede omgeving kan door de opdrachtgever worden gebruikt om ons van feedback te voorzien.

"Een testserver stelt de opdrachtgever dan ook in staat om het ontwikkelteam van feedback te voorzien."

6. Samenwerkingssoftware

Om het proces van samenwerken tussen teamleden onderling en het team en de opdrachtgever te vergemakkelijken, zijn er online tal van tools beschikbaar. Zo is er Basecamp, dat onder meer gedeelde actiepuntenlijsten, teamagenda’s, discussiegroepen en bestandsdeling biedt. Een andere samenwerkingstool die we veel intern maar ook met klanten gebruiken is Google Drive, dat het eenvoudig maakt om bestanden met meerdere personen te delen. Het is voor ons onmisbaar om iedereen snel toegang tot de meest recente projectbestanden te geven.

"Het is voor ons onmisbaar om iedereen snel toegang tot de meest recente projectbestanden te geven."

7. Teamchat

Een goede chattool kan een ontwikkelteam enorm helpen. Het maakt het mogelijk om belangrijke onderwerpen snel met meerdere mensen tegelijkertijd af te stemmen (ook als een deel van het team niet op locatie aanwezig is). HipChat, Apple FaceTime, Skype en Google Hangout zijn enkele van de tools die voor dat doel geschikt zijn.

Binnen Inspire maken we heel veel gebruik van HipChat. Daarmee kunnen we snel met 1-op-1 communiceren en bestanden uitwisselen, maar ook groepscommunicatie faciliteren. Daarnaast hebben we HipChat gekoppeld met GitHub, Coveralls.io, Jira en Code Climate. Belangrijke meldingen (bijvoorbeeld een nieuw beveiligingsrisico of een daling van de ‘test coverage’) worden automatisch door de betreffende tool in HipChat geplaatst, zodat alle teamleden direct op de hoogte zijn.

"Binnen Inspire maken we heel veel gebruik van HipChat."
Hipchat

Wij gebruiken HipChat niet alleen om onderling te chatten, maar ook om belangrijke ontwikkelproces-berichten van GitHub, Coveralls, Codeship, Jira en andere tools te ontvangen.

Welke tools gebruik jij? Wij zijn altijd benieuwd naar de tools die andere softwareteams gebruiken. Heb je aanvullingen op deze lijst: laat het ons weten.

Meer weten over de techniek achter onze oplossingen?

Kom langs in Utrecht en we leggen het je uit.

Maak een afspraak
Pas jij in ons team?

Wij zijn altijd op zoek naar enthousiaste en talentvolle ontwikkelaars. Mensen die niet voor doorsnee gaan en die hun talent willen inzetten om (web)apps te bouwen die betekenisvolle impact hebben.

Bekijk de vacatures