CodeCampIasi25Oct2014

1. Logicless UI Prototyping
with NodeJS
by Flavius Olaru

2. Who am I?
Then
Freelancing Web Sites
Web Developer @ XWiki
Speaker at Open Source in Iasi – March 2014
Now
UI Developer @ Endava
Speaker at Code Camp in Iasi – right now
Now & Then
JavaScript passionate
Open Source enthusiast (https://github.com/flaviusx)
Future
Who knows

3. Prototype
what is it and what about it?
A prototype is an early sample, model, or release of a product built to test a
concept or process or to act as a thing to be replicated or learned from.
The Prototype Pitfall
1. The answer to any prototype / feasibility question is always yes
2. Whatever poor coding practices you use to build your prototype will be replicated in the final
production version
3. No matter how poor the performance of the prototype the production version will be much
worse
4. Once in production a prototype will never die
5. Any controls used to build the prototype will be used in the production version even if they
aren't appropriate

4. UI Prototyping
tools & overview
Low-Fidelity Prototyping
Pen & Paper prototyping
Wireframing (Balsamiq Mockups, iMoqups)
High-Fidelity Prototyping
Axure Pro 6, Microsoft Expression Blend
HTML + CSS + JavaScript

5. Responsive Web Design
what is it and why use it?
Allows to tailor a site layouts and interfaces to suit various devices
Single codebase (unlike Adaptive Web Design app/m.app)
Future Proof Sites

6. Low-Fidelity Prototyping
goals, pros and cons
Goals:
Gather (initial) Requirements
Communicate with Stakeholders
Pros:
Fast prototyping
Minimal resources and materials required
Everybody can participate – minimal specific skills required
Cons:
RWD increases wireframing by x3
Wireframes struggle to show interaction
One must imagine a user journey

7. High-Fidelity Prototyping
goals, pros and cons
Goals
Visualize requirements in detail
Discover usability issues, especially with interactive behavior
Develop UI specifications
Pros
Reach far more detail than Lo-Fi prototypes
Show real system behavior not just static screens
Can be built quick and detailed with the right tools
Cons
Requires the right tools

8. HTML + CSS + JavaScript
is this for me?
Expensive
Not reusable
Blends mockup content and UI Elements

9. Searching for a better tool
what is available out there?
UI Frameworks
Bootstrap
Foundation
UI Pattern Libraries
Pattern Tap
Patternry (paid)
Cons:
Branded UI Look & Feel
Difficult to mockup data
No server-side interaction

10. Searching for a better tool
requirements and available tools
My requirements:
HTML
CSS
JavaScript
Mockup data and server-side services
Available tools:
NodeJS
Express
Handlebars

11. The search is over
we now have a foundation
Logicless Prototypr started
Prototype ready in 2 weeks
Published on GitHub
Added a MIT License
Added improvements to the initial project
Already in use in other projects

12. Logicless Prototypr
NodeJS, Express & Handlebars
NodeJS based server
Front-end based Templating Language (mustaches syntax)
Automatic route discovery
JSON based Models & REST Services
Layouts, Views & Partials
Reuse, Extend and Iterate
Basis for an UI Framework or Toolkit
MIT Licensed – free to use and extend for your own UI Prototyping

13. Logicless Prototypr
advantages
NodeJS
One command to install all dependencies
Express & Handlebars
One command to start the server
Grunt & Bower config examples
Easy to integrate front-end frameworks and resources
Plays well with CSS Preprocessors (Sass & Less)
Karma config example
Easy to add JavaScript Unit Testing for User Interactions

14. Logicless Prototypr
the model-view-controller
JSON format Models
Handlebars Templates as View
Layout support
Any view is also an partial
Out-of-the-box Controller
Populates View with Model
Automatic route discovery
Automatic REST Mockup Service
Lorem Hipsum mockup content

15. Logicless Prototypr
live demo

16. Logicless Prototypr
conclusions
Easy to use
Requires code base
Extendable instead of throwable
Iterable through modularization
Decouples backend logic from presentation logic
Mockups the business logic
Doesn’t require complex environments
Brings prototyping closer to production

17. Logicless Prototypr
the future
Mock custom form handling
Mock session cookie handling
Mock user login systems
Add pattern lib layouts
Write a comprehensive documentation with GitHub Pages
Add an out-of-the-box installer
Create a community around it
http://github.com/flaviusx/logicless-prototypr

18. Thank you
Contribute at
http://github.com/flaviusx/logicless-prototypr