<?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: Bernard Wiesner</title>
    <description>The latest articles on DEV Community by Bernard Wiesner (@bernardwiesner).</description>
    <link>https://dev.to/bernardwiesner</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%2F148937%2F0bacfd55-9819-45f8-abd6-19ee8a9fe34a.png</url>
      <title>DEV Community: Bernard Wiesner</title>
      <link>https://dev.to/bernardwiesner</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/bernardwiesner"/>
    <language>en</language>
    <item>
      <title>Does AI Really Make Developers 10x More Productive?</title>
      <dc:creator>Bernard Wiesner</dc:creator>
      <pubDate>Tue, 29 Sep 2026 21:02:04 +0000</pubDate>
      <link>https://dev.to/bernardwiesner/does-ai-really-make-developers-10x-more-productive-1e4k</link>
      <guid>https://dev.to/bernardwiesner/does-ai-really-make-developers-10x-more-productive-1e4k</guid>
      <description>&lt;p&gt;The trend is everywhere: AI has come for dev jobs and can now perform 10x or even 100x faster, according to some out there. This would mean reducing headcount, as a single dev could do the work of 10.&lt;/p&gt;

&lt;p&gt;But is this really accurate? There seem to be two main trends right now:&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Vibe coding with AI
&lt;/h2&gt;

&lt;p&gt;Some companies are focusing heavily on speed and releasing new features without requiring devs to review code anymore. In fact, they are not encouraged to take the time to understand the code produced by LLMs. So the flow is:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Define the feature/specs&lt;/li&gt;
&lt;li&gt;AI implements it&lt;/li&gt;
&lt;li&gt;AI reviews it and fixes any issues&lt;/li&gt;
&lt;li&gt;AI tests it&lt;/li&gt;
&lt;li&gt;AI creates the PR&lt;/li&gt;
&lt;li&gt;The dev might run some more reviews using AI on the PR, might test it locally, and finally clicks approve and merges&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The dev never really looks at the code or tries to understand what AI did.&lt;/p&gt;

&lt;p&gt;This workflow can truly boost performance for certain tasks, such as creating well-defined new features or releasing a brand-new product. However, it also has major trade-offs in the long run.&lt;/p&gt;

&lt;p&gt;Yes, you might meet a very tight deadline to release this product, but can it really scale and grow in the long run? What happens when there is a production issue and you have no clue what AI wrote? What happens when AI can't seem to fix the production issue you are having, even after you pasted all the context you have, and it keeps failing to fix the issue? You have to dig into the code.&lt;/p&gt;

&lt;p&gt;And here is where it bites you: you are not at all familiar with the thousands of lines of slop that were written. And I am not talking about a brand-new project. I am talking about a project that has been vibe coded over months, with new requirements built on top of each other over and over, often with features that might conflict with each other or quick fixes that haven't been addressed because no one is taking care of the health of the codebase. The focus was always on shipping fast and zero maintenance.&lt;/p&gt;

&lt;p&gt;You could spend hours or even days trying to figure out how to bring your production system back up. This will only amplify over time. Your initial 10x or 100x boost is now greatly reduced by trying to figure out the system and understand why some logic was written in a way that makes absolutely no sense.&lt;/p&gt;

&lt;p&gt;This reminds me of when I first started developing a website 20 years ago using Dreamweaver. I got started quickly, but had a hard time fixing issues when they arose, and looking at the code it produced was a huge pain. Of course, AI is at a different level, but there are similarities with vibe coding.&lt;/p&gt;

&lt;p&gt;This could certainly improve over time. I could imagine AI monitoring the health of your whole system, being able to communicate with you about the system and its trade-offs while you create a new feature outside of your IDE or code, and proposing scaling changes, migrations, abstractions, or refactoring as needed. However, this might take some time to get right, as it introduces considerable risks.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. AI-assisted, responsible coding
&lt;/h2&gt;

&lt;p&gt;Others are following an AI-assisted and responsible coding approach, where you are expected to fully own and understand anything AI writes. This flow is much slower than the one above, initially at least, as you have to spend considerable time reviewing, correcting, or modifying AI-produced code to keep it maintainable and feel comfortable with it.&lt;/p&gt;

&lt;p&gt;You are not fine with machine-looking code. You want to produce easy-to-understand code for humans that is maintainable by humans in the long run.&lt;/p&gt;

&lt;p&gt;Even with very well-defined specs, when you are working on complex systems, there will always be decisions and trade-offs you have to make. Do I need to refactor this to add this new feature? Do I need to introduce a new pattern that was previously not there for this new spec? Does this need to scale? Does another feature need to be deprecated? Should this feature be abstracted into a microservice? Should I migrate certain data to handle the new spec better?&lt;/p&gt;

&lt;p&gt;These kinds of judgment calls can't be made by AI alone. AI follows existing patterns and produces quick outcomes. Yes, for a well-built system, AI can really shine initially. It copies the patterns that exist and can quickly add new features on top of them. However, this is temporary. If you keep doing this without reviewing what AI is adding, even in well-built systems, over time it will start making wrong judgment calls on its own, which will add up over time.&lt;/p&gt;

&lt;p&gt;You should certainly automate smaller tasks that you feel confident don't need too much review or design changes. I still view this as responsible coding, for example a flow such as:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Open Jira task&lt;/li&gt;
&lt;li&gt;From Jira delegate to an agent to:

&lt;ul&gt;
&lt;li&gt;Creates MR&lt;/li&gt;
&lt;li&gt;Reviews MR&lt;/li&gt;
&lt;li&gt;Tests MR with close to real data&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Dev picks it up, reviews, test on local, approves and merges&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  So, how much more productive are we?
&lt;/h2&gt;

&lt;p&gt;The question remains: how much more productive are you with AI? From experience, I would say it depends. For certain tasks, you are certainly much faster, such as boilerplate, setting up certain structures, or starting a new project from scratch. However, we need to be careful when measuring performance.&lt;/p&gt;

&lt;p&gt;For example: "A bug is reported, and you are asked to investigate and fix it." You can simply paste in the bug description, and AI might have a fix for you very quickly. You push the changes, and it looks all good. However, you were not aware of why that bug surfaced in the first place or of all the related code and logic that surrounds it.&lt;/p&gt;

&lt;p&gt;If you were to dig into the code, let's say for one hour, looking for the bug, you would learn a lot about the system and how it was built. You would make a mental map of the codebase and get familiar with a lot of the logic surrounding it, especially if it is readable and well built. You learn to debug logs, understand monitoring systems, and might learn about an unrelated bug in the process.&lt;/p&gt;

&lt;p&gt;Later, in a meeting, someone asks about a certain spec. You immediately know it and are familiar with it, and can answer quickly without having to reach for AI to figure it out. You can very quickly debug issues and connect unrelated issues with what they could probably be caused by because you know the system. You are on top of it. If you have no clue, you have to reach out to AI every time and depend on it. This will slow you down over time.&lt;/p&gt;

&lt;p&gt;Additionally, the skill of looking at code as live documentation, especially when it is well built and optimized for humans, is very valuable. You can very quickly understand specs by looking at code. Often, asking AI and reading what it says is slower when trying to understand specs. First, you are not 100% sure that what it is saying is really accurate, and second, you might take longer to really understand all the related logic and specs from the output it gives you compared with actually analyzing the code yourself.&lt;/p&gt;

&lt;p&gt;Well-written code that is developed with great DX in mind is often more readable than reading about specs in plain English. This is certainly not true for messy code or low-level code with a lot of complexity. AI can be much more helpful for understanding those kinds of codebases.&lt;/p&gt;

&lt;p&gt;It's tricky to measure performance with AI because you are measuring long-term versus short-term performance. In the short term, yes, certainly, you are probably a few times faster using AI. However, in the long term, are you really much faster?&lt;/p&gt;

&lt;p&gt;If you are working on big, complex projects and are constantly reaching out to AI to figure out the system over and over again, you don't have a mental map of the codebase and need constant assistance. You might not be much faster than a dev who knows the ins and outs of the system and is not using AI at all.&lt;/p&gt;

&lt;p&gt;However, if you do have a strong understanding of the codebase and are able to fix issues or add new features confidently without AI, you can certainly be much faster with AI assistance, as you can quickly identify related issues and review the code it changes because you are familiar with it.&lt;/p&gt;

&lt;p&gt;It is a bit of a paradox because the more you start using AI, the more you start losing ownership of the codebase. Reviewing code doesn't create the same sense of ownership as writing code manually. It's much better than not reviewing it at all, but over time, you do start losing ownership of the codebase. Additionally, there is a risk of cognitive deskilling when you only review code and rely heavily on AI.&lt;/p&gt;

&lt;p&gt;Personally, I would say the performance boost is somewhere around 2x with AI currently, nowhere near 10x and certainly not 100x. That is with AI-assisted, responsible coding. And even this 2x is questionable depending on what you are working on and whether you are measuring the long term or the short term.&lt;/p&gt;

&lt;p&gt;I think many people right now are underestimating how fast devs could code manually. You were not literally typing every character. You often copy-pasted a lot of common patterns, mass-reassigned things with shortcuts, used IDE-assisted refactoring, and used autocomplete. I believe many people are underestimating how smart devs were and how much context you could absorb prior to AI.&lt;/p&gt;

&lt;p&gt;Yes, AI is very impressive, but devs could do the same or more without hand-holding. I mean implementing a complex solution with zero bugs, with total comprehension of all affected parts and confidence in your solution. That skill is gradually fading in devs nowadays.&lt;/p&gt;

&lt;p&gt;I believe AI certainly does boost performance, and everyone should use it. However, I also believe you should keep owning the code and, once in a while, not rely on AI to perform certain tasks, with the exception of autocomplete. Keeping your cognitive sharpness will later help you get more out of AI-assisted coding in the long run.&lt;/p&gt;

&lt;p&gt;This is certainly true for bigger, more complex systems. For smaller, newer projects that just need a quick mockup and release, it's a different story. Do not spend too much time on it if you just need a quick release, vibe coding without properly reviewing the code can be perfectly fine here.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>softwaredevelopment</category>
      <category>developerproductivity</category>
      <category>vibecoding</category>
    </item>
    <item>
      <title>Laravel as a microservice using GCP PubSub, an alternative to laravel queue.</title>
      <dc:creator>Bernard Wiesner</dc:creator>
      <pubDate>Thu, 15 Sep 2022 06:20:00 +0000</pubDate>
      <link>https://dev.to/bernardwiesner/laravel-microservice-using-gcp-pubsub-an-alternative-to-laravel-queue-2inc</link>
      <guid>https://dev.to/bernardwiesner/laravel-microservice-using-gcp-pubsub-an-alternative-to-laravel-queue-2inc</guid>
      <description>&lt;h1&gt;
  
  
  Laravel queue vs PubSub
&lt;/h1&gt;

&lt;p&gt;&lt;a href="https://laravel.com/docs/9.x/queues" rel="noopener noreferrer"&gt;Laravel queue&lt;/a&gt; is great and easy to use, however one big disadvantage is it's not microservice friendly. You need to couple your jobs with your app code and run your queue worker on the same repo. &lt;/p&gt;

&lt;p&gt;For example lets say you have an e-commerce website and you want to process the payment in the background and then sent an email to the user if the payment was successful. You would need to write your job inside the same repo as your web app, and when you deploy to production, you would need to deploy both your web app and your batch server that is running the queue worker with the same repo code.&lt;/p&gt;

&lt;p&gt;The above use case has various issues. Your web app code is tightly coupled to your background processing jobs. If you make some changes to your job it will add risks to your web app release since its in the same repo. &lt;/p&gt;

&lt;p&gt;By using pubsub we can introduce a scalable microservice architecture that can solve above issues. Lets look how to implement this.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is PubSub?
&lt;/h2&gt;

&lt;p&gt;PubSub is a design pattern related to publisher and subscribers. You can publish to a topic and all subscribers that are listening on that topic will triggered. As an example:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;topic: purchase-submitted

&lt;ol&gt;
&lt;li&gt;subscription: send-processing-email&lt;/li&gt;
&lt;li&gt;subscription: charge-user&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;As you can see from above the topic &lt;code&gt;purchase-submitted&lt;/code&gt; will be published from your web app when a user completes a purchase. There are 2 subscriptions subscribed to that topic, they will both get triggered at the time of publishing to the topic. First, is sending an email notifying the user their purchase is being processed. The second subscription will attempt to charge the user and if successful will send a purchase complete email. The subscriptions will get processed on a separate repo, we can call it a PubSub API repo.&lt;/p&gt;

&lt;p&gt;Let's see how we setup this architecture using laravel.&lt;/p&gt;

&lt;h2&gt;
  
  
  GCP PubSub configuration
&lt;/h2&gt;

&lt;p&gt;You need to have a GCP account and configure your topics and subscriptions on PubSub.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;First create a topic:&lt;/strong&gt;&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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmfvd1x3rr9vs4ck0lgge.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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmfvd1x3rr9vs4ck0lgge.png" alt="pubsub create topic"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Then create the subscriptions and link them to the topic above:&lt;/strong&gt;&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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fck8dnoz27q6scmkw8g8b.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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fck8dnoz27q6scmkw8g8b.png" alt="pubsub create subscription"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Configure your subscription as &lt;code&gt;push&lt;/code&gt; and enter your PubSub API endpoint (your laravel dedicated repo to process subscriptions):&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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fod6b12ke9jbpza302xu4.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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fod6b12ke9jbpza302xu4.png" alt="pubsub configure subscription"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can configure additional options for your subscription, such as the acknowledge deadline and retry policy based on your preference or leave it as defaults.&lt;/p&gt;

&lt;h2&gt;
  
  
  Web app code
&lt;/h2&gt;

&lt;p&gt;For publishing messages to GCP, you can use &lt;a href="https://github.com/googleapis/google-cloud-php-pubsub" rel="noopener noreferrer"&gt;GCP's PubSub for PHP library&lt;/a&gt;, or you can use &lt;a href="https://github.com/bernardwiesner/laravel-gcp-pubsub" rel="noopener noreferrer"&gt;my library&lt;/a&gt; that acts as a wrapper around GCP's library. The benefit of my library is it provides a clean fluent API and allows you to easily mock and test your PubSub logic.&lt;/p&gt;

&lt;p&gt;I will be using my library in this tutorial. Install it by doing:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;composer require bernardwiesner/laravel-gcp-pubsub
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then you can simply publish to your topic from your app code when a user submits a purchase request:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;    &lt;span class="kn"&gt;use&lt;/span&gt; &lt;span class="nc"&gt;PubSub&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="c1"&gt;// ...&lt;/span&gt;
    &lt;span class="nc"&gt;PubSub&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;topic&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'purchase-submitted'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;publish&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="s1"&gt;'purchase_id'&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nv"&gt;$purchaseId&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That is all you need to do on your web app code. There is no need to have any of the purchase logic or email sending logic. That will all be on your PubSub API on a different repo.&lt;/p&gt;

&lt;h2&gt;
  
  
  PubSub API
&lt;/h2&gt;

&lt;p&gt;You need to create a new repo that acts as an API. This API will be triggered by GCP pubsub when you publish to a topic.&lt;/p&gt;

&lt;p&gt;Simply create your API endpoints inside api.php with the endpoint of your subscription as configured on GCP:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="nc"&gt;Route&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;post&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'/pubsub/send-processing-email'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nc"&gt;SendProcessingEmail&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="n"&gt;class&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then inside your controller you can process the jobs:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;SendProcessingEmail&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nc"&gt;Controller&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
       &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;__invoke&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;Request&lt;/span&gt; &lt;span class="nv"&gt;$request&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="kt"&gt;HttpResponse&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nv"&gt;$message&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nv"&gt;$request&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="n"&gt;message&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="nv"&gt;$data&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;json_decode&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;base64_decode&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$message&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'data'&lt;/span&gt;&lt;span class="p"&gt;]),&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="nv"&gt;$purchaseId&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nv"&gt;$data&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'purchase_id'&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
         &lt;span class="c1"&gt;// your email sending logic&lt;/span&gt;

        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nf"&gt;response&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;noContent&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;204&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As you see above its required to base64 decode the message data, this is a requirement of GCP pubsub. Also on the last line a successful response code needs to be send back to GCP to mark the message as processed. If you do not respond with a success response code and the acknowledge deadline you configured on your subscription expires, the same message will be send again from GCP and your job will be triggered again until it succeeds.&lt;/p&gt;

&lt;p&gt;For example, if you configured your acknowledge deadline as 10 seconds on your subscription, but your API for sending an email takes more than 10 seconds, your API will be called again from GCP. To avoid duplicate jobs make sure you configure your ack deadline on GCP pubsub with a reasonable time. Alternatively you could kill your php script if it passes over a certain time, for example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;    &lt;span class="k"&gt;protected&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;registerTimeout&lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt; &lt;span class="kt"&gt;void&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nb"&gt;pcntl_async_signals&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="nb"&gt;pcntl_signal&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="no"&gt;SIGALRM&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nb"&gt;posix_kill&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;getmypid&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt; &lt;span class="no"&gt;SIGKILL&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="p"&gt;});&lt;/span&gt;
        &lt;span class="nb"&gt;pcntl_alarm&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The above code will kill your request if it takes more than 10 seconds, making sure you dont send an email twice. You should match your timeouts on php side with GCP side to avoid duplicate messages.&lt;/p&gt;

&lt;h2&gt;
  
  
  Delay messages
&lt;/h2&gt;

&lt;p&gt;In laravel queue you can &lt;a href="https://laravel.com/docs/9.x/queues#delayed-dispatching" rel="noopener noreferrer"&gt;delay jobs&lt;/a&gt;, this is more tricky using GCP pubsub since the way pubsub works is it triggers all subscriptions at the moment you publish to the topic. However there are some workaround to this.&lt;/p&gt;

&lt;p&gt;Using &lt;a href="https://github.com/bernardwiesner/laravel-gcp-pubsub" rel="noopener noreferrer"&gt;my library&lt;/a&gt;, you can use the &lt;code&gt;delaySeconds()&lt;/code&gt; API to delay the processing of the job. This will add an additional attribute to the payload called &lt;code&gt;available_at&lt;/code&gt; with the time the job is  available to be processed:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;    &lt;span class="kn"&gt;use&lt;/span&gt; &lt;span class="nc"&gt;PubSub&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="c1"&gt;// ...&lt;/span&gt;
    &lt;span class="nc"&gt;PubSub&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;topic&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'your-topic'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;delaySeconds&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;30&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;publish&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="s1"&gt;'your data'&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
        &lt;span class="s2"&gt;"your-attribute"&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s2"&gt;"your-value"&lt;/span&gt;
    &lt;span class="p"&gt;]);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then you need to add a middleware to your PubSub API repo to delay the job if its not yet ready by returning a non success response code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;    &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;handle&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;Request&lt;/span&gt; &lt;span class="nv"&gt;$request&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kt"&gt;Closure&lt;/span&gt; &lt;span class="nv"&gt;$next&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nv"&gt;$availableAt&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;int&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$request&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="n"&gt;message&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'attributes'&lt;/span&gt;&lt;span class="p"&gt;][&lt;/span&gt;&lt;span class="s1"&gt;'available_at'&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;??&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$availableAt&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nb"&gt;time&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nf"&gt;response&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;noContent&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;409&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nv"&gt;$next&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$request&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

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

&lt;/div&gt;



&lt;p&gt;The subscription will be triggered again until the available_at is met and the API returns a success response code.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;By using GCP PubSub and a dedicated laravel API for processing jobs you can scale your jobs and benefit from a microservice architecture.&lt;/p&gt;

&lt;p&gt;Additionally you can add additional subscriptions to your topic and configure the push endpoints to any external API you might have, be it laravel or any other language. This is great for decoupling and scaling. &lt;/p&gt;

</description>
      <category>laravel</category>
      <category>microservices</category>
      <category>pubsub</category>
      <category>queue</category>
    </item>
    <item>
      <title>JS array vs object vs map</title>
      <dc:creator>Bernard Wiesner</dc:creator>
      <pubDate>Tue, 04 Aug 2020 07:20:55 +0000</pubDate>
      <link>https://dev.to/bernardwiesner/js-array-vs-object-vs-map-3kgm</link>
      <guid>https://dev.to/bernardwiesner/js-array-vs-object-vs-map-3kgm</guid>
      <description>&lt;p&gt;Like other programming languages, JS has data structures, such as arrays and maps. Maps are key pair entries or associative arrays however maps can cause confusing in JS, lets first take a look at using an arrays as a map:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;students&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[]&lt;/span&gt;
&lt;span class="nx"&gt;students&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="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Mark&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="nx"&gt;students&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Mia&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;students&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If we check the contents of the students array we get this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--JgMRf-61--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/mlp2g4yjbrus7dvm4xq2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--JgMRf-61--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/mlp2g4yjbrus7dvm4xq2.png" alt="Alt Text" width="516" height="240"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now lets take a look at an object:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;students&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{}&lt;/span&gt;
&lt;span class="nx"&gt;students&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="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Mark&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="nx"&gt;students&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Mia&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;students&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Lets check the contents of the object:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--9u7WQF2h--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/fa5v87b3apq8ufazf4so.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--9u7WQF2h--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/fa5v87b3apq8ufazf4so.png" alt="Alt Text" width="482" height="176"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Looks almost same as the array, both have key pairs. Lets mix things up a little, lets say our keys are dynamic and we want to access the value of the student by its id. Lets do this with an array:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;students&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[]&lt;/span&gt;
&lt;span class="nx"&gt;students&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="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Mark&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="nx"&gt;students&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Mia&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;students&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="c1"&gt;// 11&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Wait what? There are 11 students? Since we are using array indexes as dynamic keys this is causing empty slots. &lt;/p&gt;

&lt;p&gt;If we would loop and console log every student, we would get this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;for&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;student&lt;/span&gt; &lt;span class="k"&gt;of&lt;/span&gt; &lt;span class="nx"&gt;students&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="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;student&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--p3l_IASR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/2relu6ya5xi22logsc4m.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--p3l_IASR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/2relu6ya5xi22logsc4m.png" alt="Alt Text" width="494" height="132"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;9 undefined entries, this could cause a lot of issues related to performance and integrity. So we should not use arrays with dynamic keys, having empty slots is not good. Another reason to not use arrays as maps is that you cant assign non numeric indexes on arrays as keys.&lt;/p&gt;

&lt;p&gt;Lets do the same with an object:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;students&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{}&lt;/span&gt;
&lt;span class="nx"&gt;students&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="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Mark&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="nx"&gt;students&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Mia&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;keys&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;students&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="c1"&gt;// 2&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Works fine, only 2 entries, no more empty slots and now we can access the student directly by its id:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;students&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;
&lt;span class="c1"&gt;// Mia&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;However what happens when we invert the order of the ids?&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;students&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{}&lt;/span&gt;
&lt;span class="nx"&gt;students&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Mia&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="nx"&gt;students&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="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Mark&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;students&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="c1"&gt;// Object { 0: "Mark", 10: "Mia" }&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Oh, the insertion order isn't maintained in the object. It seems like they are getting sorted numerically. Ok, so lets use strings.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;students&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{}&lt;/span&gt;
&lt;span class="nx"&gt;students&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;10&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Mia&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="nx"&gt;students&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;0&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Mark&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;students&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="c1"&gt;// Object { 0: "Mark", 10: "Mia" }&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Same result... What about if we use alphabetic characters will they get sorted?&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;students&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{}&lt;/span&gt;
&lt;span class="nx"&gt;students&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;key-10&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Mia&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="nx"&gt;students&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;key-0&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Mark&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;students&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="c1"&gt;// Object { "key-10": "Mia", "key-0": "Mark" }&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Oh, they didn't get sorted this time. So if we use non numeric characters the insertion order is kept.&lt;/p&gt;

&lt;p&gt;In JS there exist 2 different types of maps, maps related to regular objects and maps related to the Map object.&lt;/p&gt;

&lt;p&gt;Lets take a look at the new Map object in JS introduced in ES6.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;students&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nb"&gt;Map&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="nx"&gt;students&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="kd"&gt;set&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Mia&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; 
&lt;span class="nx"&gt;students&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="kd"&gt;set&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="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Mark&lt;/span&gt;&lt;span class="dl"&gt;'&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="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;students&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="c1"&gt;// Map { 10 → "Mia", 0 → "Mark" }&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Oh the insertion order was preserved. We can also access the id of the student directly.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;students&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="kd"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
&lt;span class="c1"&gt;// Mia&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So what to take from this?&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Dont use JS arrays as a map or associative array. &lt;/li&gt;
&lt;li&gt;If you need to access a value by key and don't care about insertion order, you can go with a regular object.&lt;/li&gt;
&lt;li&gt;If you care about insertion order go with a Map object.&lt;/li&gt;
&lt;/ol&gt;

&lt;blockquote&gt;
&lt;p&gt;Beware, ES6 Map object may not work with certain things such as &lt;code&gt;v-for&lt;/code&gt; in vue 2. &lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>javascript</category>
      <category>array</category>
      <category>object</category>
      <category>map</category>
    </item>
  </channel>
</rss>
