CloudSofwareEngineering

Uitdagingen front-end web development

Front-end web development is het deel van de applicatie waar de gebruiker interactie mee heeft. In het geval van een website: het zichtbare deel van de applicatie. HTML, CSS en JavaScript zijn de meest voorkomende talen die gebruikt worden voor websites of webapplicaties. Front-end web development kent een aantal uitdagingen, waaronder het correct tonen van de website in verschillende browsers. Daarnaast wil je natuurlijk dat de site en webpagina’s snel laden voor de bezoeker.

Front-end development frameworks.png


De gebruiker staat op nummer één

Het waardevolle aan de specialisatie van front-end web development: dat de developer een hoop veranderingen aan het uiterlijk van de website kan aanbrengen om het de gebruiker makkelijker te maken. Daarmee kan de Front-End Developer daadwerkelijk verschil maken. Tegelijkertijd brengt dit voor de developer ook uitdagingen met zich mee. Een interface die voor de gebruiker prettig aanvoelt, een duidelijke navigatie en een website die vlug laadt creëer je natuurlijk niet vanzelf! In deze blog geeft Swen daarom praktische tips hoe je met deze uitdagingen aan de slag gaat.

 

Zorg dat de website werkt in iedere browser

De code voor front-end web development lijkt eenvoudig, maar door de verscheidenheid aan browsers vormt dit toch een uitdaging. Zorg ervoor dat de website in iedere browser werkt. Iedere webbrowser implementeert de standaarden namelijk net iets anders; in de ene browser kan een webpagina er perfect uitzien en in de andere browser kan de site een complete mislukking zijn. Het is dus van belang om alle gangbare browsers te blijven testen. Testing en debugging komt hierbij om de hoek kijken. Daarnaast is het mogelijk dat je in sommige gevallen een melding krijgt van een bug, waarbij je in  eerste instantie de bug niet kan reproduceren. Vervolgens switcht je terug naar de Microsoft browser Edge en dat je ineens wel allerlei problemen tegen komt.

Front-end+development+tools.jpg

Deze problemen zijn deels te ondervangen door de styling basic te houden en voor een beperkt aantal extra styling opties te kiezen. Deze specificaties zijn namelijk binnen de HTML en CSS standaarden goed gedefinieerd en werken op vrijwel alle browsers correct. Daarnaast is het belangrijk om voordat je naar buiten treedt alle browsers te testen, zodat je zeker weet dat het daadwerkelijk werkt. In sommige gevallen kom je er achter dat je wat extra code moet schrijven specifiek voor één browser, maar dat komt niet heel veel voor.

Doe er alles aan om de snelheid van de website te behouden

Een trage website zorgt voor een hoop irritatie bij de bezoeker. Je wilt natuurlijk niet dat de gebruiker je website vroegtijdig verlaat door een zeer vertraagde laadtijd van webpagina’s.

Een belangrijke trend op front-end web development gebied hierin: applicaties sneller maken door  niet meer naar full page loads te gaan. Full page load: wanneer een gebruiker naar een ander deel van de site gaat (door bijvoorbeeld op een menu item te klikken) en vervolgens de volledige HTML, CSS en JavaScript opnieuw ingeladen wordt. Tegenwoordig willen websites er steeds meer naartoe dat je alleen de content verandert die ook daadwerkelijk belangrijk is om te wijzigen. Op deze manier hoef je veel minder informatie op te halen en hoeft de browser niet de volledige site opnieuw te renderen. Met als positief gevolg: de pagina wordt een stuk sneller, waarbij je niet meer een paar minuten tegen een wit scherm aankijkt.     

Drie tips voor website performance                                            

In deze paragraaf vind je nog drie praktische en direct toepasbare tips om je website te versnellen en de user experience te verbeteren:

  1. Beperk het aantal requests op een pagina. Het is voor je code structuur overzichtelijk indien je de JavaScript in bestanden opdeelt. De structuur is hierdoor in een oogopslag helder. In productie leidt deze werkwijze wel tot een veel tragere website. Daarom de tip om alle Javascript in één bestand te zetten. Hierdoor neemt is de hoeveelheid data veel kleiner. Dit beperkt de laadtijd van een pagina. Wanneer je JavaScript samenvoegt het advies om deze te verkleinen met een minification compressor. 

  2. Gebruik foto’s en video’s met mate: beeldmateriaal op webpagina’s leidt tot het trager laden van de webpagina. Plaats daarom op de site alleen thumbnails van lage resolutie. Hierdoor laden afbeeldingen sneller. Maak de foto klikbaar, zodat deze in hoge resolutie in een apart venster verschijnen. Dit scheelt aanzienlijk in de hoeveelheid data naar de browser.

  3. Laad alleen de informatie die wijzigt: gebruik een volledige pagina refresh als dat echt nodig is. En kies de elementen uit de DOM (Document Object Model) die veranderen en plaats daar de nieuwe inhoud in.

 

Laad alleen applicaties die echt voor de server zijn

Tot slot delen we nog een belangrijke tip die je een hoop tijd en ruimte zal besparen: werk met Docker. Dit helpt je om sites lokaal te ontwikkelen. Met Docker kun je eenvoudig images maken en deze online zetten. Eerder werden er vaak virtuele machines gebruikt, dit is echter niet praktisch gezien de hoeveelheid overhead die ontstaat bij het gebruik van virtuele machines. Bij Docker worden alleen de applicaties en onderdelen geladen die écht nodig zijn.

 

Wil je ook een snellere website of nagaan of jouw website echt in alle browsers goed werkt? Deze blog heeft je dan tips en inzichten gegeven, hoe je zelf met front-end web development aan de slag kunt. Nog vragen? Neem contact met ons op.

Introductie Ewan Klomp - DevOps Engineer / Continuous Delivery

20180815_195621.jpg

Hallo, mijn naam is Ewan Klomp en ben bij Search4Solutions werkzaam als Continuous Delivery Expert.

Als eerste Young Professional heb ik het programma en de groep zien groeien in professionaliteit en kennisdeling. We zijn begonnen met een kleine club informaticastudenten die een passie voor software development hebben. Inmiddels zijn we uitgegroeid tot een grote club young professionals die met passie aan onze projecten werken.

Zelf heb ik mij kunnen specialiseren op het gebied van Continuous Delivery, door intern een traineeship te volgen. Daarna met de opgedane kennis in het bedrijfsleven te stappen, in projecten die mij deze kennis liet benutten. Deze projecten waren leuk en succesvol. Eveneens heb ik in die tijd mijn studie Informatiekunde met veel plezier afgerond. 

Nu maak ik als Young Professional de stap naar voltijd. Ik kijk er zeer naar uit om deze stap te mogen maken en ik ben benieuwd wat het mij gaat brengen.

In de tussentijd wil ik mijn opgedane kennis delen met de community die we hebben opgebouwd. In de komende tijd komen er op deze pagina daarom artikelen die u zou kunnen helpen met uw Continuous Testing processen. Vorige week is een artikel uitgekomen over cross platform UI Testing met Xamarin als voorproefje op deze reeks.

In de volgende delen zal u meer kunnen lezen over AT testen, performance testen en A/B testing. Wilt u eerder meer weten? Neem dan contact met ons op.

Cross-platform UI testing met Xamarin

Door: Ewan Klomp

Nadat Microsoft begin 2016 Xamarin overnam, heeft Microsoft grote stappen gezet om cross-platform applicaties met goede performance in C# te bouwen. De snelheid is nog niet helemaal als Native code. Maar door de mogelijke code sharing tussen de twee platformen (iOS en Android) is het een degelijke optie. Zeker wanneer er geen zware computationele berekeningen nodig zijn. Dit artikel gaat dieper in op hoe je User Interface tests uit één project, op beide platformen draait.

Simpele werkwijze

De user interface test van Xamarin werken met een interface. De user interface test library heet Xamarin.UITest en de interface de IApp interface. Xamarin kan met dezelfde interface beide platformen bedienen. Door de IApp interface is het klikken van een object op iOS en Android heel simpel, met dezelfde app.Tap(string) method call.

Creëren van test cases

De methoden die de IApp interface heeft zorgen dat er diverse, geavanceerde test cases gecreëerd kunnen worden. De mogelijkheden zijn vergelijkbaar met die van grotere test platformen zoals Selenium. Ook kan je met Xamarin objecten makkelijk vinden door middel van naam of XPath. Vervolgens kun je ze klikken of er tekst bij invoeren. Natuurlijk bevat Xamarin specifieke methoden voor gestures zoals drag/drop, pinching, en swiping om een gebruiker zo goed mogelijk na te bootsen.

HIerboven zie je een snippet van een Test case, geschikt voor zowel IOS als Android

HIerboven zie je een snippet van een Test case, geschikt voor zowel IOS als Android

Hoe het werkt

Als je dus binnen je test een object aan wil klikken genaamd ´buttonHome´, voer je de functie app.Tap(buttonHome) uit. Dit zoekt dan het object met id ´buttonHome´ op in de huidige views die open staan. Om er voor te zorgen dat de juiste view de juiste ID heeft moet de ID op de juiste plek in de layout files toevoegen: .xib voor iOS en .xaml voor Android.

  • Op iOS geef je een id op deze manier mee aan een element in de .xib file:
    <accessibility key="accessibilityConfiguration" identifier="buttonHome"/>

  • Bij Android in de .xaml op deze manier:
    android:id="@+id/buttonHome"

Let hier op

In principe is het mogelijk om een test te schrijven die draait op Android en IOS. Het probleem zit soms in het verschil van gedrag tussen de platformen op het gebied van views. Hier moet dan binnen 1 testcase een verschillende implementatie voor geschreven worden. Verder is het van belang dat elk element van een testcase waarmee je werkt zijn eigen unieke ID heeft en hetzelfde zijn op beide platformen. Bij een juiste implementatie is het enige verschil de initialisatie van de applicaties voor het testen. Let er op dat je de ID’s van de objecten gelijk houdt op beide platformen. Hierdoor kunnen juiste objecten op de juiste plek gevonden worden.

En nu jij

Hopelijk heb ik je enthousiast gemaakt en ga je zelf met Xamarin aan de slag. Als je hier meer over wilt weten kun je me bereiken via ons contactformulier:

Cybersecurityavond Hogeschool Utrecht

Op 23 mei hebben Ewan Klomp, Lars Tijsmans en Jan Vlietland van het Young Professional programma een Cybersecurity avond met Hogeschool Utrecht gehouden.

IMG-20180529-WA0010.jpg

Het onderwerp van de avond was:

"Cybersecurity en de softwareontwikkelaar".

 

De stelling was: 

"elke ontwikkelaar moet verstand hebben van Cybersecurity". 

Het was een avondvullend programma waarin presentatie, discussie en experimenten speels werden afgewisseld. Een leerzame avond vol ontmoetingen tussen professionals en young professionals, met als doel om met elkaar antwoorden te vinden.

IMG-20180529-WA0003.jpg

De eindconclusie was dat:

"bijna elke ontwikkelaar moet verstand hebben van Cybersecurity".

We danken Hogeschool Utrecht voor de interesse en gastvrijheid. Tot een volgende keer!

Je applicatie hosten in containers

Het verplaatsen van de hosting van een eigen rekencentrum naar een cloud-omgeving kan veel besparing opleveren. Bedrijven verplaatsen daarom hun hosting op grote schaal naar de cloud.

Veel organisaties denken daarbij dat virtual machines dan de beste oplossing is. Jammer want ze missen dan de kans om software te hosten in containers. Hosten in containers heeft vele voordelen. In dit artikel leggen we uit wat containers zijn en wat de voor- en nadelen zijn van containers.

Wat zijn containers?

Een container biedt de mogelijkheid om het Operating Systeem te sharen over meerdere containers. Ze zijn daardoor veel goedkoper qua hosting dan virtual machines. 

Het Operating Systeem onder de container bevat alle benodigde libraries die een applicatie nodig heeft om te functioneren. De containers zelf zijn daardoor zeer compact en zijn binnen een paar seconden te creeren. Dit maakt ze niet alleen goedkoper, maar ook veel flexibeler.

Containerization is geen nieuw begrip. Het idee om de OS laag te virtualiseren bestaat al sinds begin deze eeuw. 

Het container framework ‘Docker’ heeft het begrip containers praktisch gepopulariseerd. Veel innovatieve bedrijven hebben Docker snel geadopteerd. 

 
VM_vs_Container_stack.png
 

De nadelen van containers.

Evenals de virtual machine niet de universele vervanger is van de fysieke server, is de container dit niet van de virtual machine. Beide technologieën hebben hun krachten. Containers floreren in een omgeving met microservices. Ze schalen mooi, doordat ze zeer snel te creeren zijn afhankelijk van het benodigde dataverkeer.

Containers zijn echter wel gevoeliger voor virussen doordat ze het onderliggende Operating Systeem delen. Ook kunnen ze diep reiken in het OS om überhaupt te functioneren. VM-instanties bieden deze controle en veiligheid wel. 

Overweeg containers

Bij veel bedrijven staat veiligheid op nummer één en kennis omtrent containers is vaak niet paraat, virtual machines zijn daarom een veilige keuze.

Jammer, want de toekomst van containers is veelbelovend en het zal niet lang duren voordat de meerderheid deze techniek adopteert, zoals dit nu gebeurt met VM-instanties in de cloud.

Meer informatie? Bekijk dan de volgende onderwerpen: Continuous Delivery 3.0, Cloud Software Engineering, Cloud Deployments en Testautomatisering.