This series of articles talking about what?
This series of articles describes how the front in modern ecology, create an industrial level of the library. In recent years, front-end engineering, modular, component-based overwhelming tide, more than in the past to solve the pain points of the architecture, but creates a problem of information overload; I hope that by sharing their own experiences to help people step on small pit multi Chuhuo.
Why do we need to develop a front-end library do?
In the project development process, there are always some functions are identical or similar, if you simply copy and paste this code, then congratulations to you, in time, the demand for a change, you can only taste the bitter fruit of self.
You say, this is not simple, drawn into a public method public does not like it? On the right, but please put a little wide field of vision came alive again: At work, we are likely to participate in the development of different projects, these projects are placed in different warehouse code, so I'm sorry, you write public methods or not public ; in addition, the popular micro-services / micro front has always been a big project to split into smaller size to develop, store and deploy, you write public methods and how the public in this front-end micro-architecture it?
Therefore, we can consider some of the higher value of reuse code segments, abstracted form a library, so we are free to use both within the project team, as well as across the project team for output, and even contribute to the open source community.
What kind of code for the library to make it?
Based front-end component of this idea, I think as long as a function of the internal logic of stable foreign but also to provide a clear interface, then this feature can be made into a library.
The form of libraries are diverse, can be a function, can be a class, it can be a UI component that can be a whole page (the page to make a number of public libraries in the micro front-end architecture is also a very good public select), or even a common style file (pure css).
Audience This series is?
Write this series of articles, I will be able to pre-readers in the modern front-end system, skilled write business code, and have some knowledge of webpack. In addition, because of my own technology stack limit, I will be mainly at an angle vue / native javascript to write articles, but you should be able to easily find technical and conceptual react / angular corresponding.
This series of articles about the content preview
- Use webpack library member and the distal end member is generally not the same application point
- Field development
- Browser Compatibility
- Documentation and use of documents
- Development of norms
- unit test
- Continuous Integration
- release
Examples of project code Description
In my working life, I wrote most of the libraries are written for the company's projects, unfortunately can not be with them, but I will I recently wrote two open source libraries: JavaScript-Library-boilerplate and vue- directive-window to be described as an example auxiliary item code.
javascript-library-boilerplate
javascript-library-boilerplate is a quick build scaffolding javascript library of modern front-end eco (also known as a seed project, also known as sample code, see you understand), this library supports the GitHub repository templates feature, you can click directly on the project home page Use this template to directly apply this scaffolding code to create your own javascript library.
vue-directive-window
vue-directive-window is a modal box allows quick (Modal) enhanced support window class library operation; window-based operation includes three categories: dragging movement, drag resize the window, maximize the window; vue-directive -window Vue supports custom commands or general js class way to invoke.
vue-directive-window relative to the javascript-library-boilerplate, the closer Vue ecosystem, if you want to contribute to the Vue recently ecosystem, may wish to refer this project.
I want to read more technical articles? I go to the GitHub blog Array-Huang / blog to, if there is help for you, please take a Star & Watch Bo Ha (〃 ^ ω ^)