This document provides an overview of Protocol Buffers (Protobuf), including: - Protobuf allows for the serialization and deserialization of structured data in a compact and efficient way. It was initially developed at Google for request/response protocols. - The process involves defining message types using .proto files, generating code from those files for various languages, and then serializing/deserializing data using that generated code. - Compared to other formats like XML, Protobuf is smaller, faster, and simpler to use programmatically. It is language- and platform-agnostic.

1. Protobuff.js

2. Who am I!
I am Adrian Lemes
- Frontend architect at ilegra
- Graduated in Analysis and System
Development at FATEC Senai
- Started in 2012 on IT world
- Experience with Arch Front
(Angular, React, React Native,
Vue, NodeJS, Micro-fronts, SSR,
BFF, GraphQL, PWA and others)
You can find me at @username 2
@adrianlemess

3. Serialization and Deserialization
- Protocol buffers were initially developed at Google to
deal with an index server request/response protocol.
- Transfer structured data in a safe way between
servers
- New fields could be easily introduced, and
intermediate servers that didn't need to inspect the
data could simply parse it and pass through the data
without needing to know about all the fields
3

4. “
4
Protocol buffers are Google's language-neutral,
platform-neutral, extensible mechanism for
serializing structured data – think XML or
JSON, but smaller, faster, and simpler. —
Google

5. Protobuff
- A way of serialize and deserialize data
- Open source project
- Platform agnostic
- Serialization and deserialization in multiple API
languages
5

6. 1. Define message types
2. Generate code
3. Serialize/Deserialize

7. 1. Define message types
2. Generate code
3. Serialize/Deserialize

8. “
Messa types defines .proto
files with data structure
8

9. “
Message type have the key-
value pairs format
9

10. Person Type
10

11. 1. Define message types
2. Generate code
3. Serialize/Deserialize

12. “
The .proto files are compiled
by protobuf into generated
code
12

13. Basic types
- double
- float
- int32
- int64
- uint32
- Dictionary
- Data
- Array
- bytes
13
- uint64
- sint32
- sint64
- fixed32
- fixed64
- sfixed32
- sfixed64
- bool
- string

14. What languages?
14

15. JavaScript generated code
15

16. 1. Define message types
2. Generate code
3. Serialize/Deserialize

17. Why not XML?
- Are simpler
- Are 3 to 10 times smaller
- Are 20 to 100 times faster
- Are less ambiguous
- Generate data access classes that are easier to use
programmatically
17

18. Interfaces to serialization and deserialization
- byte[] toByteArray();: serializes the message and
returns a byte array containing its raw bytes.
- static Person parseFrom(byte[] data);: parses a
message from the given byte array.
- void writeTo(OutputStream output);: serializes the
message and writes it to an OutputStream.
- static Person parseFrom(InputStream input);: reads
and parses a message from an InputStream.
18

19. How does it work?

20. Protobuff model Person
20
The binary would probably be 28 bytes long and
take 100-200 nanoseconds to parse

21. XML model Person
21
The XML version is at least 69 bytes if you remove
whitespace, and would take around 5,000-10,000
nanoseconds to parse.

22. Do NOT use for:
- Data from service consumed by browser - browsers
use JSON very well and optmized
- JavaScript architecture - NodeJS, RN, React - JSON is
native in JavaScript
- Startup - JSON is faster to understand
- Large packet sizes - more than 1mb by packet
22

23. Worth to use:
- Native mobile apps getting data - Android and Swift
- Micro-services architecture with different languages -
type safe messages prevents dummy mistakes
- High data throughput - scale
23

24. 24
Thanks!
Any questions?

25. This is a slide title
- Here you have a list of items
- And some text
- But remember not to overload your slides with
content
Your audience will listen to you or read the content, but
won’t do both.
25

26. Bring the attention of your audience over a
key concept using icons or illustrations
Big concept
26

27. White
Is the color of milk and fresh
snow, the color produced by the
combination of all the colors of
the visible spectrum.
You can also split your content
Black
Is the color of coal, ebony, and of
outer space. It is the darkest
color, the result of the absence of
or complete absorption of light.
27

28. In two or three columns
Yellow
Is the color of gold,
butter and ripe lemons.
In the spectrum of
visible light, yellow is
found between green
and orange.
Blue
Is the colour of the
clear sky and the deep
sea. It is located
between violet and
green on the optical
spectrum.
Red
Is the color of blood,
and because of this it
has historically been
associated with
sacrifice, danger and
courage.
28

29. A picture is worth a thousand words
A complex idea can be
conveyed with just a single
still image, namely making
it possible to absorb large
amounts of data quickly.
29

30. Want big impact?
Use big image.
30

31. Use diagrams to explain your ideas
31
Vestibulum congue
tempus
Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed
do eiusmod tempor.
Vestibulum congue
tempus
Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed
do eiusmod tempor.
Vestibulum congue
tempus
Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed
do eiusmod tempor.
Vestibulum congue tempus
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Ipsum dolor sit
amet elit, sed do eiusmod tempor.

32. And tables to compare data
A B C
Yellow 10 20 7
Blue 30 15 10
Orange 5 24 16
32

33. Maps
our office
33

34. 89,526,124
Whoa! That’s a big number, aren’t you proud?
34

35. 89,526,124$
That’s a lot of money
100%
Total success!
185,244 users
And a lot of users
35

36. Our process is easy
36
Vestibulum congue tempus
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor. Donec
facilisis lacus eget mauris.
Vestibulum congue tempus
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor. Donec
facilisis lacus eget mauris.
Vestibulum congue tempus
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor. Donec
facilisis lacus eget mauris.
03
01 02

37. Let’s review some concepts
Yellow
Is the color of gold, butter and ripe
lemons. In the spectrum of visible light,
yellow is found between green and
orange.
Blue
Is the colour of the clear sky and the
deep sea. It is located between violet
and green on the optical spectrum.
Red
Is the color of blood, and because of
this it has historically been associated
with sacrifice, danger and courage.
37
Yellow
Is the color of gold, butter and ripe
lemons. In the spectrum of visible light,
yellow is found between green and
orange.
Blue
Is the colour of the clear sky and the
deep sea. It is located between violet
and green on the optical spectrum.
Red
Is the color of blood, and because of
this it has historically been associated
with sacrifice, danger and courage.

38. You can insert graphs from Google Sheets
38

39. Mobile
project
Place your screenshot here
39
Show and explain your
web, app or software
projects using these
gadget templates.

40. Place your screenshot here
40
Tablet
project
Show and explain your
web, app or software
projects using these
gadget templates.

41. Place your screenshot here
41
Desktop
project
Show and explain your
web, app or software
projects using these
gadget templates.

42. Credits
Special thanks to all the people who made and released
these awesome resources for free:
- Presentation template by SlidesCarnival
- Photographs by Unsplash
42

43. Presentation design
This presentation uses the following typographies and colors:
- Titles: Roboto Slab
- Body copy: Abel
You can download the fonts on these pages:
https://www.fontsquirrel.com/fonts/roboto-slab
https://www.fontsquirrel.com/fonts/abel
Teal #2ac7d7 · Sky #0d7fd1 · Indigo #184de2
You don’t need to keep this slide in your presentation. It’s only here to serve you as a design guide if you
need to create new slides or download the fonts to edit the presentation in PowerPoint® 43

44. SlidesCarnival icons are editable shapes.
This means that you can:
● Resize them without losing
quality.
● Change line color, width and
style.
Isn’t that nice? :)
Examples:
44

45. Now you can use any emoji as an icon!
And of course it resizes without losing quality and you can change the color.
How? Follow Google instructions
https://twitter.com/googledocs/status/730087240156643328
✋👆👉👍👤👦👧👨👩👪💃🏃💑❤😂
😉😋😒😭👶😸🐟🍒🍔💣📌📖🔨🎃🎈
🎨🏈🏰🌏🔌🔑 and many more...
😉
45

46. Free templates for all your presentation needs
Ready to use,
professional and
customizable
100% free for personal
or commercial use
Blow your audience
away with attractive
visuals
For PowerPoint and
Google Slides