<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: porta</title>
    <description>The latest articles on DEV Community by porta (@portasynthinca3).</description>
    <link>https://dev.to/portasynthinca3</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F872552%2Fac72bbd6-f4ba-4b9c-a394-608e2ddee2ba.png</url>
      <title>DEV Community: porta</title>
      <link>https://dev.to/portasynthinca3</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/portasynthinca3"/>
    <language>en</language>
    <item>
      <title>I made an API toolkit</title>
      <dc:creator>porta</dc:creator>
      <pubDate>Sat, 04 Jun 2022 21:14:50 +0000</pubDate>
      <link>https://dev.to/portasynthinca3/ive-made-an-api-toolkit-1no3</link>
      <guid>https://dev.to/portasynthinca3/ive-made-an-api-toolkit-1no3</guid>
      <description>&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--7jZJ44qF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tfaqsbap4lo0w38dz0ol.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--7jZJ44qF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tfaqsbap4lo0w38dz0ol.png" alt="Cover image" width="880" height="330"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In this article I would like to introduce &lt;a href="https://github.com/speedapi/info"&gt;SpeedAPI&lt;/a&gt; - a project of my own. It's essentially an API toolkit that supports a &lt;em&gt;lot&lt;/em&gt; of features that, admittedly, GraphQL also supports, but does that with an extremely small overhead thanks to a custom binary encoding. This project used to be called AMOGUS before the 1.3 release which came out today (not too proud of that name.) Anyways, let's go!&lt;/p&gt;




&lt;h2&gt;
  
  
  The Basics
&lt;/h2&gt;

&lt;p&gt;SpeedAPI uses a separate language called SUS for its schema. Take a look:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;globalmethod say_hi(0) {
    name: Str;
    returns {
        greeting: Str;
    }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This description of the &lt;code&gt;say_hi&lt;/code&gt; should be quite self-explanatory and almost even feel natural... apart from one thing: what is that zero doing in those parentheses? That's the &lt;strong&gt;value&lt;/strong&gt; - a number that distinguishes this method from other methods in this scope. SpeedAPI doesn't use its name to identify it when exchanging data over the network because that'd be wasteful - remember, our main goal here (along with developer satisfaction) is absolute maximum possible encoding efficiency.&lt;/p&gt;

&lt;p&gt;Okay, now that we have this schema we need to &lt;strong&gt;compile&lt;/strong&gt; it. In this case I'm going to be using TypeScript because that's the only language supported by the platform at the moment, though it is very extensible. To do that, I'm going to first install and then invoke the compiler like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;pip3 &lt;span class="nb"&gt;install &lt;/span&gt;susc
&lt;span class="nv"&gt;$ &lt;/span&gt;susc &lt;span class="nt"&gt;-l&lt;/span&gt; ts api.sus
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Oh cool! I now have an &lt;code&gt;api_output&lt;/code&gt; folder next to my source file. Inside it I see a &lt;code&gt;ts&lt;/code&gt; folder and &lt;code&gt;index.ts&lt;/code&gt; inside that folder. This file is my API definition, but translated to TypeScript in a format that the &lt;code&gt;@speedapi/driver&lt;/code&gt; npm library understands.&lt;/p&gt;

&lt;p&gt;To make use of this data, let's first import that library and the compiled definition:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="nx"&gt;speedapi&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;@speedapi/driver&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="nx"&gt;api&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;./api_output/ts/index&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And point the library to our definition by creating a dummy client and server that exchange data by passing binary data to each other in memory:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;ApiType&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;ReturnType&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="k"&gt;typeof&lt;/span&gt; &lt;span class="nx"&gt;api&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;$specSpace&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;client&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;server&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;createDummyPair&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;ApiType&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;api&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;$specSpace&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Let's also &lt;strong&gt;bind&lt;/strong&gt; our &lt;code&gt;client&lt;/code&gt; and &lt;code&gt;server&lt;/code&gt; (plain sessions) to the API:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;clientSession&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;api&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;$bind&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;client&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;serverSession&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;api&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;$bind&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;server&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;serverHandler&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;Server&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;server&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Great! Those two things can communicate now. What's most  important here is that with a static schema not only do we get extremely efficient data representation, but because we're using TypeScript we also get typing guarantees, meaning those two things can only strictly communicate in predefined ways. No unexpected &lt;code&gt;null&lt;/code&gt;s and type mismatches!&lt;/p&gt;

&lt;p&gt;Let's write the server-side handler:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="nx"&gt;serverHandler&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;onInvocation&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;say_hi&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;method&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;_state&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;method&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;return&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
        &lt;span class="na"&gt;greeting&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;`Hello, &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;method&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;params&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;!`&lt;/span&gt;
    &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As an exercise, try changing the value of &lt;code&gt;greeting&lt;/code&gt; from that template literal to some number or object literal and observe how your IDE puts a red squiggle below this line.&lt;/p&gt;

&lt;p&gt;Now let's write the client:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// not using 'await' because this is the top level&lt;/span&gt;
&lt;span class="nx"&gt;clientSession&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;sayHi&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;reader&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;}).&lt;/span&gt;&lt;span class="nx"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(({&lt;/span&gt; &lt;span class="nx"&gt;greeting&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;greeting&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;(I once again encourage you to change the string literal to something else and note the typing)&lt;/p&gt;

&lt;p&gt;If you then run this file (with &lt;code&gt;node&lt;/code&gt; after first compiling it with &lt;code&gt;tsc&lt;/code&gt; or by simply using &lt;code&gt;ts-node&lt;/code&gt;), you should see &lt;code&gt;Hello, reader!&lt;/code&gt; printed to console. What a fancy way to print a static string, huh?&lt;/p&gt;

&lt;h2&gt;
  
  
  Under the hood
&lt;/h2&gt;

&lt;p&gt;A lot of things were done to print that innocent string. First, the client initiated a &lt;strong&gt;transaction&lt;/strong&gt; by sending the server a &lt;strong&gt;MethodInvocation&lt;/strong&gt; segment. That segment contained the method number and its scope (global), along with its only argument - &lt;code&gt;name&lt;/code&gt;, a string. This is exactly the bytes that it sent in hex:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;00 00 00 00 06 72 65 61 64 65 72
|  |  |  \---/ \---------------/
|  |  |    |      string data
|  |  |    |
|  |  |    +- string length
|  |  |
|  |  +- method number and scope (global)
|  |
|  +- prefix byte:
|     t=0: MethodInvocation segment
|     O=0: no optional fields
|
+- transaction ID
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Note the low overhead - we have 5 bytes describing the request and 6 bytes of actual data. Compare this to equivalent JSON data: &lt;code&gt;{"method":"say_hi","name":"reader"}&lt;/code&gt;, where the metadata is 5x larger than the payload.&lt;/p&gt;

&lt;p&gt;The server read that segment, ran our callback and ended the transaction by responding with a &lt;code&gt;MethodReturn&lt;/code&gt; segment:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;00 00 00 0E 48 65 6c 6c 6f 2c 20 72 ...
|  |  \---/ \-------------------------/
|  |    |          string data
|  |    |
|  |    +- string length (14)
|  |
|  +- prefix byte:
|     t=0: MethodReturn segment
|     O=0: no optional fields
|
+- transaction ID
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The data stream is split into &lt;strong&gt;segments&lt;/strong&gt; that can be interlaced, meaning the client could've sent another &lt;code&gt;MethodInvocation&lt;/code&gt; with another transaction ID without waiting for the return of this one.&lt;/p&gt;

&lt;p&gt;SpeedAPI also supports &lt;strong&gt;confirmations&lt;/strong&gt; - a special request the server makes to a client while the latter is in the process of invoking a method.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;-------+    do_thing()    +-------
       | ---------------&amp;gt; |
client |                  | server
       |   confirmation   |
       | &amp;lt;--------------- |
       |                  |
       |     response     |
       | ---------------&amp;gt; |
       |                  |
       |  method return   |
       | &amp;lt;--------------- |
-------+                  +-------
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The server can provide data in its request, and the client can return some data in its response. For example, if you need CAPTCHAs, you can send an image URL in the request and expect a solution back. All of that conforming to the schema, of course :)&lt;/p&gt;

&lt;h2&gt;
  
  
  Server-initiated transactions
&lt;/h2&gt;

&lt;p&gt;For this we need to talk about entities. They're like objects in OOP languages: a piece of data with some actions associated with it.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;entity User(0) {
    id: Int(8);   # 8-byte / 64-bit integer
    name: Str;
    bio: Str;
    # element type, index size (1 byte / 8 bit)
    loved_topics: List(Str, 1);  

    # this method is dynamic, meaning it's attached
    # to a particular instance of an entity, identified
    # by the id field
    method report(0) {
        reason: Str;
        returns { }
    }

    # this method is static, meaning it's not attached
    # to any particular instance of the entity, but it
    # _is_ within the scope of this entity
    staticmethod create(0) {
        name: Str;
        returns {
            id: Int(8);
        }
    }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The compiler has also sneaked in two methods for us: a dynamic &lt;code&gt;update&lt;/code&gt; and a static &lt;code&gt;get&lt;/code&gt;, which update and get the server-stored entity respectively.&lt;/p&gt;

&lt;p&gt;SpeedAPI allows the server to unconditionally (outside of a method call context) send entities or entity updates to its clients. Internally this is implemented with a &lt;code&gt;EntityUpdate&lt;/code&gt; segment and a transaction that is initiated and then immediately closed by the segment.&lt;/p&gt;

&lt;h2&gt;
  
  
  New features in 1.3
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Partial List Updates
&lt;/h3&gt;

&lt;p&gt;As the name implies, a party (the server or the client) can update parts of a list belonging to an entity instead of re-sending the full list again. You can either &lt;code&gt;append&lt;/code&gt;, &lt;code&gt;prepend&lt;/code&gt;, &lt;code&gt;insert&lt;/code&gt; or &lt;code&gt;remove&lt;/code&gt; a certain number of elements to/into/from the list.&lt;/p&gt;

&lt;p&gt;Plain list representations are compatible with previous protocol versions as long as PLUs are not used and list lengths are kept to 15/16ths (approx. 93%) of their max capacity.&lt;/p&gt;

&lt;h3&gt;
  
  
  Cache
&lt;/h3&gt;

&lt;p&gt;The client can now use the &lt;code&gt;Cache&lt;/code&gt; class that caches Entity &lt;code&gt;get&lt;/code&gt; requests, listens to entity updates (automagically merging PLUs with already cached data too) and notifies its subscribers of updates.&lt;/p&gt;

&lt;h3&gt;
  
  
  Non-&lt;code&gt;Int(8)&lt;/code&gt; entity ids
&lt;/h3&gt;

&lt;p&gt;Before 1.3, the only valid type for the &lt;code&gt;id&lt;/code&gt; field of an entity was &lt;code&gt;Int(8)&lt;/code&gt;. In 1.3, this field can now be of any type. &lt;/p&gt;

&lt;p&gt;Compatibility with previous protocol versions is not broken as long as &lt;code&gt;Int(8)&lt;/code&gt; is used for the id field, or any other type that serializes to 8 bytes, e.g. a 6-char string.&lt;/p&gt;

&lt;h2&gt;
  
  
  Further reading
&lt;/h2&gt;

&lt;p&gt;This article has only scratched the surface of what's possible with this tool. There's an extremely detailed tutorial &lt;a href="https://github.com/speedapi/info/tree/master/speedapi-tutorial#readme"&gt;here&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Thank you for reading this article and cheers!&lt;/p&gt;

</description>
      <category>speedapi</category>
      <category>api</category>
      <category>typescript</category>
      <category>showdev</category>
    </item>
  </channel>
</rss>
