MVC 2.0

A Breakthrough

Part 1. The Facts (The MVC History)

MVC diagram (first draft in 1978)

1979 - Models - Views - Controllers by Trygve Reenskaug

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.”

Poor Analogies

MVC Diagram (second draft 1988)

Which is which?

Part 2. Dispelling the Advertised Benefits

Interwoven Boundaries = No Real Separation of Concerns

Redundant Processing / Handling / Storing = Duplication

Data Handling Everywhere = Inconsistency & Madness

No Autonomy

MVC + OOP = Reusability is Futile

Linear Design Pattern = No Parallel Development

A simple example

Part 3. A New Postulate for MVC

Demands from Real-Time Data

1. High Velocity Views (>100 times / s)2. Building Ad-Hoc Views3. Minimal data processing & conversion4. High Stability5. No Corrosion 6. Push & Pull compatible7. Intelligent Caching8. Multiprocess / Multithreaded by default9. Complete System Predictability10. Engineered to be Streamlined

Demands from Microservices

1. Truly Decoupled Components2. A Universal & Coherent Way to Accessing / Modeling /

Sharing Data3. Small footprint4. Frictionless Parallelization5. Testability6. Decentralized Governance7. Simple Database Segregation8. Simple Infrastructure Automation9. Fault Tolerant & Antifragility

Demands from Reactive Systems

1. Simply express dynamic data2. Asynchronous & Concurrent by default3. Never store data in code4. Pure & Streamlined processing5. Modeling Time and Data together6. Responding to events in a predictable fashion7. Clear entry and exit points

Part 4. Quick Prep-up Before MVC 2.0

Essential State

Derived State

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" }}

... YAML works too!type: object,properties: user: type: object properties: name: type: string email: type: string, pattern: “^\S+@\S+$" required: - name - emailrequired - user

user: name: John Doe email: john@doe.com

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 } }

A simple JSON Pointer

"/bam": node(["/foo/bar/baz"], cb)

Let’s work on some examples #1

foo: 123

// get('/foo') -> '123'

#2

foo: 123bar: node(['/foo'], function (data) { return data})

// get('/foo') -> '123'// get('/bar') -> '123'

#3

name: Foosurname: BarfullName: node(['/surname', '/name'], function(surname, name) { return surname + name})

// get('/fullName') -> ‘Bar Foo'

#3 - continueduser: name: Foo surname: Bar fullName: node(['/user/surname', '/user/name'], function(surname, name) { return surname + name })

// get('/user/fullName') -> ‘Bar Foo'

#4session: token: xyz createdAt: 1467199000000 expiresIn: 60000currentTime: 146720000000

// get('/session/isValid') -> false

#4 - continuedsession: { 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

#5 ajax: createdAt: 1467199000000 sentAt: 1467199000100 timeoutAfter: 60000 method: POST url: http://foo.bar data: sample: baz receivedAt: nullcurrentTime: 1467200000// get('/ajax/isPending) -> true

#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

Part 5. MVC 2.0

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.

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.

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.

Demo Time

References

https://www.kilim.com/images/content/kilim_weaving_technique_9.jpghttp://karinsebelin.com/wp-content/uploads/2015/10/Marionette-Abh%C3%A4ngigleit.jpghttp://pre03.deviantart.net/3a90/th/pre/f/2013/205/6/e/crowded_beach_by_samiatay-d6ew2um.jpghttp://media.istockphoto.com/photos/square-peg-in-a-round-hole-picture-id173230047?k=6&m=173230047&s=170667a&w=0&h=vrjQtexdKNNX_bTF27tyJwiAOKM-kWIhySBWSa2gzcM=http://worldartsme.com/images/cartoon-person-taking-clipart-1.jpghttp://images.clipartpanda.com/box-clipart-aie7gkzi4.pnghttp://previews.123rf.com/images/gnurf/gnurf1106/gnurf110600003/9926108-Confused-cartoon-guy-scratching-his-head-Stock-Vector.jpghttp://www.clipartkid.com/images/243/small-house-icon-png-clipart-image-iconbug-com-8VpCSX-clipart.pnghttp://sr.photos1.fotosearch.com/bthumb/CSP/CSP990/k11301571.jpghttp://cdn.xl.thumbs.canstockphoto.com/canstock7934222.jpghttp://www.collaborationobjects.com/wp-content/uploads/2015/01/Great_Alaskan_Lumberjack_Show_crosscut_saw.jpghttp://webframeworks.kr/tutorials/react/imgs/complex_mvc.png

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