//JavaScript - Frameworks - Libs

What's New in React 16.9: The UNSAFE Update

Prepare for React v17, the React core team continues to make incremental changes and recently released React 16.9.0. This release builds on previous versions with a number of deprecations, new features and bug fixes.

  • Renaming Unsafe Lifecycle Methods
  • Deprecating JavaScript: URLs
  • Deprecating “Factory” Components
  • Async act() for Testing
  • Performance Measurements with
  • Notable Bugfixes

scotch.io

Vugu

Vugu is Go library which makes it easy to write web user interfaces in Go.

The basic idea is as follows:

  • You write UI components in .vugu files. These files are similar to UI components you might see in JavaScript frameworks (e.g. .vue files). However, they contain no JavaScript and instead have Go language expressions for if, for and other such functionality.
  • Each .vugu file is converted to a corresponding .go file. There is a development server in the Vugu project which can do this for you automatically on page reload, or the vugugen command line tool can be used to integrate with go generate. The code generation also attempts to provide sensible defaults where needed so your .vugu files contain as little boilerplate as possible, while still allowing extensive customization if desired. 
  • Your project is compiled to a WebAssembly module and run in the browser. Again, the development server makes this easy to do when starting a project. As your project evolves and you need to customize parts of this process you can easily do so.
  • The Vugu library (package: github.com/vugu/vugu) provides functionality to efficiently synchronize HTML DOM on a web page according to the markup in your .vugu files. Features like attaching DOM event handlers (click, etc.) and breaking large pages up into components are supported.

vugu.org

Announcing TypeScript 3.6 Beta

Today to announce the availability of TypeScript 3.6 Beta. This beta is intended to be a feature-complete version of TypeScript 3.6. In the coming weeks we’ll be working on bugs and improving performance and stability for our release candidate, and eventually the full release.

Stricter Generators

TypeScript 3.6 introduces stricter checking for iterators and generator functions. In earlier versions, users of generators had no way to differentiate whether a value was yielded or returned from a generator.

More Accurate Array Spread

In pre-ES2015 targets, the most faithful emit for constructs like for/of loops and array spreads can be a bit heavy. For this reason, TypeScript uses a simpler emit by default that only supports array types, and supports iterating on other types using the --downlevelIteration flag. Under this flag, the emitted code is more accurate, but is much larger.

Improved UX Around Promises

Promises are one of the most common ways to work with asynchronous data nowadays. Unfortunately, using a Promise-oriented API can often be confusing for users. TypeScript 3.6 introduces some improvements for when Promises are mis-handled.

devblogs.microsoft.com

React NodeGUI

Build performant, native and cross-platform desktop applications with JavaScript + powerful CSS like styling. rocket

React NodeGUI is powered by Reactatom_symbol and Qt5 green_heart   which makes it CPU and memory efficient as compared to other chromium based solutions like electron. React NodeGUI is essentially a React renderer for NodeGUI.

NodeGUI

React NodeGUI

NodeGUI

Features:

  • Cross platform. Should work on major Linux flavours, Windows and MacOS.
  • Low CPU and memory footprint. Current CPU stays at 0% on idle and memory usage is under 20mb for a hello world program.
  • Styling with CSS (includes actual cascading). Also has full support for Flexbox layout (thanks to Yoga).
  • Complete Nodejs api support (Currently runs on Node v12.x - and is easily upgradable). Hence has access to all nodejs compatible npm modules.
  • Native widget event listener support. supports all event available from Qt / NodeJs.
  • Can be used for Commercial applications.
  • Good Devtools support (hot reload, live reload, debugging etc).
  • Good documentation and website.
  • Good documentation for contributors.
  • Good support for dark mode (Thanks to QT).
  • First class Typescript support. (Works on regular JS projects too wink).

github.com

The Essential Guide To JavaScript’s Newest Data Type: BigInt

In JavaScript, the Number type cannot safely represent integer values larger than 253. This limitation has forced developers to use inefficient workarounds and third-party libraries. BigInt is a new data type intended to fix that.

smashingmagazine.com

Cashify money_with_wings

Lightweight currency conversion library, successor of money.js

This package was created, because the popular money.js library is:

  • not maintained (last commit was ~5 years ago)
  • has over 20 issues open
  • does not support TypeScript
  • has implicit globals
  • does not have any unit tests

Highlights:

  • Simple API
  • 0 dependencies
  • Actively maintained
  • Well tested
  • Easy migration from money.js
  • Written in TypeScript

github.com

localize-react

airplane  Lightweight React Localization Library us

Creating really simple lightweight library for localization in React applications without any dependencies, which is built on top of new React Context Api.

Library has just 737 Bytes gzipped size.

github.com

date-fns

date-fns provides the most comprehensive, yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js.

date-fns is like lodash for dates. It has 180+ functions for all occasions.

github.com

Bounds.js

Asynchronous boundary detection. 1KB, no dependencies.

Whether you're lazy-loading images, implementing infinite-scroll, or avoiding an ex-lover... it's important to set boundaries.

Historically, boundary detection required a mix of event handlers, loops, and calls to getBoundingClientRect. Since these operations run on the main thread, performance would suffer.

Bounds.js defies these expectations, providing a simple and powerful API. It detects intersections between elements asynchronously, keeping complex operations off the main thread and improving performance.

github.com

fuzzyjs

fuzzyjs is a fuzzy search algorithm in javascript.

github.com

useAnimations

Animated icons in Lottie Framework and After Effects for immediate implementation to your apps or websites.

useanimations.com

//Browsers - Web

V8 release v7.7

Lazy feedback allocation

To reduce V8’s memory usage, they now allocate the feedback vectors lazily only after the function has executed a certain amount of bytecode. This avoids allocating feedback vectors for short-lived functions that don’t benefit from the feedback collected. Lab experiments show that lazily allocating feedback vectors saves about 2–8% of V8 heap size.

Scalable WebAssembly background compilation

Over the last milestones, they worked on scalability of background compilation of WebAssembly. The more cores your computer has, the more you benefit from this effort. The graphs below have been created on a 24-core Xeon machine, compiling the Epic ZenGarden demo. Depending on the number of threads used, compilation takes less than half of the time compared to V8 v7.4.

Stack trace improvements

Almost all errors thrown by V8 capture a stack trace when they are created. This stack trace can be accessed from JavaScript through the non-standard error.stack property. The first time a stack trace is retrieved via error.stack, V8 serializes the underlying structured stack trace into a string. This serialized stack trace is kept around to speed up future error.stack accesses.

JavaScript language features

The Intl.NumberFormat API for locale-aware number formatting gains new functionality in this release! It now supports compact notation, scientific notation, engineering notation, sign display, and units of measurement.

v8.dev

New React DevTools

Improved performance

The legacy DevTools extension used to add significant performance overhead, making it unusable for some larger React applications. That overhead has been effectively eliminated in version 4.

Component stacks

React component authors have often requested a way to log warnings that include the React "component stack". DevTools now provides an option to automatically append this information to warnings (console.warn) and errors (console.error).

New react dev tools

Component filters

Large component trees can sometimes be hard to navigate. DevTools now provides a way to filter components so that you can hide ones you're not interested in seeing.