Wij maakten ons eigen framework. Lees hier waarom!

We geven een kijkje in onze keuken en gingen in onze vorige post in op het gebruik van moderne javascript frameworks in Page Based Apps. In deze post vertel ik je meer over de technische keuzes en visie voor toekomstige projecten.

website development

Het begin

Het begon eigenlijk na een Kickstart project bij één van onze e-commerce klanten. Hieruit kwamen een aantal punten naar boven die dwongen tot het maken van keuzes:

  • Focus, kracht en ervaring binnen het development team lag meer bij Back-end Development
  • SEO scoorde goed in hun huidige webshops en met het overstappen op een single page app was er gewoon geen garantie dat pre-rendering or SSR dezelfde resultaten kon weerleggen

In de design sprint hebben we daarna gekeken naar oplossingen hoe met Javascript om te gaan zonder in te leveren op SEO, daarbij hebben we gekeken naar de mogelijkheden met bestaande frameworks en alternatieven.

Mogelijkheden met bestaande frameworks

In ons onderzoek hebben we gekeken naar de 3 grootste frameworks van dit moment en daarbij een oude bekende te betrekken.

  • VueJS, Laravel ondersteunt dit out of the box en is naadloos geïntegreerd. Maar SEO binnen de VueJS apps was op dat moment niet goed genoeg. Google doet het goed, maar andere zoekmachines gewoon nog niet
  • ReactJS, Het digitale team van Deloitte heeft React Habitat ontwikkeld. krachtig, maar zonder oplossing voor SEO dus met dezelfde problemen als VueJS
  • AngularJS, geschikt om te gebruiken, maar mijn ervaring met dit framework zoals omschreven in mijn vorige post was doorslaggevend om dit als niet capabel te zien voor een duurzame applicatie
  • BackboneJS, lichtgewicht en betrouwbaar. Maar iets verouderd en werd daarom gezien binnen het team als ongeschikt voor een duurzame applicatie

Alternatieven

  • Plain old Vanilla JS, maar een enorme uitdaging dit goed onderhoudbaar te houden bij schaalbare dynamische applicaties
  • jQuery, maar in onze ogen niet duurzaam genoeg voor schaalbare dynamische applicaties

Zoals je leest was er dus geen enkele onderzochte oplossing die als geschikt en duurzaam werd gezien en als oplossing konden worden gezien voor de komende jaren. Dat was het moment dat ik een zelf bedachte structuur voorzichtig opperde.

Eisen van een zelf bedachte structuur

  • Duidelijke en makkelijke structuur
  • Schaalbaar
  • Performance vriendelijk
  • Goed te gebruiken binnen Page Based Apps
  • Goed te gebruiken met native DOM elementen zonder templates

We hebben daarbij ook gekeken naar koppelingen zoals Redux en het inzetten van een Virtual DOM. En kwamen tot de volgende gedachte:

  • Één AppManager waar alle HTML Elementen welke javascript ondersteuning bevatten worden gekoppeld als Component
  • NotificatieManager welke vanuit datzelfde centrum naar alle geregistreerde componenten een melding kan sturen om data te manipuleren aan de front-end
  • Heel belangrijk is het goed inzetten van Garbage collection
  • Componenten welke notificaties kunnen ontvangen, verzenden en verwerken
  • Een simpele variant van de Component welke in tegenstelling tot Componenten alleen maar data kunnen ontvangen en tonen

CyborgJS was geboren 💡

En daar was het eerste het idee voor een framework. We hebben een eerste versie opgezet in de design sprint en getest. Inmiddels zijn we bijna 25 sprints verder, hebben we getest of Redux van toegevoegde waarde zou zijn en of een Virtuele DOM binnen Componenten van toegevoegde waarde zou zijn. Beiden zijn nog niet geïntroduceerd. Maar nu hebben we CyborgJS als framework ook nog eens open source gemaakt via Github en NPM. Cyborg is gemaakt met Flow type en is compleet Object Georiënteerd.

Ben je benieuwd wat CyborgJS in jouw project kan betekenen? Ben je gewoon geïnteresseerd in het gebruik van CyborgJS en/of heb je goede ideeën voor een uitbreiding? Dan horen we het graag!

Jos

Wil je meer weten?

Jos helpt je graag verder. Jos is de eeuwige optimist en altijd in voor een geintje. Jos heeft in zijn loopbaan als developer een bak ervaring opgedaan en neemt nu de junioren en mediors onder zijn hoede.

085 060 9386 jos@yourpersonalagency.nl