MVC 2.0 - A Breakthrough
1 like699 views
The document outlines the evolution and challenges of the Model-View-Controller (MVC) architecture, presenting a new postulate for MVC 2.0 that addresses the demands of real-time data, microservices, and reactive systems. It emphasizes the essential roles of the view, controller, and model components and introduces JSON and YAML schemas for data representation. The document also discusses the pitfalls of traditional MVC approaches, advocating for improvements in data handling and system design.
![JSON Data & JSON Schema
{
"type": "object",
"properties": {
"user": {
"type": "object",
"properties": {
"name": {
"type": "string"
},
"email": {
"type": "string",
"pattern": "^S+@S+$"
}
},
"required": [
"name",
"email"
]
}
},
"required": [
"user"
]
}
{
"user": {
"name": "John Doe",
"email": "john@doe.com"
}
}](https://image.slidesharecdn.com/mvc2-161003142915/85/MVC-2-0-A-Breakthrough-25-320.jpg)
![JSON Patch & JSON Pointer
[
{"op": "replace", "path": "/user/name", "value": "Jane Roe"},
{"op": "add", "path": "/user/address", "value": "51 Street"},
{"op": "test", "path": "/user/id", "value": 23}
]
{ "user": { "name": "John Doe", "id": 23 } }
{ "user": { "name": "Jane Roe", "address": "51 Street", "id": 23 } }](https://image.slidesharecdn.com/mvc2-161003142915/85/MVC-2-0-A-Breakthrough-27-320.jpg)
![A simple JSON Pointer
"/bam": node(["/foo/bar/baz"], cb)](https://image.slidesharecdn.com/mvc2-161003142915/85/MVC-2-0-A-Breakthrough-28-320.jpg)
![#2
foo: 123
bar: node(['/foo'], function (data) {
return data
})
// get('/foo') -> '123'
// get('/bar') -> '123'](https://image.slidesharecdn.com/mvc2-161003142915/85/MVC-2-0-A-Breakthrough-30-320.jpg)
![#3
name: Foo
surname: Bar
fullName: node(['/surname', '/name'], function(surname, name) {
return surname + name
})
// get('/fullName') -> โBar Foo'](https://image.slidesharecdn.com/mvc2-161003142915/85/MVC-2-0-A-Breakthrough-31-320.jpg)
![#3 - continued
user:
name: Foo
surname: Bar
fullName: node(['/user/surname', '/user/name'], function(surname, name) {
return surname + name
})
// get('/user/fullName') -> โBar Foo'](https://image.slidesharecdn.com/mvc2-161003142915/85/MVC-2-0-A-Breakthrough-32-320.jpg)
![#4 - continued
session: {
token: xyz
createdAt: 1467199000000
expiresIn: 60000
isValid: node(['/session/createdAt', '/session/expiresIn', '/currentTime'],
function (createdAt, expiresIn, now) {
return createdAt + expiresIn > now
})
currentTime: 146720000000
// get('/session/isValid') -> false](https://image.slidesharecdn.com/mvc2-161003142915/85/MVC-2-0-A-Breakthrough-34-320.jpg)
![#5 - continued
ajax:
...
isPending: node(['/ajax/sentAt', '/ajax/timeoutAfter', '/ajax/receivedAt', '/currentTime'],
function (sentAt, timeout, receivedAt, now) {
return receivedAt === null && sentAt + timeout < now
})
currentTime: 1467200000
// get('/ajax/isPending) -> true](https://image.slidesharecdn.com/mvc2-161003142915/85/MVC-2-0-A-Breakthrough-36-320.jpg)
MVC 2.0 - A Breakthrough
- 3. Part 1. The Facts (The MVC History)
- 4. MVC diagram (first draft in 1978) 1979 - Models - Views - Controllers by Trygve Reenskaug
- 5. Whatโs a Thing in Thing-Model-View-Editor? โSomething that is of interest to the user โฆ. like a house or an integrated circuit โฆ. like a new idea or opinions about a paper or like a computer โฆ. like a circuit element.โ
- 7. MVC Diagram (second draft 1988)
- 9. Part 2. Dispelling the Advertised Benefits
- 10. Interwoven Boundaries = No Real Separation of Concerns
- 11. Redundant Processing / Handling / Storing = Duplication
- 12. Data Handling Everywhere = Inconsistency & Madness
- 13. No Autonomy
- 14. MVC + OOP = Reusability is Futile
- 15. Linear Design Pattern = No Parallel Development
- 16. A simple example
- 17. Part 3. A New Postulate for MVC
- 18. Demands from Real-Time Data 1. High Velocity Views (>100 times / s) 2. Building Ad-Hoc Views 3. Minimal data processing & conversion 4. High Stability 5. No Corrosion 6. Push & Pull compatible 7. Intelligent Caching 8. Multiprocess / Multithreaded by default 9. Complete System Predictability 10. Engineered to be Streamlined
- 19. Demands from Microservices 1. Truly Decoupled Components 2. A Universal & Coherent Way to Accessing / Modeling / Sharing Data 3. Small footprint 4. Frictionless Parallelization 5. Testability 6. Decentralized Governance 7. Simple Database Segregation 8. Simple Infrastructure Automation 9. Fault Tolerant & Antifragility
- 20. Demands from Reactive Systems 1. Simply express dynamic data 2. Asynchronous & Concurrent by default 3. Never store data in code 4. Pure & Streamlined processing 5. Modeling Time and Data together 6. Responding to events in a predictable fashion 7. Clear entry and exit points
- 21. Part 4. Quick Prep-up Before MVC 2.0
- 22. Essential State
- 23. Derived State
- 25. JSON Data & JSON Schema { "type": "object", "properties": { "user": { "type": "object", "properties": { "name": { "type": "string" }, "email": { "type": "string", "pattern": "^S+@S+$" } }, "required": [ "name", "email" ] } }, "required": [ "user" ] } { "user": { "name": "John Doe", "email": "john@doe.com" } }
- 26. ... YAML works too! type: object, properties: user: type: object properties: name: type: string email: type: string, pattern: โ^S+@S+$" required: - name - email required - user user: name: John Doe email: john@doe.com
- 27. JSON Patch & JSON Pointer [ {"op": "replace", "path": "/user/name", "value": "Jane Roe"}, {"op": "add", "path": "/user/address", "value": "51 Street"}, {"op": "test", "path": "/user/id", "value": 23} ] { "user": { "name": "John Doe", "id": 23 } } { "user": { "name": "Jane Roe", "address": "51 Street", "id": 23 } }
- 28. A simple JSON Pointer "/bam": node(["/foo/bar/baz"], cb)
- 29. Letโs work on some examples #1 foo: 123 // get('/foo') -> '123'
- 30. #2 foo: 123 bar: node(['/foo'], function (data) { return data }) // get('/foo') -> '123' // get('/bar') -> '123'
- 31. #3 name: Foo surname: Bar fullName: node(['/surname', '/name'], function(surname, name) { return surname + name }) // get('/fullName') -> โBar Foo'
- 32. #3 - continued user: name: Foo surname: Bar fullName: node(['/user/surname', '/user/name'], function(surname, name) { return surname + name }) // get('/user/fullName') -> โBar Foo'
- 33. #4 session: token: xyz createdAt: 1467199000000 expiresIn: 60000 currentTime: 146720000000 // get('/session/isValid') -> false
- 34. #4 - continued session: { token: xyz createdAt: 1467199000000 expiresIn: 60000 isValid: node(['/session/createdAt', '/session/expiresIn', '/currentTime'], function (createdAt, expiresIn, now) { return createdAt + expiresIn > now }) currentTime: 146720000000 // get('/session/isValid') -> false
- 35. #5 ajax: createdAt: 1467199000000 sentAt: 1467199000100 timeoutAfter: 60000 method: POST url: http://foo.bar data: sample: baz receivedAt: null currentTime: 1467200000 // get('/ajax/isPending) -> true
- 36. #5 - continued ajax: ... isPending: node(['/ajax/sentAt', '/ajax/timeoutAfter', '/ajax/receivedAt', '/currentTime'], function (sentAt, timeout, receivedAt, now) { return receivedAt === null && sentAt + timeout < now }) currentTime: 1467200000 // get('/ajax/isPending) -> true
- 37. Part 5. MVC 2.0
- 39. View Role. Outputs data in a certain format Purpose. Gives meaning to data by exporting it to the world Notes. The only true essential component. An application can work just fine with only a View component and a Data Tree. Name. Through it the World views the data, sees what it needs to see in a manner suitable to the World - hence the name View.
- 40. Controller Role. Inputs data in the JSON patch format (essential data) Purpose. Creating movement / momentum / triggers transformations / etc Notes. All actions are correlated to existing data or lack of data. Every action is traceable from an initial state. Name. It exerts control over what data is added / replaced and controls the outside world - hence the name Controller.
- 41. Model Role. Combines and derives data Purpose. From simple / uninteresting data it creates sophisticated / complex representations Notes. All โif statementsโ are data. Derived data is never stored / only cached. Models define the diversity of data. Name. Treats data as a maleable material and shapes it in new and interesting forms. It Models it.
- 42. Demo Time
- 44. Thank you! Constantin Dumitrescu, find me as @dumconstantin on Ask me about: JS, FP, Docker, Automating things, Development Tools, Radical Management Presentations: The Philosophy and Practice of the Pure Function / The JSON Architecture 1 & 2 / RamdaJS - An Epic Tale