As the saying goes, to do a good job, you must sharpen your tools. This article introduces some of the best open source projects that will allow you to easily handle the following ten work scenarios: file upload, image processing, document processing, network requests, data storage, micro front end, form designer, H5 page designer, document management, and API management.

Read our recent popular articles (thanks to digg’s encouragement and support 🌹🌹🌹) :

  • What can we learn from Axios project of 77.9K Star (1018+ 👍)
  • Using these ideas and techniques, I have read many excellent open source projects (724+ 👍)
  • Have you mastered these advanced functional techniques (629+ 👍)

File upload

uppy

The next open source file uploader for web browsers 🐶

Github.com/transloadit…

Uppy is a slick, modular JavaScript file uploaders that seamlessly integrates with any application. It’s fast, easy to use, and allows you to focus on more important issues than building a file uploader. The library has the following features:

  • Support for I18n and accessibility;
  • Lightweight, modular plug-in architecture that can be loaded on demand;
  • Through the open TUS standard, file uploads can be restored, which can solve the problem of network faults during the uploading process.

filepond

🌊 A flexible and fun JavaScript file upload library

Github.com/pqina/filep…

Filepond is a JavaScript library that can upload any content you throw at it, optimize the images to speed up uploads, and provide a great, accessible, and silky user experience. The library has the following features:

  • Accept directories, files, Blobs, local urls, remote urls, and Data URIs;
  • Image optimization, automatic image resizing, support cropping, filtering and repairing EXIF direction;
  • Support for dragging and dropping files, selecting files from the file system, copying and pasting files or adding files using apis;
  • Asynchronous uploads using AJAX, support for chunking uploads, file encoding as Base64 data, and form submission.

✨ Read further ✨

  • Play with front end file uploads
  • Large file upload optimization

Follow the “full stack road to immortal” to read the original three free e-books (accumulated downloads of nearly 20,000) and more than 50 “re-learn TS” tutorials.

The image processing

tui.image-editor

🍞🎨 Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.

Github.com/nhn/tui.ima…

Tui. image-Editor is a full-featured image editor using HTML5 Canvas. It is easy to use and provides powerful filters. At the same time, it supports image cropping, flip, rotation, drawing, shape, text, mask and image filtering and other operations. The browser compatibility of the library is as follows:

  • Chrome
  • Edge
  • Safari
  • Firefox
  • IE 10+

cropperjs

JavaScript image cropper.

Github.com/fengyuanche…

Cropper. Js is a very powerful and simple image cropping tool, it can be very flexible configuration, support mobile end use, support IE9 and more modern browsers. It can be used to meet such needs as cropping profile picture upload, product picture editing and so on. The library has the following features:

  • Supports 39 configuration options;
  • Supports 27 methods;
  • Supports six types of events.
  • Support touch (mobile terminal);
  • Supports scaling, rotation, and flipping;
  • Supports clipping on the canvas;
  • Support for clipping images through the canvas on the browser side;
  • Supports processing Exif direction information.
  • Cross-browser support.

✨ Read further ✨

  • Blob you don’t know
  • Play with front-end binaries
  • Read Base64 encoding
  • Picture processing need not worry, give you ten small helpers

Document processing

kkFileView

The project solution supports online preview of doc, DOCX, PPT, PPTX, and XLS files.

Github.com/kekingcn/kk…

KkFileView is a solution for online preview of documents. The project uses the popular Spring Boot to build, easy to start and deploy, and basically supports online preview of mainstream office documents, such as doc, DOCX, XLS, XLSX, PPT, PPTX, PDF, TXT, ZIP, RAR, picture, etc. Video, audio, etc. The library has the following features:

  • One-key deployment, quick access: support Windows, Linux platform one-key deployment, two lines of JS code can access preview;
  • Support common file formats, compatible with new versions of Office documents: Support text, image, Office document, WPS document, PDF, video, audio, compressed package and other common file type preview;
  • Supports flexible switching between multiple preview modes: Supports dynamic configuration and flexible switching of preview modes such as PDF, lazy loading page chart, and rota picture.
  • It is deployed independently and provides Restful interfaces. Applicable to microservice scenarios: It is independent of service systems and provides Restful Http interfaces. In microservice scenarios, it directly provides online preview services.

Luckysheet

Luckysheet is an online spreadsheet like excel that is powerful, simple to configure, and completely open source.

Github.com/mengshukeji…

Luckysheet, a pure front end similar to Excel online form, powerful, simple configuration, completely open source. The library has the following features:

  • Formatting: style, conditional formatting, text alignment and rotation, support text truncation, overflow, wrapping and cell style;
  • Cells: Modify cells by dragging selections, select drop – down fill, autofill options, multiple selection operations, find and replace and merge cells;
  • Operation experience: undo/redo, copy/paste/cut operation, shortcut key support and formatting brush;
  • Formulas and functions: built-in formulas, formulas support arrays, remote formulas, and custom formulas;
  • Pivotchart: Field drag and drop, aggregation mode, filtering data, and PivotTable driller.

✨ Read further ✨

  • How to play with A Word document on the front end

Network request

Axios

Promise based HTTP client for the browser and node.js

github.com/axios/axios

Axios is a PROMISe-based HTTP client that has the following features:

  • Support for Promise API;
  • Ability to intercept requests and responses;
  • Ability to transform request and response data;
  • The client defends against CSRF attacks.
  • Supports both browsers and Node.js environments;
  • Ability to cancel requests and automatically convert JSON data.

react-query

⚛️ Hooks for fetching, caching and updating asynchronous data in React

Github.com/tannerlinsl…

React-query is a hook used in react projects to retrieve, cache, and update asynchronous data. The library has the following features:

  • Multi-layer cache + automatic garbage collection;
  • Support for paging and cursors based queries;
  • Support for loading more, unlimited scrolling queries and scrolling recovery;
  • Automatic caching + refetching (valid when revalidated, window refocused, polling/real-time).

✨ Read further ✨

  • What can be learned from the 77.9K Axios project

Data is stored

PouchDB

🐨 -pouchdb is a pocket-sized database.

Github.com/pouchdb/pou…

PouchDB is an in-browser database that allows applications to save data locally so that users can enjoy all the features of the application even when offline. In addition, data is synchronized between clients, so users can stay up to date anytime, anywhere.

PouchDB also runs in Node.js and can be used as a direct interface to CouchDB-compatible servers. The API works the same in every environment, so you can spend less time worrying about browser differences and more time writing clean, consistent code.

PouchDB supports all modern browsers:

  • Firefox 29+ (Including Firefox OS and Firefox for Android)
  • Chrome 30+
  • Safari 5+
  • Internet Explorer 10+
  • Opera 21+
  • The Android 4.0 +
  • IOS 7.1 +
  • Windows Phone 8+

PouchDB uses IndexedDB behind the scenes and falls back to Web SQL if the current environment does not support IndexedDB.

Rxdb

💻 🔄 📱 A realtime Database for JavaScript Applications.

github.com/pubkey/rxdb

RxDB (Reactive Database) is a NoSQL Database for JavaScript applications such as websites, hybrid applications, Electron Apps, Progressive Web Apps, and Node.js. Reactive means that you can not only query the current state, but also subscribe to all state changes, such as the result of a query or a single field in a document.

RxDB supports the following features:

  • Mango-query: Supports the MQuery API to retrieve data from collections and supports the chained mongoDB Query style.
  • Replication: Because RxDB is dependent on PouchDB, it is easy to synchronize data between the terminal device and the server.
  • Reactive: RxDB makes synchronizing DOM status easy.
  • MultiWindow/Tab: When two instances of RxDB use the same storage engine, their state and flow of operations will be broadcast. This means that for both browser Windows, data changes in window #1 also automatically affect data state in window #2.
  • Schema: using jsonschema, Schemas are defined to describe data formats.
  • Encryption: By setting the mode field to encrypted, the value of the field is stored in encrypted mode and cannot be read without a password.

✨ Read further ✨

  • Front-end storage in addition to localStorage and what

Micro front-end

qiankun

📦 🚀 Blazing fast, simple and completed solution for micro frontends.

Github.com/umijs/qiank…

Qiankun is a single spa-based micro front-end implementation library designed to make it easier and painless to build production-usable micro front-end architecture systems. Currently, Qiankun has served over 200+ online applications inside ant, and it is absolutely reliable in terms of ease of use and completeness.

The library has the following features:

  • 📦 is based on the single-SPA package, providing a more out-of-the-box API;
  • 📱 stack independent, any stack application can use/access, whether React/Vue/Angular/JQuery or other frameworks;
  • 💪 HTML Entry access allows you to access micro-applications as simple as using iframe;
  • 🛡 style isolation to ensure that styles between microapplications do not interfere with each other;
  • 🧳 JS sandbox to ensure that global variables/events between microapplications do not conflict;
  • ⚡️ Resource preloading: preloads unopened micro-application resources in the idle time of the browser to accelerate the opening speed of micro-applications;
  • 🔌 Umi plugin provides @umijs/ plugin-Qiankun for UMI applications to switch to a micro front-end architecture system with one click.

single-spa

The router for easy microfrontends

Github.com/single-spa/…

Single-spa is a JavaScript micro front end framework that aggregates multiple single-page applications into one overall application. There are many benefits to using single-SPA for front-end architecture design, such as:

  • Deploy each single-page application independently;
  • Improved initial load time, late load code;
  • New features use new frameworks, and old single-page apps can coexist without rewriting;
  • Use multiple front-end frameworks on the same page without refreshing the page (React, AngularJS, Angular, Ember, etc.).

✨ Read further ✨

  • Most complete micro front set

Form designer

form-generator

✨Element UI form design and code generator

Github.com/JakHuang/fo…

form-render

🚴♀️ Easy-to-use form rendering engine across component architectures – quickly generate custom form configuration interface with JSON Schema

Github.com/alibaba/for…

H5 page Designer

gods-pen

Vue based on the high extension of online web page production platform, can be customized components, can add scripts, data statistics.

Github.com/ymm-tech/go…

luban-h5

Similar to yi Qixiu H5 production, building tools, visual construction system.

Github.com/ly525/luban…

Document management

storybook

📓 The UI component explorer. Develop, document, & test for React, Vue, Angular, Ember, Web Components, & more!

Github.com/storybookjs…

Storybook is a development environment for UI components. It allows you to browse through a library of components, see the different states of each component, and develop and test components in an interactive manner.

Storybook runs outside of your application. This allows you to develop UI components independently, and you can increase their reusability, testability, and speed of development. You can build quickly without worrying about application-specific dependencies.

TypeDoc

Documentation generator for TypeScript projects.

Online address: typedoc.org/

TypeDoc is used to convert comments in TypeScript source code into HTML documents or JSON models. It is flexible and extensible and supports a variety of configurations.

API management

yapi

YApi is a visual interface management platform that can be deployed locally, connected to the front and back ends and QA

github.com/ymfe/yapi

YApi is an efficient, easy-to-use and powerful API management platform, which aims to provide more elegant interface management services for development, product and test personnel. YApi can help developers easily create, publish, and maintain apis. YApi also provides users with excellent interactive experience. Developers only need to use the interface data writing tool provided by the platform and simple click to manage the interface.

The project has the following features:

  • Structure and documents that return data based on Json5 and Mockjs definition interfaces, making it multiple times more efficient;
  • The flat permission design ensures the management of large enterprise-level projects and the ease of use.
  • Postman-like interface debugging;
  • Automated testing with support for Response assertions;
  • In addition to supporting normal random mocks, MockServer adds the ability to mock expectations, which return expected data based on set request filtering rules;
  • Supports Postman, HAR, Swagger data import;
  • Free open source, Intranet deployment, information is no longer afraid of leakage.

APIJSON

🏆 Code cloud most valuable open source project 🚀 back-end interface and document automation, front-end (client) custom returned JSON data and structure!

Github.com/Tencent/API…

APIJSON is a JSON network transport protocol designed for API and an ORM library based on this protocol. APIJSON provides a fully automated API for “simple additions, modifications, complex queries, and simple transactions,” which can significantly reduce development and communication costs, simplify the development process, and shorten the development cycle. It is suitable for small and medium-sized projects with front and rear end separation, especially BaaS, Serverless, Internet entrepreneurship projects and enterprise self-use projects.

The project has the following features:

  • With an automated API, the front end can customize any data, any structure!
  • Most HTTP backend requests don’t need to write interfaces anymore, much less documentation!
  • No more interface or documentation issues between the front end and the back end! No more documentation errors pits!
  • The back end no longer has to write new versions and documents to be compatible with older ones! No longer be constantly bored by the front end!

Focus on the “full stack of the road to the immortal” to read the original three free e-books (accumulated downloads of nearly 20,000) and 7 source code analysis series tutorial.

In this article, I introduced the open source projects that can deal with the top ten work scenarios, hoping to help or inspire you. If you have other good open source projects, welcome to leave a message recommended to my brother Yo.