Prototype — Turning it into Final Product quickly in order to see innovation in action !

I have a saying “There is nothing more final than a POC/Prototype”.

Sadly a lot of times an unpolished prototype just becomes your production version of software. 
On the other hand, we have cases where prototypes fully become a throw-away work. How do we take a prototype into a final product quickly to see the fruits of your innovations with minimal effort and at the same time not have a drastic difference between the design of a prototype and the design of the final product? In other words, how do we introduce agility and flexibility?

What’s on the table. You have the following in the picture regardless of the type of architecture:

• Product owners and innovative ideas
• Front-End development
• Web-tier (server-side) development
• Business logic development in some forms of web services or APIs.

When you develop prototypes, you can take the Business-Logic component out of the equation most of the time and for the purposes of this article, I will not focus on that part. My focus will be strictly on the Front-End development and Web-tier (server-side) development. In order to get to some recommendations, I will need to take a quick trip in the history of web development. I will mostly talk about role of Microsoft technologies in web development as go quickly go through the history.

In the old days, the web development was done via classic ASP and it was somewhat friendly for front-end developers because the control was within the front-end code (ASP files). Then Microsoft went in the direction where the control shifted towards the server-side development and the HTML code ended being a collection of .NET user controls being invoked; this took away power and creativity from front-end developers as they relied heavily on software engineers like me ☺. Then Microsoft introduced MVC via Razor syntax giving back the capabilities, flexibility and creativity to front-end developers. If you and your team made architecture guidelines to only use Razor syntax for IF conditions and FOR LOOPS without cheating and calling C# methods, then the Razor syntax (CSHTML) files were very close to HTML files. Taking aside the MVC concepts, I would say that Razor syntax in CSHTML files is very close to PHP. To some degree we could say that front-end developers could go in a dark room and implement all the plain HTML5/CSS3/Javascript code and then quickly integrate it with the MVC/Razor syntax and have the web application fully working. This could be true if you stayed away from using a lot of Html helpers in Razor, but we know that’s not the case most of the time and this requires a lot of discipline.

So what can we do to keep this integration as simple as possible?

We need to develop the prototype within the front-end code in such a way that it just plugs into the web-tier (server-side) code with almost zero impact. So the web-tier (server-side) code in a way becomes a harness for your front end code. If you think of it as a harness while designing the front-end prototype code, then it really means that you don’t need the web-tier (server-side) developed at all for the purposes of your prototype. However, you need the mocked version of this harness that returns back to the front-end code some meaningful test data.

The important thing is to define the clean interface between your HTML/Javascript code and your web-tier (server-side) code; the person coordinating this effort should be the front end developers who have the full understanding of the product and product features that need to be built. I am really talking about the JSON objects as the signatures. You really need to define what type of data should go back to the client from server and define all the JSON format. You just need to be very careful from the security point of view so that you do not reveal something in the JSON that was typically handled in the backend before and now you are sending that information back to the client giving hackers power within Javascript execution. Then you need to define what type of data needs to flow from client to the server and cleanly specify the JSON format. If you don’t pick an existing Javascript framework, then you need to define your own Javascript controller code that will contain the mechanism of passing the JSON information between HTML code and server-side code via AJAX calls or as people call it API calls these days.

Once you have all this defined, then the front-end developers can go with full speed developing the HTML and Javascript code without needing to have the web-tier (server-side) code implemented. You would just need to develop some simple version of the server-side code that would be able to receive and return some sample JSON information in order to test different permutations.

After reading all of the above, one might say “why don’t you just use NodeJS”. My answer is: My article is not about recommending the type of technology that you would use; it is about the concepts that you could apply even using your existing technologies if you don’t have the luxury of switching to a different technology. You could achieve the goals of this prototype by using NodeJS, .NET Web APIs, PHP web service, Django Python web service and many other technologies.

In conclusion, the front-end prototype code really becomes iteration #1(following the architecture of the full solution) for a potential project if the prototype or POC gets approved. The prototype does not have to be thrown away and built in another/real framework from scratch because it IS already in the real framework. It can be just continued as part of an approved project and during that project there should be no surprizes; it is just a matter of fine-tuning the front-end code and having the server-side test harness code replaced with the full functionality.

In a nutshell, this means that product owners / innovators can work closely with the front-end developers (aka product developers) and be one step ahead of the game when that project gets finally approved.

Who wins here? Product owners win. Developers win. Your company wins and the most importantly your customers win.

- almirsCorner.com - 

#Tech #Technology #innovation #disrupt #prototype #SoftwareArchitecture #programming #code #coding #HTML5 #Javascript #WebAPI #NodeJS #Django #Python #PHP #JSON #Csharp #DotNet