Web App From Scratch

The course repo for 'Web App From Scratch' which has a duration of 3 weeks.

In parallel with the course CSS To The Rescue

Here Live

TOC

• Getting Started
• Features
• API
• Packages
• Diagrams
• Todo
• Issues
• Wishlist
• Future Plan

Challenges:

• Use vanilla Javascript only
• Try to use CSS Grid as the main layout tool
• Microlibs may be used for templating and routing
• Implement BEM CSS class naming

Getting started

1. Clone the repo: git clone https://github.com/kyunwang/wafs.git

2. Change directory to the app folder: cd app

3. Install the dependencies: npm install or if you use yarn yarn

4. And you are ready to go. The app will open up automatically.

Features

• Browse Anime
• Browse Manga
• Search for users (To keep track of what you are watching yourself) - Basic
• Filter your user library on all, currently watching, finished watching and plan to watch
• See the users anime and manga

The used API

This application makes use of the Kitsu API.

Citation from the docs

Kitsu is a modern anime discovery platform that helps you track the anime you're watching, discover new anime and socialize with other fans.With the Kitsu API, you can do everything the client can do and much more.API path: https://kitsu.io/api/edge

It was really easy to get basic GET requests but a lot of the documentation as unclear. Like how to make POST requests, as the required header and data has not been documented. The time taken to understand and implement the API could have been much less if it had been better documented or more varied examples were given.

At the time of using the API, authorization was also not possible (At the time of writing a Password grant has been documented).

Packages

The packages used are:

• Routie for routing
• Transparency for templating

These packages are ok for small applications but not suitable for anything bigger than that.

Had to include babel-polyfill because the compiled code wouldn't work otherwise.

Routing - Routie

A really simple hash router. It does the job as a super simple light-weight router. A caveat is that internal linking can happen because of the hash linking. (The jumping to ids).

Citation from the docs

Routie is a javascript hash routing library. It is designed for scenarios when push state is not an option (IE8 support, static/Github pages, PhoneGap, simple sites, etc). It is very tiny (800 bytes gzipped), and should be able to handle all your routing needs.

Development seems to be stopped since July 2016

Templating - Transparency

Feels really cluttered and inefficient because the templated have to be declared in the (index)html. It sadly cannot be declared elsewhere and be imported as components.

It was really abstract at the start and I needed time to get used to the way it works.

Documentation can't be said to be clear, but it certainly helps, especially the examples.

Unlike Pug, Transparancy does render dynamically.

Citation from the docs

Transparency is a semantic template engine for the browser. It maps JSON objects to DOM elements by id, class and data-bind attributes.

Development seems to be stopped since September 2015

Actor and Flow diagram

These diagrams give an overview of the available methods and how the (data)flow goes to the application.

The flow diagrams are made with draw.io

Actor diagram

The actor diagram shows all our Actors to give a clear overview of where all the possible methods and properties live and are called.

Flow diagram

These diagrams show the data flow of the application. In this case, it has been divided into three sections.

• The initial flow

Initializing the application

• The flow on the overview page

• The flow on the user library page

Todo

• Clean the templates because I was pretty WET, but want to be DRY (You get it? 😏)
• Add pagination
• Some more info on the initial library view
  • Added an example in the placeholder for now
• Transpile the JS to ES5
• Show the loader on pagination

Known issues

Mostly just small issues

• Not all API failures have been caught yet
• Pagination in a filtered view does not work correctly yet. (e.g. after selecting completed in the user library)
• Does not work on most browser (because of ES6 spread operator) - Transpile to ES5
• Some styling (the buttons) is not consistent across browsers (safari, windows chrome)
• The detail page is not really done/made
• The pagination shouldn't have animation
• Pagination didn't work on safari ()
• Pagination runs on detailpage
• Search on enter doesn't work

Wishlist

• The ability to login/create an account
• The ability to update your entries
• More options in the anime/manga overview for better browsing

Future plan

Recreate a similar app but with a React or Vue and a different API. Preferably one which keeps itself synced with MyAnimeList

License

MIT - Kang Yun Wang (Kevin Wang)