Minor Web Development - Web App From Scratch
The coming three weeks you will create a client side web app during this course. Based upon data from an API of your choice, you create an overview and detail page of the items retrieved from the API. On the overview page you add a filter / sort functionality, so that you can filter the items. You write as much vanilla code as possible, and avoid the use frameworks or libraries (with the exception of a micro library here and there) as much as possible. You will increasingly give structure to the code as the course progresses.
16 hours have been scheduled to work on this course this week (Monday and Tuesday). Try to plan your work well! In the meantime, progress is monitored in standup meetings and classroom meetings. Your code will be reviewed at Friday. Any issues will be placed in your GitHub repository.
Manipulate data and templating. Split code into modules. Reflect on what you made.
- Manipulate, filter and sort data (Monday)
- Give feedback to the user
- Reflect on work (Tuesday)
- Split code into modules (Tuesday)
To be able to view the data that you have loaded from an API in a more targeted way, add a filtering and sorting component to your web app. To properly filter and sort the data, it is useful to store data locally. for example in LocalStorage or simply in an object that is part of your app. With the map, filter and reduce methods you always retrieve the desired data and display it in the interface.
When dealing with asynchronous data fetching, it's very important to provide feedback to the user. Add a loading state to your application. And give feedback in case of succes and failure!
Use promise.finally() to remove loading state
5 Principles of Interaction Design To Supercharge Your UI
If all goes well, your app is now almost ready. Refactor your code to individual modules (these should more or less correspond to the actors from your actor diagram), so that your code is more manageable. Put the modules in separate files.
From IIFE to Common.js to ES Modules MUST SEE!!!
JavaScript Design Patterns
Asynchronous Javascript (promises)
What are the consequences of building a web app that runs entirely in the browser, a client side, single page web app? Read the articles below and consider the advantages and disadvantages of this method.
The coast of JavaScript
One-page-applications are not accessible