JavaScript news and tips: browsers, frameworks, useful libs and more. Enjoy our latest JS digest!

JavaScript

Current ES2019 Candidates

  1. There are a number of proposed changes to Classes, including field declarations, private methods and fields, and static methods and fields (hash # syntax looks for private members).
  2. The String type has a trim() method that removes whitespace from both the beginning and the end of a string. The proposed trimStart() and trimEnd() methods would allow additional control over whitespace removal.
  3. We may see a BigInt primitive for whole numbers larger than the current maximum value of 253. A BigInt can be declared in a few different ways.
  4. If you’ve studied functional programming, you may recognize flat() and flatMap(). flat() is designed to take an array of values, where some of those values may be more arrays, and returns a new one-dimensional array. flatMap() is similar to map(), but the callback can return an array, and the end result will be flattened one-dimensional array instead of nested arrays.

Learn more on developer.okta.com.

TypeScript as well as JavaScript

For the last year, people at PayPal have opted-into adopting paypal-scripts. At PayPal, you create a new app by clicking a few buttons in a web UI which will create your GitHub (enterprise) repo and setup CI, deploys etc. etc. The GitHub repo it creates for you is based on a repo called the “sample-app.” Just last week, my PR to update it to use paypal-scripts was merged. This means that every new applications at PayPal will get their start with modern technology and tools that they don’t have to worry about keeping up to date. They will also be statically typed with TypeScript and tested with Jest.

Read more on PayPal Engineering.

Frameworks / Libs

React v16.8

What Are Hooks?

Hooks let you use state and other React features without writing a class. You can also build your own Hooks to share reusable stateful logic between components.

Can I Use Hooks Today?

Yes! Starting with 16.8.0, React includes a stable implementation of React Hooks for:

  • React DOM
  • React DOM Server
  • React Test Renderer
  • React Shallow Renderer

Tooling Support

React Hooks are now supported by React DevTools. They are also supported in the latest Flow and TypeScript definitions for React. We strongly recommend enabling a new lint rule called eslint-plugin-react-hooks to enforce best practices with Hooks.

Find out more on reactjs.org.

5 Ways to animate a React app in 2019

  • CSS method.
  • React-transition-group — It is an add-on component for a simple implementation of basic CSS animations and transitions.
  • react-animations — React-animations implements all animations from animate.css. Simple to use!
  • React Reveal — This is an animation framework for React.
  • TweenOne — library that ant.design uses for animation.