Advanced prototyping

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

F16743a0a2eb06c63c176df8b7e362bf?s=128

Colin Oakley

October 29, 2017
Tweet

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