CMPE 280 Web UI Design and Development October 26 Class Meeting Department of Computer Engineering San Jose State University Fall 2017 Instructor: Ron Mak www.cs.sjsu.edu/~mak

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Rendering the Home Page

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

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.

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.

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.

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.

MVC Architecture Request-Response Flow

MVC Architecture Data Flow

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

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");

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' }); };

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!" }); };

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

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

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.

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

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.

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

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

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.

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.

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

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

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

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

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

AngularJS App Development Steps, cont’d

AngularJS App Development Steps, cont’d

Network Architectures

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