{
    "componentChunkName": "component---src-templates-post-tsx",
    "path": "/blog/how-to-set-up-swc-in-a-node.js-typescript-api/",
    "result": {"data":{"prismicPost":{"type":"post","uid":"how-to-set-up-swc-in-a-node.js-typescript-api","tags":["Engineering"],"first_publication_date":"2022-07-27T17:20:25+0000","last_publication_date":"2026-04-06T14:30:35+0000","data":{"intro":"Learn how to set up SWC in a Node.js TypeScript API to speed up builds, enable fast refresh, and improve development performance.","keywords":"SWC Node.js TypeScript","description":"Learn how to set up SWC in a Node.js TypeScript API to speed up builds, enable fast refresh, and improve development performance.","image":{"alt":"Node API with SWC @ Mosano","url":"https://images.prismic.io/mosano-website/78ee278f-d075-447c-9ebb-cf5d8893ce6e_swcnode.jpg?ixlib=gatsbyFP&auto=compress%2Cformat&fit=max&q=50"},"author":{"document":{"data":{"name":"Francisco Mendes","photo":{"url":"https://images.prismic.io/mosano-website/Z6IlJ5bqstJ9-Noi_FransicoM.png?ixlib=gatsbyFP&auto=format%2Ccompress&fit=max&q=50","localFile":{"childImageSharp":{"gatsbyImageData":{"layout":"fullWidth","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAABYlAAAWJQFJUiTwAAAE4UlEQVQ4y12UW0wUZxTHD16eaN/blyat+mBSpVqTJvahbdoXb2lTTWs2bbO2poY2KRpj7IXGpApVFpFu2RTUqlAtFnERXXALCKtQWVxYWRBRdpnuDiALe5/Z3bmf03wDWtvvcb7/+Z3zn/nPgfOvVoNj+QEoh0+BiApaiirgPYDCrnVHrYGSJidfc4tPNQa0eMOgNlV9gw/uvei8u+6wtRKgcLDoB7PGDTvAs7wY7mwoB7AtOwjlUFwAABBy3YdLq45Yxo53c/HhKSKNKCYkqP1WOwW4e8QOSgZlhqdo6ngHd2dVqSXqGoXnAOBP+Kiga/kXAKWwm7FYJ7i29bR92hMiwywlLcxHtM93vY+bNq7GzRtX45d7PjZSgqixO52IEp4JCmyrsbPaZwHABR+YoIKgaxwubT1jnxuZNUGypDI99nRew656GyX6W3G6owFPf7+HLjf9huxuUaNlRmbIv9VhZ5MyFjjW/gTVK20WzsOZMEXSDFXV0SDCyLgf477rlB3qRHGgHbO+NhrouIySYqCuITItq5n3BKln1SHLraIy021hT2Uvx9qqiqGrGqKqGqgZhNHgCJ4v20e+c5Xoth3AK8e/ppC3A7M5GXWdTJ2q6DqjPqy8wX0GUAhlRQ4rPxxdmE4x8DFQ1QlzkXG81/QLTbU1YMR5Eh8211Kyvw0lQTQbLgANRCItEZgh9ytHrfD7XrczJyikGaSpKoMtAjXCHD+Bqb5WCjXXYbjJgWJfCwnDN1HJS2ZDU7fgRpMEhQb2tTjBVeXl2XiybBj/B8pZEWe912jEUUZjjsMYvdlI+eTcU7AFvSLrBrM9fOImD9dr/SwGJOV1/A9w0XbsgRdH//iZxi/aKTroRklSzWbKU0A5r7NPQIG6fg1ctXefAJnoiVAnzKaTGB3rw876Crpi/4amB1woZ5KomKB/oY+B/lqvBk1VvkXL+qJlQkmWMCPGMMaPkhgcoNlBN4a7G1EY7ab09D3KinGU5ceTIrJaRrxd1cfDiZJup5hRWfQ1SVZQEGKYSvKUSk1RMhHB5FwQ5ycGKDrSQ/FIAFOJvzGTCFMqHsZcNo1mMnTSchmFru5tc8KHa+ut43djZmzS6SgmY5OmOJOewVQijInkFCXiYYzPhSg5P4mZZIQBMRnjKJUIk5iJmbFh0TtWVGMFgOcLz9iGOCIkUYzrQvoRCZkoZsV5yqQfoaEnSNFTlMU0iXKMssIcipnZRU2MhHRUR0Jy225z7CeBbWsuwDsrzlm8HvYqUctnBVSUHClKHlHPoef2DHG9QZJbvSQNTpBGCqpyFlU1T1I+h0S6NuaZpP0rayzfFp1cWA49bRzs2nLVPhZgy0HR8nlRz5viPFqL+3D/lmZUd1bhZK0HJdJRzgkoyzmdwYL+CB3Z0mj3uR4sLIelUPZkfX2y+aq9tyvEQmSCiSRtd3Evvvt2K97f7sDKch8iyeZzIoWGukP03aZGc32x8zocBHhpSQ08AzZzwXa2jsNrL9Zbaip83Ih/hqRsmhouh2jsoo8idT10tpkjOSfS/SGeGir6uZ0rTln+ahk1YW/AoYLtS38E2LS+EV5Y4gCAY+bIb718AQA2FL65ptFa+lWPs67Kx1+o9WvnTwW0s9WDfHlJt3PHmgYrwIpC69pzZs16KIXNy2xQsv5X+AeoHdRp8GcKjQAAAABJRU5ErkJggg=="},"images":{"fallback":{"src":"/static/6c6e7c46b7c1dade77d137ff514e1db6/fe0c3/Z6IlJ5bqstJ9-Noi_FransicoM.png","srcSet":"/static/6c6e7c46b7c1dade77d137ff514e1db6/27b15/Z6IlJ5bqstJ9-Noi_FransicoM.png 750w,\n/static/6c6e7c46b7c1dade77d137ff514e1db6/fe0c3/Z6IlJ5bqstJ9-Noi_FransicoM.png 800w","sizes":"100vw"},"sources":[{"srcSet":"/static/6c6e7c46b7c1dade77d137ff514e1db6/cfe1c/Z6IlJ5bqstJ9-Noi_FransicoM.webp 750w,\n/static/6c6e7c46b7c1dade77d137ff514e1db6/d6730/Z6IlJ5bqstJ9-Noi_FransicoM.webp 800w","type":"image/webp","sizes":"100vw"}]},"width":1,"height":1}}}}}}},"canonical_url":{"url":"https://mosano.eu/blog/node-swc-ts/"},"content":{"html":"<h1><strong>Introduction</strong></h1><p>Actually, SWC has many more features besides compilation; it can do bundling, modification, and many other things. One of its significant advantages is the performance it offers during development; we have improved the Fast Refresh of our application, and the build step is immensely fast.</p><h1><strong>Prerequisites</strong></h1><p>But before going further, you will need to install the following dependencies:</p><ul><li>Node</li><li>NPM</li><li>TS</li></ul><p>In addition, it is expected to have a basic knowledge of Express.js to complete the project.</p><p></p><h1><strong>Getting Started</strong></h1><p></p><h2><strong>Create project setup</strong></h2><p>As a first step, we will create our project directory and navigate into it:</p><pre>mkdir node-swc\n\ncd node-swc</pre><p>Then we can create our development environment, as well as our TypeScript project:</p><pre>npm init -y\n\nnpm install typescript @types/node --save-dev</pre><p>Now we can create the tsconfig.json file and add the following configuration:</p><pre>{\n  &quot;compilerOptions&quot;: {\n    &quot;target&quot;: &quot;es2020&quot;,\n    &quot;module&quot;: &quot;es2020&quot;,\n    &quot;allowJs&quot;: true,\n    &quot;removeComments&quot;: true,\n    &quot;resolveJsonModule&quot;: true,\n    &quot;typeRoots&quot;: [&quot;./node_modules/@types&quot;],\n    &quot;sourceMap&quot;: true,\n    &quot;outDir&quot;: &quot;dist&quot;,\n    &quot;strict&quot;: true,\n    &quot;lib&quot;: [&quot;es2020&quot;],\n    &quot;baseUrl&quot;: &quot;.&quot;,\n    &quot;forceConsistentCasingInFileNames&quot;: true,\n    &quot;esModuleInterop&quot;: true,\n    &quot;experimentalDecorators&quot;: true,\n    &quot;emitDecoratorMetadata&quot;: true,\n    &quot;moduleResolution&quot;: &quot;Node&quot;,\n    &quot;skipLibCheck&quot;: true\n  },\n  &quot;include&quot;: [&quot;src/**/*&quot;],\n  &quot;exclude&quot;: [&quot;node_modules&quot;]\n}</pre><p>With the configuration of our TypeScript project done, we can move on to the next step.</p><p></p><h2><strong>Install dependencies</strong></h2><p>The next step is to install the packages needed to build the API. For that, you should run the following commands in your terminal:</p><pre>npm install express\n\nnpm install @types/express --save-dev</pre><p>After executing the above commands, we installed two packages in our project, express, which is a minimalistic Node.js framework and its data types.</p><p></p><h2><strong>Create the Express API</strong></h2><p>But before proceeding to create the API, we have to create the source code folder and the entry file:</p><pre>mkdir src\ncd src\ntouch server.ts</pre><p>After this, in the server.ts file, write the following API:</p><pre>import express, { Request, Response } from &quot;express&quot;;\n\nconst app = express();\n\napp.use(express.json());\n\napp.get(&quot;/&quot;, (req: Request, res: Response): Response =&gt; {\n  return res.send(&quot;Hello, World!&quot;);\n});\n\nconst start = async (): Promise&lt;void&gt; =&gt; {\n  try {\n    app.listen(3000, () =&gt; {\n      console.log(&quot;Server started on port 3000&quot;);\n    });\n  } catch (error) {\n    console.error(error);\n    process.exit(1);\n  }\n};\n\nvoid start();</pre><p></p><h2><strong>Setup SWC</strong></h2><p>Now we need to install the necessary dependencies to configure SWC:</p><pre>npm install @swc/cli @swc/core chokidar nodemon concurrently --save-dev</pre><p>After executing the command, we will have the following dependencies:</p><ul><li>SWC - @swc/cli and @swc/core are the pre-built binaries of the compiler</li><li>chokidar - will be responsible for recompiling the files when there are changes (watcher)</li><li>nodemon - will reload our API whenever there are changes in the compiled code</li><li>concurrently - will execute multiple commands concurrently</li></ul><p>Next, create a .swcrc file and add the following configuration to it:</p><pre>{\n  &quot;jsc&quot;: {\n    &quot;parser&quot;: {\n      &quot;syntax&quot;: &quot;typescript&quot;,\n      &quot;tsx&quot;: false,\n      &quot;decorators&quot;: true,\n      &quot;dynamicImport&quot;: true\n    },\n    &quot;target&quot;: &quot;es2020&quot;,\n    &quot;baseUrl&quot;: &quot;.&quot;\n  },\n  &quot;module&quot;: {\n    &quot;type&quot;: &quot;commonjs&quot;\n  }\n}</pre><p></p><p>With our SWC configured, we can jump to the next step.</p><p></p><h2><strong>Explaining the transpilation process</strong></h2><p>During the development process, the SWC will read the source code of the TypeScript project, and as soon as there is a code change, it will transpile the TypeScript code to JavaScript in the dist/ folder. For this same reason, we will have to create two scripts, one where we will use SWC to watch the source code and another for nodemon to watch the transpiled code.</p><p>With this explanation now in mind, we can create the following scripts in package.json:</p><pre>{\n  &quot;scripts&quot;: {\n    &quot;dev&quot;: &quot;concurrently \\&quot;npm run watch-compile\\&quot; \\&quot;npm run watch-dev\\&quot;&quot;,\n    &quot;watch-compile&quot;: &quot;swc src -w --out-dir dist&quot;,\n    &quot;watch-dev&quot;: &quot;nodemon --watch \\&quot;dist/**/*\\&quot; -e js ./dist/server.js&quot;,\n    &quot;build&quot;: &quot;swc src -d dist&quot;,\n    &quot;start&quot;: &quot;NODE_ENV=production node dist/server.js&quot;\n  },\n}</pre><p></p><p>Now use the following commands:</p><ul><li>npm run dev: during the development of the API</li><li>npm run build: to transpile code to production</li><li>npm start: to start the API in production</li></ul><p>Did you find this article interesting?  Share it with your friends and colleagues.</p>"},"cover":{"alt":"Node API with SWC compiler - Mosano software development","localFile":{"childImageSharp":{"gatsbyImageData":{"layout":"fullWidth","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAAA7EAAAOxAGVKw4bAAADvElEQVQ4y0XRa09bBRzH8VPa0yu0h5ZSaOnttD29wVqgF0qhpa2IjDHYFTa3yWBEYNHEyNA4fDDNLskchhkd0xk3kcxEp2Zb5itQn3gbbKiJPjTMLSb6Cr5m3QPfwCf/7+8vnDj+PGtXVnh/eYkbax+yMDNLfzLHYE+ZTCLFUGWIZ3cfZvfwOPFIG4FwCaVzEkdiCkvrNJ78S4QHzuApLeKQ0wgzRw7w1aerfL62yvUrFzm2fz9Rl49cspNkvI3uVI5ST5lCvozX7cfj7SAe348vMYYlMoyjfRJ/dpKWtiGkejvCaH+Zy0tnufHJVVYvvc1zu0aJuLx0d6RIJ9rJp3P05grksj143DJ2WxMNkhOr1U6tuQ6dQcJUK2EwWdCbJIS5iSMsnz/DrZtfcvPObaYPHiIVDFPqytOTyVHpLVEuVOjuKhDwh3E6/VjqbegMZvQmK/UNTqyNbmotdrR6E8Ldn7/n3v11Nn/7lR82N5mbmCKrRCnn8hSy3VR6+ijmC2RSOfy+IB5vO012GbNJj6u5mUCknUBrBrsrgM5Qi3Du3HmufXyVjY2f+Offv1mYmyMdCtObyZBpb6erM0W6o5PWeILGxkY8tihxbxKvW0dLcz1uOYxTjmG2NaHW6BD2HRjn4IFDzJ+Y587Xt3lx4igpRSGV3EYkHCQaUYjHYgSDCjZ7M5Lkpb7OgWTXY24wYnVI6E0WNKKemhoNwvTxeaamZpmZeYGTi6cYHxohFQmzrTWKHPARCMkokQhen0ydxUqDPYFN8qPVq1HXiKjVmiqkUqlRPQZfPfUub1z4iIWTpzl9domd/QPEZB/RWBh/wI8cCqJEY7g8XkSdhlB9F3F3Fw6XAYPpMSiiEQ3V3OqF6dzTjB2eY/HNi7z1zjUGixUSoSDJRCvhaIRgOEIo1orT7UHU65EMTlw2mQa7Hq1OUwVFren/5IHiMN3ZCtlcLxeWl9izfQdNNoVMskw+XSKXyZNOZXE4GlFp6jCZoxgNJnSiiEr1JLWmRqxiVXD34AjFQpHXXn+F3//Y5NjUJGKNEblRQWlJ0+xI0bd3kYljp+gtjtCm9BN0BnBbVRi12mqqKOpQq7VPNtw5uoPPvrjOg7/+5NGjh/yyeZ8PLr3H+J49hHwyNsmO0exCjpcoDs/yzPgisfJRvB0jOAKd1BklBEGDIKiqTxLW7/3Iw4cP2Nra4tvvvmHl8gob63e5c/sWu0b3UunrpzvTha/FhV6rQyOaMFq91CnbCT31Mh37FslXxgg0J1BpLfwHwozhX7wFTmcAAAAASUVORK5CYII="},"images":{"fallback":{"src":"/static/f7e9b9422472e8db6f97bc0bc6ff374b/1b0c9/0f3ce2a2-8cd5-4fa7-87cc-1fdba32d97ea_node.js%2B%25281%2529.png","srcSet":"/static/f7e9b9422472e8db6f97bc0bc6ff374b/1b0c9/0f3ce2a2-8cd5-4fa7-87cc-1fdba32d97ea_node.js%2B%25281%2529.png 600w","sizes":"100vw"},"sources":[{"srcSet":"/static/f7e9b9422472e8db6f97bc0bc6ff374b/f7afc/0f3ce2a2-8cd5-4fa7-87cc-1fdba32d97ea_node.js%2B%25281%2529.webp 600w","type":"image/webp","sizes":"100vw"}]},"width":1,"height":0.6799999999999999}}}},"date":"2022-09-09","title":"How to Set Up SWC in a Node.js TypeScript API"}},"allPrismicPost":{"nodes":[{"data":{"author":{"document":{"data":{"name":"Mosano Team","photo":{"localFile":{"childImageSharp":{"gatsbyImageData":{"layout":"fullWidth","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAABYlAAAWJQFJUiTwAAAEq0lEQVQ4y3WUe2zURRDHpwKJyQF/GI0IIoaHhgAtqZoQlRTFR6wlIUpociF6ClExxlINoqFEg7Ta0pZ6tKE2BaSURykc5jholVquFHnT6wNKpM2BP1pb+r673v1++9vdGbN75RETf8nm9nZnPvud2dmByueKoGTCesiBD4GIEo4m5cFyAMfJhT+42jIPe4JF9YZR1si7yhq5UVRndGYe8jQt3OwqAHBcTtqsfWphBfgnrIWLz+cAbB2/AXJgbQIAQKevHarnbHFey68PDrV0E4swQrr/qblaC7d0kVHwe/DinCxnr68NpgDAb7AqoW7CpwBZsEax1ElwLK3c3eXv1I5IxIUkbjMhbYujGpwJqdYk6UGD/hvUsqzYrXwnAYAPVmpQQofvOlSn7XLfae1RQrjNpLCZQNuWyDki5xK5nsd/9R4TQtmGWrupKa3ErZQqFpQk/gRFs7c6g/6ghjGTSwWRklBIvA9FQi4wPtScI9qmFsr7/B10as63ztNJ2Tpax6n8xqAKUynThhwxEuEYjXIUSPq/HbLQjqnQBbIRE20WP0gpVdS/8v8IrgZwQHZSicto7o2rs4RWFg7bmLL0BC559Tj2RxFHy/3YNXcDhQ9fwr70YuxdVhiHC9IHqHwPtnRT7cIfXbB/Xa0nGmYqy5wxiRIJh4cZzp1/BB+eXEG7dt/A6PJ8vP3CdxjaeRqNiWtoKNuLNsVhOiWSuBlmdCHzqAd8hecNJc+ypHwQmJj8Kz7yaCWlrWrEwcx9OLixGu98tBsHnvkSz1S1o3GHISEisyUyS0gVdvO2BgNqSpu4ApoxgRooCYeGGc5LOopTpx+gabMPU13lNRTHruCtaRkU/nwPZm4M4PX2YV1dyseKCV2uLT+f4+ArDfwvcMasQzhp8h5an30VrVwv9j72CbWWX8TExTV4+++IBloPAJtKz3M4VHjpXshqU0jC4REbn513BBcvOY4vLa3FHblXMLRoE0beKcTsnGacOqOKentNRBwDWkIq4tnCMwZsy6j3REI2cUH8QeCTT1dRSooPT5wZwBvf12DPxNU0XN6Ab6xswMef2Efd/8TU7aJlSXXbPBpi5F133APpiRWu64F+XTamKZELwlCY42tv1mK6069LY+izCux5PRfNnjC6Pj6LLy72YV+/pdNjmvGyUaWXm1TsAoDpjp15l/UzMS0pGENUIzIqcDQqtAIzzHSeGCccHeUYjnC8a6d81A3XbP0zqB4JpC2ohKUzf3Gere/SKqNRIZWhPfZiLOUoCJmNOl+2fttxWCyqWbyt/hZ9MWu785vE0nhzqPPehA9Sve6rzQN3QxcxU2p1CqgTz8bmlkS1p2yUbWdzH215u8p9wdsRbw7jYcu99vVe6jF3Y1xpvOtw4jFTymhUoBpqrtbUnrrVy/UGZaVW6/alvpfhK4CZ47bDRMjTDfak9yYsmrnXWZwXCLYGBmhkxKb/fqERm9oD/VSRdymYPqvMec7boWEpsCnh3XE5AG8lH4SnHioGgBwt+ZX5BwBgrmPJgoOurIxGT2lBs7Fnx1W+d0cbLy8IGNkZDZ4ViRUugCmO9xfs1j7J8DWkjsuFjORd8C+cC8Cg9vX2+QAAAABJRU5ErkJggg=="},"images":{"fallback":{"src":"/static/9124fa34541a9aa766ccdec48b164268/fe0c3/Z6IsXJbqstJ9-NuC_Mosano.png","srcSet":"/static/9124fa34541a9aa766ccdec48b164268/27b15/Z6IsXJbqstJ9-NuC_Mosano.png 750w,\n/static/9124fa34541a9aa766ccdec48b164268/fe0c3/Z6IsXJbqstJ9-NuC_Mosano.png 800w","sizes":"100vw"},"sources":[{"srcSet":"/static/9124fa34541a9aa766ccdec48b164268/cfe1c/Z6IsXJbqstJ9-NuC_Mosano.webp 750w,\n/static/9124fa34541a9aa766ccdec48b164268/d6730/Z6IsXJbqstJ9-NuC_Mosano.webp 800w","type":"image/webp","sizes":"100vw"}]},"width":1,"height":1}}}}}}},"canonical_url":{"url":null},"date":"2023-04-06","description":"Discover the top programming languages in 2023, including Python, Java, C++, Swift, and Ruby, and learn which ones are worth your time.","cover":{"alt":"Team member working on a custom software project with a layer of coding over the image","url":"https://images.prismic.io/mosano-website/0e11c9ad-4fd1-45db-986d-a703a8aa4252_Top%20programming%20languages%202023.png?ixlib=gatsbyFP&auto=compress%2Cformat&fit=max&q=50","localFile":{"childImageSharp":{"gatsbyImageData":{"layout":"fullWidth","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAA7EAAAOxAGVKw4bAAADKklEQVQozyXS/U8UdACA8e+R4Mow32CMQypT4fKFUtNAQEM40MApdpPJTVlQ2mjLgUhbcPISI+BEThc2uCO2UzpElENkHigcY5RcaHCHyN1uwyMxjCwK5cDcnnbrH/j88jxCLPDDd+1OgiI+wk8aSrgiB1XXNIXdf1PcM41m9BkFlhlO9k5ztG0ChdZGwrcDRNUM8VZ5D4Ff3+S13FZ80mrxTlYjxPK3EUtCWLXvBCkV1yjpmqLstpvyvhnK+59R7ZyjzDZL5fAsWZ2TpOrtJNfdI7ZmiNDSLgJU1wk508v62kH8i80IDyZZuwuxJp4UdQf1TtD87Oasxc3p/lkqHXNU2Ocptc2RY37CkYsOFForcs2PhJ+3sFk3SKTBwbYrLoJO9yPEy8G8FBqPkCWxX23CMAbnrc/ROV5Q+cscVSPzqIfc5JqnOG6aJP2yk2TdXeI0fSQZH3DINs+HHY+JarCz+POLCLFwJV7SbYh1e4ktauayC3T259Q/ekGVzY26/ymllqdkto+TcdWJ0jDK/ksOPigxkXBhmAOWf5Bfn2Br9QCLMnQeMBiv5RsQ6xLxj8tEPzxD5xNo+gO0Y3BuZB6N618KhmbIuvmQ9EYnR4y/srfSTLSmj33dU8SaHrPdOE5k2wRC+EiRLFvPAlkCXrJEElV6itrtqEwOslvu82WHi7yBv8g2PeR4q4tPDKMcrBkgUX2LTafaiNZaCT3zE+/9MEJcz/T/oHjlTSRLZHi/EYUIfB+xYhNeKyMRwTuQbk9lR3oZMVnfI89rJKnqFtH5zYRn1xNW2MIW3SABBSaWZRsILO5ECOGLkKxALJR6HsITydt/IxLPTj5B+G5MQp5bz+6SVnZ9ZeCg9jZK4wMO6O8Tf2EYuWmCndd+I6z6Dq+faEIEvLuHpaujEGIpfrIYQuIz2Jyax9a0IiIyviHmZB2xqkuk1N5B2TCCQm/l094/UbS42FB4g8A8I4tzmnk1s4FFh79DvJN2ijBlPls+LkdZe5djjU6+uOIiq/UROe2/k9s+SWbzOJ81jZFucKL0jK2/R2r3JBF1VlZVmFmdfxXfw2cRu4v4D9w/IjquPz76AAAAAElFTkSuQmCC"},"images":{"fallback":{"src":"/static/cd5befd596a1b862e6425ce1a7fd8852/73167/0e11c9ad-4fd1-45db-986d-a703a8aa4252_Top%2Bprogramming%2Blanguages%2B2023.png","srcSet":"/static/cd5befd596a1b862e6425ce1a7fd8852/c8b8a/0e11c9ad-4fd1-45db-986d-a703a8aa4252_Top%2Bprogramming%2Blanguages%2B2023.png 750w,\n/static/cd5befd596a1b862e6425ce1a7fd8852/f589b/0e11c9ad-4fd1-45db-986d-a703a8aa4252_Top%2Bprogramming%2Blanguages%2B2023.png 1080w,\n/static/cd5befd596a1b862e6425ce1a7fd8852/c2d8e/0e11c9ad-4fd1-45db-986d-a703a8aa4252_Top%2Bprogramming%2Blanguages%2B2023.png 1366w,\n/static/cd5befd596a1b862e6425ce1a7fd8852/73167/0e11c9ad-4fd1-45db-986d-a703a8aa4252_Top%2Bprogramming%2Blanguages%2B2023.png 1920w","sizes":"100vw"},"sources":[{"srcSet":"/static/cd5befd596a1b862e6425ce1a7fd8852/a6295/0e11c9ad-4fd1-45db-986d-a703a8aa4252_Top%2Bprogramming%2Blanguages%2B2023.webp 750w,\n/static/cd5befd596a1b862e6425ce1a7fd8852/7ba6e/0e11c9ad-4fd1-45db-986d-a703a8aa4252_Top%2Bprogramming%2Blanguages%2B2023.webp 1080w,\n/static/cd5befd596a1b862e6425ce1a7fd8852/955fe/0e11c9ad-4fd1-45db-986d-a703a8aa4252_Top%2Bprogramming%2Blanguages%2B2023.webp 1366w,\n/static/cd5befd596a1b862e6425ce1a7fd8852/89314/0e11c9ad-4fd1-45db-986d-a703a8aa4252_Top%2Bprogramming%2Blanguages%2B2023.webp 1920w","type":"image/webp","sizes":"100vw"}]},"width":1,"height":0.5625}}}},"content":{"html":"<p>Software Development has become an integral part of modern society, as technology continues to advance at an unprecedented pace. The demand for developers is on the rise, and it is essential to learn a programming language that is in demand in the market to succeed in this field. </p><p>Choosing the right language to learn can be a daunting task, as there are so many options available. This article will discuss the top programming languages to learn in 2023. Although Mosano has a stack preference, we will cover a range of languages that are widely used in different industries, including web development, mobile application development, data science, artificial intelligence, and more.</p><h2>Top programming languages to learn in 2023</h2><h3>JavaScript</h3><p>JavaScript is the language of the web. This programming language is used to create interactive and dynamic web pages. JavaScript is a versatile language that can be used on both sides, of the client and the server. It is widely used in web development and is an essential language to learn for anyone interested in developing web applications. Recently, JavaScript has grown in popularity due to the rise of frontend frameworks and tools like React, Angular, Vue, and Svelte.</p><h3>TypeScript</h3><p>TypeScript is a superset of JavaScript that adds type annotations to the language. It is designed to be a safer version of JavaScript that catches errors at compile time rather than at runtime. TypeScript is widely used in web development.</p><p>If you are interested in diving into web development, TypeScript is almost a tool you must have in your toolkit as the vast majority of mid to large-sized projects are built with TypeScript instead of just plain JavaScript.</p><h3>Rust</h3><p>Rust is a recent programming language that has gained popularity lately. It is designed to be a fast and safe language that can be used for system-level programming. Rust is known for its memory safety features, which make it harder to introduce bugs into the code. It is a great language to learn for anyone interested in low-level programming, such as building operating systems,  or game engines, or very efficient command line tools.</p><h3>Go</h3><p>Go is a programming language developed by Google. The interface is designed to be fast, efficient, and easy to use. Go is used for developing server-side applications and is a popular choice for building microservices. Due to the growing demand for cloud-native applications, it is a valuable language to learn in 2023.</p><h3>Python</h3><p>Python is a popular programming language known for its ease of use and simplicity. It has a wide range of applications, including data analysis, web development, and artificial intelligence. This programming language is an excellent language to start with if you are a beginner. It has a straightforward syntax and can be easily learned. Python is widely used in data science, machine learning, and artificial intelligence, making it a valuable language to learn in 2023.</p><h3>Java</h3><p>Java is a popular programming language that has existed for over two decades. It is used in a wide range of applications, including developing Android mobile apps and building enterprise-level software. Java is known for its platform independence, meaning it can run on any platform without modification. This makes it a popular choice for building cross-platform applications.</p><h3>Kotlin</h3><p>Kotlin is a programming language developed by JetBrains. It is designed to be a more modern and safer version of Java. Kotlin is used for developing Android mobile apps and is a popular choice for building backend applications. It is a valuable language to learn in 2023 due to the growing demand for Android development. If you’re going to be all hands on Android, you will most likely want to learn not only Java but Kotlin as well.</p><h3>Swift </h3><p>The Swift programming language was developed by Apple for developing applications for iOS and macOS. It is designed to be easy to use and has a more modern syntax than Objective-C, which was used before for iOS and macOS development. Swift is a valuable language to learn in 2023 due to the growing demand for mobile application development.</p><h3>C++ </h3><p>C++ is a popular programming language that has been around for over three decades. It is used in a wide range of applications, from developing video games to building operating systems. C++ is known for its speed and efficiency, making it a popular choice for performance-critical applications.</p><h2>Conclusion</h2><p>Whether you are a beginner looking to start your programming journey or an experienced developer looking to expand your skills, this article will provide you with valuable insights into the most popular and sought-after programming languages to learn in 2023. If you just started your developer career, feel free to reach out to us with an application for our mentoring program.</p><p>Did you like this article? Share it on your network with your colleagues and friends.</p><p></p>"},"title":"Top programming languages to learn in 2023","intro":"Discover the top programming languages in 2023, including Python, Java, C++, Swift, and Ruby, and learn which ones are worth your time."},"tags":["Engineering"],"uid":"programming-languages-learn-2023"},{"data":{"author":{"document":{"data":{"name":"Mosano Team","photo":{"localFile":{"childImageSharp":{"gatsbyImageData":{"layout":"fullWidth","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAABYlAAAWJQFJUiTwAAAEq0lEQVQ4y3WUe2zURRDHpwKJyQF/GI0IIoaHhgAtqZoQlRTFR6wlIUpociF6ClExxlINoqFEg7Ta0pZ6tKE2BaSURykc5jholVquFHnT6wNKpM2BP1pb+r673v1++9vdGbN75RETf8nm9nZnPvud2dmByueKoGTCesiBD4GIEo4m5cFyAMfJhT+42jIPe4JF9YZR1si7yhq5UVRndGYe8jQt3OwqAHBcTtqsfWphBfgnrIWLz+cAbB2/AXJgbQIAQKevHarnbHFey68PDrV0E4swQrr/qblaC7d0kVHwe/DinCxnr68NpgDAb7AqoW7CpwBZsEax1ElwLK3c3eXv1I5IxIUkbjMhbYujGpwJqdYk6UGD/hvUsqzYrXwnAYAPVmpQQofvOlSn7XLfae1RQrjNpLCZQNuWyDki5xK5nsd/9R4TQtmGWrupKa3ErZQqFpQk/gRFs7c6g/6ghjGTSwWRklBIvA9FQi4wPtScI9qmFsr7/B10as63ztNJ2Tpax6n8xqAKUynThhwxEuEYjXIUSPq/HbLQjqnQBbIRE20WP0gpVdS/8v8IrgZwQHZSicto7o2rs4RWFg7bmLL0BC559Tj2RxFHy/3YNXcDhQ9fwr70YuxdVhiHC9IHqHwPtnRT7cIfXbB/Xa0nGmYqy5wxiRIJh4cZzp1/BB+eXEG7dt/A6PJ8vP3CdxjaeRqNiWtoKNuLNsVhOiWSuBlmdCHzqAd8hecNJc+ypHwQmJj8Kz7yaCWlrWrEwcx9OLixGu98tBsHnvkSz1S1o3GHISEisyUyS0gVdvO2BgNqSpu4ApoxgRooCYeGGc5LOopTpx+gabMPU13lNRTHruCtaRkU/nwPZm4M4PX2YV1dyseKCV2uLT+f4+ArDfwvcMasQzhp8h5an30VrVwv9j72CbWWX8TExTV4+++IBloPAJtKz3M4VHjpXshqU0jC4REbn513BBcvOY4vLa3FHblXMLRoE0beKcTsnGacOqOKentNRBwDWkIq4tnCMwZsy6j3REI2cUH8QeCTT1dRSooPT5wZwBvf12DPxNU0XN6Ab6xswMef2Efd/8TU7aJlSXXbPBpi5F133APpiRWu64F+XTamKZELwlCY42tv1mK6069LY+izCux5PRfNnjC6Pj6LLy72YV+/pdNjmvGyUaWXm1TsAoDpjp15l/UzMS0pGENUIzIqcDQqtAIzzHSeGCccHeUYjnC8a6d81A3XbP0zqB4JpC2ohKUzf3Gere/SKqNRIZWhPfZiLOUoCJmNOl+2fttxWCyqWbyt/hZ9MWu785vE0nhzqPPehA9Sve6rzQN3QxcxU2p1CqgTz8bmlkS1p2yUbWdzH215u8p9wdsRbw7jYcu99vVe6jF3Y1xpvOtw4jFTymhUoBpqrtbUnrrVy/UGZaVW6/alvpfhK4CZ47bDRMjTDfak9yYsmrnXWZwXCLYGBmhkxKb/fqERm9oD/VSRdymYPqvMec7boWEpsCnh3XE5AG8lH4SnHioGgBwt+ZX5BwBgrmPJgoOurIxGT2lBs7Fnx1W+d0cbLy8IGNkZDZ4ViRUugCmO9xfs1j7J8DWkjsuFjORd8C+cC8Cg9vX2+QAAAABJRU5ErkJggg=="},"images":{"fallback":{"src":"/static/9124fa34541a9aa766ccdec48b164268/fe0c3/Z6IsXJbqstJ9-NuC_Mosano.png","srcSet":"/static/9124fa34541a9aa766ccdec48b164268/27b15/Z6IsXJbqstJ9-NuC_Mosano.png 750w,\n/static/9124fa34541a9aa766ccdec48b164268/fe0c3/Z6IsXJbqstJ9-NuC_Mosano.png 800w","sizes":"100vw"},"sources":[{"srcSet":"/static/9124fa34541a9aa766ccdec48b164268/cfe1c/Z6IsXJbqstJ9-NuC_Mosano.webp 750w,\n/static/9124fa34541a9aa766ccdec48b164268/d6730/Z6IsXJbqstJ9-NuC_Mosano.webp 800w","type":"image/webp","sizes":"100vw"}]},"width":1,"height":1}}}}}}},"canonical_url":{"url":"https://mosano.eu/blog/angular-react-4-differences/"},"date":"2022-12-26","description":"Compare Angular vs React and discover 4 key differences to help you choose the right JavaScript framework for your next project.","cover":{"alt":"Mosano software development","url":"https://images.prismic.io/mosano-website/53288236-2fe1-4717-870a-a7af4df72452_react%20and%20angular.png?ixlib=gatsbyFP&auto=compress%2Cformat&fit=max&q=50","localFile":{"childImageSharp":{"gatsbyImageData":{"layout":"fullWidth","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACsElEQVQoz22R22scBRTGz+zOzuzszOzsZTYzu7O37Oxtkuxmt900tk1s2mq0qJgESxpDUcHQVlCwiJcnRUH6UClooZYtqb4ILZYqPog++iRU8FVf/Fd+mokgFB9+5xzOw8f3nSMiSf5DRST1GBoiOiIGojgEXo3lfsjk2BLb21t8eu0jHnx/n0e//8qff/2BKIrKAUk1TaEU4Ho1ZsoNvMosXtDCD1qUqyGVWodKY45uf8Rgfky7P6YXjehGYwZHnuDY6XOceHYTEZGDQjqTJWO5j7k8cJf5H1L/dhNRrEPSPqJ5SFCfpVxt0I4G6IZDvd7n6NEVovkJtl1GUWxEsdH0Ina2QhiNePLsc9i5KpJwUJI5EqkculNHz7WQ69Mp03v3uHFnH1WzaNYjNjd2WD5xmqDaQ8SOMS2fsh/SmT/CpTffpjc4fiimHgpqB4L5NvLZ9BZ3H9zni6/uoqYs3GKDpaU1nHwQR1ISWUQsTNOjGnTxaz3WYodBvJdkDlEdUnaNdLGH3Px6yjc/fMvn+1NSms1sOGR9fZNCoRHfKY4sFhnTIwi6FPw2p55+nlZvSNgfUg0jiuUmjt/B9BaQC6/v8cYH73Pp3fdQUza5fI2tjV0WFpZJGyWMzAyJZC6eS26Dghdycu0ci5NVOtEYLwjxayHl1jxWeYhcvvoWH16/xjsff0LGLNBsDpibWyIMR+SLs1h2EB8/bczEgq7X5sqVq+xe3GM0OYVTrGPnA3S7gu5GyM39L3n443fc2r+DJAwmoxVe3dnjmac2WByeRNVcRMnGTkulJmY24JWLl3lx6wIL4+OU/BDD9tBMH63YRx7+/BO//PaIG7dvI4pBzqmwunyGl1/a4/wL20SdRZJaHj3t4roNDNPn/NYuOzuvsbqyTj+a0O0uUii10P95yt+DxEaXGuwwlAAAAABJRU5ErkJggg=="},"images":{"fallback":{"src":"/static/c8598a80afc630078d8d9fd408e41903/73167/53288236-2fe1-4717-870a-a7af4df72452_react%2Band%2Bangular.png","srcSet":"/static/c8598a80afc630078d8d9fd408e41903/c8b8a/53288236-2fe1-4717-870a-a7af4df72452_react%2Band%2Bangular.png 750w,\n/static/c8598a80afc630078d8d9fd408e41903/f589b/53288236-2fe1-4717-870a-a7af4df72452_react%2Band%2Bangular.png 1080w,\n/static/c8598a80afc630078d8d9fd408e41903/c2d8e/53288236-2fe1-4717-870a-a7af4df72452_react%2Band%2Bangular.png 1366w,\n/static/c8598a80afc630078d8d9fd408e41903/73167/53288236-2fe1-4717-870a-a7af4df72452_react%2Band%2Bangular.png 1920w","sizes":"100vw"},"sources":[{"srcSet":"/static/c8598a80afc630078d8d9fd408e41903/a6295/53288236-2fe1-4717-870a-a7af4df72452_react%2Band%2Bangular.webp 750w,\n/static/c8598a80afc630078d8d9fd408e41903/7ba6e/53288236-2fe1-4717-870a-a7af4df72452_react%2Band%2Bangular.webp 1080w,\n/static/c8598a80afc630078d8d9fd408e41903/955fe/53288236-2fe1-4717-870a-a7af4df72452_react%2Band%2Bangular.webp 1366w,\n/static/c8598a80afc630078d8d9fd408e41903/89314/53288236-2fe1-4717-870a-a7af4df72452_react%2Band%2Bangular.webp 1920w","type":"image/webp","sizes":"100vw"}]},"width":1,"height":0.5625}}}},"content":{"html":"<p>The demand for software development is growing every day. When you think about developing new software, among several factors that you have to consider, there is the type of platform and framework the developers are going to work with.</p><p>When you consider the JavaScript ecosystem, you are likely to think about some of the most popular front-end development tools—Angular and React. But how do you choose between Angular and React? In this article, you’ll get to know what are Angular and React based on and, their main differences.</p><h2>What is Angular?</h2><p>Angular is a web framework developed by Google and since its release in 2010 when it was called AngularJS. Many companies such as Google, PayPal, and, Forbes use this framework for their frontend web development. Even though this framework is used by giant companies, this doesn’t mean that it is the best option for your development project. </p><p>This framework can be used in front-end development and provides several appealing features for creating engaging and dynamic Single-Page Applications (SPAs). With Angular, you’ll get various features such as AJAX support, dependency injection, modularity, emulating, etc.</p><p>Angular is a highly popular framework for creating web and mobile applications. If you want to build a high-quality app, Angular may be a good choice. With this framework, you&#39;re likely to create a high-quality app with less code, your developers will spend less time on debugging and the app will be scalable. </p><p>Even though Angular has many qualities that make it a good choice for web development, it might not be the case for your team. Now let’s get to know another contender, ReactJS.</p><h2>What is React.JS?</h2><p>React is a JavaScript library built in 2013, and it became an open-sourced library. This library was developed by Facebook, and it’s used to develop interactive interfaces and web applications. After being released, this open-source tool had a rapid expansion, and it became one of the most popular development technologies on the market.</p><p>When your development team uses React, they’ll use less code. Due to its versatility and wide library options, this tool is used in countless projects. In addition to using a JavaScript Library, React can be used with other tools, such as Redux and Create React App to accelerate processes and increase capabilities.</p><h3>But is React a library or a framework?</h3><p>React is a library, not a framework. Confused? </p><p>This tool was created to help developers build with less code. This is why some people think React is a framework instead of a library. Don’t let these terms deceive you. </p><p>When we talk about frameworks, we are talking about a tool that has already featured built-in tools that will help developers and their experience. That’s why React is a library instead of a framework. When you and your developers choose to use React, you’ll have to pick the tools you’re working with to define your workflows and your development processes. There are many different opinions and methodologies that you can follow, but ultimately, it is up to you.</p><p></p><h2>4 Differences between Angular and React</h2><p></p><ol><li><strong>Technology—</strong>The first big difference that we need to establish is that AngularJS is an open-source framework and React is an open-source library. So, you get structure, pre-definition and other people’s opinions on a framework, and freedom (also to make mistakes) with the library.</li><li><strong>Data Binding</strong>—Another parameter that we need to consider is Data Binding, Angular uses two-way data binding, and, React uses one-way data binding. This means that developers who use React generally can predict better the outcome of their work than developers that use Angular. This happens because two-way data binding updates automatically, which can cause difficulties in debugging, and one-way data binding will generally be simpler and easier to validate.</li><li><strong>DOM Type</strong>—Angular uses a real DOM, and React uses a virtual DOM. This means that the entire tree structure might be updated when a change is made in Angular. If you develop your product with React, it will not update the entire tree structure, only the element you want to see change.</li><li><strong>Open-Source Tools and Libraries</strong>—When we talk about using open-source tools and libraries such as, UI components React has a wide of components available because it can use several libraries and dependencies, and there is a big community around it. Your team just needs to install and use them. Angular also supports numerous components, such as layouts, buttons, and pop-ups, but there is a smaller number of options available.</li></ol><p>These two technologies are popular and have different advantages and benefits, but keep in mind that at the end of the day, it is up to what makes you and your team happier. For us, at Mosano, React is at the top of our developers’ choice, <a href=\"https://mosano.eu/about\" target=\"_blank\" rel=\"noopener noreferrer\">take a look at our stack preferences. </a></p><p>Did you like this article? Save and share it with your community, colleagues, and coworkers.</p><p></p><p></p>"},"title":"Angular vs React: 4 Key Differences Explained","intro":"Compare Angular vs React and discover 4 key differences to help you choose the right JavaScript framework for your next project."},"tags":["Engineering"],"uid":"angular-react-4-differences"}]}},"pageContext":{"uid":"how-to-set-up-swc-in-a-node.js-typescript-api","tags":["Engineering"]}},
    "staticQueryHashes": []}