Mijn tweede stage heb ik gedaan bij Software Society in Helvoirt. Software Society is een bedrijf die specialiseert in toegangscontrole, support en IT-oplossingen voor bedrijf zoals Basic-Fit, JVH en andere bedrijven.

Ik kan helaas niet alles delen en publiek stellen, maar ik kan wel praten over minder cruciale onderwerpen.

Bij Software Society heb ik kennis gemaakt met Angular, een Javascript framework om interactieve websites te bouwen. In Angular maak je herbruikbare componenten die je samen kan stellen om een pagina te bouwen. Zo kan je een component hebben voor een navigatie menu, maar ook voor de items in dat navigatie menu. Angular leren duurde een paar weken, maar gezien dat ik andere frameworks zoals Vue al kende, was het niks wat ik niet kon begrijpen.

Na dat ik de code kon begrijpen, werd ik aangewezen om aan GymManager to werken en ik zag dat er veranderingen kon worden gemaakt om de DX (developer experience) beter te maken. Zo halverwege mijn stage begon ik aan een manier om formulieren makkelijker te maken.

De bestaande code voor formulieren maken volgde bijna altijd hetzelfde principe: pak waarden uit een object, zet ze in een HTML element en wanneer er op "Volgende" wordt gedrukt, zet de waardes terug in het object. Mijn idee was om met gestandaardiseerde componenten automatisch de waardes uit de objecten te halen, in HTML elementen zetten, en dan de waardes terug schrijven het moment dat ze veranderen. Samen met de optie om validatie mee te geven, zou dit het veel makkelijker maken om formulieren te maken.

Hieronder kan je stuk voorbeeld zien waarbij je het verschil kan zien:

Originele oplossing:

<div class="grid-form">
    <div class="grid-form-row">
        <div class="grid-form-field">
            <label>
                {{ 'firstName' | customTranslate }}
            </label>
            <div class="grid-form-input medium">
                <input
                    type="text"
                    [(ngModel)]="myObject.firstName"
                    required
                />
            </div>
        </div>
    </div>
    <div class="grid-form-row">
        <div class="grid-form-field">
            <label>
                {{ 'lastName' | customTranslate }}
            </label>
            <div class="grid-form-input medium">
                <input
                    type="text"
                    [(ngModel)]="myObject.lastName"
                    required
                />
            </div>
        </div>
    </div>
</div>

GymForm:

<gym-form [(model)]="myObject">
    <gym-form-row label='firstName'>
        <gym-form-text field='firstName' size="medium" />
    </gym-form-row>
    <gym-form-row label='lastName'>
        <gym-form-text field='lastName' size="medium" />
    </gym-form-row>
</gym-form>

De typescript code die hier achter zit:

@Component({
    selector: 'app-test',
    templateUrl: './app-test.component.html',
})
export class TestComponent {
    protected myObject = {
        firstName: 'John',
        lastName: 'Doe'
    }
}

Resultaat voor beide:

GymForm heeft ook andere pluspunten:

• Aria labels worden automatisch toegevoegd voor toegankelijkheid
• GymForm kan worden uitgebreid met meer componenten zoals datumkiezer en selecte lijsten
• GymForm kan makkelijker omgaan met formulieren opstellen in kolommen.

GymWizard

GymForm is goed en al, maar meestal worden dingen aangepast in grote wizards in meerdere stappen. En dit is dus waar ik aan begonnen was net nadat ik klaar was met GymForm. Maar helaas kan ik hier weinig van laten zien, maar het principe is hetzelfde: Laat zo veel mogelijk over aan GymWizard/GymForm, en jij hoeft alleen te zorgen dat je correcte data geeft en terug stuurt naar de API server.

Mijn tijd bij Software Society was heel informatief, en ik denk dat ik heel wat meer inzicht heb gekregen op hoe een bedrijf nou eigenlijk echt werkt met meerdere teams, afdelingen en klanten.