Prototyping in the browser

Slide 1

Slide 1 text

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

@polarblau

Slide 4

Slide 4 text

Prototyping in the browser I had the opportunity to work about 50% of my time during the past 5 years on so called prototypes for web apps or larger sites for clients, usually within larger teams. Still today, the work of prototypes takes about 50% of my week. In this context I had the chance to get a clearer impression on how companies use prototypes as well as gather some insights on how to build them more effectively.

Slide 5

Slide 5 text

Prototyping in the browser This talk will be split into two parts: 1. I’d like to take a few minutes to discuss protoypes in general as well as what prototypes currently mean for web development 2. I’ll give you an high level overview over how I am currently working on prototypes in every– day projects

Slide 6

Slide 6 text

Prototyping in the browser Let’s dive and take a look at what a Prototype can or can not be and why you might want to consider using this approach for your own applications and sites.

Slide 7

Slide 7 text

Terminology Language is funny thing, it always comes with a context yet we often decide to ignore the context or remove it artiﬁcially. I strongly believe that a lot more issues — especially in programming–related ﬁelds like web development — are caused directly or indirectly by language and the failure to consider context appropriately than by technology. As an example: Terms like “Prototyping” live through peaks in usage and often change their meaning throughout, causing problems when communicating across generations.

Slide 8

Slide 8 text

in30minutes.com When I grew up, a prototype was a physical object. We would hear of models of new cars with new powerful engines yet no clearly recognizable physical shape.

Slide 9

Slide 9 text

πρωτότυπον (prototypon) And it turns out that this understanding is somewhat close to the origin of the word “Prototype”.

Slide 10

Slide 10 text

“primitive form” There’s no restriction to shape or appearance included.

Slide 11

Slide 11 text

“The original or model on which something is based or formed.” I personally like this deﬁnition, as it states that a prototype can be an “original”, a useful object on it’s on but always functions as starting point for something else.

Slide 12

Slide 12 text

A B Product Prototype A prototype works as a vehicle, that gets you where you want to go. It can be starting point and way, but it’s never the goal.

Slide 13

Slide 13 text

A B Surely, prototype and ﬁnal product will almost always have an area of overlap, but they don’t necessarily have to and it’s important that they are not the same.

Slide 14

Slide 14 text

A B Surely, prototype and ﬁnal product will almost always have an area of overlap, but they don’t necessarily have to and it’s important that they are not the same.

Slide 15

Slide 15 text

Early Apple prototype from the 1980s, on display at Frog Design, San Francisco.

Slide 16

Slide 16 text

Terminology (and the internet) With the internet being a representation of society, language doesn’t stop to evolve online. In fact, the evolution rate of language is a lot higher than offline. With the written word still dominating the environment, people seek and ﬁnd alternative ways to express themselves and are creating variation and dialects in the process.

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

The internet and web development world seems to be particularly good in re–using words from the offline world, and giving them new often only slightly metaphorical meaning.

Slide 19

Slide 19 text

It’s a cookie, get it? The internet and web development world seems to be particularly good in re–using words from the offline world, and giving them new often only slightly metaphorical meaning.

Slide 20

Slide 20 text

And here’s what ticks me off a bit and I’d love to hear if other people have made the same experience. When I hear the word “Prototype” in context of web apps, this is what’s usually meant by it:

Slide 21

Slide 21 text

“Something I tell the developer so she will work cheaper, faster and skip those time consuming tests which no one will ever see anyway. Ermarghed! This is going to be the best web app ever! Javascript and frameworks for everyone! ”

Slide 22

Slide 22 text

A B == The prototype has become the product for very dubious reasons.

Slide 23

Slide 23 text

“ “Even if your idea is worth stealing, the hard part is implementing the idea, not coming up with it.” — Guy Kawasaki on NDAs, 2008 Let’s back up for a second and try to find a better and more helpful definition of “Prototype” for the web. Let’s try to define what makes a prototype a prototype and when it’s a good idea to use one.

Slide 24

Slide 24 text

Software is hard Software is hard, no doubt about it. And Software includes for me by deﬁnition all things that run within your browser. I could list what makes working on the web difficult — but I’m pretty sure everyone is more than aware of why our job sucks sometimes.

Slide 25

Slide 25 text

Software is expensive Which makes Software expensive. I’ve recently heard that more than 90% [CITATION] of all software projects are abandoned before completion. That’s a hell of a waste of money and time. — There has to be a way to improve this situation, right?

Slide 26

Slide 26 text

We don’t want to make mistakes We generally and officially don’t want to make mistakes.

Slide 27

Slide 27 text

We don’t want need to make mistakes The truth is — we really do need to make mistake. However would we ever ﬁnd out what works or doesn’t work, assuming we’re not just copying the same old crap and are actually innovating?

Slide 28

Slide 28 text

We just don’t want to release a useless product What we really do not want to is release a product no one — maybe not even ourselves — want to use because it misses the user’s needs by a mile.

Slide 29

Slide 29 text

Innovate Test Evaluate Adjust What we should really do — and you have heard this in many different contexts before — is iterate over changes and go back to improve on our ﬁndings. Sounds expensive? — Try to keep the cycle as short as possible and you will safe time and money in the end. That’s not a secret.

Slide 30

Slide 30 text

Fast Cheap Pick two! Good Here’s how I look at prototype development, personally. These are the factors that are involved, the “how” we want to build prototypes for web apps. I don’t know what “good” means before I don’t test with real users, so let’s scrap that …

Slide 31

Slide 31 text

Production quality Fast Cheap Pick two! … and replace it with high or production quality — “well done”. We should have an idea on what that means. Still we only get to pick two, right?

Slide 32

Slide 32 text

Educational Fast Cheap Pick two! And that’s‚ where — for me personally — a prototype allows me to make a course correction a production wouldn’t allow me to. I’ll replace my expectations on quality with my own personal growth. I want to learn something new and experiment, which will beneﬁt the production app behind this prototype and every app after that.

Slide 33

Slide 33 text

Educational Fast Cheap Pick all? And … if using the right tools, I can get them all. When building a prototype.

Slide 34

Slide 34 text

Prototype == Let’s recap — a prototype

Slide 35

Slide 35 text

Throw–away product Has to be short–lived and go through short cycles. It will make innovation easier and ease the pain dramatically when a restart is required.

Slide 36

Slide 36 text

“Scientific” tool A prototype has to function as a tool to gather insights of some sorts — either into user behavior or internal workﬂows.

Slide 37

Slide 37 text

A great way to learn and to fail early And a prototype should provide a comfortable way to fail and learn. It shouldn’t hurt to fail too much.

Slide 38

Slide 38 text

Prototype != However, …

Slide 39

Slide 39 text

A cheaper way to get your app done A prototype is not a way to get to “B” faster and cheaper.

Slide 40

Slide 40 text

A prototype is not a way to get to “B” faster and cheaper.

Slide 41

Slide 41 text

An excuse to release a half–baked solution And it will not allow you to throw crap at your user. Prototypes don’t come with BETA ﬂags.

Slide 42

Slide 42 text

And it will not allow you to throw crap at your user. Prototypes don’t come with BETA ﬂags.

Slide 43

Slide 43 text

Fast Simple Disposable Fun Here’s my reﬁned deﬁnition for prototypes on the web. And yes — keep it fun you’ll keep innovating.

Slide 44

Slide 44 text

Prototyping in the browser Having this runt out of the way, let’s take a look at how my approach to prototypes — which is of course largely inﬂuenced by the teams I work with.

Slide 45

Slide 45 text

Prototyping in the browser This talk is called “Prototyping IN THE BROWSER”, so I feel compelled to point out for completeness’ sake that it is in fact possible to do some of the work required to get a prototype or web app up and running within the browser:

Slide 46

Slide 46 text

Remy Sharp has a nice video on how to use the Chrome developer tools to edit local ﬁles, there’s tons of extensions etc., etc. — but that’s not really what I’m after. http://remysharp.com/2012/12/21/my-workﬂow-never-having-to-leave-devtools/

Slide 47

Slide 47 text

Prototyping in the browser So let’s rename this talk slightly …

Slide 48

Slide 48 text

Prototyping for the browser … to prototyping for the browser.

Slide 49

Slide 49 text

Ubiquitous Why the browser? Why not images, paper prototypes, prototyping apps? The browser is omnipresent and very powerful.

Slide 50

Slide 50 text

Full–featured interaction layer It already has everything we need to make a prototype functional, as it basically represents the same environment the ﬁnal version will run in.

Slide 51

Slide 51 text

Development tools It comes with powerful tools to make our job easier.

Slide 52

Slide 52 text

Forgiving And it’s forgiving. If you have some time — take a look at how browsers parse and understand your code. There’s some awesome articles around. Remember when we replaced “high quality”? This property of the browser will be invaluable in this regard.

Slide 53

Slide 53 text

Tools Let’s take a look at the gears. I’m using a fairly wide set of tools, each comes with it’s own strengths and problems — so I’ll go through them rather quickly. You will also know a some of them already, I’m sure. If you’re interested, look up these slides on Speakerdeck later, come ask afterwards or just go browser a bit. It is important for me, that these tools fulﬁll early mentioned criteria. — To say the least, they have to speed up my workﬂow.

Slide 54

Slide 54 text

Go–to language Ruby [Javascript, Python] As a go–to language, the language I use to solve all small issues I encounter along the way, I use Ruby. I love Ruby. RUBY IS AWESOME. If you haven’t yet - take a look.

Slide 55

Slide 55 text

Within templates Scripting tools (Thor) Helpers … I’m using Ruby within templates, to write helpers and scripts.

Slide 56

Slide 56 text

Server & framework Middleman [Serve] To keep all other tools together, I’m using Middleman — a so called static site generator. But it does a lot more than that.

Slide 57

Slide 57 text

Get started quickly It helps you to get set–up really fast.

Slide 58

Slide 58 text

$ gem install middleman $ middleman init awesome_proto or $ middleman init awesome_proto --template=html5 It comes as Ruby gem — which is essentially a packaged Ruby library. You can generate a scaffold for your web app and use templates for custom structures while doing so. There’s a wide variety out there.

Slide 59

Slide 59 text

Conventions In the best tradition of Rails and “convention over conﬁguration” it comes with conventions for most things you’ll need along the way and is extendable where it doesn’t.

Slide 60

Slide 60 text

Dependencies management

Slide 61

Slide 61 text

Views and layouts Middleman has a built–in layout engine with support for multiple, switchable layouts, views and partials…

Slide 62

Slide 62 text

OOTB support for meta languages* … in any templating language your heart desires. It also support a wide range of other meta languages — but more about that later.

Slide 63

Slide 63 text

Server Middleman sports an easily accessible web server.

Slide 64

Slide 64 text

$ middleman server == The Middleman is loading == The Middleman is standing watch at http:// 0.0.0.0:4567 Start it with by running `middleman server` or simply `middleman` and it will start serving ﬁles and views at localhost

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

Export It allows you to easily export your project as static HTML/CSS/JS ﬁles.

Slide 67

Slide 67 text

$ middleman build create build/images/middleman.png create build/images/background.png identical build/images/middleman.png identical build/images/background.png create build/javascripts/all.js create build/stylesheets/normalize.css create build/stylesheets/all.css create build/index.html AND A LOT MORE.

Slide 68

Slide 68 text

Mark–up Haml [Slim, Jade] For mark-up I’m using Haml, a HTML templating language you’ve likely at least heard about.

Slide 69

Slide 69 text

Indentation == nesting It speeds up writing HTML massively for me, as it’s whitespace–sensitive.

Slide 70

Slide 70 text

%article %section %h1 Hello World %p Content goes here %a(href="http://foobar.com") Foobar! To nest tags, simple indent them.

Slide 71

Slide 71 text

#foo BECOMES

It comes with handy shortcuts.

Slide 72

Slide 72 text

.bar BECOMES

#foo.bar BECOMES

AND A LOT MORE!

Slide 73

Slide 73 text

Haml + Ruby For me, Haml really starts to shine when used with some Ruby helpers and functions.

Slide 74

Slide 74 text

%ul - 10.times do |num| %li= "Item #{num}" A simple example I’m using often to get a lot of content quickly to test e.g. ﬂoating layouts. This will print ten list elements.

Slide 75

Slide 75 text

Haml + Ruby + Middleman As Middleman is written in Ruby, it comes with a lot of layout helpers which you can use within of course within your Haml templates.

Slide 76

Slide 76 text

Layouts and partials It supports layouts and partial views

Slide 77

Slide 77 text

%body #container = partial "header" #main = yield = partial "footer" This is a layout, yield will insert whatever the current view returns.

Slide 78

Slide 78 text

= content_for :sidebar do = partial "product_sidebar" ELSEWHERE %aside = yield_content :sidebar content_for allows you to deﬁne a block of content to be used elsewhere on the page. Very handy for content outside the current view which depends on content within the view.

Slide 79

Slide 79 text

Helpers And it has a whole array of handy helpers.

Slide 80

Slide 80 text

= simple_format("hello\nworld") BECOMES

hello
world

= pluralize(2, "person") BECOMES 2 people

Slide 81

Slide 81 text

Stylesheets Sass [Less, Stylus] I write all stylesheets using Sass using the .sass syntax — not having to worry about braces and semi–colons is a huge time saver.

Slide 82

Slide 82 text

Indentation == nesting And as you’re likely aware, it works very similarly to Haml — hierarchy is expressed through indentation.

Slide 83

Slide 83 text

article h1 color: red span color: green

Slide 84

Slide 84 text

Variables We got variables

Slide 85

Slide 85 text

$some-color: #f00 article h1 color: $some-color span color: green

Slide 86

Slide 86 text

Operations Mathematical operations.

Slide 87

Slide 87 text

$width: 100px .half width: $width / 2 .half-plus width: $width / 2 + 20px

Slide 88

Slide 88 text

Functions Functions

Slide 89

Slide 89 text

$some-color: #f00 article h1 color: lighten($some-color, 50%) // => #f33

Slide 90

Slide 90 text

Mixins Repeatable blocks of code through mixins — a sort of function which takes even arguments.

Slide 91

Slide 91 text

=very-important($color: red) font-weight: bold color: $color article h1 +very-important

Slide 92

Slide 92 text

Partials And once again partials and includes which Sass will compile into the same ﬁle.

Slide 93

Slide 93 text

@import "header" @import "footer"

Slide 94

Slide 94 text

Content / Data YAML [JSON, XML] I try to keep the actual content for the prototype as YAML ﬁles as Middleman provides OOTB support for it.

Slide 95

Slide 95 text

friends: - Tom - Dick - Harry YAML is a human readable data format much like JSON but without the curly braces.

Slide 96

Slide 96 text

%ul - data.friends.each do |friend| %li= friend And it’s very easy to use within the templates with a little bit of Ruby magic.

Slide 97

Slide 97 text

i18n Middleman comes with baked–in support for internationalization. Something you should deﬁnitely test within your prototype where it applies. Your app or site might need bigger adjustments to accommodate LTR languages, etc.

Slide 98

Slide 98 text

en: hello: world: "Hello" A YAML ﬁle as used by Middlemans i18n functionality.

Slide 99

Slide 99 text

%h1= I18n.t("hello.world") And this is how you’d use it within the app.

Slide 100

Slide 100 text

Scripts CoffeeScript [Opal] I’m trying to write all Javascript in CoffeeScript if my team allows it. But I won’t go any further in to detail here. If you are interested in CS but haven’t gotten around to learning it — follow me on Twitter. I’ve some upcoming course here in Helsinki you might want to attend.

Slide 101

Slide 101 text

Version control Git [SVN] Another thing I won’t go into much detail about is version control. If you keep your production app under version control you should deﬁnitely keep your prototype under VC. And Gits support for branching is like made for prototype feature cycles.

Slide 102

Slide 102 text

Techniques Still a quick overview over some of the techniques I’ve been using to get my prototypes done quickly before I let you go.

Slide 103

Slide 103 text

Modularity The biggest factor in speedy development for me is a modular structure. Modules and components of re–usable code — if built properly and with a certain degree of ﬂexibility baked–in — will improve your work–speed that much.

Slide 104

Slide 104 text

Layouts and partials The previously mentioned tools support this approach through layouts and partials — enabling re–usable view code.

Slide 105

Slide 105 text

Plugin infrastructure I like to keep especially a good library of Javascript libraries and jQuery plugins I’ve written mostly myself around which all use similar structures are easily switched–out.

Slide 106

Slide 106 text

Component libraries (packaged) I recently had the opportunity to work with the fairly new and awesome front–end team at a local software company called Siili on the renewed Nokia.com which — for me is was a great use case component driven prototype development.

Slide 107

Slide 107 text

Ville This is Ville — the Creative Director at Siili and a dear friend of mine — I believe they’re hiring, too, btw.. If you want to hear the story behind the hot dog suit, hit me up later.

Slide 108

Slide 108 text

Custom tool chain Scripts As a lazy developer I’ve started to use Thor scripts which can be executed from the terminal for …

Slide 109

Slide 109 text

Generators … the generation of ﬁles and components

Slide 110

Slide 110 text

Finders … to ﬁnd and modify stuff within a project

Slide 111

Slide 111 text

Visualizations … or to visualize certain aspects of a project.

Slide 112

Slide 112 text

Custom tool chain Libraries And — last but not least — Middleman is only Ruby and built on Rack which makes it inheritably extendable. If a required functionality is not built–in go take a look around, someone might have already solved your problem.