Ignore

Please note that your browser is not supported.

We recommend upgrading to the latest Firefox or Google Chrome.

Frontend: Prototyping

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 action.

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:

  • /
  • /about
  • /messages
  • /messages/show

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.

Prototyped elements

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 prototype attribute:

<div prototype>
  I'll show up in the prototype, but not outside of it.
</div>

Prototyped values

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

Use the prototype command to boot your project into prototype mode:

pakyow prototype

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:

Pakyow.com Homepage in Prototype Mode

You'll see with the prototype bar in the bottom right hand corner of the screen.

Next Up: Endpoints