JavaScript Ecosystem

npm can invoke other scripts and act as a build tool due the scripts

Babel started as a tool for programmers to write their apps using the awesome new ES6 features, while shipping code that older browsers and Internet Explorer could support

transpiling »
process of translating one language or version of a language to another is called transpiling,
a portmanteau of translating and com*piling

Javascript Modules

ESM (ECMAScript modules) are the official standard format to package JavaScript code for reuse. node.js supports it after v12 but we can use it even before with the help of the Webpack

Unused and older formats:

• CJS (CommonJS Modules) Main use: server. Were standard Node.js modules. Were gaining traction on the frontend with Browserify.
• AMD (Asynchronous Module Definition) Main use: browsers, frontend. The most popular implementation of this standard is RequireJS
• UMD (Universal Module Definition) predecessor to ESM

Packer?

Webpack bundles our app and its dependencies into a single file. It can also allow us to use ESM import syntax also on server side.

Server Side Frameworks (Next.js)

Frameworks to add SSR

Lightweight framework for static and server-rendered React.js applications.

Without the question, Next.js is by far the most popular.

Those are all server side framework, just like Express, Koa, Hapi, etc, but they have some form of SSR (Server-side Rendering), even Serverless-side rendering, and building static web applications using React/Vue/Angular.

Next.js is the solution built on React, and Nuxt.js is for Vue developers, and Nest.js which is heavily inspired by Angular

Data layer

• Relay couples React with GraphQL.

Tooling danas u 2023?

Slučajno sam otkrio, pa proveri pnpm vs npm

Detaljno ovo pregledaj…

New front-end frameworks like Solid and Qwik are suggesting that React might not have all the answers after all, and on the server Astro, Remix and Next.js (among others) are making us reconsider how much code we really need to ship to the client.

Shvatam malo toolove:

https://2022.stateofjs.com/en-US/libraries/monorepo-tools/

front-end frameworks vs rendering frameworks

Monorepo tools: pnpm vs Turborepo, in other: Bun

Build Tools: Vite | alt: Rome, Turbopack, in other: Bun

Cross-platform mobile devices and desktop Javascript: Tauri? or Flutter| alt: React Native, Electron Testing, Tools for testing your code: Jest, Vitest, Playwright

Engines/runtimes/execution environments:

Server language: Go Client side: Rust (plus can compile WebAssembly) Cross-platform Native Speed: Flutter (using Dart similar to JavaScript) + maybe a little of Rust

What is “monorepo”

Monorepository consists of multiple isolated code repositories all housed in one repository in order to avoid managing multiple repositories.