Development
Frameworks
Zelf heb ik frameworks in het verleden vaak gebruikt, maar wist niet hoe een framework precies in elkaar zit en wanneer je wel of niet een framework behoort te gebruiken.
- Voorgedefinierde code maakt het makkelijk om functies toe te voegen aan een website
- Een framework bevat (meestal) compactere code dan je zelf zou schrijven
- De meestgebruikte frameworks zijn betrouwbaar
- Achter de creatie van een framework zit meestal een team van professionals die weten waar ze mee bezig zijn.
- Je moet de structuur van de gebruikte frameworks aanhouden en kan deze niet snel aanpassen naar wens
- Voor een beginnend programmeur hindert een framework je in het leren van een taal. Het is makkelijk om terug te vallen op iets wat voorgekauwd is.
- Een framework heeft een eigen leercurve, die buiten de leercurve van javascript zelf valt.
Onderzoek Frameworks
Ik ben erachter gekomen dat er een stuk of 50 populaire frameworks zijn die gebruikt worden door grote bedrijven. Daarnaast zijn er natuurlijk duizenden kleinere frameworks die ook veel gebruikt worden door developers. Ze worden allemaal gebruikt om programmeerwerk te versimpelen en om websites sneller te maken. Frameworks komen natuurlijk in allerlei soorten en maten. Zelf heb ik deze periode een kleinschalig framework gemaakt die voor onze proftaak gebruikt kon worden. Ook heb ik onderzoek gedaan naar een specifiek framework om te kijken hoe het functioneert.
Agility.js
Het framework wat ik heb onderzocht geeft een goed voorbeeld van het gebruik van compacte code en is in essentie een MVC library. Dit betekent dat de gebruiker het model van de library door de gebruiker zelf gemanipuleerd kan worden in de web browser. Dus de gebruiker kan bijvoorbeeld zelf code maken in de front-end om de back-end te beïnvloeden.
Agility.js zorgt ervoor dat een enorme rij code verkleind kan worden tot een klein stukje. Als ik in de library kijk, zie ik dat er een makkelijke manier is om zelf een klok te maken. In onderstaande code is te zien dat ik simpelweg een variabele klok kan maken en een model, een view en een controller erin kan zetten. Binnen elk van deze componenten kan ik de style aanpassen en voorgemaakte code aanroepen. Onderaan de pagina is de geïmplemteerde klok te vinden.
Agility.js
Het framework wat ik heb onderzocht geeft een goed voorbeeld van het gebruik van compacte code en is in essentie een MVC library. Dit betekent dat de gebruiker het model van de library door de gebruiker zelf gemanipuleerd kan worden in de web browser. Dus de gebruiker kan bijvoorbeeld zelf code maken in de front-end om de back-end te beïnvloeden.
Agility.js zorgt ervoor dat een enorme rij code verkleind kan worden tot een klein stukje. Als ik in de library kijk, zie ik dat er een makkelijke manier is om zelf een klok te maken. In onderstaande code is te zien dat ik simpelweg een variabele klok kan maken en een model, een view en een controller erin kan zetten. Binnen elk van deze componenten kan ik de style aanpassen en voorgemaakte code aanroepen. Onderaan de pagina is de geïmplemteerde klok te vinden.
var clock = $$({
model: {
time: '12:00:00'
},
view: {
format: '',
style: '& { color:white; background:#88f; padding:4px 8px; }'
},
controller: {
'create': function(){
var self = this;
setInterval(function(){
self.model.set({time: (new Date()).toLocaleTimeString()});
}, 1000);
}
}
});
$$.document.append(clock);
model: {
time: '12:00:00'
},
view: {
format: '',
style: '& { color:white; background:#88f; padding:4px 8px; }'
},
controller: {
'create': function(){
var self = this;
setInterval(function(){
self.model.set({time: (new Date()).toLocaleTimeString()});
}, 1000);
}
}
});
$$.document.append(clock);
Zelfgemaakt Framework
Met TextBubble Machine kan elke Div tot leven komen. Dit framework kan gebruikt worden om web-based games levendiger te maken, om of informatie te verschaffen bij een onderdeel van een website.
Hoe werkt het?
TextBubble Machine zorgt ervoor dat er een tekstwolk ontstaat zodra er op een div is geklikt die de toegevoegde tekstwolk class heeft. Zo kan elk element van een omgeving een eigen informatiebron bevatten met de druk van een knop.
Druk op de afbeelding hiernaast om begroet te worden.
Gebruik in de proftaak
Om de karakters in ons verhaal meer inhoud te geven zullen er interacties zijn tussen de hoofdpersoon en mensen die ze tegenkomt. Het was mijn taak om tekstbubbels te maken waar de gebruiker op kan klikken. Deze tekstbubbels zijn uniek aan elk karakter in het verhaal, dus om extra programmeerwerk te voorkomen is het handig als er alleen een class aan een karakter gezet hoeft te worden.
Uiteindelijk is er gekozen om de praatwolken automatisch in beeld te laten verschijnen, om het verhaal meer een beleving te maken in plaats van een spel, vandaar dat mijn framework op dit moment niet in het proftaakproject zit.
Hoe werkt het?
TextBubble Machine zorgt ervoor dat er een tekstwolk ontstaat zodra er op een div is geklikt die de toegevoegde tekstwolk class heeft. Zo kan elk element van een omgeving een eigen informatiebron bevatten met de druk van een knop.
Druk op de afbeelding hiernaast om begroet te worden.
Gebruik in de proftaak
Om de karakters in ons verhaal meer inhoud te geven zullen er interacties zijn tussen de hoofdpersoon en mensen die ze tegenkomt. Het was mijn taak om tekstbubbels te maken waar de gebruiker op kan klikken. Deze tekstbubbels zijn uniek aan elk karakter in het verhaal, dus om extra programmeerwerk te voorkomen is het handig als er alleen een class aan een karakter gezet hoeft te worden.
Uiteindelijk is er gekozen om de praatwolken automatisch in beeld te laten verschijnen, om het verhaal meer een beleving te maken in plaats van een spel, vandaar dat mijn framework op dit moment niet in het proftaakproject zit.
Documentatie (readme)
Om TextBubble Machine (tbm.js) zelf te gebruiken download je de .zip. Je ontvangt een .css -en .js bestand. Zet vervolgens tbm.css in je eigen css map en tbm.js in de js map. Roep ze allebei aan in je html bestand op de volgende manier.
<link rel="stylesheet" href="css/TextBubbleMachine/style.css">
<script src="js/TextBubbleMachine/tbm.js"></script>
De tekstballonnen kunnen nu aan een div worden geplakt. Dit kan door een class toe te voegen aan de div. Hieronder staat hoe de div van het plaatje hierboven eruit is komen te zien. De class "sociaal" zorgt ervoor dat er beleefde berichten op het scherm komen zodra er op de man geklikt wordt.
<div id ="maninblack" class ="sociaal">
<img src="img/man.png">
</div>
<img src="img/man.png">
</div>
In de onderstaande code worden alle classes met de naam "sociaal" aangeroepen. Daarna wordt er een addEventListener aangemaakt voor het klikken van de muis. De functie letsgetsocial gaat ervoor zorgen wat er gebeurd als er met de muis wordt geklikt op de div.
var sociaal = document.getElementsByClassName("sociaal");
for (var i = 0; i < sociaal.length; i++)
{
sociaal[i].addEventListener('mouseup', function(letsgetsocial)
{
for (var i = 0; i < sociaal.length; i++)
{
sociaal[i].addEventListener('mouseup', function(letsgetsocial)
{
Alle volgende code staat in de bovenstaande functie. De variabelen x en y houden bij waar de muis is en of er gescrolled is in de pagina.
var x = letsgetsocial.clientX + $(window).scrollLeft();
var y = letsgetsocial.clientY + $(window).scrollTop();
var y = letsgetsocial.clientY + $(window).scrollTop();
In de variabele "berichten" worden alle berichten opgeslagen die gelinkt worden aan de class. De variabele "bericht" zorgt er in dit geval voor dat alle berichten in willekeurige volgorde in beeld komen. De math kan worden verwijderd als er bijvoorbeeld maar 1 bericht bij een div hoeft te komen.
var berichten = ["bericht1", "bericht2", "bericht3"];
var bericht = berichten[Math.floor(Math.random()*berichten.length)];
var bericht = berichten[Math.floor(Math.random()*berichten.length)];
De praatwolk zelf is al gestyled en hoeft alleen maar uit de css gehaald te worden. De div "wolk" wordt hiervoor aangeroepen. Om de praatwolk bij de muisaanwijzer te zetten zodra er geklikt wordt, worden de eerder gemaakte variabelen x en y aangeroepen. Deze zorgen er nu voor dat de positie waarop de muis staat nu ook de positie van de praatwolk wordt.
var praatwolk = document.createElement("div");
praatwolk.innerHTML = bericht;
praatwolk.setAttribute("id", "wolk");
praatwolk.style.left = x + "px";
praatwolk.style.top = y + "px";
praatwolk.innerHTML = bericht;
praatwolk.setAttribute("id", "wolk");
praatwolk.style.left = x + "px";
praatwolk.style.top = y + "px";
Omdat de praatwolk een animatie is die verschijnt en dan weer verdwijnt, moet de div "wolk" ook voor altijd verdwijnen zodat er niet honderden praatwolken worden aangemaakt. Daarom wordt de wolk verwijderd zodra de animatie is afgelopen.
praatwolk.addEventListener('animationend', function(letsgetsocial) {
this.parentNode.removeChild(this);
});
document.body.appendChild(praatwolk);
});
}
}
this.parentNode.removeChild(this);
});
document.body.appendChild(praatwolk);
});
}
}
Download tbm.js
Wil je tbm.js zelf gebruiken om informatiewolken aan je divs te hangen, of de karakters in je spel meer inhoud te geven? Een gezipte versie is hier beschikbaar.
Reflectie
Voor de proftaak heb ik samen met mijn groepsgenoten gekeken welke frameworks het beste paste bij onze ideeën, en gelukkig waren de perfecte frameworks te vinden. Ik wilde graag dat mijn eigen framework geimplementeerd kon worden in het project, maar uiteindelijk heb ik er lang over gedaan om het werkend te krijgen. Voor de proftaak hebben we een andere manier (binnen een ander framework) gebruikt om de praatwolken werkend te krijgen. Wel heb ik mijn eigen framework zo gevormd dat het gebruikt kan worden voor websites en applicaties die niks met onze proftaak te maken hebben. Zelf wist ik nog niet veel van frameworks dus ik heb veel geleerd over javascript in het algemeen. Ook ben ik zelf tevreden met mijn eindresultaat.