The JSON Architecture

Re-engineering programmingConstantin Dumitrescu @ BucharestJS 29/06/2016

Noteworthy Achievements● 2011 - high performance animation library (WaveJS)● 2012 - real-time & event-driven framework (Fireworks)● 2012 - event-driven inheritance library based on

prototypal inheritance● 2013 - awarded an international EU, USA, China patent for

Upload while Encode process● 2014 - automation system for PSD to HTML/CSS and CMS

integration based on Photoshop Generator (GeneratorX)● 2015 - infrastructure migration on Docker● 2015 - stress test system based on Selenium Grid & Docker● 2016 - The JSON Architecture ecosystem

it felt like this

But then it all clicked!

First insight

Second Insight

Third Insight

Presenting - The Json Architecture

Demo time!Backbone, Ember, AngularJS… the list of new and stable solutions continues to grow, but just how do you decide on which to use in a sea of so many options?

To help solve this problem, we created TodoMVC - a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today.

taken from todomvc.com

* lower is better

...but functionality-wise only 35 lines

Lines of code (LOC) for each TodoMVC

The easy guide to

The JSON Architecture

A last point on UI

Button -> ‘/ui/button’

Input -> ‘/ui/input’

Select -> ‘/ui/select’

{ ui: { button: { timestamp: 1467199000000 value: 'active-filter' }, input: { timestamp: 1467199000000, value: 'foo@bar.com' }, select: { timestamp: 1467199000000, value: 'id-23' } }}

#1 Example{ foo: '123'}

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

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

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

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

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

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

#4 - Your turn!{ session: { token: 'xyz', createdAt: 1467199000000, expiresIn: 60000 }, currentTime: 146720000000}

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

#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

#5 { ajax: { createdAt: 1467199000000, sentAt: 1467199000100, timeoutAfter: 60000, method: 'POST', url: 'http://foo.bar', data: { sample: 'baz' }, receivedAt: null }, currentTime: 1467199000500}// 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: 1467199000500}// get('/ajax/isPending) -> true

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

JSON Data & JSON Schema { "type": "object", "properties": { "user": { "type": "object", "properties": { "name": { "type": "string" }, "email": { "type": "string", "pattern": "^\S+@\S+$" } } ...

{ user: { name: "John Doe", email: "john@doe.com" }}

Performance & scalability

Testability & Documentation

You’ll win

Lastly - talk, experiment and play - Remodel your App

Thank you very much!Please reach out if you need help getting started with“The JSON Architecture” or for any other info on:

Twitter: @dumconstantin

Gmail: dum.constantin@gmail.com

Github: github.com/dumconstantin

You can find the demo here:github.com/dumconstantin/the-json-architecture-todomvc