Prototyping is a powerful aspect of Pakyow's design-first process. If you can write basic html markup you can quickly build a prototype of your application that's accessible from any web browser.
The prototype becomes a living part of your project. Because Pakyow enforces a clear separation between the frontend and backend of your application, you can boot back into into the prototype even after the rest of the application has been added on top. This is called "prototype mode".
Prototype mode gives you a predictable place to design a new feature or redesign an existing interface. When running in prototype mode, the backend for your application is effectively turned off, so only your view templates and assets will be served. The prototype is still navigable even without the backend, giving you an idea of what the experience will be for a real user.
Navigating within the prototype
Prototypes are fully navigable through links and forms. To create a navigable element, hardcode a presentation path into the link
href or form
Let's look at an example using the following frontend structure:
frontend/ layouts/ default.html pages/ about.html index.html messages/ index.html show.html
You can setup a link or form for navigating through your views using any of these presentation paths:
Here's what a link would look like:
<a href="/messages/show"> View Message </a>
And here's what a form would look like:
<form action="/messages"> <input type="submit" value="Submit"> </form>
When you click the link, you'll be navigated to the
frontend/pages/messages/show.html page. Submitting the form will take you to the
frontend/pages/messages/index.html page. This simulates a user creating a message and then being redirected back to their list of messages.
It's sometimes helpful to populate the prototype with more elements than the application will ultimately need. Anything that should be removed outside of the prototype can be labeled with the
<div prototype> I'll show up in the prototype, but not outside of it. </div>
Values defined in binding nodes are considered to be prototype values. They are replaced when data is presented during rendering, but they remain visible when running in prototype mode. This lets you design your interface using realistic values without needing to go back and remove them later.
Here's an example view template that will present a message:
<article binding="message"> <p binding="content"> message content goes here </p> </article>
In prototype mode, you'll see the "message content goes here" text. When presented with real data, the "message content goes here" value will be replaced with the actual content of the message.
Booting into prototype mode
prototype command to boot your project into prototype mode:
Pakyow will boot up without the backend in place, making the prototype of your project available in a web browser at localhost:3000 .
Using the prototype bar
Pakyow adds a prototype bar to projects running in prototype mode. It provides a control you can use to place the current view into one of its defined modes. This helps you design all of the various states your users will see the interface in.
Here's a screenshot of the pakyow.com homepage running in prototype mode:
You'll see with the prototype bar in the bottom right hand corner of the screen.