Web Programming Style - MVC (Model View Control)

Model–View–Controller (MVC) is a software pattern for implementing user interfaces. It divides a given software application into three interconnected parts, so as to separate internal representations of information from the ways that information is presented to or accepted from the user. ... Wikipedia

http://en.wikipedia.org/wiki/File:MVC-Process.svg

MVC has been widely adopted as the development framework for Web applications with all major programming languages. In conventional client-server framework, servers run CGI programs (view and controller logic on the server) to serve requests from clients with hyperlinks or actions defined in HTML form. In par with the client-server framework, MVC design the application framework into three interactive components.

• Model defines data/metadata usually retrieved from databases as JSON or XML formats. Those data retrievals are controlled by the "Controller" to actively notify or passively fetch on demand. Returned data are bind with "Views" to present in the App UI and interact with users.
• Controller can send commands to the "Model" to retrieve/update the model's data/state (e.g., send XMLHttpRequest to Web APIs to get data or update a record). It can also notify events to associated view to render UI based on the model (e.g., codes of onreadystatechange for UI rendering or exception handling).
• View renders information obtained from the model and waits interactions from the user.

MVC in a generic programming style supported almost all major web programming languages. For the example of developing QNAP Apps, we design the MVC framework as followings.

MVC Framework for QNAP App Design in our Lab.

• Model: We manage data in QNAP with PostgreSQL to dynamically provide JSON or XML structured data for QNAP Apps. PostgreSQL supports "create view", "stored procedure", "user-defined function", etc. for developers to retrieve various data tables. Therefore, a table view (e.g. vSceneSpot defined by create view) may correspond to a "Model" in the framework.
• Controller: The dynamic data requests can be served by web APIs written by PHP. In MVC framework, partial jobs of traditional CGI programs are mapped to API programs that call db libraries (e.g. php-pgsql) to retrieve data and package them as JSON or XML formats. Obviously, arguments representing data needs are sent as XMLHttpRequest or URL the PHP program (web API) to get formatted data. As for user-server interactions, AJAX or jQuery techniques are widely used to "transparently" call web APIs to pull up-to-date data or push modified data.
• View: Nowadays, web programmers are familiar with writing HTML/CSS3 codes to present web pages. In this MVC framework, these programmers are usually called "web front-end developer" who are mature in coding HTM5, CSS3, Javascript, AJAX/Query, and some useful web tools, such as EJS or AngularJS. They should by interesting in hacking the UI design of famous website (e.g. Facebook, Pinterest, Flipboard, etc.) to know how to mimic the design style. 

Let's start a MVC-based App in next article.