Jaime Martinez: Een modulaire aanpak bij website-ontwikkeling
Ik ben erg vereerd dat ik hem aan mag kondigen, want dit is misschien al de ooit laatste keer dat ik hem überhaupt genoeg behoorlijk heb, ik hoop van niet. Nee, ik kom nog wel eens terug hoor. Misschien nog ergens omhoog, want hij gaat volgende maand, gaat hij reizen en eerst naar Oostenrijk, Skiën en daarna naar Azië. Daarvoor zegt hij zijn huidige baan bij Level Level op. Maar als developer al heel veel ervaring heeft opgedaan met werk in een team en een groeiende team, want Level Level is in ons uitgegroeid van het kleine 2 Persoons bureau in Rotterdam tot een groep van 21 man. Personen. Personen. 50-50 dames heren. Oh kijk, dat is wel een heel mooi presentatie. En dan is het niet meer zo handig als iedereen gewoon alles in zijn functions.php gooit en mensen moeten gewoon wel met elkaar op de lijn zitten. En hoe doe je dat nou in een groot team? Daar ga je mee alles over vertellen. Dank je wel. Ga je dan? En een goede introductie. Je kan gewoon op een paar slijts als kippen, prima. Ga je me maar in de nest. Ik ga gelijk even door. Het landschap inderdaad dat je het net schestte. We zijn van een team. Toen ik bij Level Level kom werken, denk ik ongeveer 4 personen. 3-4 personen die werken aan projecten. Dus dat je vaak in je eentje aan een project. Nu hebben we een project waar je met 2-3 developers werkt. Een designer, een project manager. Als een project klaar en opgeleverd is, dan heb je onderhoud. Daar worden nieuwe fietsjes eigenlijk op doorentwikkeld. Fietsjes worden eigenlijk geschrapt. Je hebt niet altijd de mogelijkheid om nog even iemand aan ze jasje te trekken van, hey, hoe heb jij dit ook alweer gedaan? Of als origineel team de boel over te dragen van, ik heb dit precies zo uitgevoerd. En dit stukje code staat hier. En dat valt allemaal zo een beetje in elkaar. Dat is ook met omboording van nieuwe developers. Is dat gewoon een overhead die je hebt, die wil je eigenlijk niet. Dus je moet wat afspraak maken. Je moet kijken hoe je samen een aanpak met elkaar afstemt, die duidelijk is. En wij hebben daarvoor een modellaire aanpak bedacht. Die eigenlijk wel generiek binnen de internetwereld. We verzinnen niks nieuws. Dus we spreken gewoon wat standaarde af.  Wat probleem proberden we eigenlijk op te lossen? Want het is een hele zin. Je kunt hem even lezen. Dan je ons draaien projecten langer dan drie, vier jaar. We hebben projecten draaien dat nu iets van zeven jaar eigenlijk al draait. En het draait gewoon prima. Updates geven eraan. Geen nieuwe gekke fietsjes. Het valt niet om. Het is prima. En het doet het gewoon. Wat ik net al zei. Sommige nieuwe personen die eraan werken kunnen vinden waar iets staat. Het is op een bepaalde logische manier opgedeeld. Dat is wel even geleden. Maar dit is een klein project. Projecten waar we nu op zitten, die zijn gewoon veel groter. En tot vecht gewoon een andere metodiek. Dit is een slijf die had ik erin zitten. Zelfs slechte code kan functioneren. Soms kan het wel zijn dat je... Ik schip deze. Maar wat ik hiermee eigenlijk bedoel is. Soms kan er wel eens code in zitten. Ik schip hem gewoon. Ik had hem gewoon draait moeten halen. Ja, heel simpel. Nou, de analyse. Ik heb een project gedraaid samen met Mike. Ik ben blij dat hij er is. Kan ik helemaal aanwijzen als iets fouten. Het is een project. Het heet Financial Focus. Het is een financieel platform voor ABN. Voor wat droge stof. Tenminste als het niet je interesse is. We hebben toch een leuk ontwerp. Een leuke website neergezet. Met wat nieuwsberichten. Ze hebben vlogs. Want dat is hip. Ze hebben dossiers. Ze willen wat de top 5 lijstjes maken. Niet al te complex allemaal. Maar wel heel uitgebreid. Nieuwsbrief inschrijving. Dit is gewoon een beetje om te schetsen. Wat het allemaal ongeveer een beetje eruit ziet. Video's. Dit is allemaal dummy data. Maar we hebben Rolf en zijn Financial Focus vlog. Die elke dag op de hoompagina staat. En ze hebben ook magazines. Wie vindt dat dit best wel gevarieerd eruit ziet. Dat het niet recht toerigd aan is. En onder water hebben we geprobeerd. Dat we niet voor elk stukje. Alles uniek hebben geschreven. Dat dingen herbruikbaar zijn. Zodat je op verschillende plekken ook iets kan pakken. En dan zeg ik daarnaar. Met de minste efforts. Dat is gelukt. En daar zijn we eigenlijk wel heel blij mee. Een detailpagina. Meer dan dit is het vaak niet. En wat een leuk onderdeel ervan is. Dat is een klein onderdeel in die mini.  Maar het kan voor wat problemen zorgen. En dat is deze rating. Het is echt een klein onderdeel. Wat op de oppervlakte. Wat je denkt dat het niet zoveel problemen kan zorgen. Maar dat was op een gegeven moment een heis en kraak. Op een niet modulaire aanpak dan wat jij zei. Sommige dingen dan ga je het in functions ppp. Dan bouw je het. En iemand wil een rating geven. Kan je erop klikken. En dan is gelijk als je lekker met je muister overheen gaat. Jaafskript, allemaal fancy pensie. Interactief, klant helemaal plei. Komt ineens een probleem om de hoek kijken. En een probleem is. Is dat ze niet meer alleen maar onderaan de detailpagina iets willen zien met een rating. Maar ze willen ook op het overzicht een rating laten zien. Dus jij denkt nou, dan plak ik die rating daarin. Maar ze willen niet dat je daar gaat lopen kunnen stemmen. Dat is heel Rotterdamse. Gaat lopen liggen, leggen te stemmen daar op de archiefpagina. Sorry, dat staat gewoon op video, goud. Maar dan zou je eigenlijk willen dat die jaafskript interactie daar weg is. Maar omdat je het gewoon lekker, straight forward. Een soort van beetje spaghetti, een functie, doet alles, hebt gebouwd. Denk je ja, verdorie. Moet ik extra werk gaan en ook moet ik heel dat ding weer uit. Uitkaan gaan lopen trekken. En dan vervolgens wil je ook nog dat je in een review, in een comment ook nog iets wil. En dan zeg je, ik heb dat allemaal niet goed opgezet. Of niet goed overnagedacht. En dan heb je veel meer werk. Als je vanaf het begin af aan de boel netjes op uitsplits hebt. Dan heb je een stukje wat het visuele gedeelte regelt. Als je dan daar zegt, iets heeft een twee sterren. Ja, het lijkt net een beetje alsof je, wie heeft het wel eens de Dragon Ball zien gezien. Dat ze dan met de tweeën, nee, gelukkig één met iemand. Ik zeg altijd dan heb je hoe het eruit moet zien en je data. En dat gooien je er tegenaan en dan komt het visuele twee sterren eruit. Wil je daar nog het stemfunctie erbij hebben. Dan zeg je nou, dan stop ik dat extra lege op blokje. Zet ik dan actieveer ik erbij. En dan is het ineens een interactief blokje geworden.  Dus omdat je alles netjes opsplits, kan je zulke dingen beheersbaar maken. En ik geloof nu dat ik net gewoon een paar slijts voorloop. Dus voor zo meteen is het nog makkelijker. We hebben ook wel eens een probleem gehad. Wat eigenlijk door de jaren heen is gegroeid. We hebben projecten overgenomen. Dat hebben anderen opgezet. Daar hebben ze tweeën, drieën, strakke bedline. Knallen, knallen, knallen. En daarna wordt er een landingspage naar ergens ontworpen. Daar moeten we een mooie, grote, extra, grote knop op. Die wordt geïnplimiteerd. Zoals je al ziet zijn er dan... Zie je dat rode stipje eigenlijk een beetje? Niet echt, hè? Nou, dan ga ik er gewoon even naastaan. Als je een beetje ziet, hier zit een wit bordetje omheen. Vondseises zijn anders. Hier zit een lijntje onder. Ik heb een keer een week deze per ongeluk online laten staan. En toen kwam ik erachter. Ik denk, ja, verdorie. Dat is niet handig, maar het is omdat er vanuit de basis... Waarom hebben we een paar stapjes vergeten om die basis goed te krijgen? Zodat als je erop voorborduurt. Dat je altijd ervoor zorgt dat je één en eenzelfde styling krijgt. Dat het consequent is. En dat je er niet echt over hoeft na te denken, als je een nieuwe butten krijgt. Wat ik dus open uiteindelijk heb gedaan, is... Ik heb het teruggebracht naar iets met 33% van alle buttens. Alles wat eigenlijk niet goed was, wat net eventjes een uitzondering was. En dan zeiden ze, ja, maar ik wil hem toch groter. Dat kan, maar daar wordt de boel inconsistente van. Dat is ook een kwestie van praten met de klant van je wilt het. Maar dat komt niet ten goede van je project. Het is jouw optiek, maar als je dat blijft doen, dan wordt heel je site ook een ratje toe. En dat wordt onrustig. En dat heb ik aangegeven, heb ik doorgevoerd. Een stuk rustiger geworden. Maar als je zoiets tegenkomt, een ratje toe, of je begint met een nieuw project, er zijn een paar opties. Wie heeft dit eigenlijk zelfs meegemaakt, met zo'n beeldgroei van een project, dat hij iemand meemaakt? Ja, ik ken dat ik het zelf ook wel zeg maar de oorzaak ervan ben. Dus ja, nou ja, kijk, ja. Dus ik steek ook maar de hand in eigen boezem.  Maar als je er nu, zeg maar, wel bewust van bent, en voorneemt voorbij je isvolgende project, om het goed te doen, ik verklappel al één van de opties. Maar één van de opties is wel een quick fix en doorgaan. Waarom zou je dat doen, iemand? Ja, dat komt heet geen tijdengeld voor je. Inderdaad, budget. Het is snel, tijd. Zelfde? Ja. Daar was het Financial Focus Project ervoor. We wisten dat we over twee, drie maanden nieuw ontwerp kregen. We wisten dat we met dat ontwerp een hele nieuwe rierheid kregen. Daar hebben we er toch voor gekozen om even die quick fix door te voeren, eventjes op onze handen te zitten en de naad door te gaan. Dit is ook gewoon een hele van die optie. Wat ook kan doen is dus dat onderdeel toch herschrijven, net zoals met die buttons, dan aak je de rest wel intact, maar dat ene stukje wat toch elke keer voor problemen zorgt, dan gaat het om herschrijven. Zou je dat, zeg maar, vanaf je eigen tijd wilt doen? Het knaagt soms als developerzijden van, ja, ik wil de rierijten, want het is een doornin het oog. Soms werkt het ook gewoon prima en dan kan je het gewoon later werken zoals het is. Don't fix it if it's not broken. Soms moet het wel gewoon gebeuren, dan betrek je ook de klant erbij. Van elke keer als jij een uitbreiding vraagt aan mij, dan loop ik je hier tegenaan. En als ik nu één keertje tijd investeer om dit goed één keertje aan te pakken, dan zal je daarmee tijd besparen. Dat is één van de opties die je kan geven aan de klant van ja, maar nu moet ik nu geld uitgeven. Ja, maar aan de lange rand, beloof ik je dat dat gewoon mijn tijd gaat scheren. Dus dan is dat stukje herschrijven een goede optie. Als je een heel nieuw stuk gaat bouwen, dan heb je dan bepaald van oké, we hebben wel met het team nu afgesproken dat we deze nieuwe standaard gaan doen. Maar dit is nog een oud project, wat ga ik dan doen? Dat je kies van oké, ik weet dat een keertje iets wordt uitgebreid, dat er misschien inderdaad weer een nieuwe site aankomt en dat je dat nieuwe onderdeel alvast in je nieuwe werkmethoden giet.  Dat hebben we bij Camping Frankrijk. We hebben dat gedaan, we wisten ook dat er een nieuwe website aan zou komen en toen is Klegaan Nieuws achterin. Die is al met de nieuwe techniek die we standaard elke keer ging toepassen, is hiermee begonnen, omdat hij wist dat als ik dit niet doe, dan snijd ik mezelf ook alleen mee in de video's en dan kost het me gewoon twee keer zoveel tijd om dit project op te leveren. Wij werken nu tegenwoordig met Trick en WordPress en dat zorgt voor zoveel tijdwinst. Daarom heeft hij gewoon de keuze gemaakt. Heeft hij overlegd met de rest van de team, maar heeft hij de keuze gemaakt om van gaan we dit doen? Ja, doen, want dit komt ons ten goede en er komt de klant ook ten goede. Of een keertje compleet opnieuw beginnen en dat gebeurt niet vaak. Wie heeft er al een klant die zo lang al klant is dat je een keertje een rewrite hebt mogen doen? Hoe voelde dat? Ja, fris, ja. En het kwam ook later naar boven omdat je een rewrite hebt gedaan dat je hem ook beter kan noemen, faciliteren met nieuwe dingen. Ik ben er zo blij mee als dat een keertje dan toch echt moet gebeuren, maar... Ja, goed dat. Eén van de op... Ik had het over methodes. Wat ga je dan doen? Ik heb wat situatieschetsen gedaan, wat voorbeelden gegeven van wat de fout kan gaan en dit zijn een paar voorbeelden van waar wij opletten als wij een nieuwe website gaan bouwen. Separation of Concern. Wie kent deze stem? Ja, het bord ik net omschreven met die sterretjes met het gedrag, met de waardes. Als je dat allemaal een beetje uit elkaar weet te trekken dan heb je de waarde van je rating dan heb je de HTML hoe het eruit moet komen te zien en het stukje javascript dat voor het stemmen zorgt. Dat kan je samenvoegen en dat zorgt voor op inderdaad als je een review achterlaat dan wil je alles inzetten en dan heb je dat stukje af.  Op die andere pagina wil je het alleen bijvoorbeeld tonen dus dan heb je alleen maar, dit lege blokje nodig en het hoe het eruit komt te zien en dan heb je dat op die pagina en dat is die werkmetode het is nog niet iets dat je 1, 2, 3 doet. Je leert dat gaande weg als je wat beeld gaat bouwen en je zegt ik wil het zo gescheiden op gaan zetten dan moet je het gewoon doen en dan leert het ook gaande weg. Ze noemen dat ook wel uit MVC Model View Controller Model is de data, de view is het template hoe het er visueel uit moet komen te zien en de controller is die alles samenvoegt en het uitsplugt als het ware. Alles met een modellaire aanpak, alles lege blokjes zijn, losse stukjes die 1 geheel zijn. Het is wel zo dat als je een modellaire aanpak hebt dat je meer code hebt. Dus als dit je applicatie is al dat aan elkaar knopen is wel een beetje extra werk en dan moet je wel bij stilstaan dat dat bij het bouwen voor een beetje overhet zal zorgen maar die overhet zal je normatie met het project voordert zal je die overhet echt binnen no-time terugverdienen. 