How JavaScript helps to develop modern web applications?

YESHWANTHINI S
Techiepedia
Published in
5 min readApr 19, 2021

Let’s see about How does the JavaScript technology and JavaScript frameworks that mainly preferred to build awesome user experience especially full-stack development.

Credit: Google Images

Applications(logical integration of program) that we developing are more user friendly, upgraded periodically, secure accessibility of modern web technologies, centralized web apps updates and smooth implementation by software architectures. Because of code once, run everywhere concept.

How it will runs?

In a traditional approach, a company will maintain the iOS team, android team, web team, desktop team for developing web applications. Here, cost of operation, effectiveness, and difference in UI, business logic are also considered. So, we move to cross-platform — the web team will generate some modules (related to business logic) and those modules are re-used in other teams. This happens when the framework is developed. Due to this, the design of applications that are compatible with any operating system or devices are achieved by eliminating the need of writing separate platform-specific applications.

What is web framework and why we need?

A web framework -to provide a common structure for the application so developers can re-use the code instead of redoing it. It includes web APIs, web resources, and web servers that support the creation, development, and implementation of web applications or websites.

The front-end framework (client-side framework) manages the external part (user input) and the back-end framework(server-side framework) manages the internal part (control and manage of user data) of the application. Also, web framework mostly depends on software architectures like MVC.

Server-side Frameworks

  1. C# — NET
  2. JavaScript— Express.js
  3. Python — Django
  4. Java — Spring Boot

Client-side Frameworks

  1. React.js
  2. Vue.js
  3. Angular.js

We know server-side frameworks take care of business logic, database control, and data handling and management. Client-side frameworks take care of the frontend (User interface). Due to these separations, we can develop single-page applications smoothly.

JavaScript technology overview

25 years ago, JS was appeared. Most of the client side web pages are developed using JS. It supports event-driven. Due to this, rich web applications and interactive websites are created.

How developers use JS for Web Applications?

We know JS is a client-side programming language but we can use JS in server side, runtime environment. This is done by JS frameworks.

We know when the webpage is loaded, the browser will generate Document Object Model (HTML-DOM). It is an object model for html. So that only JS code are embedded with html script tags. If we write raw JS code and open in browser then it won’t execute and shows the code on browser.

Credit: Google Images

But HTML-DOM are API(Application programming Interface) in JS. Because we can add/remove/edit HTML — elements, attributes, CSS styles and events.

There is a concept called ECMAScript (European Computer Manufacturer’s Association) is a standard for scripting language and used for client-side scripting. Now, it is used with Node.js for implementing server applications and services. So, the developer can develop cross-platform applications or runtime using JS frameworks.

Credit: W3Schools

Mostly, full stack developers prefers C# or JS to develop an application. In these kind of development different technology stacks are used. For eg:

  1. JS : MERN — MongoDB (database), Express.js (back-end), React.js (front-end), Node.js(Runtime environment).
  2. C# : ASP.NET Core — Razor, Blazor, MVC and SQL SERVER(database).

Here we consider MERN in which Express.js, React.js, Node.js are JS frameworks. So, the stack has a common language (i.e. JavaScript) and better efficiency. Hence, JS developers can program a browser using JS, jQuery, React.js and program a server using Express.js, Meteor.js and program a runtime environment using node.js and program an MVC web application using sails.js.

Credit: npmtrends
Credits: npmtrends

We know React.js (maintained by Facebook) uses JSX(JavaScript XML) to write HTML which is not JavaScript nor HTML. Actually, JSX allows developer to write HTML in JS and place it in DOM( translated into regular JavaScript at runtime). Also, JSX comes from ES6 (ECMAScript-2015). React uses Babel to convert JSX to regular JavaScript. Angular.js (Google) is written in TypeScript(TS — superset of JS).

JSX Snippet

Considerations

When we discuss the programming languages or web frameworks that your developer friend may choose, there will be a list. Since, each programming language has its features, uniqueness, and user. Beyond user’s or stakeholder’s interest in a particular programming language, there is a point where companies have to think about data security, manipulation, and handling features.
Also, many companies consider technologies like single-page applications, progressive web apps (PWA), web assembly, etc.

For eg:
When web developers used HTML, CSS, PHP, then full-stack developers who need to develop single-page applications will prefer to go with frameworks like bootstrap, material — UI, React.js, Express.js. So, different programming languages, frameworks are preferred by developers.

📖Related Resources:

  1. Illustration about MERN stack.
  2. What you need to know about Node.js!

--

--