Open Source Software Archives - Online Code Generator

jQuery lives on; major changes teased

Posted on May 18, 2023May 21, 2023 by Mark FeehilyComments Off

#639 — May 18, 2023

JavaScript Weekly

Bun’s New Bundler: 220x Faster than webpack? — Bun is one of the newest JavaScript runtimes (built atop the JavaScriptCore engine) and focuses on speed while aiming to be a drop-in replacement for Node.js. This week’s v0.6.0 release is the ‘biggest release yet’ with standalone executable generation and more, but its new JavaScript bundler and minifier may attract most of the attention and this post digs into why.

Jarred Sumner

???? If you’d prefer to read what a third party thinks, Shane O’Sullivan gave the new bundler a spin and shared his thoughts. There’s also some discussion on Hacker News. It’s early days and while esbuild may be fast enough for most right now, it’s fantastic to see any progress in bundling.

Deopt Explorer: A VS Code Extension to Inspect V8 Trace Log Info — A thorough introduction to MS’s new tool for performing analysis of the V8 engine’s internals, including CPU profile data, how inline caches operate, deoptimizations, how functions were run (interpreted or compiled) and more. There’s a lot going on.

Ron Buckton (Microsoft)

Supercharge Your Websites and Applications with Cloudflare — Get ready for supercharged speed and reliability with Cloudflare’s suite of performance tools. With ultra-fast CDN, smart traffic routing, media optimization, and more, Cloudflare has everything you need to ensure your site or app runs at peak performance.

Cloudflare sponsor

jQuery 3.7.0 Released — JavaScript Weekly is 638 issues old, or almost 13 years once you take away weeks off, so jQuery was a big deal in our early days. We hold a lot of nostalgia for it, and it remains widely used even if no-one is writing about it anymore ???? v3.7 folds the Sizzle selector engine into the core, adds some unitless CSS properties, gains a new uniqueSort method, and “major changes” are still promised in future. jQuery lives on!

Timmy Willison (jQuery Foundation)

⚡️ IN BRIEF:

TC39’s Hemanth.HM has begun keeping a list of ES2023 code examples like he did for ES2022, ES2021, and ES2020.

???? The New Stack has a story about Meta supporting the OpenJS Foundation – but who wrote the article is what we found more interesting..

The folks at Meta / Facebook have written about the efficiency gains made in Messenger Desktop by moving from Electron to React Native.

One downside to platforms like Cloudflare Workers using V8 isolates has been a lack of support for opening TCP sockets – quite an impediement if you want to talk to a RDBMS over TCP or something. Fear no more, Cloudflare Workers has introduced a connect() API for creating TCP sockets from Workers functions.

Promise.withResolvers progressed to stage 2 at the latest TC39 meeting.

RELEASES:

Node.js 20.2

Rome 12.1
↳ The formatter/linter gains stage 3 decorator support.

Ember.js 5.0 – App framework.

Jasmine 5.0 – Testing framework.

Gatsby 5.10

???? Articles & Tutorials

How to Get Full Type Support with Plain JavaScript — It’s possible to reap the benefits of TypeScript, yet still write plain JavaScript, as TypeScript’s analyzer understands types written in the JSDoc format.

Pausly

TypeScript’s own JS Projects Utilizing TypeScript page has more info on the different levels of strictness you can follow from mere inference on regular JS code through to full on TypeScript with strict enabled.

▶ Coding a Working Game of Chess in Pure JavaScript — No canvas, either. All using the DOM, SVG, and JavaScript. No AI and it’s not perfect, but it’s only 88 minutes long and it’ll give you something to work on..

Ania Kubow

Automate Slack and MS Teams Notifications Using Node.js — Quick guide to send and automate messages via Slack, MS Teams, and any other channel from your Node.js applications.

Courier.com sponsor

Your Jest Tests Might Be Wrong — Is your Jest test suite failing you? You might not be using the testing framework’s full potential, especially when it comes to preventing state leakage between tests.

Jamie Magee

A Guide to Visual Regression Testing with Playwright — The Playwright browser control library can form the basis of an end-to-end testing mechanism all written in JavaScript, and comparing the visual output of tests can help show where things are going wrong.

Dima Ivashchuk (Lost Pixel)

Create a Real Time Multi Host Video Chat in a Browser with Amazon IVS

Amazon Web Services (AWS) sponsor

React Server Components, Next.js App Router and Examples — Addy Osmani’s overview of of the state of React Server Components, the Next.js App Router implementation, other implementations, the move towards hybrid rendering, plus related links.

Addy Osmani

..and if React is your thing, the latest issue of React Status is for you.

???? Code & Tools

VanJS: A 1.2KB Reactive UI Framework Without JSX — A new entrant to an increasingly crowded space, VanJS is particularly light and elegant, and its author has put some serious effort into documenting it and offering tools to convert your HTML to its custom format. It’s short for vanilla JavaScript, by the way.. GitHub repo.

Tao Xin

JavaScript Scratchpad for VS Code (2m+ Downloads) — Quokka.js is the #1 tool for exploring/testing JavaScript with edit-continue experience to see realtime execution and runtime values.

Wallaby.js sponsor

Introducing Legend-State 1.0: Faster State for React — Another state management solution? After a year of effort, Legend State 1.0 claims to be the fastest option “on just about every metric” and they have the benchmarks to prove it. Whatever the case, this thorough intro is worth a look. GitHub repo.

Moo․do

Starry Night: GitHub-Like Syntax Highlighting — Apparently, GitHub’s own syntax highlighting approach isn’t open source, but this takes a similar approach and is. It’s admittedly quite ‘heavy’ (due to using a WASM build of the Oniguruma regex engine) but that’s the price of quality.

Titus Wormer

Garph 0.5: A Fullstack GraphQL Framework for TypeScript — Full-stack ‘batteries included’ GraphQL APIs without codegen. GitHub repo.

Step CI

headless-qr: A Simple, Modern QR Code Library — A slimmer adaptation of an older project without the extra code that isn’t necessary today. Turning the binary into an image is your job, or use something like QRCode.js if you want a canvas-rendered QR code out of the box.

Rich Harris

Scroll Btween: Use Scroll Position to Tween CSS Values on DOM Elements — Scrolling/parallax libraries tend to feel the same but this one demonstrates some diverse examples with colors, images, and text — all with no dependencies.

Olivier Blanc

eslint-plugin-check-file: Rules for Consistent Filename and Folder Names — Allows you to enforce a consistent naming pattern for file and directory names in projects.

Huan

Transformers.js 2.0 – Run Hugging Face transformers directly in browser.

PrimeReact 9.4 – Extensive UI component library.

The Lounge 4.4 – Cross-platform, self-hosted web IRC client.

Faast.js 8.0 – Serverless batch computing made simple.

???? Jobs

Find JavaScript Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.

Hired

Fullstack Engineer at Everfund.com — Push code, change lives! Help us become the center for good causes on the modern web with our dev tools.

Everfund

????‍???? Got a job listing to share? Here’s how.

???? Go with the flow..

js2flowchart.js — A visualization library to convert JavaScript code into attractive SVG flowcharts. Luckily, there’s a live online version if you want to play without having to install anything.

Bohdan Liashenko

Playwright now offers a UI mode

Posted on March 24, 2023May 21, 2023 by Mark FeehilyComments Off

#631 — March 24, 2023

Read on the Web

JavaScript Weekly

Speeding Up the JavaScript Ecosystem: npm Scripts — The latest in what has been a fascinating series on finding ‘low hanging fruit’ when it comes to performance in the JavaScript world. The author explains it best himself:

“‘npm scripts’ are executed by JavaScript developers … all the time. Despite their high usage they are not particularly well optimized and add about 400ms of overhead. In this article we were able to bring that down to ~22ms.”
What Marvin does here is a valuable skill for all developers to pick up, and you can enjoy more by going back to the start.

Marvin Hagemeister

Playwright v1.32 – Now with UI Mode — The popular Web testing and automation framework is taking more steps toward ground currently served by tools like Cypress by offering a ‘UI mode’ that lets you explore, run and debug tests in a UI environment, complete with watch mode. ▶️ This video provides a good introduction.

Microsoft

A Grid Component with All the Features & Great Performance — Try our powerful JS data grid component which lets you edit, sort, group and filter datasets with fantastic performance. Includes a TreeGrid, API docs and plenty of demos. Seamless integration with React, Angular & Vue apps.

Bryntum sponsor

Why We Added package.json Support to Deno — Deno shares some provenance with Node.js but till recently it hadn’t focused on supporting Node features like npm modules. But with Node and npm compatibility beginning to improve, the team has faced questions about the runtime’s priorities. Ryan Dahl explains more about their thinking here.

Ryan Dahl

???? In other Deno news, Deno 1.32 has been released with… improved package.json support, and more.

How to Start a React Project in 2023 — There are lots of ways, but this well-regarded author explains the pros and cons of a few approaches, and gives you a few options targeting specific use cases you might have.

Robin Wieruch

IN BRIEF:

GitHub had to update its RSA SSH host key today so you may see security related warnings when pushing and cloning. It’s easy to fix, but check the new fingerprint matches – it’s for your own security.

The New Stack caught up with Svelte’s Rich Harris on SvelteKit and what’s coming for Svelte 4.

The React team shared some cutting edge updates on what they’re working on including React Server Components and an optimizing compiler.

If you were experiencing errors on the official Node site last week, here’s the (detailed) post mortem of why. Config errors and inappropriate caching, mostly.

✨ Did you know there’s a market in fake GitHub stars? Some developers analyzed some repos to learn more about it.

???? Congratulations to Lea Verou on her TC39 appointment. Her efforts to push the Web forward are legendary. Prism is one project you may be aware of.

Make your opinions known on what should be in the next version of Vite.

RELEASES:

Docusaurus 2.4
↳ Easy to maintain documentation site generator.

Puppeteer 19.8
↳ Headless Chrome Node.js API.

Neutralinojs 4.11
↳ Lightweight cross-platform desktop app framework.

Qwik 0.23

???? Articles & Tutorials

Buying a Hard-to-Get Bicycle using Playwright — An unusual use case for JavaScript, Playwright, and GitHub Actions, but Maciek managed to buy his bike.

Maciek Palmowski

Snyk Top 10: JavaScript OSS Vulnerabilities — Dive into the most prevalent critical and high open source vulnerabilities found by Snyk scans of JavaScript apps in 2022.

Snyk sponsor

The ‘End’ of Front-End Development? — A recent narrative doing the rounds suggests that large language models like GPT-4 (or even tools like Copilot X) could soon put some developers out of a job — however, Josh is “optimistic about what these AI advancements mean for the future of software development”.

Josh W. Comeau

In related news, Eric Elliott put ChatGPT through its paces to see if it would make for a good JavaScript tutor. It did well — though with mixed results.

Migrating from ts-node to Bun — A look at adopting performance-oriented Bun when you’re used to using TypeScript with Node.js. John runs us through porting a console app from the ts-node approach over to Bun — “a pretty easy process,” he says.

John Reilly

▶ A Pinia Crash Course for Beginners — Pinia is a store / state management solution for Vue that does believe in pineapple on pizza.

Alexander Gekov

A Practical Guide to Getting Started with Astro — An extensive walkthrough of Astro that covers all the topics you’ll need to get you started.

Mojtaba Seyedi

???? Test Website Speed Continuously and Rank Higher In Google — You need a fast website to make users happy and meet Google’s Core Web Vitals metrics. Test and optimize with DebugBear.

DebugBear sponsor

Automatic npm Publishing with GitHub Actions and Granular Tokens

Tim Perry

Make Sure You Do This Before Switching to Signals in Angular

Jordan Powell

Six CSS Snippets Every Developer Should Know

Adam Argyle (Google)

???? Code & Tools

trace.cafe: Easy Webperf Trace Sharing — A quick way to share a performance profile saved from your DevTools, available for up to 90 days with the DevTools perf panel embedded (see example).

paul irish

VueUse: A Collection of Vue Composition Utilities — With over 200 functions targeting both Vue 2 and 3, there’ll be something in this suite of Composition API-based utility functions for you, whether it’s working with state, browser capabilities, animations, Electron, Firebase, and more.

Anthony Fu

Don’t Let Your Issue Tracker Be a Four-Letter Word. Use Shortcut

Shortcut (formerly Clubhouse.io) sponsor

OTPAuth: One Time Password (HOTP/TOTP) Library — When you log in to a site that uses 2FA and you’re asked for some digits from an authentication app, that’s probably a Time-based One-Time Password (or TOTP). This library for Node, Deno, Bun and the browser lets you work with TOTPs and HOTPs from JS.

Héctor Molinero Fernández

Recharts 2.5: Chart Library Built with React and D3 — Easy to deploy with declarative components, native SVG support, and lightweight dependency on D3. Line, bar, scatter, composed, pie, and radar charts are offered. There are lots of examples, complete with code.

recharts

DOCX 8.0: Generate Word .docx Files from JavaScript — The code to lay out documents is verbose but there’s a lot of functionality. Here’s a CodePen example and release notes – GitHub repo.

Dolan Miu

SvHighlight: Code Syntax Highlighter for Svelte — Powered by Highlight.js, it includes a blurring feature to focus attention on specific areas of code and you an customize it with Tailwind. Try the interactive examples to see the effect.

SvHighlight

eslint-formatter-pretty 5.0: Pretty ESLint Formatter — Nicer output than the default. Sort results by severity. Get stylized inline code blocks, and more.

Sindre Sorhus

AWS JWT Verify: Verify JWTs Signed by Amazon Cognito — In both Node.js and the browser.

Amazon Web Services

???? Jobs

Software Engineer (Backend) — Join our “kick ass” team. Our software team operates from 17 countries and we’re always looking for more exceptional engineers.

Sticker Mule

Find JavaScript Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.

Hired

????‍???? Got a job listing to share? Here’s how.

melonJS 15.0
↳ Mature HTML5 game engine.

Marked 4.3
↳ Markdown parser and compiler. (Demo.)

v8go 0.9
↳ Execute JavaScript from Go(lang).

Million 2.1
↳ Fast Virtual DOM to make React faster.

Partytown 0.7.6
↳ Take third-party scripts off the main thread.

???? Bonus Item

Make Bookmarklets — Create and test bookmarklets directly in the browser. Makes an irritating task slightly easier if you need to do it.

Cullan Luther

Building Automation for Fraud Detection Using OpenSearch and Terraform

Posted on March 14, 2023May 21, 2023 by Mark FeehilyComments Off

Organizations that interface with online payments are continuously monitoring and guarding against fraudulent activity. Transactional fraud usually presents itself as discrete data points, making it challenging to identify multiple actors involved in the same group of transactions. Even a single actor operating over a period of time can be hard to detect. Visibility is key to prevent fraud incidents from occurring and to give meaningful knowledge of the activities within your environment to data, security, and operations engineers.

Understanding the connections between individual data points can reduce the time for customers to detect and prevent fraud. You can use a graph database to store transaction information along with the relationships between individual data points. Analyzing those relationships through a graph database can uncover patterns difficult to identify with relational tables. Fraud graphs enable customers to find common patterns between transactions, such as phone numbers, locations, and origin and destination accounts. Additionally, combining fraud graphs with full text search provides additional benefits as it can simplify analysis and integration with existing applications.

In our solution, financial analysts can upload graph data, which gets automatically ingested into the Amazon Neptune graph database service and replicated into Amazon OpenSearch Service for analysis. Data ingestion is automated with Amazon Simple Storage Service (Amazon S3) and Amazon Simple Queue Service (Amazon SQS) integration. We do data replication through AWS Lambda functions and AWS Step Functions for orchestration. The design is using open source tools and AWS Managed Services to build resources and is available in this https://github.com/aws-samples/neptune-fraud-detection-with-opensearch GitHub repository under an MIT-0 license. You will use Terraform and Docker to deploy the architecture, and will be able to send search requests to the system to explore the dataset.

Solution overview

This solution takes advantage of native integration between AWS services for scalability and performance, as well as the Neptune-to-OpenSearch Service replication pattern described in Neptune’s official documentation.

Figure 1 An architectural diagram that illustrates the infrastructure state and workflow as defined in the Terraform templates.

The process for this solution consists of the following steps, also shown in the architecture diagram here:

Financial analyst uploads graph data files to an Amazon S3 bucket.

Note: The data files are in a Gremlin load data format (CSV) and can include vertex files and edge files.

The action of the upload invokes a PUT object event notification with a destination set to an Amazon SQS queue.
The SQS queue is configured as an AWS Lambda event source, which invokes a Lambda function.
This Lambda function sends an HTTP request to an Amazon Neptune database to load data stored in an S3 bucket.
The Neptune database reads data from the S3 endpoint defined in the Lambda request and loads the data into the graph database.
An Amazon EventBridge rule is scheduled to run every 5 minutes. This rule targets an AWS Step Functions state machine to create a new execution.
The Neptune Poller step function (state machine) replicates the data in the Neptune database to an OpenSearch Service cluster.
Note: The Neptune Poller step function is responsible for continually syncing new data after the initial data upload using Neptune Streams.

User can access the replicated data from the Neptune database with Amazon OpenSearch Service.
Note: A Lambda function is invoked to send a search request or query to an OpenSearch Service endpoint to get results.

Prerequisites

To implement this solution, you must have the following prerequisites:

An AWS account with local credentials is configured. For more information, check the documentation on configuration and credential file settings.
The latest version of the AWS Command Line Interface (AWS CLI).
An IAM user with Git credentials.
A Git client to clone the source code provided.
A Bash shell.

Docker installed on your localhost.

Terraform installed on your localhost.

Deploying the Terraform templates

The solution is available in this GitHub repository with the following structure:

data: Contains a sample dataset to be used with the solution for demonstration purposes. Information on fictional transactions, identities and devices is represented in files within the nodes/ folder, and relationships between them are represented in files in the edges/ folder.
terraform: This folder contains the Terraform modules to deploy the solution.
documents: This folder contains the architecture diagram image file of the solution.

Create a local directory called NeptuneOpenSearchDemo and clone the source code repository:

mkdir -p $HOME/NeptuneOpenSearchDemo

cd $HOME/NeptuneOpenSearchDemo

git clone https://github.com/aws-samples/neptune-fraud-detection-with-opensearch.git

Change directory into the Terraform directory:

cd $HOME/NeptuneOpenSearchDemo neptune-fraud-detection-with-opensearch /terraform

Make sure that the Docker daemon is running:

docker info

If the previous command outputs an error that is unable to connect to the Docker daemon, start Docker and run the command again.

Initialize the Terraform folder to install required providers:

terraform init

The solution is deployed on us-west-2 by default. The user can change this behavior by modifying the variable “region” in variables.tf file.

Deploy the AWS services:

terraform apply -auto-approve

Note: Deployment will take around 30 minutes due to the time necessary to provision the Neptune and OpenSearch Service clusters.

To retrieve the name of the S3 bucket to upload data to:

aws s3 ls | grep “neptunestream-loader.*d$”

Upload node data to the S3 bucket obtained in the previous step:

aws s3 cp $HOME/NeptuneOpenSearchDemo/neptune-fraud-detection-with-opensearch /data s3:// neptunestream-loader-us-west-2-123456789012 –recursive

Note: This is a sample dataset for demonstration purposes only created from the IEEE-CIS Fraud Detection dataset.

Test the solution

After the solution is deployed and the dataset is uploaded to S3, the dataset can be retrieved and explored through a Lambda function that sends a search request to the OpenSearch Service cluster.

Confirm the Lambda function that sends a request to OpenSearch was deployed correctly:

aws lambda get-function –function-name NeptuneStreamOpenSearchRequestLambda –-query ‘Configuration.[FunctionName, State]’

Invoke the Lambda function to see all records present in OpenSearch that are added from Neptune:

aws lambda invoke –function-name NeptuneStreamOpenSearchRequestLambda response.json

The results of the Lambda invocation are stored in the response.json file. This file contains the total number of records in the cluster and all records ingested up to that point. The solution stores records in the index amazon_neptune. An example of a node with device information looks like this:

{
“_index”: “amazon_neptune”,
“_type”: “_doc”,
“_id”: “1fb6d4d2936d6f590dc615142a61059e”,
“_score”: 1.0,
“_source”: {
“entity_id”: “d3”,
“document_type”: “vertex”,
“entity_type”: [
“vertex”
],
“predicates”: {
“deviceType”: [
{
“value”: “desktop”
}
],
“deviceInfo”: [
{
“value”: “Windows”
}
]
}
}
}

Cleaning up

To avoid incurring future charges, clean up the resources deployed in the solution:

terraform destroy –auto-approve

The command will output information on resources being destroyed.

Destroy complete! Resources: 101 destroyed.

Conclusion

Fraud graphs are complementary to other techniques organizations can use to detect and prevent fraud. The solution presented in this blog post reduces the time financial analysts would take to access transactional data by automating data ingestion and replication. It also improves performance for systems with growing volumes of data when compared to executing a large number of insert statements or other API calls.

A new jQuery release for Xmas

Posted on January 14, 2023May 21, 2023 by Mark FeehilyComments Off

#619 — December 16, 2022

Read on the Web

? This is the final issue of the year – we’ll be back on January 6, 2023. We hope you have a fantastic holiday season, whether or not you are celebrating, and we’ll see you for a look back at 2022 in the first week of January 🙂
__
Peter Cooper and the Cooperpress team

JavaScript Weekly

Announcing SvelteKit 1.0 — Svelte is a virtual DOM-free, compiled ahead of time, frontend UI framework with many fans. SvelteKit introduces a framework and tooling around Svelte to build complete webapps. This release post explains some of its approach and how it differs to other systems.

The Svelte Team

Dr. Axel Tackles Two Proposals: Iterator Helpers and Set Methods — Here’s something to get your teeth into! Dr. Axel takes on two promising ECMAScript proposals and breaks down what they’re about and why they’ll (hopefully) become useful to JavaScript developers. The first tackles iterator helpers (new utility methods for working with iterable data) and the second tackles Set methods which will extend ES6’s Set object.

Dr. Axel Rauschmayer

? Retire your Legacy CMS with ButterCMS — ButterCMS is your new content backend. We’re SaaS so we host, maintain, and scale the CMS. Enable your marketing team to update website + app content without needing you. Try the #1 rated SaaS Headless CMS for your JS app today. Free for 30 days.

? ButterCMS sponsor

? The Best of Node Weekly in 2022 — In this week’s issue of Node Weekly (our Node.js-focused sister newsletter) we looked back at the most popular items of the year, including the Tao of Node, an array of JavaScript testing best practices, and the most popular Node.js frameworks in 2022.

Node Weekly Newsletter

jQuery 3.6.2 Released — Humor me. You might not be using jQuery anymore, but it’s (still) the most widely deployed JavaScript library and it’s fantastic to see it being maintained.

jQuery Foundation

IN BRIEF:

Node 19.3.0 (Current) has been released to bring npm up to v9.2. Breaking changes in v9.x warrant this update and the release post explains the current policy around npm’s ongoing inclusion in Node.

ƛ The Glasgow Haskell Compiler (GHC) has gained a new JavaScript backend meaning the reference Haskell compiler can now emit JavaScript and be used more easily to build front-end apps.

GitHub is rolling out secrets scanning to all public repos for free.

The New Stack reflects on 2022 as a ‘golden year’ for JavaScript and some of the developments we’ve seen. We’ll be doing our own such roundup in the next issue.

RELEASES:

Node.js 16.19.0 (LTS) and 14.21.2 (LTS)

Chart.js 4
↳ Canvas-based chart library. (Samples.)

PouchDB 8.0
↳ CouchDB-inspired syncing database.

SWR 2.0 – React data-fetching library.

? Articles & Tutorials

Why Cypress v12 is a Big Deal — A practical example-led love letter of sorts to how the latest version of the popular Cypress ‘test anything that runs in a browser’ library makes testing frontend apps smoother than before.

Gleb Bahmutov

Five Challenges to Building an Isomorphic JS Library — When it comes to JavaScript, “isomorphic” means code or libraries that run both on client and server runtimes with minimal adaptations.

Nick Fahrenkrog (Doordash)

▶ A Podcast for Candid Chats on Product, Business & Leadership — Join Postlight leaders & guests as they discuss topics like running great meetings & creating solid product launches.

The Postlight Podcast sponsor

Next, Nest, Nuxt… Nust? — “This blog post is for everyone looking for their new favorite JavaScript backend framework.” If the names of frameworks are all starting to blur together in your head, this is for you. Marius explains just what systems like Next and Gatsby do and touches on a few differences.

Marius Obert (Twilio)

Calculating the Maximum Diagonal Distance in a Given Collection of GeoJSON Features using Turf.js — This is cool. Turf.js is a geospatial analysis library, by the way.

Piotr Jaworski

Optimize Interaction to Next Paint — How to optimize for the experimental Interaction to Next Paint (INP) metric — a way to assess a page’s overall responsiveness to user interactions.

Jeremy Wagner & Philip Walton (Google)

Need to Upgrade to React 18.2? Don’t Have Time? Our Experts Can Help — Stuck in dependency hell? We’ve been there. Hire our team of experts to upgrade deps, gradually paying off tech debt.

UpgradeJS.com – JavaScript Upgrade Services by OmbuLabs sponsor

How We Configured pnpm and Turborepo for Our Monorepo

Pierre-Louis Mercereau (NHost)

Rendering Emails with Svelte

Gautier Ben Aim

? Code & Tools

Wretch 2.3: A Wrapper Around fetch with an Intuitive Syntax — A long standing, mature library that makes fetch a little more extensible with a fluent API. Check the examples.

Julien Elbaz

SWR 2.0: Improved React Hooks for Data Fetching — The second major release of SWR (Stale-While-Revalidate) includes new mutation APIs, new developer tools, as well as improved support for concurrent rendering.

Ding, Liu, Kobayashi, and Xu

Don’t Let Your Issue Tracker Be a Four-Letter Word. Use Shortcut

Shortcut (formerly Clubhouse.io) sponsor

vanilla-tilt.js 1.8: A Smooth 3D Tilting Effect Library — No dependencies and simple to use and customize. GitHub repo.

Șandor Sergiu

visx: Airbnb’s Low Level Visualization React Components — Bring your own state management, animation library, or CSS-in-JS.. visx can slot into any React setup. Demos.

Airbnb

Scene.js 1.7: A CSS Timeline-Based Animation Library — Plenty of examples on the site. Has components for React, Vue and Svelte.

Daybrush

PortalVue 3.0
↳ Feature-rich portal plugin for Vue 3.

Kea 3.1
↳ Composable state management for React.

jest-puppeteer 6.2
↳ Run tests using Jest + Puppeteer.

NodeBB 2.7 – Node.js based forum software.

Pino 8.8 – Fast JSON-oriented logger.

? Jobs

Software Engineer — Join our “kick ass” team. Our software team operates from 17 countries and we’re always looking for more exceptional engineers.

Stickermule

Developer Relations Manager — Join the CKEditor team to build community around an Open Source project used by millions of users around the world ?

CKEditor

Find JavaScript Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It’s free for job-seekers.

Hired

? And one for fun

Snow.js: Add a Snow Effect to a Web Page — Well, it’s that time of the year (in some parts of the world!) If you’re more interested in how the effect is made, it’s inspired by this CodePen example built around some fancy CSS.

Or if you’re a bit more childish, you could always put Fart.js on your site.. ?

Merry Christmas to you all and we’ll see you again in 2023!

jQuery 3.6.2 Released!

Posted on January 14, 2023May 21, 2023 by Mark FeehilyComments Off

You probably weren’t expecting another release so soon, but jQuery 3.6.2 has arrived! The main impetus for this release was the introduction of some new selectors in Chrome. More on that below.

As usual, the release is available on our cdn and the npm package manager. Other third party CDNs will probably have it soon as well, but remember that we don’t control their release schedules and they will need some time. Here are the highlights for jQuery 3.6.2.

undefined and whitespace-only CSS variables

jQuery 3.6.1 introduced a minor regression where attempting to retrieve a value for a custom CSS property that didn’t exist (i.e. $elem.css(“–custom”)) threw an error instead of returning undefined. This has been fixed in 3.6.2. Related to that, we also made sure that whitespace-only values return the same thing across all browsers. The spec requires that CSS variable values be trimmed, but browsers are inconsistent in their trimming. We now return undefined for whitespace-only values to make it consistent with older jQuery and across the different browsers.

.contains() with <template>

An issue was recently reported that showed that a <template>‘s document had its documentElement property set to null, in compliance with the spec. While it made sense semantically for a template to not yet be tied to a document, it made for an unusual case, specifically in jQuery.contains() and any methods relying on it. That included manipulation and selector methods. Fortunately, the fix was simple.

It wasn’t Ralph that broke the internet

The internet experienced a bit of a rumble when Chrome recently introduced some new selectors, the most pertinent of which being :has(). It was a welcome addition, and one celebrated by the jQuery team, but a change to the spec meant that :has() used what’s called “forgiving parsing”. Essentially, even if the arguments for :has() were invalid, the browser returned no results instead of throwing an error. That was problematic in cases where :has() contained another jQuery selector extension (e.g. :has(:contains(“Item”))) or contained itself (:has(div:has(a))). Sizzle relied on errors like that to know when to trust native querySelectorAll and when to run the selector through Sizzle. Selectors that used to work were broken in all jQuery versions dating back to the earliest jQuery versions.

And yet, this little drama didn’t last long. The Chrome team quickly implemented a workaround to fix previous jQuery versions in the vast majority of cases. Safari handled their implementation of :has() a little differently and didn’t have the same problem. But, there’s still an important issue open to determine how to address this in the CSS spec itself. The CSSWG has since resolved the issue.

jQuery has taken steps to ensure that any forgiving parsing doesn’t break future jQuery versions, even if previous jQuery versions would still be affected.

Upgrading

We do not expect compatibility issues when upgrading from a jQuery 3.0+ version. To upgrade, have a look at the new 3.5 Upgrade Guide. If you haven’t yet upgraded to jQuery 3+, first have a look at the 3.0 Upgrade Guide.

The jQuery Migrate plugin will help you to identify compatibility issues in your code. Please try out this new release and let us know about any issues you experienced.

If you can’t yet upgrade to 3.5+, Daniel Ruf has kindly provided patches for previous jQuery versions.

Download

You can get the files from the jQuery CDN, or link to them directly:

https://code.jquery.com/jquery-3.6.2.js

https://code.jquery.com/jquery-3.6.2.min.js

You can also get this release from npm:

npm install [email protected]

Slim build

Sometimes you don’t need ajax, or you prefer to use one of the many standalone libraries that focus on ajax requests. And often it is simpler to use a combination of CSS and class manipulation for web animations. Along with the regular version of jQuery that includes the ajax and effects modules, we’ve released a “slim” version that excludes these modules. The size of jQuery is very rarely a load performance concern these days, but the slim build is about 6k gzipped bytes smaller than the regular version. These files are also available in the npm package and on the CDN:

https://code.jquery.com/jquery-3.6.2.slim.js

https://code.jquery.com/jquery-3.6.2.slim.min.js

These updates are already available as the current versions on npm and Bower. Information on all the ways to get jQuery is available at https://jquery.com/download/. Public CDNs receive their copies today, please give them a few days to post the files. If you’re anxious to get a quick start, use the files on our CDN until they have a chance to update.

Thanks

Thank you to all of you who participated in this release by submitting patches, reporting bugs, or testing, including sashashura, Anders Kaseorg, Michal Golebiowski-Owczarek, and the whole jQuery team.

Changelog

Full changelog: 3.6.2

CSS

Return undefined for whitespace-only CSS variable values (#5120) (8bea1dec)
Don’t trim whitespace of undefined custom property (#5105, c0db6d70)

Selector

Manipulation: Fix DOM manip within template contents (#5147, 5318e311)
Update Sizzle from 2.3.7 to 2.3.8 (#5147, a1b7ae3b)
Update Sizzle from 2.3.6 to 2.3.7 (#5098, ee0fec05)

Tests

Remove a workaround for a Firefox XML parsing issue (965391ab)
Make Ajax tests pass in iOS 9 (d051e0e3)

Is React a Framework? Software Engineer Answering

Posted on June 22, 2022May 21, 2023 by Mark Feehily0

By definition – React is one of the most popular JavaScript UI libraries nowadays. It comes in second place after jQuery among all web frameworks! React’s popularity has grown rapidly thanks to a simple and declarative API that allows you to build high-performance applications, and that momentum keeps growing. Still, there is often discussion and questioning that React is a framework or library.

Firstly, let’s look what the differents between framework and library?

The framework belongs to the main() function. It executes some functions, e.g. controlling a collection of windows on the screen. The framework can, in principle, work even if you have not set it up in any way. It does something, e.g. it places an empty window with default widgets. The framework defines the general nature of the program, and your code provides a specific setting. These settings can be very significant, as both a word processor and a spreadsheet can be created using the same framework.

The library is the set of tools used by your code. Your code belongs to the main() and provides the overall structure of the program. A library performs some specific task, such as sending traffic over a network, drawing charts, or something else. The library can do big things, like draw a view of a three-dimensional space full of objects, but only after you tell it about those objects.

The framework can call your code, which in turn calls the library. But your code never calls the framework, except perhaps for system() or exec() functions.

But, is React a Framework?

We asked our Software Engineers Team for their opinion and they were split into two parts: some maintain the view that React is a library, and others assign it as a Framework. Here are the most outstanding opinions:

From my point of view, React is not a framework, it’s just a library with no specific requirements for project structure. It’s about describing the abstractions of your application, logic, routing, data exchange, and so on. And React simplifies the work with this data, and optimizes the work with it

Anton M. – Software Engineer at Flatlogic.com

I know that react calls itself a “library”, and a lot of developers prefer to react to the home page with the title “library”. However, I think that React is more like a framework now, with different targets like web, react native, etc. And the foundation of React is JSX, which is crucial for proper developer experience, and requires a build step, so you can’t just slap a bunch of JSX files into a browser and call it a day. Nowadays when you say “I built this app with React” you don’t mean that you used it on one page or as a modern jquery alternative. You mean that you built everything around react, with its ecosystem, its best practices, etc. And with all those points in mind, I’d rather call react the framework, than a library

Viktor S. – Staff Engineer at Flatlogic.com

We also conducted the research among others software engineers and would like to share with you the most impressive arguments on this point.

So, is React a Framework or a Library?

React is a Library

React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

Now Why Library, not a Framework?

different definitions for library and framework:

a framework is a software where you plug your code into
a library is a software that you plug into your code

In terms of this definition, React is a framework. But some people, especially in the frontend world, say a framework has to bring stuff like routers and/or widgets, etc.

So Angular, and ExtJS are frameworks, but React isn’t, because it only gives you the means to build components and render them into the DOM.

Let’s make it simple, in React we have to include packages for everything it’s not necessary but yes we can add them, thus React is a Library but if we are not given an option to do so with our code then that’s a framework like Angular and Vue.

React is a library because it’s only supposed to deal with the view part of the eco-system, and you can integrate it easily in any project you’re working on currently, it’s something like jQuery, it only helps you with organizing your views into reusable components, of course, the performance is one of the best things about React, especially with the new Fiber algorithm, things will be faster seeing the scheduler mechanism, unlike Angular, it’s a framework that gives you everything you need, most of the things are already built-in, for React you need to create your own/or grab some modules from npm to add extra functionality as need per your project.

It depends on how you use it. If you’re writing a small program and you structure your program around working with React, you are probably thinking of React as a framework.

If you have a big program and you use React as a small part of it just for handling output, then you’re probably thinking of React as a library.

If your program is 90% user interface, and not only your program structure but your data structures are shaped to fit the React system, then you may even think of React as a language. Hey, if TypeScript can be a language, why not React?

React is a library, cause it has mostly evolved into a vast ecosystem that is barely distinguishable from a framework. A framework protects the edges, whereas a library provides a tool for doing certain tasks. React handles exactly one task: abstracted Web Components. It offers an internal state, lifecycles, and external properties, as well as a renderer for a browser or comparable environment through ReactDOM – and nothing more.

This has a few advantages: it is smaller than a full-featured framework, has fewer opinions on how to address problems, and so provides more options.

I’d say React is a library posing as a framework. It feels like working in a framework (esp. with JSX, though using that is optional), but under the hood, it is just a library. This definition is quite good:

a framework is software that you plug your code into (e.g. you work “inside” it).
a library is software that you plug into your code (e.g. you “hand-off” certain tasks to it, or build “on top” of it).

React feels like the first, but is the second. The attached video compares React and Angular and hints at the distinction. Since React treats your code as a black box, you can push the data-binding concerns out to the edges of your system, to be “handed off” to React (i.e. how you would use a library). Angular, on the other hand, forces you to work “inside” their “scopes” using their “directives” to handle data-binding. In Angular, you are passing your data through scopes that observe your data model. You are always at the mercy of whichever directives they are building into their framework scaffolding. You are also working “inside” HTML (JS-in-HTML), with all the constraints that impose (giving more of a framework feeling). But with React, you have less of that feeling, since you have freedom (full power of JS), and can build “on top” of React (HTML/JSX-in-JS). This is good since JS is inherently more powerful than HTML.

React is a Framework

React is a framework. Honestly caring about the difference between a library and a framework is a bit pedantic, so I’d say you can call it either. Having said that, my definitions of the two words are that a library is a collection of functions, and a framework is a way of doing things.

By this definition, React is a framework because it forces you to build UI in the React way instead of the Angular, etc. On the other hand, the dash is a perfect example of a library because it’s just a collection of functions, use them however you want.

JavaScript is known for its abundance of new plugins, frameworks, and other things created by its massive community of developers and designers.

You must be wondering what this fact has to do with the React JS framework and other frameworks. The truth is that many of the leading IT firms have already embraced JavaScript and leveraged its benefits.

That should answer the question and not cause any other debates, right? Well, not exactly; the debate over “Is React a framework or library?“ is as strong as ever.

Over the years, developers, software engineers, and developer communities came up with pros and cons related to the status of React as a library or React as a framework. Let’s analyze them together.

React as a library

React can be easily swapped by some other javascript library offering similar functionalities.
React can be easily plugged into an existing technology stack – and that’s the definition of a library.

React as a framework

Related libraries must work in an opinionated way.
Because of its state and lifecycle on the components, you inverted the control to React.

Are you asking why React was designed as a library and not a framework [1] or why it is classified as a library and not a framework [2]?

[1] Why it was built that way. A library is something you can add to an existing project to enhance it. It does not impose any restrictions or conventions on your application design and you can supplement it with other libraries of your choice to flesh out your application. There is also a shorter learning curve (usually) on a library as you can add it incrementally to your project. A framework on the other hand implies structure and convention, you need to follow the conventions of the framework. In many cases a framework limits you to working within these conventions – you cannot (or it is difficult) to mix a framework with other code.

There are use cases for each.

[2] Why it is not classified as a framework. Based on the definition of a framework it does not fit the bill – it is a library that is added to your code – it does not impose structure – beyond the use of the library itself and it can be mixed in with other code.

React does not solve any structural or architectural problems on the app level. It provides us with a set of methods for better (in my opinion) handling of the front-end. I remember when jQuery did that back in the day, and how that started the revolution… React is now doing the same, just better.

Because React is a library eventually we got Flux and Redux. Both of them are handling real-world problems that come alongside Scaling. Mare library does not think about that.

React is a framework because Redux is referencing it as one (Source). Ah, as I started to hope that something in life is going to be easy. With React and Redux there is a clear layer of separation between the view and data. That is why React is not a complete framework to solve the entire problem.

Conclusion

Soft engineers spend a lot of time talking about what React is. The answer is important for any React soft engineer, no matter their skill level. That is because it indicates what they should know and how they should work when developing any React application. Depending on who you are, a beginner or an advanced React soft engineer, I hope this thoughtful research will improve your development process as you build your next React project.

The post Is React a Framework? Software Engineer Answering appeared first on Flatlogic Blog.

12+ Best Node.js Frameworks for Web App Development in 2022

Posted on June 14, 2022May 21, 2023 by Mark Feehily0

Node.js is getting increasingly popular among developers, to the point where some developers call Node.js their primary choice for backend development. In this article, we review the 12 best Node.js web frameworks that we rate according to their popularity and unique toolkits for time and cost-efficiency.

Is Node.js a web framework?

So is Node.js a web framework? The most common way of referring to it is as a web framework. Still, Node.js is a JavaScript execution environment – a server-side platform for JavaScript code execution and portability. Instead, web frameworks focus on building features. A lot of developers have built Node.js web frameworks, such as Nest.js, Express.js, and other toolkits, for Node.js applications, providing a unique experience for software developers.

What are Node.js web frameworks?

Every web application technology offers different types of frameworks, all supporting a specific use case in the development lifecycle. Node.js web frameworks come in three types – Full-Stack Model-View-Controller (MVC), MVC, and REST API web frameworks.

Node.js web framework features

API of Node.js is asynchronous. You can use the Node.js server to move after a data request, rather than waiting for the API to return the information.
The code execution process of Node.js is faster compared to the reverse backend framework.
Node.js runs on a single-threaded model.
With Node.js web framework developers never face buffering issues because it transfers information by parts.
It is supported by Google’s Node.js runtime environment.

Through these features, it is clear to understand why developers more often choose Node.js for Backend development. Let’s take a closer look at each Node.js web framework.

NestJS

Github repo: https://github.com/nestjs/nest
License: MIT
Github stars: 47400

NestJS is object-oriented and functional-reactive programming (FRP), widely used for developing enterprise-level dynamic and scalable web solutions, being well featured with extensive libraries.

NestJS is based on TypeScript as its core programming language, but is also highly compatible with a JavaScript subset and easily integrated with other frameworks such as ExpressJS through a command-line interface.

Why use NestJS:

Modern CLI
functional-reactive programming
Multiple easy-to-use external libraries
Straightforward Angular compatibility

NestJS has a clean and modular architecture pattern aiding developers to build scalable and maintainable applications with ease.

Pros of NestJS:

Powerful but super friendly to work with
Fast development
Easy to understand documentation
Angular style syntax for the backend

NodeJS ecosystem
Typescript
Its easy to understand since it follows angular syntax
Good architecture
Integrates with Narwhal Extensions
Typescript makes it well integrated in vscode
Graphql support easy
Agnosticism
Easily integrate with others external extensions

ExpressJS

Github repo: https://github.com/expressjs/express
License: MIT
Github stars: 57200

ExpressJS is minimalistic, asynchronous, fast, and powerful and was launched in 2010. It’s beginner-friendly thanks to a low learning curve that requires only a basic understanding of the Node.js environment and programming skills. ExpressJS optimises client-to-server requests and observed user interaction via an API very quickly, and also helps you manage high-speed I/O operations.

Why use ExpressJS:

Enhanced content coordination
MVC architecture pattern
HTTP helpers
Asynchronous programming to support multiple independent operations

ExpressJS offers templating, robust routing, security and error handling, making it suitable for building enterprise or browser-based applications.

Pros of ExpressJS :

Simple
NodeJS
Javascript
High performance
Robust routing
Middlewares
Open source
Great community
Hybrid web applications
Well documented
Light weight

Meteor

Github repo: https://github.com/meteor/meteor
License: MIT
Github stars: 42900

Meteor is an open-source framework that was launched in 2012 that works best for teams who want to develop in a single language, being a full-featured Node.js web framework. Meteor is ideal for modern real-time applications as it facilitates instant data transfer between server and client.

Why use Meteor:

Cross-platform web framework
Rapid prototyping using the CLI
Extensive community support and open-source code
End-to-end solution
Seamless integration with other frameworks

The Meteor is an excellent option for those who are familiar with Javascript and prefer it. It’s a great one for both web and mobile app development as well. Meteor is great for applications that require a lot of updates that need to be sent out, even in a live environment.

Pros of Meteor :

Real-time
Full stack, one language
Best app dev platform available today
Data synchronization
Javascript
Focus on your product not the plumbing
Hot code pushes
Open source
Live page updates
Latency compensation
Ultra-simple development environment
Great for beginners
Smart Packages

KoaJS

Github repo: https://github.com/koajs/koa
License: MIT
Github stars: 32700

Koa has been called the next-generation Node.js web framework, and it’s one of the best of the bunch. Koa uses a stack-based approach to handling HTTP mediators, which makes it a great option for easy API development. Koa is similar to ExpressJS, so it’s fairly easy to switch from either one. Despite the same features and flexibility, Koa reduces the complexity of writing code even more.

Why use Koa:

Multi-level customisation
Considered a lightweight version of ExpressJS
Supplied with cascading middleware ( user experience personalisation)
Node mismatch normalization
Cleans caches and supports content and proxy negotiation

Use Koa when performance is the main focus of your web application. Koa is ahead of ExpressJS in some scenarios, so you can use it for large-scale projects.

Pros of Koa :

Async/Await
JavaScript
REST API

socket.io

Github repo:https://github.com/socketio/socket.io
License: MIT
Github stars: 55900

The socket is a Javascript library that works most effectively for real-time web applications. The socket is used when communication between real-time web clients and servers needs to be efficiently bidirectional.

Why use socket.io:

Binary support
Multiplexing support
Reliability
Auto-reconnection support
Auto-correction and error detection

The socket is a great choice when building real-time applications like video conferencing, chat rooms and multiplayer games with servers being required to send data out before it’s requested from the client-side.

Pros of socket :

Real-time
Event-based communication
NodeJS
WebSockets
Open source
Binary streaming
No internet dependency
Large community

TotalJS

Github repo: https://github.com/totaljs/
License: MIT
Github stars: n/a

TotalJS is a web framework that offers a CMS-like user experience and has almost all the functionality you need in a Node.js environment. The framework is a full open-source framework that provides developers with the ultimate flexibility. There are various options available for the framework, e.g. CMS, and HelpDesk. Through these options, your application will have more integration possibilities with the REST service and hyper-fast, low-maintenance, stable applications.

TotalJS is most well-known for its real-time, high-precision tracking in modern applications.

Pros of TotalJS:

Tracking in real-time
API Testing
Automatic project discovery
Compatibility with multiple databases
Flexibility to work with different frontend frameworks
Fast development and low cost of maintenance

SailsJS

Github repo: https://github.com/balderdashy/sails
License: MIT
Github stars: 22247

SailsJS is similar to the MVC architect pattern of web frameworks such as Ruby on Rails, and it supports modernized data-centric development. Compatible with all databases, at the same time it flexibly integrates Javascript frameworks. SailsJS is the most relevant framework for building high-quality custom applications. Its special code-writing policy helps reduce the code needed, allowing you to integrate npm modules while remaining flexible and open source.

Pros of SailsJS:

REST API auto-generation
Multiple security policies
Frontend agnosticism
Object Relational Mapping for framework databases compatibility
Supports ExpressJS integration for HTTP requests and socket.io for WebSockets

FeathersJS

Github repo: https://github.com/feathersjs/feathers
License: MIT
Github stars: 14000

FeathersJS is gaining popularity between website and application developers because it provides flexibility in development with react native as well as Node.js. It is a framework of microservices because it operates with more than one database, providing real-time functionality. FeathersJS makes it easier for web developers to code concretely and understandably.

Pros of FeathersJS:

Reusable services
Modern CLI
Automated RESTful APIs
Authentication and authorization plugins by default
Lightweight

FeathersJS natively supports all frontend technologies, and its database-agnostic is best performed in a Node.js environment because the web framework supports Javascript and Typescript. It allows you to create production-ready applications and real-time applications, and also REST APIs in just a few days.

hapi.dev

Github repo: https://github.com/hapijs/hapi
License: MIT
Github stars: 13900

Hapi is an open-source framework for web applications. It is well-known for proxy server development as well as REST APIs and some other desktop applications since the framework is robust and security-rich. It has a wealth of built-in plugins, therefore this means you don’t have to worry about running non-official middleware.

Pros of Hapi:

Extensive and scalable applications
Low overhead
Secure default settings
Rich ecosystem
Quick and easy bug fixes
Compatible with multiple databases
Compatible with Rest API and HTTPS proxy applications
Caching, authentication and input validation by default

AdonisJS

Github repo: https://github.com/adonisjs/core
License: MIT
Github stars: 12600

AdonisJS is a Model-View-Controller Node.js web framework based on a structural template repeating Laravel. The framework decreases the time required for development by focusing on core details such as out of the box web socket support, development speed and performance, lifecycle dependency management, and built-in modules for data validation, mailing, and authentication. Command-based coding structure and the interface is easy for developers to understand. The Node.js web framework uses the concepts of dependency injections through IoC or control inversion. It offers developers an organized structure for accessing all the components of the framework.

Pros of AdonisJS:

Organised template with folder structure
Easy user input validation.
Ability to write custom functional testing scripts
Support for Lucid object-relational mapping.
Threat protection such as cross-site forgery protection

Loopback

Github repo: https://github.com/loopbackio/loopback-next
License: MIT
Github stars: 4200

Loopback provides the best connection with any Node.js web framework and can be integrated with multiple API services. You can best use the platform to build REST APIs with minimal lead time. Loopback offers outstanding flexibility, interfacing with a broad range of browsers, devices, databases, and services. Framework’s structured code helps support application modules and speed of development. Loopback has the best documentation, allowing even beginners to work with it.

Pros of Loopback:

Comprehensive support for networked applications
The built-in client API explorer
High extensibility
Multiple database support
Clean and modular code
Full-stack development
Data storage, third-party access, and user management

Loopback is designed solely for creating powerful end-to-end APIs and handling requests for them.

DerbyJS

Github repo: https://github.com/derbyjs/derby
License: MIT
Github stars: 4622

DerbyJS is a full-stack web application development platform powered by Node.js technology. This framework uses the Model-View-Controller architecture with an easy-to-write nomenclature for coding. This framework is great for building real-time web applications since it allows essentially the same code to work on Node.js and in the browser. That way, you don’t have to worry about writing separate codes for the view part. DerbyJS decreases the delay in content delivery by rendering a client-side view on the server. Performing this makes the application SEO-friendly and improves the user experience.

Pros of DerbyJS:

Support for Racer Engine
Real-time conversion for data synchronization
Offline use and conflict resolution support

Version control
Client-side and server-side code sharing
Rendering client-side views on the server-side

Conclusion

Node.js web frameworks make application development easier with their enormous possibilities for the advancement of web and mobile application development. Under the conditions of increasingly growing technologies, a thorough investigation of project requirements and accessibility of resources is the key to choosing the right web framework that will provide the greatest results.

The post 12+ Best Node.js Frameworks for Web App Development in 2022 appeared first on Flatlogic Blog.