
## De vraag

Als politieke partij zijn je leden je belangrijkste instrument om te groeien - zij zijn je campaginiers.
Een belangrijk onderdeel van hun activiteiten, is van deur tot deur gaan.
Ze hebben een route nodig, waar gaan ze aanbellen?
Welke gebieden hebben de meeste aandacht nodig, welke hebben het meeste potentieel?
En vooral - wat doen ze met de resultaten?
GLAPP is voor dit doel ontwikkeld.

## Onze oplossing

Wij ontwikkelden de GLAPP, de GroenLinks App.
Deze webapplicatie maakt het voor vrijwilligers makkelijk om mee te doen aan de campagne en voor campagneleiders om alles goed te laten verlopen.

## Resultaten verwerken

Resultaten van de gesprekken die vrijwilligers voeren tijdens het huis-aan-huis gaan, worden ingevoerd in de GLAPP.
Hierdoor wordt het potentieel in die buurt bijgewerkt, zodat andere vrijwilligers weten in welke gebieden zij de meeste impact hebben.
De gegevens worden altijd omgerekend naar een gemiddelde op straatniveau, dus er worden geen persoonlijke gegevens opgeslagen.

## Privacy eerst

Voor onze klant is privacy een belangrijk punt.
Daarom hebben we bij elke stap van de ontwikkeling privacy in ons achterhoofd gehouden.
Het filteren van onze logs, het beperken van toegang tot data uit bepaalde gebieden, two factor authentication, het aggregeren van resultaten in plaats van het opslaan per adres: alles om ervoor te zorgen dat er nooit persoonlijke data wordt opgeslagen of getoond aan een ongeautoriseerde gebruiker.

## Multilevel dashboards

We hebben meerdere dashboards gemaakt zodat verschillende mensen met verschillende rollen toegang hebben tot de gegevens die ze nodig hebben.
De gegevens kunnen gefilterd en geëxporteerd worden zodat ze voor elk gebruik geschikt zijn.

## Gamificatie

Het uitvoeren van repetitieve taken kan vermoeiend zijn.
Daarom hebben we de app niet alleen zo gebruiksvriendelijk mogelijk gemaakt, maar ook leuk om te gebruiken! Zowel campagnemanagers als vrijwilligers worden aangemoedigd om door te gaan met hun inspanningen door het tonen van vrolijke teksten en het toekennen van badges voor hun harde werk.

<BigImage image="cases/glapp_body.png" />

## Created with

<TechWrapperSmall>
  <TechPill technology={'react'} />
  <TechPill technology={'typescript'} />
</TechWrapperSmall>


Een webapplicatie voor Groenlinks, waarmee de online en offline campagnes zijn gemoderniseerd.

De GLAPP


## Onze democratie en het internet

Twee van onze favoriete uitvindingen.
Jammer dat ze nog niet zo goed samen werken.
Er zijn twee problemen die we moeten oplossen:

### 1. Het internet kan een betere rol spelen in onze democratie

We wonen met miljoenen mensen in een land, maar alle grote beslissingen worden gemaakt door kleine groepjes in oude houten zaaltjes.
Talloze waardevolle inzichten en ideeen worden hierdoor overgeslagen.
Met het internet zouden mensen vanaf allerlei plekken hun ideeen kunnen delen, kunnen meedenken en hun mening geven.

### 2. Social media zijn niet ontworpen voor het oplossen van problemen

Social media zijn meestal ontworpen om mensen naar advertenties te laten kijken, niet om samen problemen op te lossen, of om een genuanceerd blik op iets te krijgen.
Online discussies zijn vaak onoverzichtelijk, kortaf en daarmee niet goed bruikbaar.
Begrijpelijk dat veel organisaties dan ook bang zijn om het internet in te zetten.

<BigImage image="cases/argu_abstract_nl.png" />

## Onze oplossing

Dus zijn we aan de slag gegaan om een online democratie en community platform te bouwen.
Ontworpen om burgers zo makkelijk mogelijk te laten participeren, en om ambtenaren zo goed mogelijk vragen te laten stellen.
We lanceerden Argu in 2015, en hebben onderhand meer dan 150 participatietrajecten afgerond.
We hebben talloze [functionaliteiten](https://argu.co/info/functionaliteiten) ingebouwd, zoals digitaal stemmen, reageren, dynamische formulieren, vragenlijsten, kaartweergaven, notificaties, rechtenbeheer, groepen, custom domeinnamen, export mogelijkheden, custom theming, en nog veel meer.

<BigImage image="cases/argu_body.png" />

## Technologie

Argu is met afstand ons grootste project, en een belangrijke bron van onze inkomsten.
Het is een SAAS oplossing die we al jaren doorontwikkelen en live houden voor diverse klanten.
Het ontwikkelen van Argu heeft ons geleerd om webapplicaties te maken die onderhoudbaar, flexibel en schaalbaar zijn.

De stack van Argu bestaat uit diverse diensten, waarvan er twee in het bijzonder relevant zijn:

### Back-end: Apex

De basis van onze back-end van Argu is gebouwd op basis van [Ruby on Rails](/nl/tech/ruby-on-rails).
Gezien we de wens hadden om de data als [Linked Data](/nl/blog/what-is-linked-data) beschikbaar te stellen, hebben we hier een Open Source library voor geschreven: [Linked_Rails](https://github.com/ontola/linked_rails).
Dit geeft Apex een aantal unieke kwaliteiten:

- **Alles is linked data**. Zelfs de knopjes, formulieren, en acties zijn beschreven als data. Dit geeft ons een grote flexibiliteit, zodat we dezelfde broncode kunnen gebruiken voor zeer uiteenlopende usecases.
- **De API is gelijk aan de website**. Als je een pagina kan bekijken, kan je de data van die pagina opvragen met dezelfde URL. Eigenlijk ontzettend logsich (zie ons [artikel over API design](/blog/api-design)), maar gek genoeg vrij zeldzaam.

### Front-end: Libro

Libro is een webapplicatie geschreven in [React](/nl/tech/react) + [Typescript](/nl/tech/typescript).
Libro staat voor _linked data browser_.
Dit is wat Libro uniek maakt: het is in de kern niet een gewone app, maar een _data browser_.
Onder de motorkap werkt libro met de [Link libraries](https://github.com/rescribet/link-redux), ontwikkeld door onze CTO Thom van Kalkeren.
Libro communiceert exclusief met Apex door linked data (RDF) uit te wisselen.
We zijn een van de eerste SAAS ondernemingen die linked data zo ver in haar stack heeft gestopt.
Dat heeft ons [enkele unieke uitdagingen opgeleverd](/blog/full-stack-linked-data/), zoals een performance bottleneck waarvoor we een [nieuw RDF serialisatieformaat hebben ontwikkeld](https://github.com/ontola/hextuples).

## Gemaakt met

<TechWrapperSmall>
  <TechPill technology={'react'} />
  <TechPill technology={'typescript'} />
</TechWrapperSmall>

## Open Source

De gehele Argu broncode is open-source te [vinden op Gitlab](https://gitlab.com/ontola/argu/).


Een open source e-democracy en community platform, om organisaties te helpen hun achterban te bereiken.

Argu


## Het internet opnieuw decentraliseren

In 1989 publiceerde Tim Berners-Lee de eerste website.
Hij had daarbij een visie van een decentraal internet, een web, waarbij mensen hun eigen websites zouden hosten op hun eigen servers.
Nu zijn we meer dan 30 jaar verder, en het web is meer gecentraliseerd dan ooit.
Een handjevol techreuzen beheert onze data, bepaalt hoe onze digitale interacties er uit zien, en in welke volgorde we ons nieuws lezen.
Dat moet anders kunnen.

Techreuzen houden ons aan boord door onze eigen gegevens te koppelen.
Zo werkt je Google Calendar perfect samen met je GMail, en kan je je Google Drive bestanden snel als bijlage gebruiken.
Als techgigant heb je de data in handen om dit allemaal aan elkaar te koppelen, en zo gebruikers afhanklijk te maken van jouw diensten.
Gelukkig is er ook een andere manier om dit op te lossen: **standaardiseren**.
Met goede standaarden kunnen we onze data verplaatsen van App naar App, waardoor je niet vast komt te zitten in de ecosystemen van de techreuzen.
Daarnaast kan je door veel meer te standaardiseren dingen doen die je nu niet kan, zoals zoeken door al je data, zien wie wat wanneer heeft gewijzigd, dezelfde data openen in verschillende apps, en meer...
Maar hoe komen we daar?
Waar moeten standaarden aan voldoen, voordat we kunnen leven in deze tech-utopie?

## Van Linked Data naar Atomic Data

Tim Berners-Lee kreeg 10 jaar na de eerste website een belangrijk inzicht: dezelfde linkjes die we gebruiken voor websites, kunnen we ook gebruiken in _data_.
Zo ontstond _Linked Data_.
Linked Data maakt het mogelijk om het hele web te gebruiken als een grote, verbonden database.
Daarmee zou je apps kunnen maken die volledig decentraal zijn, die veel beter samenwerken, waarbij mensen zelf volledige controle hebben over hun data.

Althans, dat is de theorie.
In de praktijk is het nog erg lastig om apps te bouwen met Linked Data.
Wij kunnen dat weten, want als Ontola zijn we enkele jaren geleden [all-in](/blog/full-stack-linked-data) gegaan op deze technologie.
We herschreven ons e-democracy platform [Argu](https://argu.co) en gebruikten Linked Data voor letterlijk ieder knopje en menu.
Dat was een flinke klus, en we hebben talloze tools moeten maken om dit doel te bereiken.
Uit dit jarenlange ontwikkeltraject hebben we geleerd hoe we Linked Data nog beter - en vooral ook veel _makkelijker_ kunnen maken.

Onze CEO Joep Meindertsma begon in 2020 in zijn vrije tijd met het uitwerken van een nieuwe vorm van Linked Data.
Het doel: een makkelijkere, krachtigere abstractie vinden waarmee ontwikkelaars sneller apps kunnen maken die goed met elkaar kunnen samenwerken.
De beste dingen pakken uit Linked Data, maar verbeteren waar het mogelijk is.
Na een paar maanden stond er een [uitgebreide documentatie](https://docs.atomicdata.dev/) van Atomic Data online, en niet veel later de eerste server, libraries en browser.
Hierdoor is Atomic Data snel een behoorlijk volwassen systeem geworden, met degelijke implementaties en diverse tools.

## Waarom Atomic Data

- **Sneller standaardiseren**. Het afstemmen van hoe je een bepaald model vormgeeft is te vaak een tijdrovende klus. Daardoor wordt er _te weinig gestandaardiseerd_, en dat beperkt hoe goed applicaties samen kunnen werken. Atomic Data is ontworpen om snel en eenvoudig datamodellen te delen.
- **Sneller ontwikkelen**. Door de bestaande tools (zoals Atomic-Server) kan je snel aan de slag, en hoef je het wiel niet opnieuw uit te vinden. Opslag, zoeken, versiebeheer, rechtenbeheer... Dat is allemaal al geregeld.
- **Converteerbaar naar vrijwel alles**. Je kunt Atomic Data naar vrijwel ieder ander formaat exporteren: JSON, XML, JSON-LD, RDF, Turtle, N-Triples...
- **Makkelijk deelbaar**. Alle objecten hebben linkjes, en deze linkjes kan je opzoeken - net als websites. De data beschrijft aan de hand van die linkjes zelf waar je meer informatie kan vinden. Hierdoor is Atomic Data zeer goed deelbaar.
- **Verifieerbaar en corrigeerbaar**. Atomic Data introduceert [Commits](https://docs.atomicdata.dev/commits/intro.html), waarmee iedere wijziging wordt opgeslagen. Hierdoor ontstaat een geschiedenis van ieder object, zodat je altijd kan bepalen wie wat wanneer gedaan heeft.
- **Authenticatie en authorizatie**. Behee wie er toegang heeft tot welk stukje data.

## Het beste van linked data, JSON en type safety

- **De eenvoud van JSON**. Ontwikkelaars kennen het, en het werkt overal.
- **Type safety**. Je kunt zeker weten dat je data een bepaald type heeft.
- **Linked data**. Verbind je data aan elkaar - ook al staat het op andere machines.

<img src="/images/cases/atomic_venn.svg" />

## Wat we hebben gebouwd

- [**Atomic-Server**](https://crates.io/crates/atomic-server): een supersnelle database + server, geschreven in Rust.
- [**Atomic-Data-Browser**](https://github.com/joepio/atomic-data-browser): front-end applicatie voor beheer en weergave van Atomic Data.
- [**Atomic-CLI**](https://crates.io/crates/atomic-cli): handige command-line interface tool
- [**Atomic-lib**](https://crates.io/crates/atomic_lib): library voor Rust
- [**@tomic/react**](https://www.npmjs.com/package/@tomic/react): library voor React, met handige template
- [**@tomic/lib**](https://www.npmjs.com/package/@tomic/lib): library voor javascript / typescript
- [**Documentatie**](https://docs.atomicdata.dev/): meer dan 80 pagina's aan technische specificaties en voorbeelden.

## Atomic Server

Atomic Data is een modulaire specificatie, wat betekent dat je er stukjes uit kan pakken die je handig vind, maar dat je niet alles hoeft te gebruiken.
Als je snel aan de slag wilt, raden we je aan om onze Atomic-Server te gebruiken, welke alle specficiaties heeft geimplementeerd.

Atomic-Server is een krachtige, extreem snelle database + server, voorzien van ongelofelijk veel features.
Helemaal gratis en open source.
Geschreven in de programmeertaal Rust.
De front-end is geschreven in [Typescript](/nl/tech/typescript) met [React](/nl/tech/react).

Atomic-Server is ontworpen om de persoonlijke server van de toekomst te worden: een lichtgewicht applicatie die je thuis eenvoudig kan draaien op een goedkope computer, zoals een Raspberri Pi of een oude smartphone.

[Lees hier hoe je Atomic-Server kan installeren](https://github.com/joepio/atomic-data-rust/).

<video controls src="https://user-images.githubusercontent.com/2183313/139728539-d69b899f-6f9b-44cb-a1b7-bbab68beac0c.mp4"/>

## Gemaakt met

<TechWrapperSmall>
  <TechPill technology={'react'} />
  <TechPill technology={'rust'} />
  <TechPill technology={'typescript'} />
</TechWrapperSmall>


Een ambitieus, volledig open source initiatief om data eigenaarschap te vergroten en apps beter samen te laten werken.

Atomic Data


React JS is de meest populaire front-end Javascript Library om webapplicaties mee te ontwikkelen.
Het is ontwikkeld door Facebook, en daarna als Open Source library gebruikt in vele duizenden projecten.

## Waarom React gebruiken

Wij van Ontola zijn best wel fan van React - de meeste van onze projecten (waaronder deze website) zijn er daarom mee gebouwd.
In veel gevallen raden we dan ook aan om hier webapplicaties mee te ontwikkelen.

- **Herbruikbare componenten**. In React bouw je _componenten_, welke kunnen worden gedeeld tussen schermen en tussen applicaties. Zo blijft je code beheersbaar en modulair.
- **Gigantische community**. Een grote community betekent dat het makkelijk is om oplossingen te vinden als je een probleem hebt. Daarnaast zijn er zeer veel gebruiksklare componenten te vinden. Tenslotte zijn er ook veel ontwikkelaars voor te vinden!
- **Snelle ontwikkelling**. Bouwen met React gaat snel - en een productieve developer maakt een blije klant!
- **Flexibel inzetbaar**. React kan gebruikt worden van zeer dynamische, beweeglijke applicaties, tot statische websites (zoals deze).
- **Korte laadtijden**. Met React kunnen webapplicaites zowel op de server (_SSR_), als in de browser worden opgebouwd. Dit zorgt voor zeer korte laadtijden!

## Combineren met...

React is een front-end library, en heeft (vaak) dus een back-end nodig waar de data vandaan moet komen.
Een paar geschikte opties (waar wij ook veel mee werken) zijn:

<TechWrapperSmall>
  <TechPill technology="nextjs" />
</TechWrapperSmall>


React JS webapplicaties ontwikkelen

Waarom React gebruiken

Combineren met...

Cases

De GLAPP

Argu

Atomic Data