<?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: Daniel Rayo</title>
    <description>The latest articles on DEV Community by Daniel Rayo (@danielrasho).</description>
    <link>https://dev.to/danielrasho</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%2F1430402%2F7aaae999-84b8-4a0c-b3e2-d49cdfacd6d2.png</url>
      <title>DEV Community: Daniel Rayo</title>
      <link>https://dev.to/danielrasho</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/danielrasho"/>
    <language>en</language>
    <item>
      <title>Customize Go Builds on AWS SAM with Dockerfiles and Makefiles</title>
      <dc:creator>Daniel Rayo</dc:creator>
      <pubDate>Mon, 20 Jan 2025 04:36:11 +0000</pubDate>
      <link>https://dev.to/danielrasho/customize-go-builds-on-aws-sam-with-dockerfiles-and-makefiles-3o71</link>
      <guid>https://dev.to/danielrasho/customize-go-builds-on-aws-sam-with-dockerfiles-and-makefiles-3o71</guid>
      <description>&lt;p&gt;This post is the second part on my series &lt;strong&gt;Building APPS with AWS SAM and Go&lt;/strong&gt; feel free to check the first part. In last chapter we discover that AWS don't provide much info on how to structure a scalable Go project without REPEATING A LOT OF CODE. &lt;/p&gt;

&lt;p&gt;Now I will show you &lt;strong&gt;ways in which we can control our build steps with Dockerfiles and Makefiles&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;The code showed in this lecture will be in this repo:&lt;br&gt;
&lt;a href="https://github.com/DanielRasho/AWS-SAM-go" rel="noopener noreferrer"&gt;https://github.com/DanielRasho/AWS-SAM-go&lt;/a&gt; &lt;br&gt;
Check the different git branches for each use case 😉.&lt;/p&gt;

&lt;p&gt;Lets get started 🏃💨!&lt;/p&gt;
&lt;h2&gt;
  
  
  The problem
&lt;/h2&gt;

&lt;p&gt;After came up with the new project structure, I decided to use &lt;a href="https://nixos.org/" rel="noopener noreferrer"&gt;Nix ❄️&lt;/a&gt; for managing all my project dependencies (languajes, tools, libraries). The way Nix works, is by creating a new temporary shell with all the dependencies you request it. &lt;/p&gt;

&lt;p&gt;I noted that that whenever i tried to run executables that where built within a Nix shell, they throw a weird error:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;libc.so.6 not found in /nix/23fj39chsggb09s.libc
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And the lambda will stop execution. It took my an ENTIRE DAY to figure out the cause: When compiling, Go sometimes link C libraries libraries dynamically to the executable, by specifying the route on the system to where the library is. This where the linked libraries to the executables built with Nix:&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;ldd bootstrap 
        linux-vdso.so.1 &lt;span class="o"&gt;(&lt;/span&gt;0x00007ffff7fc4000&lt;span class="o"&gt;)&lt;/span&gt;
        libresolv.so.2 &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; /nix/store/65h17wjrrlsj2rj540igylrx7fqcd6vq-glibc-2.40-36/lib/libresolv.so.2 &lt;span class="o"&gt;(&lt;/span&gt;0x00007ffff7fac000&lt;span class="o"&gt;)&lt;/span&gt;
        libpthread.so.0 &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; /nix/store/65h17wjrrlsj2rj540igylrx7fqcd6vq-glibc-2.40-36/lib/libpthread.so.0 &lt;span class="o"&gt;(&lt;/span&gt;0x00007ffff7fa7000&lt;span class="o"&gt;)&lt;/span&gt;
        libc.so.6 &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; /nix/store/65h17wjrrlsj2rj540igylrx7fqcd6vq-glibc-2.40-36/lib/libc.so.6 &lt;span class="o"&gt;(&lt;/span&gt;0x00007ffff7c00000&lt;span class="o"&gt;)&lt;/span&gt;
        /nix/store/65h17wjrrlsj2rj540igylrx7fqcd6vq-glibc-2.40-36/lib/ld-linux-x86-64.so.2 &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; /nix/store/65h17wjrrlsj2rj540igylrx7fqcd6vq-glibc-2.40-36/lib64/ld-linux-x86-64.so.2 &lt;span class="o"&gt;(&lt;/span&gt;0x00007ffff7fc6000&lt;span class="o"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Nix has a not-standard way to store dependencies, and since the lambdas run on isolated Docker containers, when they tried to execute the code, and try to find the linked libraries on those paths THEY COULDN'T FIND THEM, since those files lived only on my local Nix installation. &lt;/p&gt;

&lt;p&gt;I had to find a way to tell AWS SAM how to compile my code , to control this linked libraries. &lt;/p&gt;

&lt;h2&gt;
  
  
  Ways to deliver our Go project to AWS
&lt;/h2&gt;

&lt;p&gt;So first a bit of context. We can deliver our code to AWS in 2 presentations:&lt;/p&gt;

&lt;h3&gt;
  
  
  Zip files 📁
&lt;/h3&gt;

&lt;p&gt;We compile the code locally on our machine, and sent the raw executable to AWS on &lt;code&gt;.zip&lt;/code&gt;. Amazon will simply copy the executable on the docker containers. &lt;strong&gt;This option provides the fastest Cold Starts&lt;/strong&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Docker Images 🐋
&lt;/h3&gt;

&lt;p&gt;Instead of giving AWS the executable. We give them the instructions to compile it WITHIN the docker container in which will be run. &lt;strong&gt;This option ensures full compatibility at the costs of slower Cold Starts&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The solutions
&lt;/h2&gt;

&lt;p&gt;At the end I went for Dockerfiles, since I wanted to still be using Nix. But I will show you both methods&lt;/p&gt;

&lt;h3&gt;
  
  
  Zip files 📁
&lt;/h3&gt;

&lt;p&gt;To specify the build steps for a Zip file we will need a structure like this one (notice the Makefile at the root):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.
├── cmd/
│   ├── function1/
│   │   └── function1.go  # contains main()
│   └── function2/
│       └── function2.go  # contains main()
├── internal/
│   └── SHAREDFUNC.go
├── Makefile
├── go.mod
├── go.sum
├── samconfig.toml
└── template.yaml
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then within the Makefile we provide a command for each function following the pattern: &lt;code&gt;build-&amp;lt;Function_Name&amp;gt;&lt;/code&gt; (this is enforced by AWS SAM) followed by our built instructions, &lt;a href="https://aws.amazon.com/blogs/compute/migrating-aws-lambda-functions-from-the-go1-x-runtime-to-the-custom-runtime-on-amazon-linux-2/" rel="noopener noreferrer"&gt;AWS has this article in how to set this build commands&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight make"&gt;&lt;code&gt;&lt;span class="nl"&gt;.PHONY&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="nf"&gt;build&lt;/span&gt;

&lt;span class="nl"&gt;build&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt;
    sam build

&lt;span class="nl"&gt;build-HelloWorldFunction&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt;
    &lt;span class="nv"&gt;GOARCH&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;amd64 &lt;span class="nv"&gt;GOOS&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;linux go build &lt;span class="nt"&gt;-tags&lt;/span&gt; lambda.norpc &lt;span class="nt"&gt;-o&lt;/span&gt; bootstrap ./cmd/function1/main.go
    &lt;span class="nb"&gt;cp&lt;/span&gt; ./bootstrap &lt;span class="p"&gt;$(&lt;/span&gt;ARTIFACTS_DIR&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="nl"&gt;build-ByeWorldFunction&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt;
    &lt;span class="nv"&gt;GOARCH&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;amd64 &lt;span class="nv"&gt;GOOS&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;linux go build &lt;span class="nt"&gt;-tags&lt;/span&gt; lambda.norpc &lt;span class="nt"&gt;-o&lt;/span&gt; bootstrap ./cmd/function2/main.go
    &lt;span class="nb"&gt;cp&lt;/span&gt; ./bootstrap &lt;span class="p"&gt;$(&lt;/span&gt;ARTIFACTS_DIR&lt;span class="p"&gt;)&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;&lt;code&gt;$(ARTIFACTS_DIR)&lt;/code&gt; is an env variable provided by SAM automatically&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Finally we just have to notify SAM of this new process:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;  HelloWorldFunction:
    Type: AWS::Serverless::Function # More info about Function Resource: https://github.com/awslabs/serverless-application-model/blob/master/versions/2016-10-31.md#awsserverlessfunction
    Metadata:
      BuildMethod: makefile
    Properties:
      CodeUri: ./
      Handler: bootstrap
      Runtime: provided.al2023
      Architectures:
        - x86_64
      Events:
        CatchAll:
          Type: Api # More info about API Event Source: https://github.com/awslabs/serverless-application-model/blob/master/versions/2016-10-31.md#api
          Properties:
            Path: /hello
            Method: GET
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We use &lt;code&gt;BuildMethod: makefile&lt;/code&gt;, also SAM will look for the Makefile only where &lt;code&gt;CodeUri&lt;/code&gt; specifies.&lt;/p&gt;

&lt;h3&gt;
  
  
  Docker Images 🐋
&lt;/h3&gt;

&lt;p&gt;The process is similar for building docker images, we create a &lt;code&gt;Dockerfile&lt;/code&gt; and &lt;code&gt;.dockerignore&lt;/code&gt; at the root dir:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.
├── cmd/
│   ├── function1/
│   │   └── function1.go  # contains main()
│   └── function2/
│       └── function2.go  # contains main()
├── internal/
│   └── SHAREDFUNC.go
├── Dockerfile
├── .dockerignore
├── go.mod
├── go.sum
├── samconfig.toml
└── template.yaml
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Within the Dockerfile we specify the building steps. I used the &lt;code&gt;ARG&lt;/code&gt; statement &lt;strong&gt;to tell Docker where to look for then entry point of my lambda at build time&lt;/strong&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight docker"&gt;&lt;code&gt;&lt;span class="k"&gt;FROM&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s"&gt;public.ecr.aws/docker/library/golang:1.19&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="k"&gt;as&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s"&gt;build-image&lt;/span&gt;
&lt;span class="k"&gt;ARG&lt;/span&gt;&lt;span class="s"&gt; ENTRY_POINT  # !IMPORTANT&lt;/span&gt;
&lt;span class="k"&gt;WORKDIR&lt;/span&gt;&lt;span class="s"&gt; /src&lt;/span&gt;
&lt;span class="k"&gt;COPY&lt;/span&gt;&lt;span class="s"&gt; go.mod go.sum ./&lt;/span&gt;
&lt;span class="k"&gt;RUN &lt;/span&gt;go mod download
&lt;span class="k"&gt;COPY&lt;/span&gt;&lt;span class="s"&gt; . .&lt;/span&gt;
&lt;span class="k"&gt;RUN &lt;/span&gt;go build &lt;span class="nt"&gt;-tags&lt;/span&gt; lambda.norpc &lt;span class="nt"&gt;-o&lt;/span&gt; lambda-handler &lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;ENTRY_POINT&lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt;&lt;span class="s"&gt; public.ecr.aws/lambda/provided:al2023&lt;/span&gt;
&lt;span class="k"&gt;COPY&lt;/span&gt;&lt;span class="s"&gt; --from=build-image /src/lambda-handler .&lt;/span&gt;
&lt;span class="k"&gt;ENTRYPOINT&lt;/span&gt;&lt;span class="s"&gt; ./lambda-handler&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And finally, made some teaws on &lt;code&gt;template.yaml&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight yaml"&gt;&lt;code&gt;  &lt;span class="na"&gt;HelloWorldFunction&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
    &lt;span class="na"&gt;Type&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;AWS::Serverless::Function&lt;/span&gt; &lt;span class="c1"&gt;# More info about Function Resource: https://github.com/awslabs/serverless-application-model/blob/master/versions/2016-10-31.md#awsserverlessfunction&lt;/span&gt;
    &lt;span class="na"&gt;Metadata&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
      &lt;span class="na"&gt;DockerTag&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;provided.al2023-v1&lt;/span&gt;
      &lt;span class="na"&gt;DockerContext&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;./&lt;/span&gt;  &lt;span class="c1"&gt;# Where to look for the dockerfile and code.&lt;/span&gt;
      &lt;span class="na"&gt;Dockerfile&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;Dockerfile&lt;/span&gt;
      &lt;span class="na"&gt;DockerBuildArgs&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; 
        &lt;span class="na"&gt;ENTRY_POINT&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="s"&gt;./cmd/function1/main.go"&lt;/span&gt; &lt;span class="c1"&gt;# Location of ENTRY POINT&lt;/span&gt;
    &lt;span class="na"&gt;Properties&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
      &lt;span class="na"&gt;PackageType&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;Image&lt;/span&gt;
      &lt;span class="na"&gt;Architectures&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
        &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="s"&gt;x86_64&lt;/span&gt;
      &lt;span class="na"&gt;Events&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
        &lt;span class="na"&gt;CatchAll&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
          &lt;span class="na"&gt;Type&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;Api&lt;/span&gt; &lt;span class="c1"&gt;# More info about API Event Source: https://github.com/awslabs/serverless-application-model/blob/master/versions/2016-10-31.md#api&lt;/span&gt;
          &lt;span class="na"&gt;Properties&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
            &lt;span class="na"&gt;Path&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;/hello&lt;/span&gt;
            &lt;span class="na"&gt;Method&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;GET&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Pay attention to the &lt;code&gt;Metadata&lt;/code&gt;, and &lt;code&gt;PackageType:Image&lt;/code&gt; sections. Remember the ARG ENTRY_POINT we defined on &lt;code&gt;Dockerfile&lt;/code&gt; we are passing it on DockerBuildArgs, this &lt;u&gt;way we just need on Dockerfile for all lambdas&lt;/u&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Wrap up
&lt;/h3&gt;

&lt;p&gt;There's not wrap up, Its already late at night, I should go to sleep 😴 😴 😴, and you should do it too.&lt;/p&gt;

</description>
      <category>aws</category>
      <category>go</category>
      <category>lambda</category>
    </item>
    <item>
      <title>Building an API with AWS SAM and Go</title>
      <dc:creator>Daniel Rayo</dc:creator>
      <pubDate>Mon, 20 Jan 2025 02:59:46 +0000</pubDate>
      <link>https://dev.to/danielrasho/building-an-api-with-aws-sam-and-go-4kai</link>
      <guid>https://dev.to/danielrasho/building-an-api-with-aws-sam-and-go-4kai</guid>
      <description>&lt;p&gt;AWS SAM is a great way to deploy web apps through infrastructure as code (IAC). I recently tried to use it for a project in my job, but I stumble with a harsh reality...&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Go is the Ugly Duckling of AWS 🦆&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The chapter dedicated to Go in AWS SAM documentation, is really short and vague and suggest to REPEAT OUR SOURCE CODE A LOT! Having one &lt;code&gt;go.mod&lt;/code&gt;, &lt;code&gt;go.sum&lt;/code&gt; and utility functions for each lambda 👺! &lt;/p&gt;

&lt;p&gt;I wrote this post for you, someone who’s probably just as lost as I was 😵‍💫. Let’s figure this out together!&lt;/p&gt;

&lt;h3&gt;
  
  
  This will be a 2 parts series:
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;File Structure to NOT REPEAT CODE (This post)&lt;/li&gt;
&lt;li&gt;&lt;a href="https://dev.to/danielrasho/customize-go-builds-on-aws-sam-with-dockerfiles-and-makefiles-3o71"&gt;Custimize builds with Makefiles and Dockerfiles&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Some Context on Go Runtimes
&lt;/h2&gt;

&lt;p&gt;At the current time, &lt;strong&gt;Go runtime for lambdas is not supported as-is&lt;/strong&gt;. This means that there is not specific option on AWS lambdas to specify that your code is written in Go. Instead, &lt;a href="https://docs.aws.amazon.com/lambda/latest/dg/lambda-golang.html" rel="noopener noreferrer"&gt;AWS provides 2 generic runtimes 🐧&lt;/a&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;al2&lt;/code&gt; (Amazon Linux 2)&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;al2023&lt;/code&gt; (Amazon Linux 2023)&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;Which refers to the OS in which the lambda will be run. Is recommended to use al2023 since is newer and compatible with AWS Graviton processors which deliver better performance for a better price. &lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Anyway, this runtimes asks us to provide an executable (usually named &lt;code&gt;bootstrap&lt;/code&gt;), which will be executed on every lambda function. &lt;strong&gt;So instead of deliver code to the lambdas, we deliver an executable that we compiled with Go previously&lt;/strong&gt;. Simple right? &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;This also removes the necessity of using lambda layers, that languages like JS need, since all common dependencies will already be packed in the compiled executable 😼.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  The problem
&lt;/h2&gt;

&lt;p&gt;So, how we build that executable? AWS suggest us that every lambda should be stored on a folder along with its &lt;code&gt;go.mod&lt;/code&gt; and &lt;code&gt;go.sum&lt;/code&gt;, the template they provides us looks like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.
├── hello-world/
│   ├── go.mod
│   ├── go.sum
│   └── main.go
├── events/
│   └── ...
├── samconfig.toml
└── template.yaml
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And this is the function definition on &lt;code&gt;template.yaml&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight yaml"&gt;&lt;code&gt;  &lt;span class="na"&gt;HelloWorldFunction&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
    &lt;span class="na"&gt;Type&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;AWS::Serverless::Function&lt;/span&gt; 
    &lt;span class="na"&gt;Metadata&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
      &lt;span class="na"&gt;BuildMethod&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;go1.x&lt;/span&gt;
    &lt;span class="na"&gt;Properties&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
      &lt;span class="na"&gt;CodeUri&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;hello-world/&lt;/span&gt;
      &lt;span class="na"&gt;Handler&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;bootstrap&lt;/span&gt;
      &lt;span class="na"&gt;Runtime&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;provided.al2023&lt;/span&gt;
      &lt;span class="na"&gt;Architectures&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
        &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="s"&gt;x86_64&lt;/span&gt;
      &lt;span class="na"&gt;Events&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
        &lt;span class="na"&gt;CatchAll&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
          &lt;span class="na"&gt;Type&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;Api&lt;/span&gt;
          &lt;span class="na"&gt;Properties&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
            &lt;span class="na"&gt;Path&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;/hello&lt;/span&gt;
            &lt;span class="na"&gt;Method&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;GET&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If we look the Lambda definition, we learn that&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;code&gt;BuildMethod: go1.x&lt;/code&gt; We use AWS built-it Go builder, to build the executable for us &lt;/li&gt;
&lt;li&gt;
&lt;code&gt;CodeUri: hello-world/&lt;/code&gt; The lambda code will exclusively live in this directory.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;Handler: bootstrap&lt;/code&gt; The name of the executable will be &lt;code&gt;bootstrap&lt;/code&gt; &lt;/li&gt;
&lt;li&gt;
&lt;code&gt;Runtime: provided.al2023&lt;/code&gt; this will be the runtime.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Do you see the problem? At the moment we need a second lambda, we have to create a A NEW DIRECTORY WITH ITS OWN &lt;code&gt;go.mod&lt;/code&gt;, &lt;code&gt;go.sum&lt;/code&gt; and &lt;code&gt;dependencies&lt;/code&gt;, ¿What if we want to share a utility function between to lambdas? TO BAAD 😿 !you will have to copy the same file in the new lambda folder. Leaving with a file structure that looks like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.
├── function1/
│   ├── go.mod
│   ├── go.sum
│   ├── main.go
│   └── SHAREDFUNC.go
├── function2/
│   ├── go.mod
│   ├── go.sum
│   ├── main.go
│   └── SHAREDFUNC.go
├── events/
│   └── ...
├── samconfig.toml
└── template.yaml
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is gross 🤮! &lt;strong&gt;There is a lot of repeated code!&lt;/strong&gt; And it will become worst the more lambdas we add. There must be a better way!&lt;/p&gt;

&lt;h2&gt;
  
  
  The Solution
&lt;/h2&gt;

&lt;p&gt;Since I wanted to share &lt;code&gt;go.mod&lt;/code&gt;, &lt;code&gt;go.sum&lt;/code&gt; and utility code through all lambdas, I came up with this structure:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.
├── cmd/
│   ├── function1/
│   │   └── function1.go  # contains main()
│   └── function2/
│       └── function2.go  # contains main()
├── internal/
│   └── SHAREDFUNC.go
├── events/
│   └── ...
├── go.mod
├── go.sum
├── samconfig.toml
└── template.yaml
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt; I factored out all the common code on an &lt;code&gt;internal/&lt;/code&gt; folder, &lt;/li&gt;
&lt;li&gt;Place the &lt;code&gt;go.mod&lt;/code&gt; and &lt;code&gt;go.sum&lt;/code&gt; files in the root dir&lt;/li&gt;
&lt;li&gt;Move all lambda entry points to &lt;code&gt;/cmd&lt;/code&gt; (in Go exist this convention that whenever a project produces more than one executable, the entry points are placed within a &lt;code&gt;cmd&lt;/code&gt; dir)&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Now I just had to notify AWS SAM of this new structure 😸! And I found the solution just by tweaking around the values of &lt;code&gt;CodeUri&lt;/code&gt; and &lt;code&gt;Handler&lt;/code&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Secret 🔒
&lt;/h3&gt;

&lt;p&gt;Seems that if you &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Move the &lt;code&gt;go.mod&lt;/code&gt; and &lt;code&gt;go.sum&lt;/code&gt; to the root folder&lt;/li&gt;
&lt;li&gt;Set &lt;code&gt;CodeUri&lt;/code&gt;, to wherever folder your function entry point is.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;SAM will detect it automatically and build with root dependencies and &lt;code&gt;internal/&lt;/code&gt; code 🎉 🎉 🎉&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight yaml"&gt;&lt;code&gt;&lt;span class="na"&gt;Resources&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
  &lt;span class="na"&gt;HelloWorldFunction&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
    &lt;span class="na"&gt;Type&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;AWS::Serverless::Function&lt;/span&gt;
    &lt;span class="na"&gt;Metadata&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
      &lt;span class="na"&gt;BuildMethod&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;go1.x&lt;/span&gt;
    &lt;span class="na"&gt;Properties&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
      &lt;span class="na"&gt;CodeUri&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;./cmd/function1/&lt;/span&gt;
      &lt;span class="na"&gt;Handler&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;bootstrap&lt;/span&gt;
      &lt;span class="na"&gt;Runtime&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;provided.al2023&lt;/span&gt;
      &lt;span class="s"&gt;...&lt;/span&gt; &lt;span class="c1"&gt;# More properties ...&lt;/span&gt;
  &lt;span class="na"&gt;HelloWorldFunction&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
    &lt;span class="na"&gt;Type&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;AWS::Serverless::Function&lt;/span&gt;
    &lt;span class="na"&gt;Metadata&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
      &lt;span class="na"&gt;BuildMethod&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;go1.x&lt;/span&gt;
    &lt;span class="na"&gt;Properties&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
      &lt;span class="na"&gt;CodeUri&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;./cmd/function2&lt;/span&gt;
      &lt;span class="na"&gt;Handler&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;bootstrap&lt;/span&gt;
      &lt;span class="na"&gt;Runtime&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;provided.al2023&lt;/span&gt;
      &lt;span class="s"&gt;...&lt;/span&gt; &lt;span class="c1"&gt;# More properties ...&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Can it be better?
&lt;/h2&gt;

&lt;p&gt;Yeeees ✨, we will discuss more ways to customize your Go compilation in the next post!&lt;/p&gt;

</description>
      <category>aws</category>
      <category>go</category>
      <category>lambda</category>
      <category>api</category>
    </item>
    <item>
      <title>Vue reactivity for impatient devs</title>
      <dc:creator>Daniel Rayo</dc:creator>
      <pubDate>Sun, 28 Apr 2024 16:58:09 +0000</pubDate>
      <link>https://dev.to/danielrasho/vue-reactivity-for-impatient-devs-1k9</link>
      <guid>https://dev.to/danielrasho/vue-reactivity-for-impatient-devs-1k9</guid>
      <description>&lt;p&gt;In Vue it's all about managing the state of components. Modifying the &lt;strong&gt;State&lt;/strong&gt; forces the &lt;strong&gt;UI&lt;/strong&gt; to rebuild with the new data. But then, what is this so-called &lt;strong&gt;State&lt;/strong&gt;?&lt;/p&gt;

&lt;h2&gt;
  
  
  App = State + UI
&lt;/h2&gt;

&lt;p&gt;We can understand the &lt;strong&gt;UI&lt;/strong&gt; as a printer that produces one T-shirt after another non-stop. The printer doesn't know:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Which T-shirt was printed before.&lt;/li&gt;
&lt;li&gt;Who will sell &lt;/li&gt;
&lt;li&gt;The theme.&lt;/li&gt;
&lt;/ul&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.amazonaws.com%2Fuploads%2Farticles%2F80vtgio0svj6mzv94eby.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.amazonaws.com%2Fuploads%2Farticles%2F80vtgio0svj6mzv94eby.png" alt="An image of a old print house" width="800" height="434"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;💡 In summary: The printer only focuses on blindly printing T-shirts without remembering.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The client that orders the printer to print is the &lt;strong&gt;State&lt;/strong&gt;. When they want a new batch of T-shirts, they just change the form data.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="nx"&gt;Form&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt;
&lt;span class="nx"&gt;Color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Red&lt;/span&gt;
&lt;span class="nx"&gt;Size&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;XL&lt;/span&gt;
&lt;span class="nx"&gt;Design&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;DonutAscii&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;svg&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In Vue and many graphical libraries, something similar happens. There's a set of important variables that must be remembered while the app is running, which is the state that can also be seen as a form:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="nx"&gt;STATE&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt;
&lt;span class="nx"&gt;Username&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;smaugthur&lt;/span&gt;
&lt;span class="nx"&gt;Password&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1234&lt;/span&gt;
&lt;span class="nx"&gt;Games&lt;/span&gt; &lt;span class="nx"&gt;Won&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;
&lt;span class="nx"&gt;Game&lt;/span&gt; &lt;span class="nx"&gt;Finished&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;
&lt;span class="nx"&gt;PositionX&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;
&lt;span class="nx"&gt;PositionY&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;500&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The &lt;strong&gt;UI&lt;/strong&gt;, like the T-shirt printer, has a blank template that it needs to fill with the data requested by the client. When it receives the &lt;strong&gt;State&lt;/strong&gt; data, we have a screen like this:&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.amazonaws.com%2Fuploads%2Farticles%2Fgv07ztg4b4v5faulg2mk.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.amazonaws.com%2Fuploads%2Farticles%2Fgv07ztg4b4v5faulg2mk.png" alt="A videogame UI" width="526" height="296"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;💡 Any change in the state will force the UI to print a new image with the updated data.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;However, the &lt;strong&gt;UI&lt;/strong&gt; can also receive commands from the user to modify the &lt;strong&gt;State&lt;/strong&gt;. A simple click on "Activate Dark Mode" will change the internal state, which in turn will force the &lt;strong&gt;UI&lt;/strong&gt; to reprint a new screen. It's a cycle where...&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;💡 The state modifies the UI, and the UI modifies the state.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  What was the point of understanding this?
&lt;/h2&gt;

&lt;p&gt;The UI isn't intelligent 🧠, if nobody tells it, it can't know that the state has changed. That's why there have to be explicit ways to say, &lt;em&gt;"Hey, the state changed, get to work!"&lt;/em&gt; This mechanism of making the UI react when the state changes is called &lt;code&gt;Reactive States.&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Now we're going to talk about the most important ways in Vue to achieve these reactive states, and we'll start by understanding how Vue handles these mechanisms Under the hood.&lt;/p&gt;

&lt;h2&gt;
  
  
  Fundamentals of Reactivity in Vue
&lt;/h2&gt;

&lt;p&gt;In Vue, the state is represented by variables. JavaScript doesn't have internal mechanisms to observe changes in a variable and react to them. However, it does offer &lt;code&gt;Proxies&lt;/code&gt;, which are effectively intermediary objects between the client and the actual variable.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;💡 Proxy objects hold the actual value inside them and act as guards that decide what, how, and when the value of the real variable should be modified.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Vue wraps all state variables in Proxies, so now it has control over all the changes happening in the variables, giving it knowledge of when to rebuild the UI.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;💡 &lt;strong&gt;Vue strongly recommends working with Proxy versions of the state.&lt;/strong&gt;&lt;br&gt;
Vue offers the following methods to wrap variables inside a Proxy and manage their state:&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  reactive()
&lt;/h3&gt;

&lt;p&gt;It's a function that takes an object and creates a Proxy with the same data as the original object. Although it works the same as the original object, &lt;u&gt;it is completely independent&lt;/u&gt;. Some important considerations:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Any changes to the Proxy object will not modify the original nor vice versa because THEY ARE DIFFERENT OBJECTS.&lt;/li&gt;
&lt;li&gt;It performs a deep transformation. That means if there are nested objects, it will also convert them to their Proxy equivalent. This will cause any changes in the child properties to also trigger a state change.&lt;/li&gt;
&lt;li&gt;It's not intended for use with primitive types (String, boolean, int...).
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&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;reactive&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="s1"&gt;vue&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;state&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;reactive&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;count&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;button&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="na"&gt;click=&lt;/span&gt;&lt;span class="s"&gt;"state.count++"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  {{ state.count }}
&lt;span class="nt"&gt;&amp;lt;/button&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  ref()
&lt;/h2&gt;

&lt;p&gt;It's another function that constructs proxies, but unlike reactive(), it's intended to handle both primitive types and objects. It works very simply. If it encounters a primitive, it simply creates a Proxy wrapping the value, and if it encounters an object, it executes a reactive() to obtain its Proxy version.&lt;/p&gt;

&lt;p&gt;Considerations:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Like reactive, objects produced by ref() are independent of their originals.&lt;/li&gt;
&lt;li&gt;It performs a deep transformation.&lt;/li&gt;
&lt;li&gt;To access the wrapped value of a ref() Proxy, you call the &lt;code&gt;proxy.value&lt;/code&gt; property. This is not the case with reactive, where you can directly access the properties.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&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;ref&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="s1"&gt;vue&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;count&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;ref&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&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="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// { value: 0 }&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="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// 0&lt;/span&gt;

&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="o"&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="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// 1&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And thats it, happy coding. Here some other useful resources:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Proxy" rel="noopener noreferrer"&gt;https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Proxy&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://vuejs.org/guide/essentials/reactivity-fundamentals.html#why-refs" rel="noopener noreferrer"&gt;Reactivity Fundamentals | Vue.js&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://vuejs.org/guide/extras/reactivity-in-depth.html#how-reactivity-works-in-vue" rel="noopener noreferrer"&gt;Reactivity in Depth | Vue.js&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>vue</category>
      <category>reactivity</category>
      <category>ref</category>
      <category>reactive</category>
    </item>
  </channel>
</rss>
