DEV Community: Shahin Islam

Forgot Your Ex(press). Make It Your Next. Deno: NextGen JavaScript Runtime - @a4arpon

Shahin Islam — Sun, 07 Jul 2024 18:16:09 +0000

Intro

In the world of web development, Node.js and Express have long been the go-to solutions for building server-side applications. Their popularity is undeniable, bolstered by a vast ecosystem and extensive community support. However, just because a technology is popular doesn't necessarily mean it's the best choice for every project. Enter Hono and Deno—a powerful combination that offers a compelling alternative to Node.js and Express. Let's explore why you might want to consider making the switch.

Node.js and Express: Not the Only Solution

The Appeal of Node.js

Node.js revolutionized server-side development by enabling JavaScript to run on the server, creating a unified language for both frontend and backend. Its non-blocking, event-driven architecture handles multiple connections efficiently, making it a popular choice for high-performance applications. The extensive npm ecosystem provides a wealth of libraries and tools, accelerating development.

The Challenges of Node.js

Despite its advantages, Node.js has its share of problems. Its asynchronous nature can lead to callback hell, making code harder to maintain. The single-threaded event loop can struggle with CPU-intensive tasks, causing performance bottlenecks. Heavy reliance on third-party packages can introduce security vulnerabilities and complicate dependency management.

Now Forgot Your Ex (Why Deno Instead of Fixing Node.js)

Deno was created to address these fundamental issues. Rather than patching Node.js, Deno offers a fresh start with a focus on security, simplicity, and modern features. It runs in a secure sandbox by default, requires explicit permissions for file, network, and environment access, and eliminates the need for a centralized package manager by using URLs for module imports. Deno also has built-in TypeScript support and a more modern API, reducing complexity and boosting productivity.

Hono and Deno: A Superior Combination

Built on Web Standards

Both Hono and Deno are built on web standards APIs, ensuring compatibility and ease of use. Hono’s edge runtime architecture offers exceptional performance, surpassing Express in speed and efficiency when combined with Deno.

Comprehensive Plugin Support

Hono boasts a wide range of plugins, comparable to those available for Express. These plugins are actively monitored and maintained by the community and developers, ensuring reliability and up-to-date functionality. You can explore and integrate these plugins from the Hono website.

Enhanced Security and Regular Updates

Hono and Deno are designed with security in mind. Regular updates and improvements by their official developers ensure that these technologies remain secure and cutting-edge. The proactive development approach keeps them ahead of potential vulnerabilities and introduces new features to enhance developer experience.

Improved Developer Experience with Deno

Deno offers a streamlined developer experience. It simplifies configuration by providing built-in support for tools like TypeScript, Prettier, and ESLint. This means you can start a new project and begin writing code without worrying about external configurations, saving valuable development time.

Why Stick with Node.js and Express?

While Node.js and Express have served the development community well, it's important to recognize that they are not the only solutions available. Hono and Deno present a modern, efficient, and secure alternative that addresses many of the shortcomings of their predecessors. By adopting these technologies, developers can benefit from a more streamlined, productive, and secure development experience.

Who Should Use This Starter Kit?

This Deno starter kit is designed for developers with advanced experience in Node.js, TypeScript, and an understanding of Deno's architecture. It is not intended for newcomers or those unfamiliar with these technologies. To effectively use this kit, you should have a minimum depth of knowledge about the similarities and differences between Deno, Hono, Node.js, and Express.

Deno Starter Kit Overview

GitHub Repo:

Deno Back-End Starter Kit

Key Features

Well-organized and structured API setup
Pre-configured middlewares for logging, CORS, and security
Ready-to-use database connection with Mongoose
Standardized response and error handling mechanisms
Flexibility to add plugins and change database drivers as needed

.
├── deno.json            # Deno configuration file
├── deno.lock            # Lock file for dependencies
├── README.md            # Project documentation
└── src
    ├── config           # Configuration files
    │   └── helmet.config.ts
    ├── main.ts          # Main application entry point
    ├── models           # Database models
    │   └── user.model.ts
    ├── routes           # API route definitions
    │   ├── router.ts
    │   └── stable.routes.ts
    ├── middlewares      # Application guards and middlewares
    ├── services         # Business logic and services
    │   └── users.services.ts
    ├── types            # Type definitions
    │   └── shared.types.ts
    └── utils            # Utility functions
        ├── async.ts
        └── response.ts

Conclusion

The combination of Hono and Deno offers a compelling alternative to Node.js and Express. With better performance, enhanced security, and a more streamlined developer experience, it's time to consider making the switch. This Deno starter kit provides a solid foundation for building modern, efficient, and secure applications. However, it is best suited for experienced developers who understand the intricacies of these technologies.

Deno : Let's Make JavaScript Uncomplicated. A Powerful NextGen JavaScript Runtime

ByteDance’s RsPack: The Future of Web Bundling

Author

Mr. Wayne

Facebook

Website

GitHub

ByteDance’s RsPack: The Future of Web Bundling || Shahin Islam Arpon || a4arpon

Shahin Islam — Tue, 02 Jul 2024 17:21:18 +0000

ByteDance and JavaScript

Web development is always changing, and ByteDance, the company behind TikTok and CapCut, is leading the way with a new tool called RsPack. This tool promises to make developers' lives easier by solving common problems with bundling JavaScript. Here's what you need to know about RsPack.

Why RsPack?

ByteDance relies heavily on JavaScript for many of its products. However, they ran into issues with their current bundling tool, Webpack, especially with Node.js compatibility. To solve these problems, ByteDance created RsPack, a new bundler that’s fast, efficient, and designed to work seamlessly with existing tools.

What Makes RsPack Special?

Speed and Performance

Fast Startup: RsPack combines TypeScript and Rust with a parallelized architecture, which means it starts up quickly, making the development process smoother.
Lightning HMR: It offers superior Hot Module Replacement (HMR) performance, which is crucial for large projects. This means changes you make in the code appear almost instantly in the browser.

Compatibility

Webpack Compatible: RsPack works with existing Webpack plugins and loaders, so developers can easily switch without having to redo their setup.
Module Federation: It supports Module Federation, which helps in developing large-scale web applications by allowing multiple independent builds to work together.

Production Optimizations

Integrated Optimizations: RsPack has built-in optimizations like tree shaking and minification, which improve the performance and size of your final build without needing extra plugins.
Framework Agnostic: It’s not tied to any specific frontend framework, so it can be used with any project.

Real-World Impact

ByteDance created RsPack because their existing tools were slowing them down. Their production build times could take up to half an hour, and starting the development server often took several minutes. RsPack was designed to solve these issues with:

Quick Dev Mode Startups: Developers often run npm run dev many times an hour. RsPack ensures these startups are fast, keeping productivity high.
Speedy Builds: In Continuous Integration/Continuous Deployment (CI/CD) pipelines, every second counts. RsPack significantly reduces build times, speeding up the entire deployment process.
Flexible Configuration: RsPack maintains the flexibility of Webpack, allowing developers to customize it to fit their specific needs without high migration costs.

Conclusion

RsPack is ByteDance's answer to the limitations they faced with current bundling tools. It promises faster startup times, better performance, and easy integration with existing setups. As ByteDance prepares to release RsPack to the public, developers around the world are eager to try this new tool and experience its benefits firsthand.

Stay tuned for more updates on RsPack, and get ready to explore a new era of efficient and powerful web development!

Author

Shahin Islam Arpon

Facebook
Portfolio
GitHub
LinkedIn

Deno : Let's Make JavaScript Uncomplicated. A Powerful NextGen JavaScript Runtime

Shahin Islam — Tue, 25 Jun 2024 07:35:51 +0000

What is JavaScript Server Side Runtime

A JavaScript server-side runtime allows JavaScript to run on the server, letting developers use JavaScript for backend development. This means you can use the same language for both the frontend and backend, making web development more consistent and efficient.

Why People Use Node.js

Node.js is popular because it handles multiple connections efficiently with its non-blocking, event-driven architecture. It allows developers to use JavaScript on the server-side, providing a unified language for the entire application. Its large ecosystem, with npm, offers a wealth of libraries and tools, speeding up development.

What Problems Node.js Creates in a Project

Node.js can make projects complicated due to its asynchronous nature, leading to issues like callback hell, which makes code harder to maintain. Its single-threaded event loop can also cause performance issues in CPU-heavy tasks. Additionally, relying heavily on third-party packages can pose security risks and make dependency management challenging.

Why Deno Came Instead of Fixing Node

Deno was created to tackle the fundamental issues in Node.js, like security flaws and complex package management. Instead of patching Node.js, Deno offers a fresh approach with better security, built-in TypeScript support, and a simpler module system to make development easier and safer.

What It Solves

Deno improves security by running in a secure sandbox by default and requiring permissions for file, network, and environment access. It gets rid of the need for a centralized package manager by using URLs for module imports. It also has built-in TypeScript support and a more modern API, reducing complexity and boosting productivity.

Why People Are Facing Problems Adopting It

Switching to Deno is challenging because it's not compatible with existing Node.js modules, meaning projects need to be rewritten or adapted. The shift from npm to URL-based imports has a learning curve. Plus, since Deno is relatively new, it has a smaller community and fewer third-party libraries compared to Node.js.

How Deno is Solving Adoption Problems

Deno is making the transition easier by providing tools and documentation to help developers move from Node.js. It offers compatibility layers and conversion tools for migrating existing projects. The active community and ongoing improvements are making the ecosystem more attractive for developers.

What is the Current Stage of Deno

Deno is now in a stable phase with regular updates and a growing ecosystem. More projects are starting to use it, especially those that prioritize security and modern JavaScript features. The community is growing, contributing more libraries and tools, which makes Deno a stronger alternative to Node.js.

Why People Are Starting to Use It in This Era

People are adopting Deno because of its improved security model, built-in TypeScript support, and modern API design. As web development evolves, Deno’s approach fits well with current best practices. With active development and strong community support, Deno promises a robust future, encouraging more developers to make the switch.

Deno's New JavaScript Registry: JSR

Deno also addresses the URL problem with a new JavaScript registry called JSR, which you can think of as a modern version of npm. JSR supports ES modules, TypeScript, and multiple runtimes, including browsers. This means you no longer need to use URL patterns, and npm packages are now compatible with Deno.

Simplified Configuration with Deno

Working with Node.js often involves wasting time on configuring TypeScript, Prettier, ESLint, and other tools. Deno simplifies this by offering built-in support for these tools. It's a straightforward solution: just start a new project and begin writing code without worrying about external configurations. Deno is designed to streamline your development process.

Author:

Mr. Wayne
Social:
Facebook
GitHub
LinkedIn
Portfolio

Upscale Your React App Into Next Level

Shahin Islam — Sun, 10 Mar 2024 17:21:39 +0000

A Professional React Project Setup With BiomeJS, Bun and Vite

Intro

Like angular and vue react don't have any specific folder structure. But if you want to make a production grade web app with industry best practices. There are thousands of structures available online for react projects but today I'm teaching you another one. In this project we will choose our packages which are type safe and latest also. Listen carefully this is my own reactive project peradiam. I'm not arguing with anyone about why I use this instead of the sampler one or why I didn't use traditional packages to extend the react app. I am a huge performance freak. Every second of performance and memory byte is important for me. And I structure my project in the way that I can push updates in future without messing up with everything.

Technologies

Initiate Project With Vite

bunx create-vite

Install Dep

bun add lucide-react react-helmet-async appwrite @nextui-org/react framer-motion @tanstack/react-router

Install Dev Dep

bun add --dev tailwindcss postcss autoprefixer @tanstack/router-vite-plugin @types/bun @biomejs/biome

Config Setup

Vite Config For Project `vite.config.ts`

// vite.config.ts

// ....
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // ...,
    // Split Vendor Chunk 
    splitVendorChunkPlugin(),
    // Tans Stack Router Config
    TanStackRouterVite()
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

TypeScript config file `tsconfig.json`


{
    // Extra for aliases
    "paths": {
      "baseUrl": ["."],
      "@/*": ["./src/*"]
    }
}

Setting up Tailwind CSS in a Vite project.

bunx tailwindcss init -p

tailwind.config.js

const {nextui} = require("@nextui-org/react");

export default {
  content: [
    "./index.html",
    "./src/**/*.tsx}",
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui()],
}

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Next Theme Provider

    <NextUIProvider>
      <YourApplication />
    </NextUIProvider>

biome.json

{
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "style": {
        "noVar": "error"
      },
      "correctness": {
        "noUnusedVariables": "warn"
      }
    }
  },
  "formatter": {
    "enabled": true,
    "indentWidth": 2,
    "indentStyle": "space",
    "lineWidth": 80,
    "formatWithErrors": false
  },
  "javascript": {
    "formatter": {
      "semicolons": "asNeeded",
      "trailingComma": "es5",
      "jsxQuoteStyle": "double"
    }
  },
  "files": {
    "ignore": ["routeTree.gen.ts"]
  }
}

Things I will follow if I hire any Front End Developer in 2024

Shahin Islam — Fri, 16 Feb 2024 18:09:33 +0000

If I hire for my company or any of my known person or his team this year, then the following requirements must be followed:

1. Design-Driven, Deeply Technical Talent:

I seek individuals who demonstrate genuine enthusiasm for web design and possess a robust understanding of front-end frameworks. Superficiality doesn't suffice; I value those who grasp the internal workings of browsers and their interactions with front-end development.

2. Beyond Boot Camps: Experience Matters:

While bootcamps can offer a starting point, I emphasize real-world experience and mastery over short-term training. I prioritize candidates who exhibit a solid understanding of JavaScript's core functionalities and principles.

3. Mastering React's Core and Hooks:

In-depth knowledge of React's core concepts and hooks is essential. While encyclopedic knowledge isn't necessary, I seek developers who demonstrate a profound understanding of these crucial elements.

4. Building Reusable Components and Library Awareness:

The ability to design reusable components and proficiency in contemporary JavaScript-based component libraries are highly desirable. This skill showcases foresight and an understanding of efficient development practices.

5. Client-Server Differentiation:

A clear understanding of the distinction between client-side and server-side development is crucial for effective collaboration and problem-solving within web applications.

6. Staying Ahead of the Curve: React Rendering Optimization:

Knowledge of React's re-rendering behavior and strategies for optimization showcases a commitment to best practices and performance improvement.

Beyond the Basics: Advanced Skills and Future-Proof Development:

1. Progressive Web Apps: A Valuable Plus:

While not mandatory, expertise in Progressive Web Apps is a sought-after skill. In today's mobile-first environment, it gives us the flexibility to deliver enhanced user experiences across platforms.

2. React Native Mastery for Mobile Expansion:

Given the significant role React Native plays in contemporary mobile development, proficiency in this framework would be a major advantage. It signifies adaptability and expertise in building cross-platform mobile applications.

Follow For Next Part:
Dev.to
Facebook
X @a4arpon

Behind the Screens: How Your App's Back-end Works

Shahin Islam — Thu, 28 Dec 2023 05:55:17 +0000

Ever wondered what happens when you tap that button on your favorite app? How does it magically fetch your information or place that order? Well, it's time to take a peek behind the curtains and meet the unsung hero: the enterprise back-end!

Imagine a busy restaurant kitchen...

Think of the backend as a super-efficient kitchen, handling a constant flow of orders (requests) from customers (you!). Here's a step-by-step journey of how it works:

The Order Arrives: When you tap that button, it's like placing an order with the kitchen. The request first meets the friendly HTTP server, who takes note of the order and passes it along.
Global Middleware, the Head Chef: The global middleware, like a head chef, checks every order for basic requirements. Is it complete? Does it make sense? If not, it gets sent back with a helpful note for the customer.
Finding the Right Cook: Each request has a specific destination, like a dish on the menu. The route, like a skilled maître d', guides the request to the right controller, the expert chef who knows just what to do.
Chef's Prep Work: The controller gets organized, double-checking the order for accuracy (validation) and calling on any specialized third-party services needed, like a pastry chef for those fancy desserts.
Cooking Up the Magic: Now comes the heart of the kitchen, the business logic. This is where the real cooking happens, applying the app's unique recipes to transform ingredients into delicious results.
Handling Any Spills: Even the best chefs have occasional mishaps. The error handling team is always ready to catch any issues and send back a helpful response to avoid a ruined meal.
Plating Perfection: Once the dish is ready, it's time to present it beautifully! The response is carefully crafted and sent back through the same route, ensuring a satisfying experience for the customer.
Secret Ingredients: Sometimes, chefs need extra help from custom pantry items. The business logic might call on custom services to interact with the database, retrieving or storing important ingredients for future use.

And voilà! Your app responds seamlessly, thanks to the tireless work of the backend kitchen. So next time you tap that button, take a moment to appreciate the invisible culinary artistry happening behind the scenes!

A better Back-end Architecture Design fast approach. Part - 1 | Shahin Islam Arpon

Shahin Islam — Sun, 24 Dec 2023 06:37:15 +0000

Components

The main components of a backend application typically include:

Server: The server is responsible for receiving requests from clients and processing them. It handles tasks such as routing, authentication, and data validation.
Database: The database stores and manages the application's data. It can be relational (e.g., MySQL, PostgreSQL) or NoSQL (e.g., MongoDB, Cassandra) depending on the requirements.
APIs: APIs (Application Programming Interfaces) allow communication between different parts of the system. They define how different components can interact with each other.
Security: Backend systems often implement security measures such as encryption, authentication, and authorization to protect sensitive data and ensure secure access.
Caching: Caching is used to improve performance by storing frequently accessed data in memory. It helps reduce the load on the server and speeds up response times.
Background Processing: Some backend applications require background processing for tasks such as sending emails, generating reports, or performing time-consuming operations.
Logging and Monitoring: Logging and monitoring tools are used to track and analyze the system's performance, identify issues, and ensure smooth operation.

These components work together to create a robust and efficient backend system.

Checklist

API Development Checklist for Developers

Understand the requirements and purpose of the API
Define the endpoints and their corresponding HTTP methods
Implement request validation and handle error cases
Design and implement the data models and database interactions
Implement the necessary authentication and authorization mechanisms
Write clear and concise documentation for the API endpoints
Test the API endpoints using a tool like Postman or curl
Handle edge cases and error scenarios gracefully
Implement proper error handling and error messages
Optimize the API for performance and scalability
Implement logging and monitoring for the API
Collaborate with front-end developers to ensure smooth integration with the UI
Follow best practices and coding standards for API development
Document and communicate any changes or updates to the API

Follow for next part.

DEV Community: Shahin Islam

Forgot Your Ex(press). Make It Your Next. Deno: NextGen JavaScript Runtime - @a4arpon

Intro

Node.js and Express: Not the Only Solution

The Appeal of Node.js

The Challenges of Node.js

Now Forgot Your Ex (Why Deno Instead of Fixing Node.js)

Hono and Deno: A Superior Combination

Built on Web Standards

Comprehensive Plugin Support

Enhanced Security and Regular Updates

Improved Developer Experience with Deno

Why Stick with Node.js and Express?

Who Should Use This Starter Kit?

Deno Starter Kit Overview

GitHub Repo:

Key Features

Conclusion

Read More

Author

ByteDance’s RsPack: The Future of Web Bundling || Shahin Islam Arpon || a4arpon

ByteDance and JavaScript

Why RsPack?

What Makes RsPack Special?

Speed and Performance

Compatibility

Production Optimizations

Real-World Impact

Conclusion

Author

Deno : Let's Make JavaScript Uncomplicated. A Powerful NextGen JavaScript Runtime

What is JavaScript Server Side Runtime

Why People Use Node.js

What Problems Node.js Creates in a Project

Why Deno Came Instead of Fixing Node

What It Solves

Why People Are Facing Problems Adopting It

How Deno is Solving Adoption Problems

What is the Current Stage of Deno

Why People Are Starting to Use It in This Era

Deno's New JavaScript Registry: JSR

Simplified Configuration with Deno

Author:

Upscale Your React App Into Next Level

Intro

Technologies

Initiate Project With Vite

Install Dep

Install Dev Dep

Config Setup

Vite Config For Project vite.config.ts

TypeScript config file tsconfig.json

Setting up Tailwind CSS in a Vite project.

Things I will follow if I hire any Front End Developer in 2024

If I hire for my company or any of my known person or his team this year, then the following requirements must be followed:

1. Design-Driven, Deeply Technical Talent:

2. Beyond Boot Camps: Experience Matters:

3. Mastering React's Core and Hooks:

4. Building Reusable Components and Library Awareness:

5. Client-Server Differentiation:

6. Staying Ahead of the Curve: React Rendering Optimization:

Beyond the Basics: Advanced Skills and Future-Proof Development:

1. Progressive Web Apps: A Valuable Plus:

2. React Native Mastery for Mobile Expansion:

Behind the Screens: How Your App's Back-end Works

Imagine a busy restaurant kitchen...

A better Back-end Architecture Design fast approach. Part - 1 | Shahin Islam Arpon

Components

Checklist

Vite Config For Project `vite.config.ts`

TypeScript config file `tsconfig.json`