Giter Club home page Giter Club logo

wafs's Introduction

wafs

Web App From Scratch

De voor- en nadelen van het gebruik van frameworks

Voordelen van het gebruik van frameworks zijn:

- Je kan sneller een code produceren, wat tijd bespaart (K, 2015) - Er vindt veel support en fixes plaats in open source frameworks - Ervaringen die achter de frameworks zit (Kralingen, 2016)

Nadelen

- Je moet een framework leren gebruiken - Als er een lek in het framework zit, is jouw website ook kwetsbaar - Zorgt voor een langzamere script laadtijd - Bij nieuwere versies moet je controleren of je code nog werkt (K, 2015) - Het is een ‘te makkelijke’ oplossing - Wil je het goed gebruiken moet je de basis kennen (Kralingen, 2016)

Conclusie
De voordelen zijn dat een developer minder tijd in de code hoeft te steken en er al allerlei mogelijkheden voor hem klaar liggen. Er zijn veel mensen die frameworks zoals jQuery dagelijks aan het verbeteren zijn, waardoor het steeds geoptimaliseerd wordt. Daarnaast is het ook cross-browser compatible, waardoor op elke soort browser je code mooi weergeven wordt.

Het nadeel is dat je wel een framework moet leren gebruiken. Het probleem van frameworks is dat te veel mensen hier naar grijpen zonder eerst javascript te beheersen, dit zorgt ervoor dat mensen niet goed weten wat de precies doet. Daarnaast bevat een framework veel functionaliteiten, die de laadtijd van het script vertraagd. Gebruik je niet veel functies, dan is het beter om te overwegen om dit gewoon uit te voeren met javascript.

In het vak Web App From Scratch willen we geen gebruik maken van jQuery, omdat de basis van jQuery javascript is. In plaats van een tool te gebruiken die javascript voor je schrijft willen ze bij dit vak de studenten kennis laten maken met de basis (javascript) en laten zien wat de codes doen, in plaats van het klakkeloos aannemen van jQuery.

Bronnen
K. J. (28 september 2015). PHP framework, wel of niet doen? En welk framework?. Gevonden op 5 februari 2017 op de PHP Hulp website: https://www.phphulp.nl/php/forum/topic/php-framework-wel-of-niet-doen-en-welk-framework/98679/

Kralingen, J. (19 juni 2016). Javascript libraries: friend or Foe. Gevonden op 7 februari 2017 op de Kaliber website: http://archief.kaliber.net/javascript-libraries-friend-or-foe/

Uzayr, bin S. (26 januari 2016). JavaScript Frameworks: To Use or Not To Use? Gevonden op 7 februari 2017 op de Noupe website: http://www.noupe.com/development/javascript-frameworks-94897.html

Voor- en nadelen van het gebruik van single page web app

Voordelen

- Content wordt eenvoudig getoond - Gebruiksvriendelijk voor de gebruiker door het duidelijke begin, midden en eind van de pagina - Scrollen werkt beter dan het klikken op links - Hogere conversie ratio dan een website met meerdere pagina’s (Schneider, z.d.)

Nadelen

- Kans op het volproppen van de website - Visuele hiërarchie en discipline nodig - Minder goed vindbaar door zoekmachines - Te veel content en afbeeldingen zorgen voor een langzamere laadtijd (Schneider, z.d.)

Conclusie
De voordelen zijn dat een single page web app gebruiksvriendelijk is. Er is een duidelijk begin-midden-eind structuur in een single page web app, waardoor gebruikers weten waar ze aan toe zijn. Het scrollen gaat natuurlijk voor voornamelijk bij de mobiele gebruikers, waardoor er meer content bekeken wordt dan op een website met meerder pagina’s. Daarnaast is er een hogere conversie op de single page websites dan op de websites met meerdere pagina’s.

De nadelen zijn dat er een risico is dat je te veel kwijt wilt op de pagina, waardoor deze overvol raakt. Hierbij is een visuele hiërarchie en ontwerp disciplines belangrijk om te hanteren, zodat het niet een rommelige pagina wordt. Daarnaast is de single page web app minder goed zichtbaar voor SEO. Dit komt doordat er moeilijk onderscheidt gemaakt kan worden in relevantie van de content. Wil je veel content op je single page web app, dan kan dit ook zorgen voor een langzamere laadtijd.

De keuze om voor een single page web app te gaan, ligt geheel aan het project/concept. De single page web app werkt goed als je niet te veel content hebt.

Bronnen
Schneider, S. (z.d.) Single-Page vs. Multi-page UI Design: Pros & Cons. Gevonden op 7 februari 2017 op de Studio website: https://www.uxpin.com/studio/blog/single-page-vs-multi-page-ui-design-pros-cons/

wafs's People

Contributors

giuliam avatar

Watchers

James Cloos avatar avatar

wafs's Issues

Dubbele definitie van variable

` var sectionList;
var sectionsId;

        for (i = 0; i < sections.length; i++) {
            var sectionList = sections[i];`

Ik snap dat je variabelen bovenin de scope wilt definieren maar nu zorg je ervoor dat je sectionlist 2 keer definieert, dat is niet handig. Het is ook ongebruikelijk om een iterator uit een forloop te halen zoals je met i doet. Aangezien je i alleen in die forloop gebruikt mag je em ook daar aanmaken.

Syntax errors in CMD GEO script

De code hoeft niet te functioneren maar er mogen ook geen syntax errors in staan! Probeer em maar eens door een linter te gooien. Of kijk even waar het object gpsConfig wordt afgesloten.
Dit gaat wss fout omdat je de code niet laat inspringen, dan zie je dit soort dingen niet.

Gebruik jshint of een andere code checker

Dit kan je echt helpen in het begin om veel voorkomende fouten te verhelpen. Het is even wat gedoe om in het begin al die warnings te googlen maar het helpt echt met je begrip.

Niet gebruikte code verwijderen

Dit is voor de js lint plugin in je editor dus deze regel kan je verwijderen als je het online zet.
jslint browser: true, devel: true, eqeq: true, plusplus: true, sloppy: true, vars: true, white: true

Deze code wordt helemaal niet gebruikt dus je kan deze het beste verwijderen uit je code.
//(function(){
//
//var app = {
// init: function(){
// routes.init();
// console.log("routes init starten");
// }
//};
//
//var routes = {
// init: function(){
// window.addEventListener("hashchange", function()
// {
// console.log("dit is m");
// });
// console.log("test13");
// }
//};
//
//var sections = {
// toggle: function(route){
// route = console.log("test2");
// }
//};
//
//app.init();
//
//}());
// var sections = {
// toggle: function(route/* this is location.hash */) {
// var sections = document.querySelectorAll('main section');
// for (i=0; i<sections.length; i++){
// console.log(route);
// }

consider using an template engine or templating literals

instead of this
html += '<p>' + element.title + '</p>' + '<img src= "' + 'http://image.tmdb.org/t/p/w500' + element.poster_path + '"/>';

you can do this in e6 (template literals)
<p>${element.title}</p>

or use a templating engine like handlebars to generate html

<script id="entry-template" type="text/x-handlebars-template">
  <div class="entry">
    <h1>{{title}}</h1>
    <div class="body">
      {{body}}
    </div>
  </div>
</script>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.