NSWI142: Web Applications
10. JavaScript Client II.
Jáchym Bártík, KSI
jachym.bartik@matfyz.cuni.cz
Preliminaries
Please read this section at least one day prior to the seminar. This section outlines what you are expected to know, be able to do, or prepare in advance. Following these instructions will help you get the most out of the seminar and ensure smooth participation.
Preliminaries
Before the start of the practical, you should be able to:
- Use JavaScript to create and manipulate with DOM in a browser.
- Use JavaScript to listen for events.
- Explain the Model-View-Presenter (MVP) design pattern.
- Explain MVP implementation in PHP.
Preliminaries software
This slide applies to you only if you plan to use your own computer for the practical.
Before the start of the practical, make sure that:
- You have a modern web browser.
- An IDE with support for JavaScript would be nice.
Agenda
- JavaScript classes
- Exercise: Model-View-Presenter
- Exercise: List search and MVP
Demonstration: Class and JavaScript
The basics are simple ...
Class example
class Model {
constructor(name) {
// We use `this` to set properties.
this.name = name;
}
method() {
// We use `this` to access this class instance.
console.log(">", this.name);
}
}
const m = new Model("Joe");
m.method();
All member properties must be assigned in the constructor. All methods and properties are public by default. We do not need anything else - KISS (keep it simple, stupid).
Exercise: Model-View-Presenter
PHP edition
(Brainstorm) How does the Model-View-Presenter work on backend?
JavaScript edition
(Brainstorm some more) How would you implement Model-View-Presenter on frontend?
Exercise: List search and MVP
The objective is to take the application from the last practical and apply MVP design pattern. We also add support for "clear filters" and "list ordering" to make it interesting.
If you do not have the solution from last exercise, you can use this partial solution. The solution is missing the synchronization with URL using location and history API.
Continue to the next slide once you are done.
Design
There are many flavors to Model-View-Presenter. For this exercise, we use Model-View-Presenter with passive view.
Model expose all data related methods.
View expose methods to update the user interface and to bind to user events.
Presenter has to be able to take View and a Model and connect them together.
Continue to the next slide once you are done.
Implementation
Continue to the next slide once you are done.
New functionality 1/2
Add a button that will clear all filters.
Continue to the next slide once you are done.
New functionality 2/2
Add a combobox which user can use to select item ordering. Following orderings has to be available:
- Label ascending
- Label descending
- Price ascending
- Price descending
Default value is Label descending.
The sort direction has to be stored in the URL and its changes has to be recorded in history. When the default ordering is selected, the URL should not contain any information about the ordering.
Continue to the next slide once you are done.
Bonus assignment
In order to get the bonus point, you need to finish the application.
Once the application is ready, upload all your files to ~/public_html/product-list-mvp/ directory at Webik.
The main file should be named index.html.
While the bonus assignment is optional, we strongly recommend to implement it as we will use the result in the next practical.