<h4>A short journey about what I have learned about Zod a TypeScript-first schema validation with static type inference.</h4><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*dkgJVrZZhBhKCjZT" /><figcaption>A thumbnail of the blog</figcaption></figure>From last week on the Weekend until this week (On the Weekend too) mostly I’m learning about Zod; basically, it’s a schema validation that can be run on the runtime too, which mostly I use TypeScript just for the type-checking for the development purpose but, according to the documentation the name of the “schema” it’s broadly referring to any data type, from a simple string to a complex nested object.In the above statements, I also told you that Zod also will validate the schema on the runtime too not just check the type of the object, array, etc. The cool thing is, it will throw us an error if we do not meet the schema that we already defined it. Let’s take an example from string API from Zod.<h3>Validate An Unknown Data</h3>We know if we still use JavaScript as our main code, we cannot make sure the parameters of our function it’s a data that we need or not. The same like in TypeScript too, if we write a function that accepts arguments with type unknown, we need to make sure the parameters or data that we will proceed on our function.So in Zod, we can make sure that with just write a simple two line of code like this.<pre>import { z } from &#39;zod&#39; function submitAddressUser(address: unknown) { const getAddress = z.string(); getAddress.parse(address) return address }</pre>We can see above code, the parameters that we write are unknown — which is we assume that we don’t know that value exactly so if we run that function and give an argument that we don’t want it like number<pre>it(&#39;should run our app&#39;, () =&gt; { const testIt = submitAddressUser(123412) expect(testIt).toBe(&#39;cool address&#39;) })</pre>If we run it<figure><img alt="" src="https://cdn-images-1.medium.com/max/483/1*DNF4go986Alqyc98Mt6tVw.png" /><figcaption>An error in the function “submitAddressUser”</figcaption></figure>We will receive a throwing error because we don’t give a proper argument of a function submitAddressUser this should be an error on runtime if we run it on the browser.<h3>A Simple User Story</h3>Previously, we already write a simple Zod API which is string but in that API there’s also a lot of functionality that we can use, for example:<pre>import { z } from &#39;zod&#39; function testTheApp(firstName: string) { const getTheFirstName = z.string().min(3); getTheFirstName.parse(firstName) return firstName }</pre>If we try to input our form which does not meet that schema, then we should get an error.<pre>it(&#39;should run our app&#39;, () =&gt; { const getMyFirstName = testTheApp(&quot;Ad&quot;) expect(getMyFirstName).toBe(&#39;Ad&#39;) })</pre>Here’s the error that was returned from Zod.<figure><img alt="" src="https://cdn-images-1.medium.com/max/545/1*dGhjwwkylJFEwhk33cu8tw.png" /><figcaption>An error if does not meet a minimal character of the first name</figcaption></figure>That indicates that we got a schema validation of our function testTheApp with minimal character is three.<h3>Mix it With Rest API</h3>The most interesting in this part, we can catch it even on the runtime let’s assume that we call a Rest API with TypeScript and normal fetch.<pre>import { z } from &#39;zod&#39; async function getDetailTodo() { const fetchData = await fetch(&#39;https://jsonplaceholder.typicode.com/todos/1&#39;) .then(response =&gt; response.json()) .then(json =&gt; json) console.log(fetchData) }</pre>As you know unlike GraphQL when we use fetch then the data from the variable fetchData should become unknown or any which is we don’t know the response of it.<figure><img alt="A type from a fetch that returned unknown data." src="https://cdn-images-1.medium.com/max/689/1*348TSYN2QZ3YTmMi9Sp1Rw.png" /><figcaption>A type from a fetch that returned unknown data.</figcaption></figure>Fortunately, with Zod, we can create a schema that should return what we need from that response of API.<pre>import { z } from &#39;zod&#39; async function getDetailTodo() { const validateResponse = z.object({ title: z.string() }) const fetchData = await fetch(&#39;https://jsonplaceholder.typicode.com/todos/1&#39;) .then(response =&gt; response.json()) .then(json =&gt; json) const data = validateResponse.parse(fetchData) return data }</pre>For the explanation of the above code, we have a variable validateResponse to create a schema that just gives us a field title from the response of that API, if we take a look at the API there are several fields from the response<pre>{ &quot;userId&quot;: 1, &quot;id&quot;: 1, &quot;title&quot;: &quot;delectus aut autem&quot;, &quot;completed&quot;: false }</pre>But in our schema which is validateResponse we just want title apart from other fields, if we try to console it<figure><img alt="" src="https://cdn-images-1.medium.com/max/393/1*i6cPsTjKnDjmoS6Yq6frqA.png" /><figcaption>a return from our schema</figcaption></figure>Zod also filters the rest of the fields that are not needed on our schema, but, if we change the schema and then let’s say we want a field subTitle<pre>import { z } from &#39;zod&#39; async function getDetailTodo() { const validateResponse = z.object({ title: z.string(), subTitle: z.string() }) const fetchData = await fetch(&#39;https://jsonplaceholder.typicode.com/todos/1&#39;) .then(response =&gt; response.json()) .then(json =&gt; json) const data = validateResponse.parse(fetchData) return data }</pre>If we run our app<figure><img alt="" src="https://cdn-images-1.medium.com/max/657/1*yCFdq2f2QYdMF1bd_AO0Tw.png" /><figcaption>An error from Zod that the field subTitle does not exist</figcaption></figure>We can see that Zod will throw us an error which is we need to change the response of that API to make sure our schema meets the response of the API.<h3>Infer The Type</h3>We already see the power from Zod with API object which is it can be like a schema validation to make sure what we need it’s what we got too. But, let’s say back to the previous topic we use this function<pre>import { z } from &#39;zod&#39; async function getDetailTodo() { const validateResponse = z.object({ title: z.string(), }) const fetchData = await fetch(&#39;https://jsonplaceholder.typicode.com/todos/1&#39;) .then(response =&gt; response.json()) .then(json =&gt; json) const data = validateResponse.parse(fetchData) return data }</pre>As we know TypeScript will infer the return type of the function based on what we return it from our function, but let’s say we have a case that we need the type of the schema too and use that type on other function helpers for example, we can use the API from Zod that called infer<pre>import { z } from &#39;zod&#39; const validateResponse = z.object({ title: z.string(), }) export type DetailTodoData = Promise&lt;z.infer&lt;typeof validateResponse&gt;&gt; async function getDetailTodo(): DetailTodoData { const fetchData = await fetch(&#39;https://jsonplaceholder.typicode.com/todos/1&#39;) .then(response =&gt; response.json()) .then(json =&gt; json) const data = validateResponse.parse(fetchData) return data }</pre><h3>Array</h3>In Zod, we also have an API that we can interact with the data type Array — For example, we have this function<pre>async function getListTodo() { const fetchData = await fetch(&#39;https://jsonplaceholder.typicode.com/todos&#39;) .then(response =&gt; response.json()) .then(json =&gt; json) return fetchData }</pre>If we trying hit that API we will see a lot of the data of todos<pre>[ { &quot;userId&quot;: 1, &quot;id&quot;: 1, &quot;title&quot;: &quot;delectus aut autem&quot;, &quot;completed&quot;: false }, { &quot;userId&quot;: 1, &quot;id&quot;: 2, &quot;title&quot;: &quot;quis ut nam facilis et officia qui&quot;, &quot;completed&quot;: false }, ... ]</pre>Then, let’s say in that list we just want to show a field title to the user, we can also use an API from Zod that is called array<pre>import { z } from &#39;zod&#39; async function getListTodo() { const validateTheResponse = z.array(z.object({ title: z.string() })) const fetchData = await fetch(&#39;https://jsonplaceholder.typicode.com/todos&#39;) .then(response =&gt; response.json()) .then(json =&gt; json) const data = validateTheResponse.parse(fetchData) return data }</pre>If we try to see the return of our function, it will automatically filter the data based on the schema that we created above.<figure><img alt="" src="https://cdn-images-1.medium.com/max/630/1*v6V3E91KKq3fmgpjw8ecUA.png" /><figcaption>Result after we create a schema of API list todo</figcaption></figure><h3>Default Value and Optional Schema</h3>We know on TypeScript we can also make our type optional then within the function we can give a default value.<pre>function generateHelloThere(name?: string) { const getName = name || &#39;There,&#39; return `Hello ${getName}` }</pre>Then let’s say we have a test case like this<pre>it(&#39;should return a hello name&#39;, () =&gt; { const welcomeMessage = generateHelloThere() expect(welcomeMessage).toBe(&#39;Hello There,&#39;) })</pre>It should give us a default value<figure><img alt="" src="https://cdn-images-1.medium.com/max/425/1*JgIOf4VgVTMmm_2XJNs_Sg.png" /><figcaption>A green test case of function generateHelloThere</figcaption></figure>But, in Zod, they already provide us with an API to make a default value and mark it as optional.<pre>import { z } from &#39;zod&#39; function generateHelloThere(name?: string) { const schemaName = z.string().optional().default(&#39;There,&#39;) const getName = schemaName.parse(name) return `Hello ${getName}` }</pre>Then after we run our test case<figure><img alt="" src="https://cdn-images-1.medium.com/max/352/1*O9FjJWf_L7lE_PmXFRPRlw.png" /><figcaption>A green test case of function genereateHelloThere with Zod API</figcaption></figure>The lack of this API, we need to make sure the .optional() The API need to call it first before .default(&#39;There,&#39;) API. The default() API should be the last resort of the schema, if not our test case would give us an error<figure><img alt="" src="https://cdn-images-1.medium.com/max/519/1*4jyPYO6wXtQm53Mub8q2mg.png" /><figcaption>An error if we are wrong to put the .default() API from Zod</figcaption></figure><h3>The Cons</h3>After we talked about the API that was provided by Zod, this package also has cons from my point of view. When we check the bundle size of this package from bundlejs site<figure><img alt="" src="https://cdn-images-1.medium.com/max/380/1*HlLaiXQzFc2McOPTWletmQ.png" /><figcaption>A result of the bundle size of package Zod</figcaption></figure>It’s kinda big around 13KB even though it’s already has been gzip.<h3>Conclusion</h3>Zod, it’s totally game-changer if we need to make sure our type on our function will catch it too on the runtime, but as we mentioned above there’s a cons to this package, but if you don’t think about the bundle size of your app, I think you can consider shipping this package to help to you as a guardian too on the runtime.Apart from we write it on TypeScript, Zod will also help you too on your app if already written with JavaScript in my perspective.Also, there’s so much API that we did not mention here you can take a look by yourself from the documentation Zod.<a href="https://github.com/colinhacks/zod#optional">https://github.com/colinhacks/zod#optional</a><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=d410e6d8ab73" width="1" height="1" alt="">

Let’s meet Zod: TypeScript-first schema validation

<h3>React Server Component, What It is?</h3><h4>My recap learning what are React Server Component, and why this will be a game-changer from React.</h4><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*ZAwdt-dEXnJhGWWB" /><figcaption>A Featured Image</figcaption></figure>In the last year of 2020 almost 2 years back, React core team has been announced about React Server Component (RSC) indeed at that time, it was not compatible with React yet, but until now (2022) this method has been adopted on the Next.JS framework (Just this framework as far as I know).I will not try to give an example of the implementation on Next.JS itself, but I will try to explain the basic knowledge about RSC, at a glance in the terms of the name we can imagine that our React component will run under SSR (Server Side Rendering) — this was explained detail by React core team <a href="https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html">in here</a>.Again, at a glance, this is an alike way that we render our component on a server and we send it to the client through the renderToString from react-dom API and the result will give to the user in an HTML format that the user just renders on the browser, but this is (RSC) slightly different from SSR, let’s see the example of RSC result on the network browser below:<figure><img alt="" src="https://cdn-images-1.medium.com/max/882/0*EH3yT34t0HIVZVmI.png" /></figure>According to the image above, seems like RSC will respond to the client in something not like an HTML format instead, which looks like an object that React will try to handle that stuff and magically will render to the browser with proper UI.Keep in mind, because the name is React Server Component — which contains the word “Component” that we already know within the component we can use useState or other API from React to make our component re-render or use any side-effect to call a DOM.In this RSC we cannot do that on the server, like usual we render our component on the server, we just served it to the browser in the first time of render in the browser, according to the React core team RSC will help us to solve a bundle-size problem also will help on the performance things.There is an interesting part of this RSC we can use 3 types of files that we can use it:<ol><li>.server.js</li><li>.client.js</li><li>.js (Shared)</li></ol>I will try to explain the difference between each of the above files.<h4>.client.js</h4>The new extension name front .js which is .client.js the file will not make us satisfied, because we already mostly use that such as to make our component re-render or make interaction with DOM and etc.In this file, we also cannot call or import from .server.js (I will try to explain it below) but we could smoothly get data that was already constructed from the server and pass it to this file.<h4>.server.js</h4>Basically, we can call any server call in this file such as get data from the Database or read a file and etc. Let’s try to see this example of code below:<pre>// Note.server.js import db from &quot;db.server&quot;; function Note(props) { const { id, isEditing } = props; const note = db.posts.get(id); // let&#39;s say this is a process to get a data from Database return ( &lt;div&gt; &lt;h1&gt;{note.title}&lt;/h1&gt; &lt;section&gt;{note.body}&lt;/section&gt; &lt;/div&gt; ); }</pre>As you can see, we call a DB directly — in fact, we also make a result of that component with zero-bundle size which means that I already told you before, React core team will solve a bundle size problem through RSC, let’s take a look this example code below:<pre>// NoteWithMarkdown.js import marked from &#39;marked&#39;; // 35.9K (11.2K gzipped) import sanitizeHtml from &#39;sanitize-html&#39;; // 206K (63.3K gzipped) function NoteWithMarkdown({text}) { const html = sanitizeHtml(marked(text)); return (/* render */); }</pre>Let’s say, the above code with the name NoteWithMarkdown.js before (RSC) now we talk about it, mostly our component will import some third-party library out there isn’t it?That will make a user download more size of JS files on their network which effected to the user, this means a user will take much time to download or wait for our component basically, there will leave this is bad from the UX perspective.But, let&#39;s say the above code we change it with RSC terms, we change it with NoteWithMarkdown.server.js take a look an example code below:<pre>// NoteWithMarkdown.server.js import marked from &#39;marked&#39;; // 0K atau zero-bundle size import sanitizeHtml from &#39;sanitize-html&#39;; // 0K atau zero-bundle size function NoteWithMarkdown({text}) { const html = sanitizeHtml(marked(text)); return (/* render */); }</pre>As you can see, this will make that component as zero-bundle size component because we smoothly put it that process on the server and just give to the client with no additional JS file size.The good thing with this file extension we can call a client file which is .client.js (not like a client that we cannot import it). If you are familiar with Next.JS this process maybe slightly same, let’s take an example below code:<pre>// NoteWithMarkdown.server.js import marked from &quot;marked&quot;; // 0K atau zero-bundle size import sanitizeHtml from &quot;sanitize-html&quot;; // 0K atau zero-bundle size import NoteEditor from &quot;./NoteEditor.client&quot;; function NoteWithMarkdown({ text }) { const html = sanitizeHtml(marked(text)); return &lt;NoteEditor html={html} /&gt;; }</pre>What does the above code mean? does the user will not download the .client.js file too? — the answer is No, because after the user executes it on the server they will still need to download .client.js because we already mark that file ends with .client.js that’s it.<h4>.js (Shared)</h4>This file extension just like a normal component that we already use it day-by-day, but after the RSC comes to the production this component will automatically call as .server.js file.<h4>Conclusion</h4>This will help us to make sure there’s no more additional file size on the client that the user will need to more extra to download it. This also comes with the downside which means it will cost more extra on the server which means we need to make sure our infrastructure it’s enough to use this RSC.Also as far as I know (at the time of this writing) it’s still not yet full supported to the production, but the framework that already use it is Next.JS you can check <a href="https://nextjs.org/docs/advanced-features/react-18/server-components">this documentation</a>.<img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=134a5fbd1164" width="1" height="1" alt="">

React Server Component, What It’s?

<h4>This is a warning for you that never try to write an anonymous function on JavaScript!</h4><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*WJwh8ofR0Y7Hr4rd" /><figcaption>A featured image</figcaption></figure>Basically the “Anonymous” we know it properly, like someone we don’t know the exact information about who they are? where’s them? and so on. In this article, we will try to explain the relation of the “Anonymous” term in JavaScript.Mostly we work with JavaSript day-by-day cannot be separated from writing “function” either we just do a sum like a + b + cor handle something like a side-effect. Basically, there’s no exact pattern that “hey, you should write your function like this” there’s not, but JavaScript served some type that we can follow, such as:<ol><li>Function as declaration</li><li>Function as expression</li><li>Function as constructor</li></ol>In this article, we will not try to understand the meaning of each type above, it depends on us which type fits on our team or make use comfortable to write it on, but we try bold the term “Anonymous” in JavaScript, for example<pre>(function () { throw new Error(&quot;here&quot;); })();</pre>Aforecode, we use <a href="https://developer.mozilla.org/en-US/docs/Glossary/IIFE">IIFE (Immediately Invoked Function Expression)</a> it tells the browser to run this as soon as possible, and when we try to open the console on the browser we gonna see this<figure><img alt="" src="https://cdn-images-1.medium.com/max/581/1*JOWUSJE3CdVQUZYB0snp7A.png" /></figure>Imagine that our code is large and has 1001 functions that must be executed and then there is an unwanted error in the function no 900th, because we wrote the function anonymously so we don’t know what the name of the function is and where the error is.This will be difficult for us to debug. This is what I said that anonymous functions can even be an enemy during development even when we wrote that function by ourself maybe in the back time.Mostly we will have this question on our mind, what that function means? when that function has been executed? where that function we place it on our repository? perhaps this question will rarely comes up if we just build by ourself (freelance) but, let say we coming from a big team? and then another member try to fix that problem, it will much took their time to find the root cause of the error.But, its a different story if we try give the name of our function something like this<pre>(function thisIsOurFunction() { throw new Error(&quot;oops&quot;); })();</pre>Then, if we try to take a look on the console browser<figure><img alt="" src="https://cdn-images-1.medium.com/max/580/1*Hss6ZN6p2XHlQwytAPgryw.png" /></figure>Aforeimage, we see that error also print our function name which is thisIsOurfunction that indicates where we can fix that error.Is this just applied on React, Vue, Angular or Svelte only? No, this is the agnostic approach that we must applied it on our code to make sure if there’s something hiccup on the production, we can trace it easily even for ourself on other members that trying to fix that bug.If your project/repo coming with the ESLint config you can try to install this plugins <a href="https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-anonymous-default-export.md">eslint-plugin-import/no-anonymous</a> it can make us easy to detect it while we writing our code.<img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=524008999c50" width="1" height="1" alt="">

Hi There...!!👋

Recent blogs