Upload
constantin-dumitrescu
View
529
Download
3
Embed Size (px)
Citation preview
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: '[email protected]' }, 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: "[email protected]" }}
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: [email protected]
Github: github.com/dumconstantin
You can find the demo here:github.com/dumconstantin/the-json-architecture-todomvc