Overslaan en naar hoofdinhoud gaan

Van onze Depsters August 06, 2019

De voordelen van moderne JS-frameworks voor CMS-build

Whitepaper-Page-Speed

Het gebruiken van moderne JS-frameworks voor de views van je CME-applicatie zorgt voor een grotere ontwikkelingssnelheid en stroomlijnt het ontwikkelingsproces. Neem React.Net bijvoorbeeld. Hiermee kunnen React-componenten gebruikt worden als views in een CME-applicatie die afhankelijk is van de uitvoering als een .Net-applicatie. Daardoor kunnen dezelfde views worden gebruikt in de .Net-toepassing en wordt een demo site gemaakt voor snelle iteraties van de componenten en de bijbehorende CSS.

Vroeger was niet alles beter

Voorheen werd bij het ontwikkelen van een website voor een CMS een HTML demo site gemaakt. Dit werd vervolgens geïntegreerd in de CMS-applicatie. Het nadeel hiervan is dat het veel overhead veroorzaakt voor het vertalen van views. Daarnaast verhoogt het de complexiteit van het ontwikkelingsproces.

Dat is niet per se verkeerd; deze manier van werken was destijds nodig. Er zat namelijk verschil in de tools die frontend teams gebruikten en die de backend teams gebruikten. Het frontend team moest snel wijzigingen kunnen aanbrengen om de iteraties van de HTML, JS en CSS voor de site samen te laten ontwikkelen. Het backend team zou vervolgens de HTML moeten vertalen naar Razor-views in een .Net-applicatie (Sitecore, Tridion Sites, Umbraco, enz.) om de functies van de CME te benutten.

Het probleem dat hierdoor ontstond, was dat er zich errors konden voordoen wanneer de vertaling van de ene view language naar een andere gedaan werd. Dit vereiste dat verschillen moesten worden benadrukt wanneer wijzigingen werden aangebracht, wat een continue onderhoudstaak opleverde om ervoor te zorgen dat beide weergaven in lijn werden gehouden. En hoe verder de projecten vorderden, hoe meer de twee view sets uiteenliepen. Dit resulteerde in problemen en vertraging van de projecten op de lange termijn. Bovendien was het vertalen van de ene taal naar de andere een handmatig proces, waardoor tijd werd verspild wat beter besteed kon worden aan het ontwikkelen van nieuwe functies voor een website.

De oplossing

Met de introductie van JS Frameworks, zoals React en krachtige server-side rendering, kunnen de tools van FE en BE gecombineerd worden, waardoor het proces meer samenhangend wordt. Een voorbeeld: in plaats van het gebruiken van Handlebars.js op de FE-demosite om deze vervolgens te vertalen naar Razor in de BE-geïntegreerde CME-toepassing, kunnen we React-componenten gebruiken als view rendering voor beide. Dit betekent dat het niet nodig is om de views van de ene taal naar de andere te vertalen. Zowel FE- als BE-teams kunnen dezelfde views delen, waardoor functies sneller en betrouwbaarder kunnen worden ontwikkeld.

Om dit te doen, gebruiken we de React.Net-library waarmee je React-componenten kunt uitvoeren als de views voor je .Net-applicatie.

ReactJS.NET maakt het gemakkelijker om Facebook’s React en JSX van C# en andere .NET-talen te gebruiken, met speciale aandacht voor ASP.NET MVC (hoewel het ook in andere omgevingen werkt). Het ondersteunt zowel ASP.NET 4 (met MVC 4 of 5) als ASP.NET Core MVC. Het kan cross-platform ingezet worden en kan op Linux worden uitgevoerd via Mono of .NET Core. Bekijk de tutorial om te zien hoe gemakkelijk het is om aan de slag te gaan met React en ReactJS.NET!”

PROCES

De FE demo-site is gemaakt en werkt met Node en Webpack om de ontwikkeling van de React-componenten mogelijk te maken. Dit kan het volledige pakket met tools gebruiken dat is ontwikkeld voor React-sites, en is op geen enkele manier verbonden met de CME-dependencies.

De demo site maakt gebruik van lokale static data om CME functionaliteiten te mocken. Dit biedt ruimte voor de demosite om los van eventuele CME-dependencies ontwikkeld te worden. Ook kunnen tools zoals Storybook worden gebruikt om de ontwikkeling van de React-componenten te beheren die geïsoleerd zijn van de CME.

Webpack en hot reloading kunnen worden gebruikt op de React-componenten wanneer het FE-team ze ontwikkelt. Dit zorgt ervoor dat de FE-ontwikkeling zo efficiënt mogelijk kan zijn wanneer gebruik wordt gemaakt van de JS-framework tooling.

Webpack wordt gebruikt om het JS-bestand voor de site te genereren. We gebruiken twee toegangspunten: één voor de server side en een andere voor de componenten aan de client side. Alleen het JS-bestand van de client side is opgenomen in de assets van de site die getoond wordt in de browser. De server side versie wordt alleen gebruikt op de webservers als onderdeel van de CMS-toepassing.

Met React.Net kan naar dit JS-bestand aan de server side worden verwezen en dit kan vervolgens worden gebruikt als een view op de MVC-site. Binnen de MVC-site is er een view-renderer geregistreerde JsxViewEngine. Dit zorgt voor de rendering van de view met React.Net. Met een eenvoudige flag kan het component ook worden weergegeven als component aan client side. React Hydrate wordt gebruikt om de component te vullen met de klantgegevens vanuit het view model.

VOORDELEN

De voordelen van dit proces bestaat uit twee delen:

  • het is sneller om de site te ontwikkelen omdat we de demosite niet vertalen naar de CME-applicatie;
  • verwijdert de kans dat bugs worden geïntroduceerd door onjuiste of verouderde integratie verschillen tussen de demosite en de CME-toepassing.

Door de JS-frameworks te gebruiken als server voor view-engine kun je ook dezelfde taal gebruiken om complexe functionaliteit te ontwikkelen die aan de client side worden uitgevoerd. Dit zorgt ervoor ​​dat het component een initiële render aan de server side heeft en vervolgens wordt gevuld met data om als React.js componenten aan de client side te functioneren.

Verdere ontwikkeling van de applicatie kan dan worden uitgevoerd en er is geen afwijking in de views in de demo en de .Net-applicaties. Dit maakt releases en continuous integration veel eenvoudiger te implementeren.

Vragen? We helpen je graag!

Oeps!

Als je dit leest dan kan je het formulier wat hier hoort te staan helaas niet zien. Waarschijnlijk heb je een adblocker aan staan. Schakel deze uit om het formulier alsnog te zien. Nog steeds problemen? Open deze pagina in een andere browser of neem contact met ons op: [email protected]