Prototyping à la Node with Express (at NationJS)
-
Upload
pamselle -
Category
Technology
-
view
312 -
download
2
description
Transcript of Prototyping à la Node with Express (at NationJS)
![Page 1: Prototyping à la Node with Express (at NationJS)](https://reader033.fdocuments.us/reader033/viewer/2022052823/5555fa8ed8b42ad3548b541b/html5/thumbnails/1.jpg)
+
Prototyping à la Node with ExpressPam Selle
@pamasaurthewebivore.com
![Page 2: Prototyping à la Node with Express (at NationJS)](https://reader033.fdocuments.us/reader033/viewer/2022052823/5555fa8ed8b42ad3548b541b/html5/thumbnails/2.jpg)
+
This is a little talk about prototyping and user testing
![Page 3: Prototyping à la Node with Express (at NationJS)](https://reader033.fdocuments.us/reader033/viewer/2022052823/5555fa8ed8b42ad3548b541b/html5/thumbnails/3.jpg)
+This is a little talk about Express and building quick websites with Node
![Page 4: Prototyping à la Node with Express (at NationJS)](https://reader033.fdocuments.us/reader033/viewer/2022052823/5555fa8ed8b42ad3548b541b/html5/thumbnails/4.jpg)
Hopefully you learn a little something
![Page 5: Prototyping à la Node with Express (at NationJS)](https://reader033.fdocuments.us/reader033/viewer/2022052823/5555fa8ed8b42ad3548b541b/html5/thumbnails/5.jpg)
+
Prototyping
![Page 6: Prototyping à la Node with Express (at NationJS)](https://reader033.fdocuments.us/reader033/viewer/2022052823/5555fa8ed8b42ad3548b541b/html5/thumbnails/6.jpg)
+What is prototyping?
A prototype is an early sample or model built to test a concept or process or to act as a thing
to be replicated or learned from.
Source: ye olde Wikipedia
![Page 7: Prototyping à la Node with Express (at NationJS)](https://reader033.fdocuments.us/reader033/viewer/2022052823/5555fa8ed8b42ad3548b541b/html5/thumbnails/7.jpg)
+
“The best way to have a good idea is to have lots of ideas.”
-Linus Pauling
![Page 8: Prototyping à la Node with Express (at NationJS)](https://reader033.fdocuments.us/reader033/viewer/2022052823/5555fa8ed8b42ad3548b541b/html5/thumbnails/8.jpg)
+Playing modes
Idea/Concept
Process/Technique
Replicate/Learn
![Page 9: Prototyping à la Node with Express (at NationJS)](https://reader033.fdocuments.us/reader033/viewer/2022052823/5555fa8ed8b42ad3548b541b/html5/thumbnails/9.jpg)
+Prototypes:
Quick
Make early
Not necessarily pretty
Not permanent
![Page 10: Prototyping à la Node with Express (at NationJS)](https://reader033.fdocuments.us/reader033/viewer/2022052823/5555fa8ed8b42ad3548b541b/html5/thumbnails/10.jpg)
+Prototypes are not:
The first iteration of a project
![Page 11: Prototyping à la Node with Express (at NationJS)](https://reader033.fdocuments.us/reader033/viewer/2022052823/5555fa8ed8b42ad3548b541b/html5/thumbnails/11.jpg)
+Prototyping/wireframing tools
Balsamiq
Justinmind
Mixture.io
Axure
InvisionApp
Adobe Empire (Photoshop, Illustrator …)
… and lots more
![Page 12: Prototyping à la Node with Express (at NationJS)](https://reader033.fdocuments.us/reader033/viewer/2022052823/5555fa8ed8b42ad3548b541b/html5/thumbnails/12.jpg)
+… forget that!
Let’s do it all in JavaScript!
(and HTML/CSS)
![Page 13: Prototyping à la Node with Express (at NationJS)](https://reader033.fdocuments.us/reader033/viewer/2022052823/5555fa8ed8b42ad3548b541b/html5/thumbnails/13.jpg)
+Express.js
Web app framework
Analogous to Sinatra
http://expressjs.com/
![Page 14: Prototyping à la Node with Express (at NationJS)](https://reader033.fdocuments.us/reader033/viewer/2022052823/5555fa8ed8b42ad3548b541b/html5/thumbnails/14.jpg)
+Express.js
Routes
Requests
Views
![Page 15: Prototyping à la Node with Express (at NationJS)](https://reader033.fdocuments.us/reader033/viewer/2022052823/5555fa8ed8b42ad3548b541b/html5/thumbnails/15.jpg)
+Wow!
That sounds good for making a web app prototype.
![Page 16: Prototyping à la Node with Express (at NationJS)](https://reader033.fdocuments.us/reader033/viewer/2022052823/5555fa8ed8b42ad3548b541b/html5/thumbnails/16.jpg)
+
STOPDemo time.
![Page 17: Prototyping à la Node with Express (at NationJS)](https://reader033.fdocuments.us/reader033/viewer/2022052823/5555fa8ed8b42ad3548b541b/html5/thumbnails/17.jpg)
+Cheat to win!
npm install –g express
express [appname]
![Page 18: Prototyping à la Node with Express (at NationJS)](https://reader033.fdocuments.us/reader033/viewer/2022052823/5555fa8ed8b42ad3548b541b/html5/thumbnails/18.jpg)
+Prototyping
Not difficult to build!
Express is pretty nifty
But not always necessary
Nice article on Express Understanding Express.js from Evan Hahn
![Page 19: Prototyping à la Node with Express (at NationJS)](https://reader033.fdocuments.us/reader033/viewer/2022052823/5555fa8ed8b42ad3548b541b/html5/thumbnails/19.jpg)
+
User Testing
![Page 20: Prototyping à la Node with Express (at NationJS)](https://reader033.fdocuments.us/reader033/viewer/2022052823/5555fa8ed8b42ad3548b541b/html5/thumbnails/20.jpg)
+Why user test?
Usability!
The ‘U’s of usability Utility: Does it do what you need? Usability: Ease and pleasure of use Useful: usability + utility
Useful, usable, desirable (Liz Sanders)
Needed, understandable, wanted & enjoyable
![Page 21: Prototyping à la Node with Express (at NationJS)](https://reader033.fdocuments.us/reader033/viewer/2022052823/5555fa8ed8b42ad3548b541b/html5/thumbnails/21.jpg)
You are not your users/audience
![Page 22: Prototyping à la Node with Express (at NationJS)](https://reader033.fdocuments.us/reader033/viewer/2022052823/5555fa8ed8b42ad3548b541b/html5/thumbnails/22.jpg)
+User testing
Test early.
Look for heuristics violations.
Look for anger.
Document.
![Page 23: Prototyping à la Node with Express (at NationJS)](https://reader033.fdocuments.us/reader033/viewer/2022052823/5555fa8ed8b42ad3548b541b/html5/thumbnails/23.jpg)
+Test early
![Page 24: Prototyping à la Node with Express (at NationJS)](https://reader033.fdocuments.us/reader033/viewer/2022052823/5555fa8ed8b42ad3548b541b/html5/thumbnails/24.jpg)
+Look for heuristics violations
http://www.nngroup.com/articles/ten-usability-heuristics/
![Page 25: Prototyping à la Node with Express (at NationJS)](https://reader033.fdocuments.us/reader033/viewer/2022052823/5555fa8ed8b42ad3548b541b/html5/thumbnails/25.jpg)
+Look for anger
![Page 26: Prototyping à la Node with Express (at NationJS)](https://reader033.fdocuments.us/reader033/viewer/2022052823/5555fa8ed8b42ad3548b541b/html5/thumbnails/26.jpg)
+Document
Take pictures
Take (limited) notes
Then, you iterate.
![Page 27: Prototyping à la Node with Express (at NationJS)](https://reader033.fdocuments.us/reader033/viewer/2022052823/5555fa8ed8b42ad3548b541b/html5/thumbnails/27.jpg)
+User Testing
Do it early
Observe
Document
Great book: Don’t Make Me Think
![Page 28: Prototyping à la Node with Express (at NationJS)](https://reader033.fdocuments.us/reader033/viewer/2022052823/5555fa8ed8b42ad3548b541b/html5/thumbnails/28.jpg)
+Summary
Use prototyping to cheaply produce something to show
Express is a quick, fun way to create apps
User testing is fast, cheap, and you can do it!
![Page 29: Prototyping à la Node with Express (at NationJS)](https://reader033.fdocuments.us/reader033/viewer/2022052823/5555fa8ed8b42ad3548b541b/html5/thumbnails/29.jpg)
+
@pamasaur
thewebivore.com
Thank you!