flatbuffers

(Almost) every web application passes data from place to place, and a common way to do that is with JSON.

However, JSON has downsides on performance critical paths. Its parsing overhead, even on small payloads, incurs quite a penalty. In mobile devices with weaker hardware this penalty is magnified by jankyness your users might experience. These performance issues can be eliminated using Google’s latest new serialization library - FlatBuffers. We’ll go over some use-cases and see how FlatBuffers let you serialize your data while keeping your application with a sleek 60FPS.

Transcript

1. Hi !
2. So, Who am I?
3. Serialization Serialization is the process of 
 translating data structures or object state into a format that can be stored (or transmitted across a 
 network connection) https://en.wikipedia.org/wiki/Serialization
4. Client Server
5. const person = {
 firstName: 'Haggai',
 lastName: 'Yaniv',
 age: 30
 };
 JSON.stringify(person);
6. "{"firstName":"Haggai"," lastName":"Yaniv","age": "30"}" JSON.stringify(person);
7. Deserialization The opposite operation, extracting a data structure from a series of bytes https://en.wikipedia.org/wiki/Serialization
8. const person = JSON.parse(response);
 
 
 
 "{"firstName":"Haggai"," lastName":"Yaniv","age": "30"}"
9. const person = JSON.parse(response);
 
 
 
 const person = {
 firstName: 'Haggai',
 lastName: 'Yaniv',
 age: 30
 };

10. const person = JSON.parse(response);
 
 console.log(person.firstName) // 'Haggai'
 console.log(person.lastName) // 'Yaniv'
 console.log(person.age) // 30 const person = {
 firstName: 'Haggai',
 lastName: 'Yaniv',
 age: 30
 };

11. Pretty simple, right?
12. Jaco What’s that?
13. meetup.com (Jaco installed) Server Player JSON.parse() JSON.stringify()
14. Serialisation has it's toll Converting a JSON into JavaScript loads both the CPU and the memory The impact might be crucial 
 when the device is mobile!
15. An object's serialized format is important
16. An object's deserialized format is also important
17. • Started in 2015 as a project by 
 “Fun Propulsion Labs” - A Google group dedicated to Android Tools • Originally was oriented for game 
 development on Android • Today being supported for 
 9 programming languages The answer
18. JSON.parse(response); JSON.stringify(person);
19. Flat Buffers
20. "{"firstName":"Haggai"," lastName":"Yaniv","age": "30"}"
21. 1400 0000 0000 0e00 1000 0800 0c00 0600 0000 0000 0e00 0000 0000 1e00 1400 0000 0400 0000 0500 0000 5961 6e69 7600 0000 0600 0000 4861 6767 6169 0000
22. Looks good for storage/network But how am I supposed to work with this format?
23. First, We need to define a schema
24. 
 namespace Demo.Person;
 
 table Person {
 firstName:string;
 lastName:string;
 age:short;
 }
 
 root_type Person; Note: this is not a JavaScript File person.idl
25. Now let it generate our getter and setter access code ./flatc --js -o ./output ./sample/person.idl
26. // getters
 Demo.Person.prototype.firstName = function() { ...}
 Demo.Person.prototype.lastName = function() { ...}
 Demo.Person.prototype.age = function() { ...}
 
 // setters
 Demo.Person.addFirstName = function() { ...}
 Demo.Person.addLastName = function() { ...}
 Demo.Person.addAge = function() { ...}
 
 // init methods
 Demo.Person.startPerson = function() { ...}
 Demo.Person.endPerson = function() { ...}
 
 // extract the person from the received data
 Demo.Person.getRootAsPerson = function(buff) { ...} We'll get a file called 'person_generated.js' with the following methods
27. // this is how we used work
 function getResponse(response) {
 const person = JSON.parse(response);
 console.log(person.firstName); // 'haggai'
 console.log(person.lastName); // 'yaniv'
 console.log(person.age); // 30
 
 } Reminder
28. const Demo = require('./person_generated.js').Demo;
 
 
 // now the new way
 function getPerson(response) {
 // Get access to the root:
 const person = Demo.Person.getRootAsPerson(response);
 
 console.log(person.firstName()); // 'haggai'
 console.log(person.lastName()); // 'yaniv'
 console.log(person.age()); // 30
 
 } The new way is:
29. Let’s take a look a under the hood
30. Person Instance 00a0 0020 1000 001E
31. Person Instance vtpr 0020 1000 001E
32. Vtable (shared between other Person instances) firstNameOffset lastNameOffset age 4 5 6 Person Instance vptr firstName reference lastName refernce 30[short] firstName h a g g a i
33. What about backward/forward compatibility?
34. 
 
 namespace Demo.Person;
 
 
 
 
 table Person {
 firstName:string;
 lastName:string;
 age:short;
 
 
 }
 
 
 
 
 
 
 
 
 root_type Person;
35. 
 
 namespace Demo.Person;
 
 
 
 
 table Person {
 firstName:string;
 lastName:string;
 age:short;
 
 
 }
 
 
 
 
 
 
 
 
 root_type Person; 
 
 
 
 // NEW FIELD
 enum Department:byte { RnD = 0, Product, Finance = 2 }
 
 
 
 
 
 company:Company; // NEW FIELD
 department:Department = RnD; // NEW FIELD
 
 
 // NEW TABLE
 table Company {
 companyName:string;
 companyStreetName:string;
 streetNumber:short;
 }
 

36. Person.Company.prototype.company = function() {...}
 Person.Company.prototype.companyName = function() {...}
 Person.Company.prototype.companyStreetName = function() {...}
 Person.Company.prototype.streetNumber = function() {...} Additional methods at 'person_generated.js'
37. • To gain the full benefits you must use generated code getters • Not very human readable • Not ideal for mutating objects • Eco system in JS has a way to go Caveats
38. Main Benefits Cross platform code with no dependencies No need to parse/stringify Efficient in memory - no extra memory beside the data itself Enables efficient random access memory
39. ./flatc —[lng] -o ./output ./sample/person.idl
40. FlatBuffers is super fast!
41. https://google.github.io/flatbuffers/ flatbuffers_benchmarks.html
42. Intriguing… Tell me more
43. Improving Facebook's performance on Android with FlatBuffers
44. tl;dr
45. Let's talk about FPS
46. Browser rendering optimaztion
47. Graph representing relations between the Objects
48. JSON representation of the relations Story: { Actor: John, Feedback: { Likers:[Mary], Comments: [ { Author:Mark Text:... } ] } Attachment: { Pictures: [ { PictureUr:... },
49. Parsing 20kb JSON object took 35ms In order to achieve sleek 60fps parsing needs to take less than 16.7ms
50. After switching to FlatBuffers • Time to load each story reduced from 35ms to 4ms
 • Transient memory allocations are 
 reduced by 75%.
51. What about Jaco?
53. After switching to FlatBuffers • Mobile recording launched successfully • Memory consumption on the player reduce by 80%
54. Let's wrap it up • FlatBuffer has impressive performance abilities. • But remember, use it wisely :) • Major factor with limited resource devices
55. Learn More • See the official FlatBuffers page at: https://google.github.io/flatbuffers/ • Sample code from our talk can be found here: https://github.com/yhaggai/flatbuffers-sample • Facebook's tech blog about FlatBuffers
56. So, what do you think?
57. Thank you! haggai@getjaco.com blog.getjaco.com https://twitter.com/yhaggai