1. CMPE 280 Web UI Design and Development October 26 Class Meeting
Department of Computer Engineering San Jose State University Fall 2017 Instructor: Ron Mak

2. Midterm Solution: Question 1
A typical Express architecture maintains separate routes and views directories.
Briefly explain their purposes.
The routes directory holds the code that routes an HTTP request to code that processes the request. The request consists of a method (GET or POST) and a URI.
The views directory holds the code (such as Jade templates) that dynamically generates HTML pages.

3. Midterm Solution: Question 1, cont’d
What are the advantages of having separate directories?
Make clear, in an MVC architecture, the separation of controller code (in the routes directory) from the view code (in the views directory).
Keeping them loosely coupled allows developers to work separately in each directory, and changes can be encapsulated and isolated.

4. Midterm Solution: Question 2
Briefly describe how each of the following technologies helps enable the development of a compelling single-page application (SPA).
AJAX
Enable only the parts of the page that changed to refresh, thus making the UI of a web app behave more like a desktop app.

5. Midterm Solution: Question 2, cont’d
UI design patterns
Proven ways to design a web UI that enhances the user experience. The same design patterns are used to improve the UI of traditional desktop apps.
jQuery UI
Themes and widgets for a web UI that traditionally are used in desktop apps.

6. Midterm Solution: Question 2, cont’d
REST
The web app can implement new functionality by incorporating web services that expose a REST API.
Web apps can feature as many functions as a traditional desktop app.

7. Midterm Solution: Question 3
Briefly explain, in general, the main differences between how NoSQL databases and relational databases deal with scalability.
A relational database will scale up. To handle larger loads, increase the processing power of the database server by adding more cores, memory, etc.
A NoSQL database will scale out. To handle larger loads, add more database servers to the network and distribute the work via auto sharding.

8. Midterm Solution: Question 4
A MongoDB database query returns a cursor.
What are the primary advantages of returning a cursor?
The cursor is a pointer to the result set of the query. It is the conduit for accessing the query results, and therefore not all the data from the result set needs to be downloaded all at once.

9. Midterm Solution: Question 4, cont’d
Briefly describe how an application would use a cursor.
The app uses the cursor to iterate over the result set. Data from the result set downloads only when the cursor points to the document.
To improve performance over the network, more than one document may download in anticipation that the cursor will move forward.

10. Midterm Solution: Question 5
For web application FindMyNewCar.com:
Briefly describe three components of a dashboard you could design for use by the sales manager. How does each component provide situational awareness for the manager?
Bar chart: Visitors per time period. The sales manager can see how much traffic the site has.
Pie chart: Types of visitors per time period. The sales manager can see who is visiting the site.
Line chart: Number of visitors vs. amount of sales over time. The sales manager can see the trend of how effective the site is.

11. Midterm Solution: Question 5, cont’d
Why is this chart poorly designed?
The bars are 3-D which makes it hard to read their values.
The printed values of the bars are very hard to read.
The y axis doesn’t start at 0, which magnifies differences.

12. Midterm Solution: Question 5, cont’d
You are designing a RESTful API for your web application. Users will need to log in. Briefly discuss what should happen on the node.js server for each of the following two routes:
GET /findmynewcar/login
Respond with a login form whose action is a POST to /findmynewcar/login
POST /findmynewcar/login
Process the data from the login form.

13. Midterm Solution: Question 6
HTTP is a stateless protocol. Briefly describe the key technologies that enable a web application to maintain a conversation with a user across multiple requests. How do these technologies work together?
session: Maintains information on the server about a user, such as whether or not the user is logged in.
cookie: Data written and sent by the server to the user’s browser. The browser returns the cookie on each request. The cookie data allows the server to identify which session belongs to the user.

14. Rendering the Home Page

15. Recall: MVC Architecture
Design goal: Identify which objects are model, view, or controller.
A user cannot directly modify the model.

16. MVC Model Objects
Represent the persistent information maintained by your application.
AKA entity objects
Maintained in a database such as MongoDB.
Manipulated by JavaScript code via object-document mapping (ODM).
Analogous to object-relational mapping (ORM).
ODM implemented by packages such as Monk or Mongoose.

17. MVC View Objects View objects represent user interface components.
Input components of a web page.
In each use case, users interact with at least one view object.
A view object collects information from users in a form that the model and controller objects can use.

18. MVC Controller Objects
Coordinate the model and view objects.
Often have no physical counterpart in the real world.
Collect information from view objects for dispatch to model objects.
This is how user-entered data can update the model.
Can be implemented by routing.
Represent application control flows.

19. Routes
A route is a mapping from an incoming HTTP request to the appropriate controller code.
Associates a URI plus an HTTP method (GET or POST) with a particular controller action.
HTTP method also called HTTP verb
Most widely used HTTP methods in web apps are GET, POST, PUT, and DELETE.
Defined by the HTTP standard.

20. MVC Architecture Request-Response Flow

21. MVC Architecture Data Flow

22. Refactor Directory Structure for MVC
Refactor a standard Express application to better reflect an MVC architecture:
Create directory app_server
Move in existing directories routes and views
Create new subdirectories controllers and models

23. Refactor Directory Structure for MVC, cont’d
Modify app.js:
Add to app_server/routes/index.js:
var index = require('./app_server/routes/index');
...
app.set('views', path.join(__dirname, 'app_server', 'views'));
var ctrlMain = require("../controllers/main");

24. Refactor routes/index.js
From:
To:
routes/index.js /*
 * GET home page.
 */
router.get('/', function(req, res, next)  {
    res.render('index', { title: 'Authentication Demo' });
});
app_server/routes/index.js
router.get('/', ctrlMain.index);
app_server/controllers/main.js
module.exports.index = function(req, res, next)  {
    res.render('index', { title: 'Authentication Demo' }); };

25. Refactor routes/index.js, cont’d
From:
To: /*
 * GET registration page.
 */
router.get('/register', function(req, res) {
    res.render('register',
              { message: "Please register!" });
});
app_server/routes/index.js
router.get('/register', ctrlMain.get_register);
app_server/controllers/main.js
module.exports.get_register = function(req, res) {
    res.render('register',
              { message: "Please register!" }); };

26. Refactor routes/index.js, cont’d
Refactor the other routes the same way.
Also:
app_server/routes/index.js /*
 * GET protected page.
 */
router.get('/protected_page', ctrlMain.loggedIn, ctrlMain.get_protected_page);
module.exports.loggedIn = function(req, res, next) {
    console.log("Checking if logged in:");
    if (req.session.user)
    {
        // Proceed if the user is logged in.
        console.log("Logged in: "); console.log(req.session.user);
        next();  
    } 
    else 
        console.log("Not logged in");
        res.send("You must first log in.");
    } }
app_server/controllers/main.js

27. The MEAN Full Stack Architecture
Full stack: All the components of a web app.
client side
server side
database server
The MEAN stack
MongoDB
Express
AngularJS (different from Angular 2)
node.js

28. AngularJS
A JavaScript framework for working with data directly on the client side.
Traditional web app:
App logic and data processing on the server
HTML page views and user interactions on the client
AngularJS:
Move some or all app logic and data processing to the browser.
The server might only pass data from the database.

29. AngularJS, cont’d jQuery: AngularJS:
Provides interactivity to a web page
Takes effect after the HTML has been sent to the browser and the Document Object Model (DOM) has completely loaded.
AngularJS:
Comes in earlier and helps put together the HTML based on the provided data.
Two-way data binding

30. AngularJS Two-Way Data Binding
Live view of the data.
The view is bound to the model.
Immediately update the HTML if the data changes.
Immediately update the data if the HTML changes.

31. AngularJS Two-Way Data Binding, cont’d
Traditional:
Two-way data binding:
Getting MEAN with Mongo,
Express, Angular, and Node
by Simon Holmes
Manning Publications, 2015

32. JavaScript is the Common Language
JSON is the common data format.
Getting MEAN with Mongo,
Express, Angular, and Node
by Simon Holmes
Manning Publications, 2015

33. Single-Page Application (SPA)
AngularJS is designed to support SPA functionality.
Everything runs inside the browser.
application logic
data processing
template delivery
user navigation
Never do a full page reload.
But slower first page load.

34. Single-Page Application (SPA), cont’d
Greatly reduces the amount of resources needed on the server.
Each user’s browser does the hard work.
The server basically only serves static pages and data upon request.
Better user experience.
Fewer calls to the server.
Reduced network latency.

35. Hybrid Applications Example: A blogging application:
Blogging interface for users: Not ideal for an SPA
Admin interface: Ideal for an SPA
Getting MEAN with Mongo,
Express, Angular, and Node
by Simon Holmes
Manning Publications, 2015

36. Hybrid Applications, cont’d
Getting MEAN with Mongo,
Express, Angular, and Node
by Simon Holmes
Manning Publications, 2015

37. Application Design Options
Getting MEAN with Mongo,
Express, Angular, and Node
by Simon Holmes
Manning Publications, 2015

38. AngularJS App Development Steps
Getting MEAN with Mongo,
Express, Angular, and Node
by Simon Holmes
Manning Publications, 2015

39. AngularJS App Development Steps, cont’d
Getting MEAN with Mongo,
Express, Angular, and Node
by Simon Holmes
Manning Publications, 2015

40. AngularJS App Development Steps, cont’d

41. AngularJS App Development Steps, cont’d

42. Network Architectures

43. Network Architectures, cont’d
Scale out MEAN apps with server clusters.