---
title: "Example Code Comparison"
url: https://docs.catalyst.zoho.com/en/sdk/javascript/v1/examples/
description: "Catalyst offers you JavaScript SDK in a modular architecture, providing you with a singular SDK for browser and server operations."
last_updated: 2026-09-09T10:45:38Z
service: All Services
type: general
related_links:
  - name: "Java SDK"
    url: /en/sdk/java/v1/overview/
  - name: "Python SDK"
    url: /en/sdk/python/v1/overview/
  - name: "iOS SDK"
    url: /en/sdk/ios/v2/overview/
  - name: "Android SDK"
    url: /en/sdk/android/v2/overview/
  - name: "Flutter SDK"
    url: /en/sdk/flutter/v2/overview/
  - name: "REST APIs"
    url: /en/api/code-reference/general/projects/create-new-project/#CreateNewProject
  - name: "Catalyst Functions"
    url: /en/serverless/help/functions/introduction
repository:
  name: "Repository"
  url: https://github.com/catalystbyzoho/zcatalyst-sdk-js
---

# Example Snippets Highlighting Optimizations with Modular SDK

The following snippets are examples highlighting the differences and advantages that are possible when you use the Modular JavaScript SDK instead of individually using Server SDK for server functionality and Web SDK for browser functionality.

**Server SDK**

### Node Considerations

**Monolithic SDK**

The following snippet installs the entire Catalyst Node.js server SDK to use the Authentication and Stratus components.

```javascript
'use strict';
const catalyst = require('zcatalyst-sdk-node');
module.exports = async (req, res) => {
  var url = req.url;
  const app = catalyst.initialize(req);
  switch (url) {
    case '/stratus': {
      const stratus = app.stratus();
      const bucket = stratus.bucket("bucketName");
      const buckets = await bucket.getDetails();
      console.log(buckets);
    }
    default:
      res.writeHead(404);
      res.write('You might find the page you are looking for at "/" path');
      break;
  }
  res.end();
};

```

**Modular SDK**

Now, in the **Modular JavaScript SDK**, to use the required Authentication, and Stratus component, you are going to initialize those modules.

```javascript
'use strict';
const { IncomingMessage, ServerResponse } = require("http");
const { zcAuth } = require('@zcatalyst/auth');
const { Stratus } = require('@zcatalyst/stratus');
/**
 * @param {IncomingMessage} req
 * @param {ServerResponse} res
 */
module.exports = async (req, res) => {
  var url = req.url;
  switch (url) {
    case '/stratus':
      const auth = await zcAuth.init(req);
      const stratus = new Stratus();
      const bucket = stratus.bucket("bucketName");
      const buckets = await bucket.getDetails();
      console.log(buckets);
      break;
    default:
      res.writeHead(404);
      res.write('You might find the page you are looking for at "/" path');
      break;
  }
  res.end();
};

```

**Web SDK**

### Browser Considerations

**Monolithic SDK**

The following snippet installs the entire WebSDK just to use the Authentication component.

```javascript
<script src="https://static.zohocdn.com/catalyst/sdk/js/4.6.2/catalystWebSDK.js"></script>
<script src="/__catalyst/sdk/init.js"></script>
<script>
  catalyst.auth.signIn("your element ID here...");
</script>

```

**Modular SDK**

Now, in the **Modular JavaScript SDK**, to use the required Authentication component, you are going to initialize the Authentication module.

```javascript
<script type="module">
  import { zcAuth } from 'zcatalyst.js';
  const config = {
    cssUrl: "/css/embeddediframe.css", // Provide your custom CSS file path here. If no path is provided default css will be rendered
    serviceUrl: "/app/index.html", // This value is optional. You can provide your redirect URL here.
    isCustomizeForgotPassword: true, // Default value is false. Keep this value as true, if you wish to customize Forgot Password page
    forgotPasswordId: "forgotPasswordDivElementId", // The Element id in which forgot password page should be loaded. If no value is provided, it will be rendered in the "loginDivElementId" by default
    forgotPasswordCssUrl: "/css/forgotPwd.css" // Provide your custom CSS file path for the Forgot Password page. If no path is provided, then the default CSS will be rendered.
  };
  zcAuth.signIn("element_id", config);
</script>

```