<?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: aggre</title>
    <description>The latest articles on DEV Community by aggre (@aggre).</description>
    <link>https://dev.to/aggre</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.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F46887%2F1479d7b4-55dc-4523-a510-39802b8b6738.jpeg</url>
      <title>DEV Community: aggre</title>
      <link>https://dev.to/aggre</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/aggre"/>
    <language>en</language>
    <item>
      <title>AI Agents Won't Buy a Black Box: Introducing Trust402</title>
      <dc:creator>aggre</dc:creator>
      <pubDate>Thu, 16 Jul 2026 13:50:00 +0000</pubDate>
      <link>https://dev.to/aggre/ai-agents-wont-buy-a-black-box-introducing-trust402-1h6k</link>
      <guid>https://dev.to/aggre/ai-agents-wont-buy-a-black-box-introducing-trust402-1h6k</guid>
      <description>&lt;p&gt;&lt;strong&gt;TL;DR&lt;/strong&gt;&lt;br&gt;
x402 lets AI agents pay autonomously, but it cannot tell them whether what they are buying is real. Trust402 uses ZK proofs to enable verification before purchase without revealing the content, creating a marketplace where agents can verify, pay, and retrieve autonomously.&lt;/p&gt;


&lt;h2&gt;
  
  
  Here's a black box. Amazing data inside, trust me. A dollar?
&lt;/h2&gt;

&lt;p&gt;Nobody's buying that. But it's happening a billion times a day.&lt;/p&gt;

&lt;p&gt;Let me back up. AI agents are showing up everywhere, and standards are popping up at every layer: agent-to-agent communication, tool integration, payments, authentication. Payments are handled by the &lt;strong&gt;x402 protocol&lt;/strong&gt;, which Coinbase announced in May 2025. The idea is simple: take the HTTP 402 status code ("Payment Required," the one that always had a name but almost nobody ever used) and standardize the whole flow, from presenting payment terms and checking the buyer can pay, to settling the payment and returning the response. Basically, the entire payment process now runs mechanically over plain API calls.&lt;/p&gt;

&lt;p&gt;In July 2026, the x402 Foundation launched under the Linux Foundation, with Coinbase, Cloudflare, and Stripe on board. A June 2026 Chainalysis report puts x402 &lt;strong&gt;past 100 million transactions on Base in its first nine months&lt;/strong&gt;, and it's not just dust: transactions above $1 grew to 95% of the value moved, up from 49% a year earlier.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;But 100 million is only a sliver of the actual intent to pay.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;"&lt;strong&gt;Industry observers estimate that as many as one billion 402 responses may be served daily on Cloudflare's network&lt;/strong&gt;"&lt;sup id="fnref1"&gt;1&lt;/sup&gt;. A 402 response is a server's way of saying, "This is paid content, so please pay for it." So servers ask for money &lt;strong&gt;a billion times a day&lt;/strong&gt;, and only a sliver of that ever makes it to settlement.&lt;/p&gt;

&lt;p&gt;Most of it ends as a &lt;strong&gt;probe&lt;/strong&gt;. An agent checks the price and just... walks away. &lt;strong&gt;No deal.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Why? Because a black box tells you nothing.&lt;/p&gt;

&lt;p&gt;Agents can pay, but they can't tell whether what they're buying is real. Is that JSON labeled "dataset" actually from where it claims? Has the document been tampered with? Is there a backdoor in the code? All the things a human would obviously check before buying, and the payment layer guarantees none of it. The spec is clean, but in practice something's missing. A 402 response tells you how much to pay. It says nothing about whether the thing is real.&lt;/p&gt;

&lt;p&gt;So there's a structural gap here: &lt;strong&gt;you've got a way to pay, but no way to check why you should&lt;/strong&gt;. That's the gap we built Trust402 to fill.&lt;/p&gt;


&lt;h2&gt;
  
  
  Trust402: "Still a black box, but here's a certificate of what's inside."
&lt;/h2&gt;

&lt;p&gt;Trust402 is a &lt;strong&gt;verifiable content marketplace&lt;/strong&gt; built on top of x402.&lt;/p&gt;

&lt;p&gt;Creators and researchers can list their work (documents, datasets, code, models) &lt;strong&gt;with a ZK proof (zero-knowledge proof)&lt;/strong&gt; attached. A buyer (human or agent, either works) verifies the proof, runs the x402 payment, and gets the content. Trust402 wraps that whole flow into a single platform.&lt;/p&gt;

&lt;p&gt;A ZK proof is a bit of cryptography that lets you prove a claim, say, "this data holds at least 1,000 values and hasn't been tampered with," without ever showing the file itself. A buyer's agent can verify the proof before paying, and decide whether the thing is real and worth the money. Payment is left to x402; authenticity is handled by the ZK proof.&lt;/p&gt;

&lt;p&gt;Right now our focus is the &lt;strong&gt;seller&lt;/strong&gt; side. Generating the ZK proof, registering the document, publishing to the storefront: you can do all of it from the SDK and the dashboard. We built the first version at ETHGlobal, and it's now running in production on Cloudflare Workers + Base. The dashboard is live at &lt;a href="https://lemma.frame00.com/trust402/sell" rel="noopener noreferrer"&gt;lemma.frame00.com/trust402/sell&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;
  
  
  Try it
&lt;/h2&gt;

&lt;p&gt;The dashboard is the quickest way in. Open &lt;a href="https://lemma.frame00.com/trust402/sell" rel="noopener noreferrer"&gt;lemma.frame00.com/trust402/sell&lt;/a&gt; and click "dashboard", connect your wallet, drag a file onto the listing form, fill in a category and a price (USDC), and hit "Publish." Under the hood, &lt;code&gt;publish()&lt;/code&gt; from &lt;code&gt;@trust402/sdk&lt;/code&gt; runs the whole thing, from generating the proof to uploading to the storefront.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fspgbil7rv8ijwcxp8cfx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fspgbil7rv8ijwcxp8cfx.png" alt="trust402.lemma.workers.dev" width="800" height="574"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Anything you can do in the dashboard, you can do from the SDK too. The dashboard uses a hash-based proof that works for any file type and proves it hasn't been altered, but with the SDK you can also build proofs that reach into the actual contents of a given format. As an example, let's use the &lt;code&gt;blogArticle&lt;/code&gt; circuit, which can fold the author, word count, and language into the proof. Here's the minimal code to list a blog post:&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="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;create&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;publish&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;blogArticle&lt;/span&gt; &lt;span class="p"&gt;}&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;@trust402/sdk&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;// 1. Create the client&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;client&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;create&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;apiKey&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;your-lemma-api-key&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;getSigner&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="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="na"&gt;provider&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;window&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;ethereum&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;address&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;account&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;address&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="p"&gt;}),&lt;/span&gt;
  &lt;span class="na"&gt;onPayment&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;info&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="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`paid &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;info&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;amount&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; micro-USDC`&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="c1"&gt;// 2. Build the witness and commitment from the article&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;witness&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;commitment&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;blogArticle&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;author&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;aggre&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;published&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;Date&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;now&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt;
  &lt;span class="na"&gt;body&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;# My Article&lt;/span&gt;&lt;span class="se"&gt;\n\n&lt;/span&gt;&lt;span class="s2"&gt;Hello, Trust402.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;words&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;7&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;lang&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;en&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="c1"&gt;// 3. Generate the proof, register the document, and publish the listing&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;listing&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;publish&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="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;circuitId&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;blog-article-v1.2&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;witness&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;commitment&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;price&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;amount&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;5000&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;currency&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;USDC&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="na"&gt;did&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;`did:pkh:eip155:84532:&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;account&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;address&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="na"&gt;environment&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;sandbox&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;file&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;File&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;# My Article&lt;/span&gt;&lt;span class="se"&gt;\n\n&lt;/span&gt;&lt;span class="s2"&gt;Hello, Trust402.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;article.md&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;text/markdown&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;),&lt;/span&gt;
  &lt;span class="na"&gt;category&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;document&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;payoutAddress&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;account&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;address&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="c1"&gt;// listing.listingRoot → unique ID for the listing&lt;/span&gt;
&lt;span class="c1"&gt;// listing.cardId      → its ID in the storefront&lt;/span&gt;
&lt;span class="c1"&gt;// listing.perSchemaProof → the ZK proof (verifiable with snarkjs)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here's what &lt;code&gt;publish()&lt;/code&gt; is doing under the hood:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Generating the ZK proof&lt;/strong&gt;: takes the circuit for &lt;code&gt;circuitId&lt;/code&gt; (Groth16, a flavor of ZK-SNARK) and builds a proof from the witness (the input values the proof is built from)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Registering the document&lt;/strong&gt;: registers the document with the Lemma API and submits the proof (this is where the x402 payment fires automatically)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Computing the listingRoot&lt;/strong&gt;: deterministically generates an ID that uniquely identifies the listing&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Publishing to the storefront&lt;/strong&gt;: if you passed a file, uploads it straight to the storefront&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Three calls (&lt;code&gt;create&lt;/code&gt; → &lt;code&gt;blogArticle&lt;/code&gt; → &lt;code&gt;publish&lt;/code&gt;), and you've gone from ZK proof to x402 payment to a live storefront listing in one shot.&lt;/p&gt;




&lt;h2&gt;
  
  
  Custom circuits
&lt;/h2&gt;

&lt;p&gt;Up to here we've been using the circuits that ship with the dashboard and SDK, like &lt;code&gt;blog-article-v1.2&lt;/code&gt;. But the really fun part of Trust402 is that &lt;strong&gt;you can point it at any circuit you've registered with Lemma&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;This is getting long, so I'll save it for its own post. In the next one I'll walk through a custom circuit like &lt;code&gt;research_dataset&lt;/code&gt; in code, showing how an agent can check before it buys. Think a claim like "this dataset really does hold 1,000+ records and matches a specific schema," made verifiable with a ZK proof, then dropped into the Trust402 listing flow.&lt;/p&gt;

&lt;p&gt;Trust402 is in preview at &lt;a href="https://lemma.frame00.com/trust402/sell" rel="noopener noreferrer"&gt;lemma.frame00.com/trust402/sell&lt;/a&gt;. Just like x402 standardized the payment layer, Trust402 wants to be the standard pattern for verifiable content transactions.&lt;/p&gt;




&lt;ol&gt;

&lt;li id="fn1"&gt;
&lt;p&gt;CoinDesk, "AI Agents Are Breaking Web Economics, but Cloudflare Says x402 Can Help" (May 5, 2026). Cloudflare CSO Stephanie Cohen, Consensus Miami 2026.&amp;nbsp;↩&lt;/p&gt;
&lt;/li&gt;

&lt;/ol&gt;

</description>
      <category>ai</category>
      <category>cryptography</category>
      <category>typescript</category>
    </item>
    <item>
      <title>“Dev” - Tokens for your OSS sustainability</title>
      <dc:creator>aggre</dc:creator>
      <pubDate>Sun, 05 Aug 2018 03:45:46 +0000</pubDate>
      <link>https://dev.to/aggre/dev---tokens-for-your-oss-sustainability-mb3</link>
      <guid>https://dev.to/aggre/dev---tokens-for-your-oss-sustainability-mb3</guid>
      <description>&lt;p&gt;We have released “Dev” tokens in order to support the sustainability of Open&lt;br&gt;
Source Software (OSS).&lt;/p&gt;

&lt;p&gt;&lt;a href="https://devtoken.rocks/" rel="noopener noreferrer"&gt;https://devtoken.rocks/&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  What is “Dev”?
&lt;/h3&gt;

&lt;p&gt;“Dev” works to achieve fair monetization of your OSS.&lt;/p&gt;

&lt;p&gt;Neither commission fees nor usage fees are required.&lt;/p&gt;

&lt;p&gt;Utilizing the token economy allows developers to concentrate on development, and&lt;br&gt;
investors to effectively support any OSS.&lt;/p&gt;




&lt;p&gt;For the most part, OSS are provided free of charge. OSS developers maintain&lt;br&gt;
their OSS projects by securing a revenue source separate from their OSS.&lt;br&gt;&lt;br&gt;
Typical sources of revenue are as follows.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; Working at a company&lt;/li&gt;
&lt;li&gt; Freelancing&lt;/li&gt;
&lt;li&gt; Donations&lt;/li&gt;
&lt;li&gt; OSS provided as SaaS&lt;/li&gt;
&lt;li&gt; Enterprise support&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Since [1] and [2] are not revenue produced by the OSS itself, the OSS is only&lt;br&gt;
allocated a limited amount of their disposable time.&lt;/p&gt;

&lt;p&gt;The revenue of [3] tends to be an amount that deviates from the value of their&lt;br&gt;
OSS due to the arbitrary model of high evaluations. OSS developers are required&lt;br&gt;
to focus their efforts on fields other than just technology so that they can&lt;br&gt;
continue to raise their evaluations.&lt;/p&gt;

&lt;p&gt;[4] and [5] essentially achieve monetization directly from the OSS, but this can&lt;br&gt;
be done only with a few limited large-scale projects.&lt;/p&gt;

&lt;p&gt;“Dev” works to realizes revenue proportional to the real value of the OSS. In&lt;br&gt;
addition, it does not require changes to the OSS itself. With this&lt;br&gt;
loosely-coupled system, we evaluate the OSS with simple and powerful evaluation&lt;br&gt;
logic and actualize monetization according to that evaluation.&lt;/p&gt;

&lt;h3&gt;
  
  
  How “Dev” works
&lt;/h3&gt;

&lt;p&gt;To begin, it can be depicted in a simple diagram.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Ff1w5x2ovhx552ca9ue6w.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Ff1w5x2ovhx552ca9ue6w.png" alt="Diagram"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;“Dev” is created based on the ecosystem of Ethereum. It is easy to understand if&lt;br&gt;
one has an understanding of block chains, but it doesn’t matter even if they&lt;br&gt;
don’t.&lt;/p&gt;

&lt;p&gt;“Dev” can be traded on the market like Ethereum or Bitcoin. Since “Dev” conforms&lt;br&gt;
to the Ethereum standard (ERC20), the price of 1 DEV is determined by the rate&lt;br&gt;
between 1 DEV and 1 ETH.&lt;/p&gt;

&lt;p&gt;The outline is as follows.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; The price is determined by investors trading “Dev” (updated in real time)&lt;/li&gt;
&lt;li&gt; &lt;a href="https://devtoken.rocks/" rel="noopener noreferrer"&gt;devtoken.rocks&lt;/a&gt; mints “Dev” every month&lt;/li&gt;
&lt;li&gt; The increase by &lt;a href="https://devtoken.rocks/" rel="noopener noreferrer"&gt;devtoken.rocks&lt;/a&gt; is allocated to the
OSS&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;OSS developers can liquidate their “Dev” by exchanging their “Dev” for Ethereum.&lt;/p&gt;

&lt;p&gt;As “Dev” is a token that continues to mint, there is a mechanism to suppress the&lt;br&gt;
dilution of the value of “Dev” itself. This involves evaluation logic.&lt;/p&gt;

&lt;h3&gt;
  
  
  Evaluation logic for “Dev”
&lt;/h3&gt;

&lt;p&gt;The following variables are used in calculations to determine allocation to the&lt;br&gt;
OSS:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;pdl = Number of downloads of the package (OSS) from the 20th day of the last month to the 19th day of the current month
adl = Number of downloads of all packages (OSS) from the 20th day of the last month to the 19th day of the current month
t = Number of tokens retained by the distribution address
d = Number of days elapsed since the OSS registration
p = t / d
ta = Total of p for all addresses
m = Annual number of mints
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;The calculation formula is as follows.&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;x = (p + pdl) / (ta + adl) × m / 12
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;The per-diem rate of “Dev” tokens retained by that OSS is added to the number of&lt;br&gt;
OSS downloads. The same equation is calculated for each OSS individually and all&lt;br&gt;
OSS total, and the ratio is determined for each OSS.&lt;/p&gt;

&lt;p&gt;The number of allocations is determined by multiplying the monthly number of&lt;br&gt;
mints by that percentage.&lt;/p&gt;

&lt;p&gt;The number of tokens retained by the OSS are added to suppress dilution of the&lt;br&gt;
value of “Dev.”&lt;/p&gt;

&lt;p&gt;The more tokens possessed by an OSS, the more tokens will be allocated each&lt;br&gt;
month. In other words, you can increase the number of shares by purchasing or&lt;br&gt;
saving tokens. This will prevent tokens from being sold all at once and suddenly&lt;br&gt;
diluting the value. Investors don’t want the value of the token to be diluted.&lt;/p&gt;

&lt;p&gt;As an application of this mechanism, if you send “Dev” tokens to the OSS you&lt;br&gt;
want to support, you can increase the number of token allocations to that OSS.&lt;/p&gt;

&lt;p&gt;The calculation logic is available for viewing on &lt;a href="https://github.com/frame00/dev-distribution" rel="noopener noreferrer"&gt;GitHub&lt;br&gt;
(frame00/dev-distribution)&lt;/a&gt;.&lt;/p&gt;

&lt;h4&gt;
  
  
  Future plans to distribute to contributors
&lt;/h4&gt;

&lt;p&gt;“Dev” is currently in alpha. Tokens are distributed to the owner of the OSS.&lt;/p&gt;

&lt;p&gt;We want to implement the ability to distribute tokens to OSS contributors.&lt;br&gt;
Contributors would be able to receive compensation relative to their&lt;br&gt;
contribution.&lt;/p&gt;

&lt;p&gt;With active use of “Dev,” we would be able to proceed to advance functional&lt;br&gt;
development as soon as possible.&lt;/p&gt;

&lt;h3&gt;
  
  
  How to connect with “Dev”
&lt;/h3&gt;

&lt;p&gt;There are a number of ways to get involved in the OSS community for “Dev”.&lt;/p&gt;

&lt;h4&gt;
  
  
  I want to monetize my OSS
&lt;/h4&gt;

&lt;p&gt;If you are self-publishing your OSS, you can begin to achieve monetization by&lt;br&gt;
registering your OSS on &lt;a href="https://devtoken.rocks/" rel="noopener noreferrer"&gt;devtoken.rocks&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Registration is quick and easy, and there is no need to make any changes to your&lt;br&gt;
OSS.&lt;/p&gt;

&lt;p&gt;As it is currently in alpha, only OSS that are published in npm can be&lt;br&gt;
registered.&lt;/p&gt;

&lt;h4&gt;
  
  
  I want to support OSS
&lt;/h4&gt;

&lt;p&gt;You can contribute to an OSS by using “Dev” tokens.&lt;/p&gt;

&lt;p&gt;“Dev” can be contribute efficiently in order to realize a world where OSS are&lt;br&gt;
more actively developed.&lt;/p&gt;

&lt;p&gt;Order Book can be opened from &lt;a href="https://devtoken.rocks/" rel="noopener noreferrer"&gt;devtoken.rocks&lt;/a&gt; to buy&lt;br&gt;
and sell “Dev.” EtherDelta is used for main exchanges.&lt;/p&gt;

&lt;h4&gt;
  
  
  There is an OSS that I want to directly support
&lt;/h4&gt;

&lt;p&gt;If the OSS that you want to support is registered in “Dev,” you can send “Dev”&lt;br&gt;
directly to the wallet address of the OSS.&lt;/p&gt;

&lt;p&gt;If the number of tokens retained by the OSS increases, it increases the amount&lt;br&gt;
of monthly distributions made to that OSS. In this way, you can provide&lt;br&gt;
continuous support even without making a new contribution every month.&lt;/p&gt;

&lt;p&gt;Refer to &lt;a href="https://github.com/frame00/dev-distribution" rel="noopener noreferrer"&gt;GitHub&lt;br&gt;
(frame00/dev-distribution)&lt;/a&gt; to&lt;br&gt;
check the wallet address of the OSS. OSS information is stored in&lt;br&gt;
&lt;a href="https://github.com/frame00/dev-distribution/blob/master/config/packages.ts" rel="noopener noreferrer"&gt;config/packages.ts&lt;/a&gt;.&lt;/p&gt;




&lt;p&gt;Growth of “Dev” is accelerated through active use by OSS developers and&lt;br&gt;
investors.&lt;/p&gt;

&lt;p&gt;For questions please contact us on&lt;br&gt;
&lt;a href="https://twitter.com/devtoken_rocks" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt;. Inquiries can be made in either&lt;br&gt;
Japanese or English.&lt;/p&gt;




&lt;p&gt;This article was originally posted on &lt;a href="https://medium.com/devtoken" rel="noopener noreferrer"&gt;Medium&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Read the original article &lt;a href="https://medium.com/devtoken/dev-tokens-for-oss-a63e55c60e6b" rel="noopener noreferrer"&gt;here&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>cryptocurrency</category>
      <category>blockchain</category>
      <category>erc20</category>
      <category>npm</category>
    </item>
    <item>
      <title>PRPL パターンから非 SPA のパフォーマンスを考えたときのメモ</title>
      <dc:creator>aggre</dc:creator>
      <pubDate>Mon, 27 Nov 2017 09:27:38 +0000</pubDate>
      <link>https://dev.to/aggre/prpl--spa--5be</link>
      <guid>https://dev.to/aggre/prpl--spa--5be</guid>
      <description>

&lt;p&gt;SPA ではない構成のウェブアプリでパフォーマンスを出すための施策を、&lt;a href="https://developers.google.com/web/fundamentals/performance/prpl-pattern/"&gt;PRPL&lt;/a&gt; パターンを発想の起点にして考えてみた。&lt;/p&gt;

&lt;h1&gt;
  
  
  動機
&lt;/h1&gt;

&lt;p&gt;JavaScript によるコンポーネントベースの開発はフロントエンドの実装を効率的にした。&lt;/p&gt;

&lt;p&gt;しかし toC のサービスにおいて、Bot フレンドリーであるための施策が重荷になっている。&lt;code&gt;&amp;lt;meta&amp;gt;&lt;/code&gt; タグだけサーバー側で作っておく対策もあるが、Pocket や未知のサービスも含めると &lt;em&gt;本文&lt;/em&gt; が必要なケースは依然として多い。個人的には、SPA をいくつかリリースしていく中で、ドキュメントとしての HTML なのにスクリプトを実行しないとドキュメントにならないことへの違和感も感じていた。&lt;/p&gt;

&lt;p&gt;そこでドキュメントとして成立するための最小限の要素だけをサーバー側で生成することで、Bot 施策の回避を考えた。&lt;/p&gt;

&lt;p&gt;SPA を保ったままで &lt;em&gt;ドキュメントとして成立した HTML&lt;/em&gt; を扱うためには密結合な構成か SSR の要件が出てくるという判断に至り、SPA を廃止することにした。&lt;/p&gt;

&lt;p&gt;SPA ではなくても、ドキュメント向けの要素以外は Web Components として引き続き開発できる。&lt;/p&gt;

&lt;p&gt;その上でパフォーマンスを向上させるための施策を検討した。&lt;/p&gt;

&lt;h1&gt;
  
  
  施策
&lt;/h1&gt;

&lt;p&gt;PRPL パターンを起点に考えた施策は次のとおり。&lt;/p&gt;

&lt;h2&gt;
  
  
  Push
&lt;/h2&gt;

&lt;p&gt;HTTP/2 の Push はブラウザのキャッシュを考慮することが現状難しいため対応を保留する。&lt;/p&gt;

&lt;h3&gt;
  
  
  Endpoint
&lt;/h3&gt;

&lt;p&gt;例として &lt;code&gt;/page/1&lt;/code&gt; へのリクエストで、次のような HTML を返却する。&lt;/p&gt;



&lt;div class="highlight"&gt;&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="cp"&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;html&lt;/span&gt; &lt;span class="na"&gt;lang=&lt;/span&gt;&lt;span class="s"&gt;"en-US"&lt;/span&gt; &lt;span class="na"&gt;dir=&lt;/span&gt;&lt;span class="s"&gt;"ltr"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;head&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;charset=&lt;/span&gt;&lt;span class="s"&gt;"utf-8"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;"viewport"&lt;/span&gt; &lt;span class="na"&gt;content=&lt;/span&gt;&lt;span class="s"&gt;"width=device-width,minimum-scale=1,initial-scale=1,user-scalable=yes"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;title&amp;gt;&lt;/span&gt;Page 1&lt;span class="nt"&gt;&amp;lt;/title&amp;gt;&lt;/span&gt;

    &lt;span class="c"&gt;&amp;lt;!-- Preload CSS --&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;link&lt;/span&gt; &lt;span class="na"&gt;rel=&lt;/span&gt;&lt;span class="s"&gt;"preload"&lt;/span&gt; &lt;span class="na"&gt;as=&lt;/span&gt;&lt;span class="s"&gt;"style"&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"/style.css"&lt;/span&gt; &lt;span class="na"&gt;onload=&lt;/span&gt;&lt;span class="s"&gt;"this.rel='stylesheet'"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;

    &lt;span class="c"&gt;&amp;lt;!-- Preload critical Custom Element --&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;link&lt;/span&gt; &lt;span class="na"&gt;rel=&lt;/span&gt;&lt;span class="s"&gt;"preload"&lt;/span&gt; &lt;span class="na"&gt;as=&lt;/span&gt;&lt;span class="s"&gt;"script"&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"/x-header.js"&lt;/span&gt; &lt;span class="na"&gt;onload=&lt;/span&gt;&lt;span class="s"&gt;"var s = document.createElement('script');
    s.src = this.href;
    document.body.appendChild(s);"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;

    &lt;span class="c"&gt;&amp;lt;!-- Preload service worker --&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;link&lt;/span&gt; &lt;span class="na"&gt;rel=&lt;/span&gt;&lt;span class="s"&gt;"preload"&lt;/span&gt; &lt;span class="na"&gt;as=&lt;/span&gt;&lt;span class="s"&gt;"script"&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"/service-worker.js"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;

    &lt;span class="c"&gt;&amp;lt;!-- Preload lazy load script --&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;link&lt;/span&gt; &lt;span class="na"&gt;rel=&lt;/span&gt;&lt;span class="s"&gt;"preload"&lt;/span&gt; &lt;span class="na"&gt;as=&lt;/span&gt;&lt;span class="s"&gt;"script"&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"/lazy-load.js"&lt;/span&gt; &lt;span class="na"&gt;onload=&lt;/span&gt;&lt;span class="s"&gt;"var s = document.createElement('script');
    s.src = this.href;
    document.body.appendChild(s);"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;

    &lt;span class="c"&gt;&amp;lt;!-- Prefetch next page --&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;link&lt;/span&gt; &lt;span class="na"&gt;rel=&lt;/span&gt;&lt;span class="s"&gt;"prefetch"&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"/page/2"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;

    &lt;span class="c"&gt;&amp;lt;!-- Prefetch home page --&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;link&lt;/span&gt; &lt;span class="na"&gt;rel=&lt;/span&gt;&lt;span class="s"&gt;"prefetch"&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"/"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;

    &lt;span class="nt"&gt;&amp;lt;link&lt;/span&gt; &lt;span class="na"&gt;rel=&lt;/span&gt;&lt;span class="s"&gt;"manifest"&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"/manifest.json"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/head&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;body&amp;gt;&lt;/span&gt;
    &lt;span class="c"&gt;&amp;lt;!-- Custom Element for header --&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;x-header&amp;gt;&amp;lt;/x-header&amp;gt;&lt;/span&gt;

    &lt;span class="nt"&gt;&amp;lt;main&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;article&amp;gt;&lt;/span&gt;
            &lt;span class="nt"&gt;&amp;lt;section&amp;gt;&lt;/span&gt;
                &lt;span class="nt"&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;Title&lt;span class="nt"&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;
                &lt;span class="nt"&gt;&amp;lt;p&amp;gt;&lt;/span&gt;The content&lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
                &lt;span class="nt"&gt;&amp;lt;p&amp;gt;&lt;/span&gt;

                    &lt;span class="c"&gt;&amp;lt;!-- Custom Element for article --&amp;gt;&lt;/span&gt;
                    &lt;span class="nt"&gt;&amp;lt;x-content-gallery&lt;/span&gt; &lt;span class="na"&gt;lazy-load=&lt;/span&gt;&lt;span class="s"&gt;"/x-content-gallery.js"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/x-content-gallery&amp;gt;&lt;/span&gt;

                &lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
                &lt;span class="nt"&gt;&amp;lt;p&amp;gt;&amp;lt;a&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"/page/2"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Next&lt;span class="nt"&gt;&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
            &lt;span class="nt"&gt;&amp;lt;/section&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;article&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;/main&amp;gt;&lt;/span&gt;

    &lt;span class="c"&gt;&amp;lt;!-- Custom Element for footer --&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;x-footer&lt;/span&gt; &lt;span class="na"&gt;lazy-load=&lt;/span&gt;&lt;span class="s"&gt;"/x-footer.js"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/x-footer&amp;gt;&lt;/span&gt;

    &lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;async&lt;/span&gt; &lt;span class="na"&gt;defer&lt;/span&gt; &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"/polyfill-of-preload.js"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;script&amp;gt;&lt;/span&gt;
        &lt;span class="c1"&gt;// Add a service worker&lt;/span&gt;
        &lt;span class="s1"&gt;'serviceWorker'&lt;/span&gt;&lt;span class="k"&gt;in&lt;/span&gt; &lt;span class="nb"&gt;navigator&lt;/span&gt;&lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt;&lt;span class="nb"&gt;window&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'load'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;&lt;span class="nb"&gt;navigator&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;serviceWorker&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;register&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'/service-worker.js'&lt;/span&gt;&lt;span class="p"&gt;)});&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;クリティカルなリソースの &lt;code&gt;preload&lt;/code&gt; と、遷移する可能性のあるページの &lt;code&gt;prefetch&lt;/code&gt; を行なう。&lt;/p&gt;

&lt;p&gt;&lt;code&gt;lazy-load&lt;/code&gt; 属性が追加されている要素は、その要素がビューポート内に出現した時点で依存解決をする。この属性名は仮なのと、ビューポートに出現した時点では UX を損なうリスクもあるため工夫は必要。&lt;/p&gt;

&lt;h2&gt;
  
  
  Render
&lt;/h2&gt;

&lt;p&gt;HTML をレンダリングする。&lt;/p&gt;

&lt;p&gt;SPA ではないので異なるルートのための処理は必要ない。&lt;/p&gt;

&lt;h2&gt;
  
  
  Pre-cache
&lt;/h2&gt;

&lt;p&gt;SPA ではないことから、Service Worker による事前キャッシュ( Pre-cache )は行わない。&lt;/p&gt;

&lt;p&gt;Service Worker は通信発生時のキャッシュや通知などの用途に限定される。&lt;/p&gt;

&lt;h2&gt;
  
  
  Lazy-load
&lt;/h2&gt;

&lt;p&gt;SPA ではないことから、PRPL パターンにおける Lazy-load とは少し趣が違う。&lt;/p&gt;

&lt;p&gt;PRPL パターンでは異なるルートのためのリソースを遅延読込することと、画像などのリソースがビューポートに現れるときに遅延読込するというアプローチがとられると理解している。&lt;/p&gt;

&lt;p&gt;今回は SPA ではないため、異なるルートのための遅延読込は考慮しない。&lt;/p&gt;

&lt;h1&gt;
  
  
  アーキテクチャ
&lt;/h1&gt;

&lt;p&gt;データソースは REST API で取得できるようにしておく。&lt;/p&gt;

&lt;p&gt;その上でローカルとサーバーをなるべく近い構成にすることを考えると、HTML の配信は Node.js などで立てたサーバーをそのままクラウドでも走らせたい。&lt;/p&gt;

&lt;p&gt;この場合、REST API はサーバーレスに構築できるが、HTML はサーバーレスでは構築しづらくなる。&lt;/p&gt;

&lt;p&gt;しかしデータソースが REST API なら HTML はステートレスに返却可能なので、CDN によるキャッシュが有効に機能するはず。&lt;/p&gt;




&lt;p&gt;早い段階でこの構成を実戦投入してみたい。&lt;/p&gt;


</description>
      <category>webcomponents</category>
      <category>javascript</category>
      <category>webdev</category>
      <category>japanese</category>
    </item>
  </channel>
</rss>
