MVC
After having done a node.js + react.js group project, and recently being exposed to Django at work, I feel like writing this post to interprete MVC my way.
Model–view–controller (MVC) is a software architectural pattern for implementing user interfaces on computers. 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.
According to wiki,
- The model directly manages the data, logic and rules of the application.
- A view can be any output representation of information, such as a chart or a diagram. Multiple views of the same information are possible, such as a bar chart for management and a tabular view for accountants.
- The third part, the controller, accepts input and converts it to commands for the model or view
Hmm, everything sounds so clear, right? Yet immediately another paragraph catches my attention
Early web MVC frameworks took a thin client approach that placed almost the entire model, view and controller logic on the server. This is still reflected in popular frameworks such as Ruby on Rails, Django, ASP.NET MVC. In this approach, the client sends either hyperlink requests or form input to the controller and then receives a complete and updated web page (or other document) from the view; the model exists entirely on the server. As client technologies have matured, frameworks such as AngularJS, EmberJS, JavaScriptMVC and Backbone have been created that allow the MVC components to execute partly on the client (also see Ajax).
Wait a minute, what is the “server side technology” and “client side technology”? So I dig on and find this post on stackexchange Aha, that totally makes sense, where in my node.js + react.js project, node.js (check this blogpost) is the server side programming and react.js is the client side programming tool (beating Angular & Ember)!
I would like to discuss about React.js a bit more (yeah one of my favorite topic!). As its officical document mentioned:
React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the V in MVC. We built React to solve one problem: building large applications with data that changes over time.
How does it work? Here is how and an easy-to-read Gitbook about it.
How to design web UI using React.js? The document “Thinking in React” is helpful
- Start with a mock
- Step 1: Break the UI into a component hierarchy
- Step 2: Build a static version in React
- Step 3: Identify the minimal (but complete) representation of UI state
- Step 4: Identify where your state should live
- Step 5: Add inverse data flow
And that’s it! Excited? Why not join me and get your hands on React.js now :)