DEV Community: Sualeh Muhammad

Library Vs FrameWork

Sualeh Muhammad — Wed, 09 Nov 2022 20:59:10 +0000

LIBRARY

A library is a collection of prewritten code that can be used to simplify tasks. The term library simply refers to a collection of code that is reused repeatedly. It is essentially a set of pre-defined functions and classes that programmers can use to simplify their work and speed up the development process. So, developers do not have to write code to accomplish specific functionality because the library already includes code for those functionalities.

FRAMEWORK

A framework is like the foundation upon which developers build applications for specific platforms. It includes reusable pieces of code written to perform common tasks and uses code provided by a developer for custom functionality. The framework may include defined and undefined objects and functions that developers can use to create applications. In that way, we can add significant functionality to the system by using existing code around the structure.

Differences Between Them

*Collection *

Generally, libraries are a collection of helper modules, objects, classes, functions, message templates, pre-written code, etc.

Frameworks consist of a lot of APIs, compilers, toolsets, support programs, libraries, etc.

Code Modification

Codes in libraries are geared toward a particular program or to solve a specific development problem. Therefore, developers must modify library code to meet their needs.

Despite the fact that frameworks generate new codes for developers. These codes cannot be altered or modified later. Unlike libraries, frameworks do not allow users to modify their pre-written codes, so you don’t have to worry about deleting or changing them.

Performance

Less code is required to build libraries, which leads to faster loading times and better performance.

Developing a framework requires a lot of coding, which increases loading times and decreases performance.

Function

In Library program linking and binding process, they play an important role.

you can build and deploy applications in a standard way as the framework already provides code to perform common tasks and uses code provided by a developer

Benefits

Library ()=> {
Good code quality, reusability, and control, enhanced speed and performance of the program, etc.
}

FrameWork ()=> {
Faster programming, support from the community, great support for MVC (Model View Controller) pattern, etc.
}

What is React ?

Sualeh Muhammad — Wed, 09 Nov 2022 19:49:49 +0000

Today, front-end frameworks and libraries are becoming an essential part of the modern web development stack. React.js is a front-end library that has gradually become the go-to framework for modern web development within the JavaScript community.

The React.js framework is an open-source JavaScript framework and library developed by Facebook. It’s used for building interactive user interfaces and web applications quickly and efficiently with significantly less code than you would with vanilla JavaScript.

React allows developers to use individual parts of their application on both the client and server sides, and any changes they make will not affect the application’s logic. This makes the development process extremely fast. The use of HTML tags and JS codes makes it easy to work with a huge dataset containing DOM.

React acts as an intermediary that represents the DOM and helps you decide which component requires changes to get accurate results.React is incredibly user-friendly and makes any UI interactive. It also allows you to quickly and efficiently build applications, which is time-saving for clients and developers alike. One-way data-binding in react implies that absolutely anyone can trace all the changes that have been made to a segment of the data. This is also one of the reasons that makes React so easy.

Difference Between SPA vs MPA - Single Page Application vs Multiple Page Application

Sualeh Muhammad — Wed, 09 Nov 2022 19:35:01 +0000

SPA - Single Page Application

A single-page application is a more modern approach to app development. Single Page application is application that allows you to work inside a browser & does not require any reloading while fetching data. SPA has a dynamic nature of loading so instead of render new page , server just send you your required data. The SPA wil use that data to render some part of page directly to browser.

MPA - Multiple Page Application

When MPAs react to your input or has to display some new content, it requests a new HTML page from the server. After receiving the markup, the browser renders the new page causing it to reload.The multi-page design pattern requires a page reload every time the content changes. It’s a preferred option for large companies with extensive product portfolios, such as e-commerce businesses.

Which One to Choose ? SPA vs MPA .

SEO - Search Engine Friendly

MPAs will be far more SEO friendly than SPAs that's because MPA can be used to create multiple pages which mean you can target a greater numbers of keywords.

SPAs are also technically not quite well adapted to the way search engines work. JavaScript, in which SPAs are developed, is not recognized by search engines mostly.

SPEED

SPAs load faster because it loads the majority of app resources just once.The page doesn’t reload entirely whenever the user requests a new piece of data.

MPA is slower as the browser must reload the entire page from scratch whenever the user wants to access new data or moves to a different part of the website. it can be sluggish if the user doesn’t have an optimal connection or if the server isn’t responding well.

USER EXPERIENCE

A good user experience is no longer an option but a requirement. SPA’s are more mobile-friendly, which is worth remembering as a lot of traffic comes from mobile devices .SPAs allow continuation, mobile-friendliness, and ease of access.

if creating an optimized information architecture is your priority to power a better user experience, then you need to opt for an MPA.You can create as many pages as required, and you can include as much information on a page as you need without any limits.

EASE OF DEVELOPMENT

MPAs require more time in development since they are more complex and larger than SPAs. Another major factor the development process for MPAs is the heightened interaction it needs to have between its front end and back end, each of which requires a separate framework.

In a SPA, the front and backend are not that inter-related which effectively means you can have teams working on both fronts simultaneously, thus allowing you to reach the launch date faster. One of the greatest advantages of SPA’s is the reusable backend code.

Difference Between Import Something From Package VS Import { Something } From Package

Sualeh Muhammad — Sun, 06 Nov 2022 18:46:13 +0000

The difference between import something and import {something} from package is justify by the two export declaration forms.

Name Export
Default Export

Name Export

Name exports are useful to export several values. During the import, it is mandatory to use the same name of the corresponding object.

//app.js

export let language = 'Javascript'

//admin.js

import language from 'app.js'

the above code example of import wouldn't work because app.js not contains any default export , instead it contains name export so will write {language} instead of language while importing in admin.js .

import {language} from 'app.js'

above line of code is the correct syntax while importing name exports , remember that in this case the name you assign matters while importing because you are importing specific thing by it's export name.

Default Export

Default exports are useful to export only a single object, function, variable. During the import, we can use any name to import.

//app.js

let language = 'Javascript'
export default language;

//admin.js

import language from 'app.js'

import anything from 'app.js'

The above code is the example of importing the default exports. In default export case assign value while importing will not enclosed in curly brackets { }. Otherwise it wouldn't work.
In this matter no matter what you name assign while importing because it will always resolve to whatever is something default export of app.js

A module can only have one something default export, but as many named exports as you like. You can import them together