Then Benefits of Building a Clickable POC as a Developer

Posted: 2016-01-11 01:19:22

ballon 1 or 3

Listen here

This article will focus on web applications and not really be about building websites eg a company blog, college website etc.

This will cover two things. One, how helpful it can be to make a clickable Proof of Concepts (POC), not just with images, or tools the spit out html but instead just enough javascript and base theme to help "sell" the idea, or more importantly to help Product Owners see the possibilities that are not too far out of reach. And the second, and maybe more important thing I will cover is that the developer has a lot to gain in taking on this seemingly non-coding path.

"Use it to make the "happy paths" that the Product Owners need to see"

To begin with I want to set a baseline for the user interface. If your project is new find a theme or base theme (WrapBootstrap, BootStrap, Zurb Foundation, etc). Something that you can easily plug a collection of pieces together to get going easily. This leaves your more time, energy and budget to focus on the business's solution. But if this is an existing project then use the already established theme for your POC so people can really see the context of what you are showing them. Either way you want more than just a un-styled, out of context feature on a white background to help them, the Product Owners, see how their User Stories can work. And you want something more than a bunch of image maps in my opinion.

And to help with the above use Javascript, but keep the it "simple" while also keeping in realistic. Use it to make the "happy paths" that the Product Owners need to see. For example, I had to show a POC of turning on and off comments, different levels of diffs on images for comparing two states of a website page from 2 different time periods in 3 different widths. And in about two days, with the foundation theme we used before, I was able to show this interactive web application. And in this case the designer helped to translate the business needs into wireframes to help lay out a bare path for me to follow.

"...only they (the developer) know the boundaries of the technologies being used and possibilities"

So why should the developer do this and not a person un-experienced in the technologies being used? Why not just use one of those tools that spit out html and make a clickable mock in the context of those tool? This is the key, in my opinion, because it is only the developer who will be able to push the technologies to the next level of possibilities for the solution because only they know the boundaries of the technologies being used and possibilities. And only they can discover new possibilities along the way. And what you will get is a solution that can confidently expose new ideas and possibilities that helps it exceed expectations.

"But the developer also needs to do this for their own good"

But the developer also needs to do this for their own good, to get into the business domain, to start thinking about the business needs and exploring, knowing it is not final, knowing it can be thrown away. And it is this process that helps the developer to see the many things they had not realized they had missed about the business domain model and grow in the knowledge needed to make the right product.

And when it is done it might have zero reusable code but that is fine. Maybe the developer can use it to build some acceptance tests out of it as he or she starts working with real code having a clear understanding of the goals.

Links to Great Resources

Themes that have lots of widgets and UI elements

  • https://wrapbootstrap.com/
  • https://www.google.com/design/spec/material-design/introduction.html
  • http://getbootstrap.com/
  • https://material.angularjs.org/latest/
  • http://foundation.zurb.com/
  • https://angular-ui.github.io/bootstrap/

Techniques

  • https://alfrednutile.info/posts/58
  • https://laravel.com/docs/5.2/routing See the Any route

Tools

  • http://www.json-generator.com/
  • http://www.layoutit.com/