{"componentChunkName":"component---src-templates-tag-js","path":"/tags/web/","result":{"data":{"site":{"siteMetadata":{"title":"LoginRadius Blog"}},"allMarkdownRemark":{"totalCount":2,"edges":[{"node":{"fields":{"slug":"/engineering/jamstack-introduction/"},"html":"

What is JAMstack

\n

JAMstack is not a specific set of tools or any language. Still, it's a new and modern way of building apps and sites that deliver better performance, higher security, lower scaling cost, and better developer experience. It achieves this by retaining most of the client-side functionality and abstracting all other functionality to the third-party API. APIs do all the heavy lifting. It is based on the client-side, and it doesn't depend on the backend server.

\n

JAM stands for JavaScript, APIs & Markup.

\n

JavaScript: Any dynamic programming during the request/response cycle is handled by the JS, running entirely on the client-side. It can be any front-end framework or library or even vanilla JavaScript.\nAPIs: All server-side processes or database actions are contained in reusable APIs, accessed over HTTPS with JavaScript. These can be custom-made or leveraged third party services.\nMarkup: Template markup must be pre-built at the time of deployment, usually using a site generator for content sites or a build tool for web applications.

\n
\n

Modern web development architecture based on client-side JavaScript, reusable APIs, and pre-built Markup.

\n
\n

The term was introduced by Mathias Biilmann, co-founder of Netlify.

\n

With the JAMstack, we have no longer talk about specific technologies such as web servers, programming languages, or databases.

\n

Check the following best practices defining a JAMstack project:

\n\n

Value of JamStack

\n

We can easily understand the JAMstack value when comparing it with a monolithic architecture, today's most common practice in Web development. In a monolithic project, the frontend is closely coupled with a backend server, e.g., node js. Each page request to backend server which pulls data from database renders into Html and then send it across the network. A single page gets regenerated every time the server receives a request for that URL.\nIn a JAMstack architecture, the page request does not go to the server for Html because it directly fetches Html from CDN, where the Html file has been pre-built, and it's ready to be downloaded; that's why no server is involved here.

\n

Workflow comparison (JAMstack vs. traditional)

\n

\"jamstack-vs-traditional-workflow\"

\n

Traditional workflow

\n

→ Building and hosting are closely coupled.
\n→ Whenever a user requests a page, The file request to the back end and interacts with a database, back-end code, server, browser, and caching layers.
\n→ Updated code is pushed to servers often through FTP. The database must be updated again.\n→ Updated content is also pushed through CMS like WordPress, Joomla, or drupal.

\n

JAMstack workflow

\n

→ Building and hosting are loosely coupled.
\n→ Whenever a user requests a page, The file is already pre-built and directly served to the browser from a CDN.
\n→ Updated code is pushed through Git; Modern tools like static site generators easily re-built the entire site.\n→ Updated content is also pushed through GIt or static site CMS.

\n

Why the JAMstack?

\n

A JAMstack architecture can bring all sorts of benefits to the sites and project workflows. Some of the key benefits are:

\n

Faster performance: Building JAMstack helps to get pages generated at deploy time since they are mainly stored as Markup and can be served over a CDN.\nHigher security: JAMstack websites reduce server and database, so we don't need to worry about vulnerabilities anymore.\nLower cost: It uses fewer resources, so comparably, it's lower than Others.\nBetter developer experience Frontend developer can focus on frontend development without tied to monolithic architecture. Static site generators remove the need to maintain a separate stack for content and marketing.

\n

That's A Wrap!

\n

In a JAMStack architecture, however, the frontend and backend are decoupled. A frontend consists of JavaScript, HTML, and CSS. SSG generates these files during the build process and sends it over a CDN.

\n

A JAMStack backend is a content API that returns JSON/XML. This API can be a hosted datastore, a headless CMS, serverless functions, or a custom application.

\n

Useful resources

\n\n","frontmatter":{"date":"October 29, 2020","updated_date":null,"title":"Introduction to JAMstack","tags":["Jamstack","Web"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/974b16bfa06f1616aaee042b80b7a90c/58556/jamstack_cover.webp","srcSet":"/static/974b16bfa06f1616aaee042b80b7a90c/61e93/jamstack_cover.webp 200w,\n/static/974b16bfa06f1616aaee042b80b7a90c/1f5c5/jamstack_cover.webp 400w,\n/static/974b16bfa06f1616aaee042b80b7a90c/58556/jamstack_cover.webp 800w,\n/static/974b16bfa06f1616aaee042b80b7a90c/99238/jamstack_cover.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Versha Gupta","github":"vershagupta","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/adding-multi-threading-to-javascript-using-web-workers/"},"html":"

In JavaScript, web workers allow developers to benefit from parallel programming. Parallel programming enables various computations to be performed at the same time by applications. It is helpful to consider the importance of web staff as an example of how humans benefit from parallel tasks.

\n

Web workers give us the ability to write multi-threaded Javascript that doesn't block the DOM. To some extent, even asynchronous operations block the DOM. On the other hand, Web employees help us solve this problem, escape from the single-threaded world, and achieve higher performance on our web pages.

\n

What are web workers in JS?

\n

Web Workers are a simple means of running scripts in background threads for web content. Without interfering with the user interface, the worker thread may perform tasks.

\n

Furthermore, they can use XMLHttpRequest to perform I/O (although the responseXML and channel attributes are always null) or fetch (with no such restrictions). Once created, by posting messages to an event handler defined by that code, a worker can send messages to the JavaScript code that made it (and vice versa).

\n

Why Use JavaScript Web Workers?

\n

Web workers let you build background threads separate from the main execution thread, where the logic of the user interface is usually executed.

\n

The key benefit of this separation of workload is that inside an isolated thread and without interrupting or impacting the main thread's responsiveness and usability, you can perform costly operations.

\n

When the background thread completes its mission, the main thread is informed of the results seamlessly via an event handled by standard JavaScript event handling.

\n

Setting Up Web Workers & Multi-threading to JavaScript

\n

Step 1: Create a project folder and add index.html in the root of it.

\n
<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8" />\n    <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n    <title>Club JavaScripters</title>\n  </head>\n  <body>\n    <button>Can you click me?</button>\n    <h2>Let's do the party. 👯‍♂️‍</h2>\n    <ul id="club"></ul>\n    <script src="./main.js"></script>\n  </body>\n</html>
\n

We just created a simple HTML page with a link to our javascript file which we will create in a moment.

\n

Step 2: Let's add our JavaScript code in two separate files, main.js and worker.js in the same folder.

\n

main.js

\n
const persons = [\n  {\n    name: "Hriday",\n    isMember: true,\n  },\n  {\n    name: "Hridayesh",\n    isMember: false,\n  },\n  {\n    name: "Bob",\n    isMember: true,\n  },\n  {\n    name: "Daisy",\n    isMember: true,\n  },\n]\n\n// Our club container\nconst club = document.getElementById("club")\nlet worker\n\n/**\n * Function entry allows entry to people coming to our club\n */\nfunction entry(persons) {\n  persons.forEach(person => {\n    const { isMember, name } = person\n    const listItem = document.createElement("li")\n    listItem.textContent = name\n    // if a person is not registered, register them first\n    if (!isMember) {\n      // create a new worker thread\n      worker = new Worker("worker.js")\n      // pass data to worker thread\n      worker.postMessage(name)\n      // listen to any data passed from worker thread\n      worker.addEventListener("message", event => {\n        if (event.data) {\n          club.appendChild(listItem)\n        }\n      })\n    } else {\n      // if they are registered let them in\n      club.appendChild(listItem)\n    }\n  })\n}\n\nentry(persons)
\n

worker.js

\n
// addEventListener is directly accessible in worker file\naddEventListener("message", event => {\n  // extract person passed from main thread from event object\n  let person = event.data\n  registerMember(person)\n})\n\nfunction registerMember(member) {\n  // generating membership card takes some amount of time\n  let i = 0\n  while (i < Math.pow(10, 10)) {\n    i++\n  }\n  // send result back to the main thread\n  postMessage(true)\n  close()\n}
\n

Step 3: On to some Explanations about what just happened.

\n

Now, the problem I faced when I went to the club with Hriday was that I (and everyone else after me) had to wait for my registration process to complete. We don't want that to happen to our virtual club and therefore we added one more person (thread) who is in charge of the whole registration process. Once registration is done, he will tell the main guy(thread) to let the new person in.

\n

Here's what we did to solve it in our code.

\n
    \n
  1. First of all we check for each person if they are a member or not. If they are, we let them in.
    2. \n
  2. If someone is not a member of the club yet, we create a worker thread for it using new Worker('path to worker code') and pass that person to the worker thread using worker.postMessage() and add the person as a member after registering them.
    3. \n
  3. To simulate the registration process we are doing some processing using a long while loop. In real life this could be some cryptographic code, image processing or anything that is CPU intensive and might block the main thread and make the page unresponsive.
    4. \n
  4. Once registered, the worker thread let's the main thread know about it by sending data using postMessage and the main thread listens for it using onmessage handler and lets the person in the club i.e add to DOM.
    5. \n
  5. Once we get the result from the worker thread, we close it using close().
    6. \n
\n

Web Workers FAQs

\n

How do the main thread and worker threads talk to each other?

\n

They talk to each other by message passing. Both workers and the main thread use postMessage to send data to each other and onmessage event handler to get data. The data is available inside the event's data property.\nYou can only pass one argument to postMessage. If you wish to pass multiple arguments use an object instead.

\n

Can I update DOM in a worker thread or access window object?

\n

No you can not update DOM in a worker thread as worker threads run in a separate context from the main window and don't have access to window object and document object but they do have access to some of the window object's capabilities like Websockets and indexedDB.

\n

Why did you add worker code in a separate file?

\n

It's important that the worker code must be in a separate file, which we can use to create a separate worker thread by using the Worker constructor and passing it the path of the file.

\n

Why did you add that button? I can easily click it.

\n

You were able to click that button because we did not block the main thread.\nTo see the difference add the following code to main.js and see the difference.

\n
const persons = [\n  {\n    name: "Joe",\n    isMember: true,\n  },\n  {\n    name: "Hriday",\n    isMember: true,\n  },\n  {\n    name: "Hridayesh",\n    isMember: false,\n  },\n  {\n    name: "Bob",\n    isMember: true,\n  },\n  {\n    name: "Daisy",\n    isMember: true,\n  },\n]\n\n// Our club container\nconst club = document.getElementById("club")\nlet worker\n\nfunction entry() {\n  persons.forEach(person => {\n    const { isMember, name } = person\n    const listItem = document.createElement("li")\n    listItem.textContent = name\n    if (!isMember) {\n      let memeberAdded = registerMember(person)\n      if (memeberAdded) club.appendChild(listItem)\n    } else {\n      club.appendChild(listItem)\n    }\n  })\n}\n\nentry()\n\nfunction registerMember(member) {\n  let i = 0\n  while (i < Math.pow(10, 10)) {\n    i++\n  }\n  return true\n  close()\n}
\n

Could you still click the button?

\n

You can share that answer in the comment section 😉 To get the full code you can visit to Github Repo

\n

Conclusion

\n

We introduced web workers in this article, a technology that helps the web industry keep up with demanding web applications. This is achieved by providing web apps with a way to exploit multiprocessor and multi-threaded machines by granting JavaScript some multi-threaded superpowers.

\n

Do you have any tips on web workers and the web as a forum for programming? Let us know in the comment section below.

\n","frontmatter":{"date":"September 09, 2020","updated_date":null,"title":"Web Workers: How to add multi-threading in JS","tags":["JavaScript","Web"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/2e0bb83a49cc5eb5b04a62c51cf495bb/58556/cover.webp","srcSet":"/static/2e0bb83a49cc5eb5b04a62c51cf495bb/61e93/cover.webp 200w,\n/static/2e0bb83a49cc5eb5b04a62c51cf495bb/1f5c5/cover.webp 400w,\n/static/2e0bb83a49cc5eb5b04a62c51cf495bb/58556/cover.webp 800w,\n/static/2e0bb83a49cc5eb5b04a62c51cf495bb/99238/cover.webp 1200w,\n/static/2e0bb83a49cc5eb5b04a62c51cf495bb/135cd/cover.webp 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Hridayesh Sharma","github":"vyasriday","avatar":null}}}}]}},"pageContext":{"tag":"Web"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}