wafs

The course repo for 'Web App From Scratch'

Link to website

The SPA (Single Page Application)

My SPA is called "daily meme's". As the name suggests, it is a website that shows 12 new memes every day. It's a small website with the list of the meme's of that day and the links to the detail page of every meme. The detail page shows the meme and the title of the meme.

The API

I am using the Meme Generator API. I call the most populair memes by the method Generators_Select_ByPopular. This returns the most populair memes. The API has different parameters explained on the website.

• days (optional) The time period for which to filter the result set. ([days] == null) for all time.
• sessionKey (optional) A logged in user session key. Use MgUser_Login to get a session key.
• pageIndex Page index of the requested result set. Defaults to 0 if not specified.
• pageSize Page size of the requested result set. Defaults to 12 if not specified.

And as last you need a APIkey.

I used the default for pageSize and have a variable for the pageIndex based on the day of the week. I did this so everyday of the week there are new meme's to choice from. This makes the user want to go back to the SPA everyday!

Principles

• use strict mode
• Write in ES6
• Write in Object-oriented programming
• Don't use var
• Use const and let
• Write functions in arrow functions, except methods
• Don't repeat yourself
• Write code comments
• Don't use semicolons

Wishlist

• Remove & add elements to the DOM instead of toggle them with display none in CSS
• More content on the website
• More transitions and effects
• Search meme's
• Modules

Actor diagram

Flow diagram

Interaction diagram

Advantages and disadvantages of JavaScript libraries/frameworks

Advantages

• Costs less time.
• Is behind a whole community where you can make things yourself.
• Gives you stable structure of code and features.
• Faster and easier learning curve.
• Good quality code.

Disadvantages

• Sometimes you do not need a framework.
• Frameworks can be somewhat heavier.
• Code is updated quickly so you have to convert it.
• Popularity quickly switches so you often have to change the framework.
• Debugging can be more difficult.

Bronnen:

1. Noupe
2. Quora

Advantages and disadvantages of client-side single page web apps

Advantages

• Faster.
• Most elements only need to be load once.
• The data can be cached locally. This way the data can also be retrieved offline.

Disadvantages

• Only working with JavaScript.
• Less safe than normal applications. XSS makes it easier to be attacked.

Bronnen:

1. Medium
2. Tweakers
3. Stackoverflow

Code reviews

Week 1

1. Sam
2. Cas

Week 2

1. Mo
2. Mees

Dependencies

Images

Rainbow

libraries

Routie

Transparency

API

Meme Generator API

License

MIT Licence - Fenna de Wilde 2018