1. Chengyu Sun California State University, Los Angeles
CS5220 Advanced Topics in Web Programming Develop Web Applications and Services Using Express
Chengyu Sun
California State University, Los Angeles

2. Using Express Application Generator
Install global package express-generator
express command options
-h, --help
-v, --view
-c, --css
--git

3. Template Engine
A template engine combines templates with data to produce documents
A.K.A. view engine, though it’s not just for views in MVC, e.g. templates

4. JSP As A Template Engine
<p>Hello, ${user.firstName}!</p>
<c:if test=“${not empty tasks}”>
<p>Your tasks for today:</p>
<ul>
<c:forEach items=“${tasks}” var=“task”>
<li>${task}</li>
</c:forEach>
</ul>
</c:if>

5. Basic Characteristics of a Template Engine
Template language
Access objects and properties
Basic expression and control flow statements
Server and/or client-side rendering
Support for formatting and i18n
Performance

6. Hogan <p>Hello, {{user.firstName}}!</p> {{#hasTasks}}
<p>Your tasks for today:</p>
<ul>
{{#tasks}}
<li>{{.}}</li>
{{/tasks}}
</ul>
{{/hasTasks}}
Developed by Twitter
Use the “logic-less” Mustache template language

7. Handlebars <p>Hello, {{user.firstName}}!</p> {{#if tasks}}
<p>Your tasks for today:</p>
<ul>
{{#each tasks}}
<li>{{.}}</li>
{{/each}}
</ul>
{{/if}}
Extension to Mustache (arguably making it easier to use)

8. Dust Developed by LinkedIn <p>Hello, {user.firstName}!</p>
{?tasks}
<p>Your tasks for today:</p>
<ul>
{#tasks}
<li>{.}</li>
{/tasks}
</ul>
Developed by LinkedIn

9. EJS <p>Hello, <%= user.firstName %>!</p>
<% if (tasks) { %>
<p>Your tasks for today:</p>
<ul>
<% for( var i=0 ; i < tasks.length ; ++i ) { %>
<li><%= tasks[i] %></li>
<% } %>
</ul>
Syntax is similar to JSP scripting elements

10. Twig <p>Hello, {{user.firstName}}!</p> {% if tasks %}
<p>Your tasks for today:</p>
<ul>
{% for task in tasks %}
<li>{{task}}</li>
{% endfor %}
</ul>
{% endif %}
Originally a PHP template engine

11. Vash <p>Hello, @user.firstName!</p> if( tasks ){
<p>Your tasks for today:</p>
<ul>
@tasks.forEach( function(task) { }
</ul>
Use the Razor (i.e. the view engine in ASP.NET MVC) syntax

12. Jade / Pug p Hello, #{user.firstName}! if tasks
p Your tasks for today: ul
each task in tasks
li= task
Jade is renamed to Pug due to trademark problem

13. Build A MVC Web Application
Understand the application structure created by Express Generator
Data models and database access
Controllers and views

14. Application Structure
/public for static resources
/routes for controllers
/views for view templates
/bin for executables
package.json
Packages
npm start

15. Customize Configuration Using Environment Variables
process.env.PORT || '3000'
We often need to change runtime configuration such as port number, database url/username/password, log file location and so on
Java applications usually use property files
Node.js application prefer environment variables

16. Set Environment Variables Using dotenv Package
Put the variables in a .env file, e.g.
DBURL=mongodb://localhost/webtest
USERNAME=cysun
PASSWORD=abcd
Run require('dotenv').config() at the beginning of the application
Include and version control a .env.sample file

17. Model and DB Add Mongoose models Connect to database
mongoose.connect(<DBURL>)
Mongoose automatically creates a connection pool
Disconnect during shutdown

18. Graceful Shutdown async function shutdown(callback) {
await mongoose.disconnect();
if (callback) callback();
else process.exit(0); }
process.on('SIGINT', shutdown);
process.on('SIGTERM', shutdown);
process.once('SIGUSR2', () => {
shutdown(() => process.kill(process.pid, 'SIGUSR2'));
});
Why didn’t we “await” on mongoose.connect()?

19. (model attributes in Spring)
Controller
router.get('/users', function(req, res, next) {
User.find( (err, users) => {
if(err) return next(err);
res.render('users’, {title: 'Users', users: users});
});
Handle
Error
Render
View
View
Name
“Locals”
(model attributes in Spring)

20. Handlebars Views layout.hbs is the default master page
Set a layout local to use a different master page
A child view is combined with the master page as {{{body}}}
Triple braces mean do not escape content

21. Implement REST API Mostly it's just MVC without View
Authentication and authorization with JWT
Testing with Jasmine

22. Login Endpoint Use jsonwebtoken to create JWT
jwt = require('jsonwebtoken');
jwt.sign( <payload>, <secret> [, options] );
Usually a User object
Common claims such as sub and exp are in options

23. JWT Authorization Using Middleware
Extract JWT token from Authorization header
Verify the signature
Attach the payload (i.e. the user object) to req and pass it onto the next middleware
Return 401 if anything is wrong

24. Passport Passport is a popular Node.js authentication framework
Different authentication schemes (called strategies) can be implemented on top of Passport

25. Using Passport-JWT … Example: passport-jwt.js
Registers JWT strategy with Passport
Extract JWT from Authorization header as a bearer token (other extractions also possible)
Decode and verify token
Passes decoded payload and a done() function to the callback function

26. … Using Passport-JWT …
The callback function allows further processing of the payload, e.g. loading a full user object from database
done(err, user) sets req.user which can be used by subsequent middleware

27. … Using Passport-JWT Add Passport to an Express application
app.use( passport.initialize() );
app.use( '/api/', passport.authenticate('jwt', {
session: false,
failWithError: true
}));

28. Jasmine Test Framework
An all-in-one test framework for JavaScript
Default test framework used by Angular

29. Using Jasmine npm install --save-dev jasmine
./node_modules/.bin/jasmine init
Set jasmine as test script in package.json
npm test

30. Test Example Test suite: describe Test spec: it
beforeAll(), afterAll(), beforeEach(), afterEach()
done() informs Jasmine that an asynchronous function has finished
Test spec: it
Expectations and matchers