the json architecture - bucharestjs / july
TRANSCRIPT
![Page 1: The JSON Architecture - BucharestJS / July](https://reader034.vdocuments.mx/reader034/viewer/2022051521/58ed3b701a28ab201c8b458d/html5/thumbnails/1.jpg)
The JSON Architecture
Re-engineering programmingConstantin Dumitrescu @ BucharestJS 29/06/2016
![Page 2: The JSON Architecture - BucharestJS / July](https://reader034.vdocuments.mx/reader034/viewer/2022051521/58ed3b701a28ab201c8b458d/html5/thumbnails/2.jpg)
![Page 3: The JSON Architecture - BucharestJS / July](https://reader034.vdocuments.mx/reader034/viewer/2022051521/58ed3b701a28ab201c8b458d/html5/thumbnails/3.jpg)
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
![Page 4: The JSON Architecture - BucharestJS / July](https://reader034.vdocuments.mx/reader034/viewer/2022051521/58ed3b701a28ab201c8b458d/html5/thumbnails/4.jpg)
it felt like this
![Page 5: The JSON Architecture - BucharestJS / July](https://reader034.vdocuments.mx/reader034/viewer/2022051521/58ed3b701a28ab201c8b458d/html5/thumbnails/5.jpg)
But then it all clicked!
![Page 6: The JSON Architecture - BucharestJS / July](https://reader034.vdocuments.mx/reader034/viewer/2022051521/58ed3b701a28ab201c8b458d/html5/thumbnails/6.jpg)
First insight
![Page 7: The JSON Architecture - BucharestJS / July](https://reader034.vdocuments.mx/reader034/viewer/2022051521/58ed3b701a28ab201c8b458d/html5/thumbnails/7.jpg)
Second Insight
![Page 8: The JSON Architecture - BucharestJS / July](https://reader034.vdocuments.mx/reader034/viewer/2022051521/58ed3b701a28ab201c8b458d/html5/thumbnails/8.jpg)
Third Insight
![Page 9: The JSON Architecture - BucharestJS / July](https://reader034.vdocuments.mx/reader034/viewer/2022051521/58ed3b701a28ab201c8b458d/html5/thumbnails/9.jpg)
Presenting - The Json Architecture
![Page 10: The JSON Architecture - BucharestJS / July](https://reader034.vdocuments.mx/reader034/viewer/2022051521/58ed3b701a28ab201c8b458d/html5/thumbnails/10.jpg)
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
![Page 11: The JSON Architecture - BucharestJS / July](https://reader034.vdocuments.mx/reader034/viewer/2022051521/58ed3b701a28ab201c8b458d/html5/thumbnails/11.jpg)
* lower is better
...but functionality-wise only 35 lines
Lines of code (LOC) for each TodoMVC
![Page 12: The JSON Architecture - BucharestJS / July](https://reader034.vdocuments.mx/reader034/viewer/2022051521/58ed3b701a28ab201c8b458d/html5/thumbnails/12.jpg)
The easy guide to
The JSON Architecture
![Page 13: The JSON Architecture - BucharestJS / July](https://reader034.vdocuments.mx/reader034/viewer/2022051521/58ed3b701a28ab201c8b458d/html5/thumbnails/13.jpg)
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: '[email protected]' }, select: { timestamp: 1467199000000, value: 'id-23' } }}
![Page 14: The JSON Architecture - BucharestJS / July](https://reader034.vdocuments.mx/reader034/viewer/2022051521/58ed3b701a28ab201c8b458d/html5/thumbnails/14.jpg)
#1 Example{ foo: '123'}
// get('/foo') -> '123'
![Page 15: The JSON Architecture - BucharestJS / July](https://reader034.vdocuments.mx/reader034/viewer/2022051521/58ed3b701a28ab201c8b458d/html5/thumbnails/15.jpg)
#2{ foo: '123', bar: node(['/foo'], function (data) { return data })}
// get('/foo') -> '123'// get('/bar') -> '123'
![Page 16: The JSON Architecture - BucharestJS / July](https://reader034.vdocuments.mx/reader034/viewer/2022051521/58ed3b701a28ab201c8b458d/html5/thumbnails/16.jpg)
#3{ name: 'Foo', surname: 'Bar', fullName: node(['/surname', '/name'], function(surname, name) { return surname + name })}/// get('/fullName') -> ‘Bar Foo'
![Page 17: The JSON Architecture - BucharestJS / July](https://reader034.vdocuments.mx/reader034/viewer/2022051521/58ed3b701a28ab201c8b458d/html5/thumbnails/17.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'
![Page 18: The JSON Architecture - BucharestJS / July](https://reader034.vdocuments.mx/reader034/viewer/2022051521/58ed3b701a28ab201c8b458d/html5/thumbnails/18.jpg)
#4 - Your turn!{ session: { token: 'xyz', createdAt: 1467199000000, expiresIn: 60000 }, currentTime: 146720000000}
// get('/session/isValid') -> false
![Page 19: The JSON Architecture - BucharestJS / July](https://reader034.vdocuments.mx/reader034/viewer/2022051521/58ed3b701a28ab201c8b458d/html5/thumbnails/19.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
![Page 20: The JSON Architecture - BucharestJS / July](https://reader034.vdocuments.mx/reader034/viewer/2022051521/58ed3b701a28ab201c8b458d/html5/thumbnails/20.jpg)
#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
![Page 21: The JSON Architecture - BucharestJS / July](https://reader034.vdocuments.mx/reader034/viewer/2022051521/58ed3b701a28ab201c8b458d/html5/thumbnails/21.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: 1467199000500}// get('/ajax/isPending) -> true
![Page 22: The JSON Architecture - BucharestJS / July](https://reader034.vdocuments.mx/reader034/viewer/2022051521/58ed3b701a28ab201c8b458d/html5/thumbnails/22.jpg)
![Page 23: The JSON Architecture - BucharestJS / July](https://reader034.vdocuments.mx/reader034/viewer/2022051521/58ed3b701a28ab201c8b458d/html5/thumbnails/23.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 } }
![Page 24: The JSON Architecture - BucharestJS / July](https://reader034.vdocuments.mx/reader034/viewer/2022051521/58ed3b701a28ab201c8b458d/html5/thumbnails/24.jpg)
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: "[email protected]" }}
![Page 25: The JSON Architecture - BucharestJS / July](https://reader034.vdocuments.mx/reader034/viewer/2022051521/58ed3b701a28ab201c8b458d/html5/thumbnails/25.jpg)
Performance & scalability
![Page 26: The JSON Architecture - BucharestJS / July](https://reader034.vdocuments.mx/reader034/viewer/2022051521/58ed3b701a28ab201c8b458d/html5/thumbnails/26.jpg)
Testability & Documentation
![Page 27: The JSON Architecture - BucharestJS / July](https://reader034.vdocuments.mx/reader034/viewer/2022051521/58ed3b701a28ab201c8b458d/html5/thumbnails/27.jpg)
You’ll win
![Page 28: The JSON Architecture - BucharestJS / July](https://reader034.vdocuments.mx/reader034/viewer/2022051521/58ed3b701a28ab201c8b458d/html5/thumbnails/28.jpg)
Lastly - talk, experiment and play - Remodel your App
![Page 29: The JSON Architecture - BucharestJS / July](https://reader034.vdocuments.mx/reader034/viewer/2022051521/58ed3b701a28ab201c8b458d/html5/thumbnails/29.jpg)
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: [email protected]
Github: github.com/dumconstantin
You can find the demo here:github.com/dumconstantin/the-json-architecture-todomvc