Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Small sense: recently you or see more List of articles, the so-called List of articles, such as 10, 20 recommended er, more even, ten thousand words points listed, eye-catching extreme, sincere flow password; This melon comments the List of articles, do not want to comment on its praise or criticism, because it is nothing more than the form of writing, good or bad, the judgment standard lies in its content; The List of articles covers a wide range of topics, with a clear context, a low threshold, a clear purpose and various needs. Why not? But especially warned the author, do not destroy its advantages, fill more with dross, so that the visitors see the title of evil, far, put the cart before the horse. 🐶

1. Immutable.js

The React+Redux+Immutable. Js combination is now widely used in projects, but it is also critical and necessary for students of the Vue stack to recognize Immutable.

Once created, immutable data constructed by imMUTation-js does not change; Each time it is modified, a new IMmutable object is returned to ensure that the previous data is immutable (the underlying data structure Trie prefix tree + the structure shares Structural Sharin).

If a node in the object tree changes, only that node and its affected parent are modified, and the other nodes are shared

The advantages of this are: save CPU, save memory;

This is because we often solve the problem of immutable data by deep copy, which requires additional operations to consume CPU and new memory to copy new data.

Example 🌰

import { Map} from 'immutable';
let a = Map({
  select: 'users',
  filter: Map({ name: 'Cam' })
})
let b = a.set('select', 'people');

a === b; // false
a.get('filter') === b.get('filter'); // true
Copy the code

2. Redux.js

Redux isn’t just for React people. It borrows functional programming ideas and aims to provide predictable state management.

Specifically, there is no setter method for state in Redux. Instead, state is obtained after reducer function calculation one after another. State is read-only and cannot be modified.

This is the idea of putting raw immutable data into a pipeline of different functions for calculation in FP!

Example 🌰

function visibilityFilter(state = 'SHOW_ALL', Action) {// state read-only switch (action.type) {case 'SET_VISIBILITY_FILTER': return action.filter default: return state } } function todos(state = [], action) { switch (action.type) { case 'ADD_TODO': return [ ...state, { text: action.text, completed: false } ] case 'COMPLETE_TODO': return state.map((todo, index) => { if (index === action.index) { return Object.assign({}, todo, { completed: true }) } return todo }) default: return state } } import { combineReducers, createStore } from 'redux' let reducer = combineReducers({ visibilityFilter, Map-reducers == map-reducers == map-reducersCopy the code

3. Omniscient.js

Omniscient.js is used for fast top-down rendering of immutable data;

Example 🌰

var React = require('react');
var ReactDOM = require('react-dom');
var component = require('omniscient');

var HelloMessage = component(({name}) => <div>Hello {name}</div>);

ReactDOM.render(<HelloMessage name="John" />, document.querySelector('#app'));
Copy the code

// without JSX

var {div} = React.DOM; // Extract the div convenience function from React

var HelloMessage = component(({name}) => div({}, `Hello ${name}`));
// Omniscient components are interoperable with JSX and non-JSX
ReactDOM.render(HelloMessage({ name: 'John' }), document.querySelector('#app'));
Copy the code

4. D3.js

As for the JavaScript visual chart library, Bengua has always used Echart.js, god forever;

However, the most popular JS icon library for Star on Github is d3.js star 98.8k + ✨

Chart.js Star 55K+ ✨;

5. SurveyJS

SurveyJS is the most feature-rich survey/form library available; And it can be easily customized and extended to suit your needs.

Generate code after configuration:

6. Final Form

Easy to create beautiful and form-friendly libraries;

React Final Form can re-render components that only need to be updated when the Form state changes:

import { Form, Field } from 'react-final-form'
Copy the code
const MyForm = () => ( <Form onSubmit={onSubmit} validate={validate} render={({ handleSubmit }) => ( <form onSubmit={handleSubmit}> <h2>Simple Default Input</h2> <div> <label>First Name</label> <Field name="firstName" component="input" placeholder="First Name" /> </div> <h2>An Arbitrary Reusable Input Component</h2> <div> <label>Interests</label> <Field name="interests" component={InterestPicker} /> </div> <h2>Render Function</h2> <Field name="bio" render={({ input, meta }) => ( <div> <label>Bio</label> <textarea {... input} /> {meta.touched && meta.error && <span>{meta.error}</span>} </div> )} /> <h2>Render Function as Children</h2> <Field name="phone"> {({ input, meta }) => ( <div> <label>Phone</label> <input type="text" {... input} placeholder="Phone" /> {meta.touched && meta.error && <span>{meta.error}</span>} </div> )} </Field> <button type="submit">Submit</button> </form> )} /> )Copy the code

7. Choreographer.js

A simple library to handle complex animations;

$ npm install --save choreographer-js
Copy the code
const Choreographer = require('choreographer-js')

let choreographer = new Choreographer({
  animations: [
    {
      range: [-1, 1000],
      selector: '#box',
      type: 'scale',
      style: 'opacity',
      from: 0,
      to: 1
    }
  ]
})

window.addEventListener('mousemove', function(e) {
    choreographer.runAnimationsAt(e.clientX)
})
Copy the code

8. typeahead.js

After input information in the input box, automatic prompt for completion;

9. Multiple.js

Create shared backgrounds across multiple elements (including gradients for backgrounds) to inspire the look of the site;

.selector {
  background-image: linear-gradient(white, black);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;  /* <- here it is */

  width: 100px;
  height: 100px;
}
Copy the code

Key: background-attachment: fixed expands the background to the size of the viewport and displays the appropriate block in each element; On the mobile terminal, clip: rect(0 auto auto 0) is required.

10. ApexCharts

Graphs have better interaction ~~ suitable for JS native + 3 framework;

One item for a taste: a decidedly different item: ◡ (●’◡’●);

11. Premonish.js

Premonish can detect where the user’s mouse is moving and predict which element they are moving towards

Go play it and see how it predicts: address

import Premonish from 'premonish';
const premonish = new Premonish({
  selectors: ['a', '.list-of' '.selectors', '.to', '#watch'],
  elements: [] // Alternatively, provide a list of DOM elements to watch
});

premonish.onIntent(({el, confidence}) => {
  console.log(el); // The DOM node we suspect the user is about to interact with.
  console.log(confidence); // How confident are we about the user's intention? Scale 0-1
});
Copy the code

12. Stretchy

Automatic resizing of form elements; Also can listen to your input and other text box size, if the size is wrong, will report an error; Volume 1.5 KB;

13. Hammer.JS

Hammer is an open source library that recognizes gestures made by touch, mouse, and pointer events. It has no dependencies and is small, only 7.34 kB!

var hammertime = new Hammer(myElement, myOptions);
hammertime.on('pan', function(ev) {
	console.log(ev);
});
Copy the code

By default, it adds a set of TAP, DoubleTap, Press, horizontal PAN and SWIPE, and multi-touch Pinch and rotate recognizers;

14. JS Encrypt

JS Encrypt provides easy-to-implement RSA JavaScript encryption for applications;

The Demo address

15. Discord.js

Discord. Js is a powerful Node.js module that lets you easily interact with the Discord API;

  • Discord is a free online messaging app and digital distribution platform designed for social groups. It has 130 million registered users.

16. Google Maps Utility Library

As the name suggests, the Google Maps Commons library, which brings Google Map navigation and other map-based features to your applications;

17. Typed.js

Typed. Js provides typing animation with excellent compatibility.

18. Math.js

With this library, complex mathematical problems can be computed on the front-end browser without straining the back-end server; It has a flexible expression parser, support for symbolic computation, a large number of built-in functions and constants, and provides an integrated solution to handle different data types such as numbers, large numbers, complex numbers, fractions, units, and matrices;

Powerful and easy to use

19. howler.js

Howler.js makes audio processing easy and useful;

20. ScrollMagic

Give your web scrolling effect magic!

On paper come zhongjue shallow, sometime also try ~~

summary

As can be seen, some of the libraries shared above are as high as several hundred K star, while others hover at less than 1 K star, but they are still listed together. Bengua thinks: on the contrary, these small libraries can solve a certain problem, the core principle is wonderful, the official website is also made particularly exquisite, which makes people love it especially;

Or that old saying: the best tools, early off work; Development work falls into two categories: those who write about wheels and those who use wheels; Writing wheels also started with wheels. Because I couldn’t find a more suitable wheel, I decided to write one myself and share it with everyone. Long live open source!

The above. May you gain something

I am Nuggets Anthony, the public number of the same name, output exposure input, technical insights into life, goodbye!