19, is a New Year, “front-end”, and what new “toys”, today xiaobian to recommend to you the current hot and fresh top 50 front-end tools, hope in the New Year, to help you.

Build tools

1, the Parcel

https://parceljs.org/

Parcel is a fast, zero-configuration WEB application packaging tool that features fast, near-zero configuration right out of the box. Compared to WebPack, Parcel is a great choice for beginners.

2、 Critters

Github.com/GoogleChrom…

Webpack plugin, it can easily configure the inline critical CSS (CSS), the rest of the CSS will load asynchronously, because it does not use a headless browser to render content, so fast and lightweight.

3, sucrase

Sucrase. IO/If you build React projects with Typscript, sucrase will be a good choice and will compile 20 times faster than Babel. Sucrase – an ES6+ compiler that focuses on non-standard languages such as Typescript, JSX, and Flow.

4, Webpack Config Tool

webpack.jakoblind.no/ 

Webpack.config.js is a visual online tool that allows you to create webpack.config.js with one click, just by selecting the front-end project and applying the technology and related configuration.

5, JSUI

github.com/kitze/JSUI 

JSUI is a tool for visually categorizing, building, and managing JavaScript projects. The project can be managed as long as it has a package.json, regardless of the front-end or back-end application, and regardless of the framework used.

6. PWA Universal Builder

pwa.cafe/ 

Preact, React, Vue, and Svelte scaffolded projects with support for Babel, Buble, Browserlist, TypeScript, PostCSS, ESLint, etc. Prettier and Service Workers!

7, VuePress

vuepress.vuejs.org/

VuePress consists of two parts: the first part is a minimalist static web site generator that includes a VUUe-driven theme system and plug-in API, and the other part is a default theme optimized for writing technical documentation, which was originally created to support the documentation needs of Vue and its subprojects.

Every page generated by VuePress comes with pre-rendered HTML, which is good for loading performance and search engine optimization (SEO). Meanwhile, once the page is loaded, Vue takes over the static content and turns it into a full single-page application (SPA), while other pages load on demand only as the user navigates through them.

Frameworks and libraries

8、 PWA Starter Kit

pwa-starter-kit.polymer-project.org/ 

Feature rich WEB components help you quickly build full-featured PWA WEB projects with virtually zero configuration, build, test, and rapid deployment.

9 PaperCSS.

www.getpapercss.com/ 

An unconventional CSS framework that is the right choice if you want your site to feel hand-drawn.

10 and boardgame. IO

boardgame.io/ 

Boardgame. IO is an open source game framework from Google that allows game authors to essentially convert game rules into a series of simple functions that describe the state changes of the game when a specified action occurs, and the framework handles declarative state transfers. No more manual writing of network or back-end code. Features:

  • State management: Automatic seamless management of game state across browsers, servers, and storage;
  • Rapid prototyping: Debug the interface to simulate changes before rendering the game.
  • Multiplayer: All browsers connected to the same game are synchronized in real time with no need to refresh.
  • Private status: Private information can be hidden from the client.
  • Log: The game log can be viewed at any time.
  • UI kit: Used for the React component in games.

11, Stimulus

stimulusjs.org

Stimulus is a modest front end framework that does not attempt to take over all aspects of the front end and does not care about rendering HTML, but rather enhances htML-related behavior. This is a good solution for a front-end framework if you have a small team that wants to compete with larger teams that use more laborious mainstream solutions.

12, sapper

sapper.svelte.technology/ 

Sapper is a framework similar to Next. Js, with extremely high performance and memory efficiency, with code splitting, server-side rendering modern framework features, is a military level framework.

13, Reakit

reakit.io/ 

Use this framework to quickly build a nice React UI interaction site.

14, Evergreen,

evergreen.segment.com/

More powerful React UI framework, a set of fairly standard UI design language help you to build enterprise-class WEB application with an international fan design style, the framework is similar to our domestic ant. The design (https://ant.design/docs/spec/colors-cn)

section

Today’s share is here, the rest of the content, xiaobian will be shared in the next article, please look forward to, tomorrow is New Year’s Eve, xiaobian here wish everyone a happy New Year, happy family.

More exciting content, please pay attention to the wechat “front-end talent” public number!