Advanced prototyping

A few examples on additional features you can use while prototyping in the GOV.UK Prototype toolkit.

Including

- middleware
- routes
- branching
- session storage

Transcript

1. Advanced prototyping
2. hello
3. What we will cover today • introduction • middleware • routes • branching • session storage • lets put it all together and build a thing
4. Introduction • Express.js, web framework in node.js (javascript server side) • nunjucks, html markup • jQuery (javascript client side) • sass, what we are using to write CSS • grunt gulp, task runner • gov_uk modules (toolkit, elements, template) • git, version control
5. Heck, that is a lot of stuff!
6. middleware
7. application level // lives in the server.js app.use(function (request, result, next) { // on request type if (request.method === 'POST') { // log out request request method and url console.log(` ==> ${request.method} request on ${request.url} `.green) // log out body console.log(request.body) console.log(` ^ params are above `.green) } else { // log out request request method and url console.log(` ==> ${request.method} request on ${request.url} `.yellow) } // send to next function next() })
8. Magic Routing
9. Deliberate Routing - part 1 // web application setup const express = require('express') const router = express.Router() // routing logic router.get('/', function (request, response) { response.render('index') }) // exports to be used by something else module.exports = router
10. Deliberate Routing - part 2 // routing logic router.get('/', function (request, response) { response.render('index') }) • get, the type of request (also post, put, del, or magic all) • request - information that is sent from the browser • response - what we will be sending back to the browser • response.render - what we are going to do, in this case render will display a page (also send, redirect)
11. Deliberate Routing - part 2a // routing logic router.get('/', (request, response) => { response.render('index') })
12. Deliberate Routing - part 3 // takes a var from the url i.e /cats and passes it to a view router.get('/:type', function (request, response) { response.render('index', {id: request.params.type}) }) // takes a var from a form post and passes it to a view router.post('/', function (request, response) { response.render('index', {id: request.body.type}) }) // takes a var from a pre-populated session and passes it to a view router.get('/', function (request, response) { response.render('index', {id: request.session.type}) })
13. Bonus Routing - stuff in the url // ?hello=world router.get('/', function (request, response) { response.render('index', {id: request.query.hello}) })
14. Super routing // routes example sprint1.js const express = require('express') const router = express.Router() router.get('/', function (request, response) { response.render('index') }) module.exports = router We can now re use these small routes // now we can use these in routes routes.js to re-use the routes const generalRoutes = require(path.resolve('app/routes/general/sprint1.js')); app.use('/sprint1', generalRoutes); app.use('/sprint2', generalRoutes);
15. Branching
16. Branching
17. Choose your own adventure
18. Redirection // routing logic router.post('/form-post', function (request, response) { if (reqest.body.question === 'yes') { response.redirect('good-response') } else if (request.body.question === 'no') { response.redirect('other-response') } else { response.redirect('bad-response') } })
19. Session storage
20. Session Storage // lets start with a page - this needs a form with a post router.get('/details', function (request, response) { response.render('page') }) // now we need to do a post, save and maybe a redirect router.post('/details', function (request, response) { request.session.details = request.body; response.redirect('/display') }) // now we can get the session back on the get and display it on the page router.get('/display', function (request, response) { const formData = request.session.details response.render('page', {data: formData}) })
21. Auto Session Storage // data is auto saved on post and can be scroped by prefixing the field i.e bank <input type="text" id="first-name" name="bank[accountNumber]" class="form-control" value="{{ data.bank.accountNumber }}" />
22. WARNING
23. A bit of a recap • middleware • routes • branching • session storage
24. Okay, let's build a thing! • start page • branching • session storage • review page • application complete
25. questions?
26. END