A Note on Mongoose & MongoDB

Tonmoy Talukder — Fri, 24 Dec 2021 07:14:47 +0000

Mongoose is a JavaScript framework that is often used with a MongoDB database in Node.js applications.

What Is MongoDB?

Let's have a look at MongoDB first. MongoDB is a database that keeps your information in the form of documents. Most of the time, these documents have a JSON-like structure:

{ firstName: "Jamie", lastName: "Munro" }
After that, a document is added to a collection. The document example above, for example, defines a user object. This user object would subsequently be included in a collection named users.

MongoDB's versatility in terms of structure is one of its most important features. Despite the fact that the user object in the first example has a firstName and lastName field, these values are not necessary in every user document in the users collection. This distinguishes MongoDB from SQL databases such as MySQL or Microsoft SQL Server, which require each item to have a well-defined database structure.

Mongoose comes into play when it comes to creating dynamic objects that are saved as documents in the database.

What Is Mongoose?

Mongoose is a Document Object Mapper (ODM). This implies Mongoose may construct objects with a strongly-typed schema that are mapped to MongoDB documents.

Mongoose has a tremendous amount of capability for generating and dealing with schemas. When a property is persisted to MongoDB in Mongoose, it is stored as one of eight SchemaTypes. They are as follows:

String
Number
Date
Buffer
Boolean
Mixed
ObjectId
Array

Each data type allows to specify:

a default value
a custom validation function
indicate a field is required
a get function that allows you to manipulate the data before it is returned as an object
a set function that allows you to manipulate the data before it is saved to the database
create indexes to allow data to be fetched faster

In addition to these standard settings, specific data types provide you even more control over how data is saved and retrieved from the database. A String data type, for example, enables you to define the following extra options:

convert it to lowercase
convert it to uppercase
trim data prior to saving
a regular expression that can limit data allowed to be saved during the validation process
an enum that can define a list of strings that are valid

Both the "Number" and "Date" attributes enable you to set a minimum and maximum value for a field.

You should be acquainted with the majority of the eight data kinds that are permitted. However, you should be aware of a few exceptions, like "Buffer," "Mixed," "ObjectId," and "Array."

Binary data may be saved using the "Buffer" data type. A picture or an encoded file, such as a PDF document, is a popular example of binary data.

The "Mixed" data type transforms the property into a field where "anything goes." Because there is no standard structure, this variable reflects how many developers may use MongoDB. Use caution when using this data type since it disables several of Mongoose's fantastic capabilities, including data validation and detecting entity changes so that the property is immediately updated upon saving.

The "ObjectId" data type is often used to indicate a connection to another document in your database. If you have a collection of books and authors, the book document may include a "ObjectId" attribute that references the document's particular author.

You can store JavaScript-like arrays using the "Array" data type. You can execute typical JavaScript array operations on an Array data type, such as push, pop, shift, slice, and so on.

Summery

MongoDB is a database that allows you to store documents with a dynamic structure. These documents are saved inside a collection.

Mongoose is a JavaScript library that allows you to define schemas with strongly typed data. Once a schema is defined, Mongoose lets you create a Model based on a specific schema. A Mongoose Model is then mapped to a MongoDB Document via the Model's schema definition.

Once you have defined your schemas and models, Mongoose contains many different functions that allow you to validate, save, delete, and query your data using common MongoDB functions.

A Note on JSX

Tonmoy Talukder — Fri, 24 Dec 2021 06:00:07 +0000

What is JSX?

JSX is an XML-like syntax extension to ECMAScript that was introduced in 2013 with React and has no stated semantics. It is NOT designed for engines or browsers to implement. It is NOT a proposal to add JSX to the ECMAScript specification. It's designed to be utilized by different preprocessors (transpilers) to convert these tokens to ECMAScript.

JSX Syntax

<Page index="1"> <h1>About me</h1> <AboutMe content={aboutMeContent} /> </Page>

transpiles to ⇒

React.createElement( Page, { "index": "1" }, React.createElement("h1", null, "About me"), React.createElement(AboutMe, { content: aboutMeContent }) );

As we can see from the above example, JSX is an HTML-like syntax for creating JavaScript that is tied to the virtual DOM.
Under the hood, JSX is converted to a virtual DOM.

Why use JSX?

It has a low barrier to entry. JSX is the closest thing we have to pure HTML and CSS right now. Without learning another templating language or dealing with various layers of abstraction, you can quickly include parts of JavaScript in your templates with JSX. Anyone who is acquainted with HTML, CSS, and JavaScript should be able to read and comprehend JSX templates with ease.
TypeScript support. The compilation of TSX files with type-checking is supported by TypeScript. This implies that if you misspell an element's or attribute type's name, the compilation will fail and an error message will appear, pointing to your error. TSX files are also supported by popular IDEs like VS Code, which provide code completion, refactoring, and other important capabilities.
Security. To avoid attacks like cross-site scripting, JSX takes care of the standard output sanitization difficulties.

Difference between JS and JSX

The JSX syntax is an HTML-like syntax that we can use with React to (theoretically) make creating React components simpler and more natural. The sole goal is to make creating React components simpler. There isn't much more to say. Creating huge, hierarchical HTML pages using JS syntax would be a pain in the neck without JSX; JSX merely simplifies the process.

DEV Community: Tonmoy Talukder