Tweet
Tweet

Slide 1

Slide 1 text

Hi !

Slide 2

Slide 2 text

So, Who am I?

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Client Server

Slide 5

Slide 5 text

const person = {
 firstName: 'Haggai',
 lastName: 'Yaniv',
 age: 30
 };
 JSON.stringify(person);

Slide 6

Slide 6 text

"{"firstName":"Haggai"," lastName":"Yaniv","age": "30"}" JSON.stringify(person);

Slide 7

Slide 7 text

Deserialization The opposite operation, extracting a data structure from a series of bytes https://en.wikipedia.org/wiki/Serialization

Slide 8

Slide 8 text

const person = JSON.parse(response);
 
 
 
 "{"firstName":"Haggai"," lastName":"Yaniv","age": "30"}"

Slide 9

Slide 9 text

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


Slide 10

Slide 10 text

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


Slide 11

Slide 11 text

Pretty simple, right?

Slide 12

Slide 12 text

Jaco What’s that?

Slide 13

Slide 13 text

meetup.com (Jaco installed) Server Player JSON.parse() JSON.stringify()

Slide 14

Slide 14 text

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!

Slide 15

Slide 15 text

An object's serialized format is important

Slide 16

Slide 16 text

An object's deserialized format is also important

Slide 17

Slide 17 text

• 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

Slide 18

Slide 18 text

JSON.parse(response); JSON.stringify(person);

Slide 19

Slide 19 text

Flat Buffers

Slide 20

Slide 20 text

"{"firstName":"Haggai"," lastName":"Yaniv","age": "30"}"

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Looks good for storage/network But how am I supposed to work with this format?

Slide 23

Slide 23 text

First, We need to define a schema

Slide 24

Slide 24 text


 namespace Demo.Person;
 
 table Person {
 firstName:string;
 lastName:string;
 age:short;
 }
 
 root_type Person; Note: this is not a JavaScript File person.idl

Slide 25

Slide 25 text

Now let it generate our getter and setter access code ./flatc --js -o ./output ./sample/person.idl

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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:

Slide 29

Slide 29 text

Let’s take a look a under the hood

Slide 30

Slide 30 text

Person Instance 00a0 0020 1000 001E

Slide 31

Slide 31 text

Person Instance vtpr 0020 1000 001E

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

What about backward/forward compatibility?

Slide 34

Slide 34 text


 
 namespace Demo.Person;
 
 
 
 
 table Person {
 firstName:string;
 lastName:string;
 age:short;
 
 
 }
 
 
 
 
 
 
 
 
 root_type Person;

Slide 35

Slide 35 text


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


Slide 36

Slide 36 text

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'

Slide 37

Slide 37 text

• 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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

./flatc —[lng] -o ./output ./sample/person.idl

Slide 40

Slide 40 text

FlatBuffers is super fast!

Slide 41

Slide 41 text

https://google.github.io/flatbuffers/ flatbuffers_benchmarks.html

Slide 42

Slide 42 text

Intriguing… Tell me more

Slide 43

Slide 43 text

Improving Facebook's performance on Android with FlatBuffers

Slide 44

Slide 44 text

tl;dr

Slide 45

Slide 45 text

Let's talk about FPS

Slide 46

Slide 46 text

Browser rendering optimaztion

Slide 47

Slide 47 text

Graph representing relations between the Objects

Slide 48

Slide 48 text

JSON representation of the relations Story: { Actor: John, Feedback: { Likers:[Mary], Comments: [ { Author:Mark Text:... } ] } Attachment: { Pictures: [ { PictureUr:... },

Slide 49

Slide 49 text

Parsing 20kb JSON object took 35ms In order to achieve sleek 60fps parsing needs to take less than 16.7ms

Slide 50

Slide 50 text

After switching to FlatBuffers • Time to load each story reduced from 35ms to 4ms
 • Transient memory allocations are 
 reduced by 75%.

Slide 51

Slide 51 text

What about Jaco?

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

After switching to FlatBuffers • Mobile recording launched successfully • Memory consumption on the player reduce by 80%

Slide 54

Slide 54 text

Let's wrap it up • FlatBuffer has impressive performance abilities. • But remember, use it wisely :) • Major factor with limited resource devices

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

So, what do you think?

Slide 57

Slide 57 text

Thank you! [email protected] blog.getjaco.com https://twitter.com/yhaggai