Skip to main content

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.
Thank you for reading this article. 
Almir Mustafic

Labels:

Comments

Post a Comment

Popular posts from this blog

Teaching kids the importance of information security — A simple fun example with encoding/decoding

Teaching kids about information security is very important today because the social network websites and applications are blurring the line between what should be shared securely and what not. Everybody is busy over-sharing the good, bad and ugly over the internet and in the process of doing that forgetting the basics of information security or never taking the time to learn it. Or is it that nobody is introducing these concepts in school? It is something that needs to be introduced in our education systems from early days. Do you remember the days when we used to send those short messages on a piece of paper in our classrooms? Some encoded those messages because you did not want another person in the middle to open it and understand what it says. How were those messages encoded? The simplest example is: You create a simple mapping for each letter and number in the alphabet. Then you encode your message and write it on a piece of paper. Then the person on the other end decodes
Post a Comment
Read more

Driving Manual-transmission cars and C/C++ Programmers — What do they have in common?

You may ask what the drivers of traditional manual-transmission cars and C/C++ programmers have anything to do with each other. Well, I am a software engineer and I am also a car enthusiast (aka a petrolhead in UK). I am noticing certain trends in both the car industry and the software engineering community/industry; therefore, I wanted to share my opinions. I started programming in Basic before I even owned my own computer. I remember when I first learned a for-loop in Basic, I walked over to my friend’s house and typed it up on his Commodore 64. When I was in high-school, I did more Basic (Better Basic and QuickBASIC) and also some Turing (not Turing Machine….I am talking about a language invented by University of Toronto to teach programming and it was Pascal-like). Then I switched to C/C++ and learned all about proper handling of memory and what we call “unmanaged” code these days. C/C++ were the choice if you wanted to do some low-level programming or also if you wanted to
Post a Comment
Read more

SERVICE NAMES, BOUNDARIES (domain lines) and API DEFINITIONS/STANDARDS

SERVICE NAMES, BOUNDARIES (domain lines) and API DEFINITIONS/STANDARDS are some of many important things to achieve the enterprise-level microservice architecture and microservices. Names mean things. So you first need to properly name your services and that’s the names that you would use when talking to your teammates and clients of your services/APIs. I have a separate article on how you go about defining what a microservice is. That's titled "Micro in Microservices" on my site almirsCorner .com. Essentially, you need define the purpose and boundaries of your service. Then you get into API routes and properly defining them for each service. The goal is to keep the routes RESTful and if you run into the situation when they are not, then it should trigger you to revisit the purpose and boundaries of that given microservice. Maybe that service needs to be split into smaller services. Thank you for reading this. Almir Mustafic
Post a Comment
Read more