//JavaScript - Frameworks - Libs

TypeScript 3.0: The unknown Type

TypeScript 3.0 introduced a new unknown type which is the type-safe counterpart of the any type.

The main difference between unknown and any is that unknown is much less permissive than any: we have to do some form of checking before performing most operations on values of type unknown, whereas we don't have to do any checks before performing operations on values of type any.

mariusschulz.com

Stencil: A Compiler for Web Components

Stencil is a compiler that generates Web Components (more specifically, Custom Elements). Stencil combines the best concepts of the most popular frameworks into a simple build-time tool.

Stencil takes features such as

  • Virtual DOM
  • Async rendering (inspired by React Fiber)
  • Reactive data-binding
  • TypeScript
  • JSX

and then generates standards-based Web Components with these features baked in.

ionicframework.com

REACTQL

Universal front-end React + GraphQL starter kit, written in Typescript.

Front-end stack:

  • React v16.8 (the one with hooks!) for UI.
  • Apollo Client 2.5 (React) for connecting to GraphQL.
  • MobX-React-Lite for declarative, type-safe flux/store state management.
  • Emotion CSS-in-JS, with inline <style> tag generation that contains only the CSS that needs to be rendered.
  • Sass, Less and PostCSS when importing .css/.scss/.less files.
  • React Router 4 for declarative browser + server routes.
  • GraphQL Code Generator v1.1 for parsing remote GraphQL server schemas, for automatically building fully-typed Apollo React HOCs instead of writing <Query> / <Mutation> queries manually
  • Declarative/dynamic <head> section, using react-helmet.
  • Server-side rendering:
  • Built-in Koa 2 web server, with async/await routing.
  • Full route-aware server-side rendering (SSR) of initial HTML.
  • Universal building - both browser + Node.js web server compile down to static files, for fast server re-spawning.
  • Per-request GraphQL store. Store state is dehydrated via SSR, and rehydrated automatically on the client.
  • MobX for app-wide flux/store state, for automatically re-rendering any React component that 'listens' to state. Fully typed state!
  • Full page React via built-in SSR component - every byte of your HTML is React.
  • SSR in both development and production, even with hot-code reload.

github.com

Ola

Smooth animation library for interpolating numbers.

Smooth animation library for inbetweening / interpolating numbers in realtime: