This article introduces Element3 formally
I also directly put zhihu’s answer over ~~
How do you see the future of element3 and Element Plus? Will coexist or one side crush? Spring goes and spring comes again
Seeing this topic, it’s a good time to answer something you’ve done recently as an element3 core developer
There are actually only two reasons for doing element3:
- Do some technical output for the community
- Provide better teaching resources for developers
When @snail Laosweh-Da Sheng initiated this project, he finished the initial adaptation work, I just participated in the development of a few components, and then he talked to me
I talked about his positioning and ideas for Element3, and I also felt that UI frameworks for education made a lot of sense, and my previous work experience was building component libraries, which led me all the way up to now
What does element3 do
Let’s review what we’ve done since July
Refactoring logic
Our initial idea was to get the project running first, so we directly upgraded the original code for VUE3.
Technical solution adopted at that time:
- Start by adding a test security
- Refactoring the internal logic of its components
Initially, element-UI was used to test components using logic we wrote ourselves, which we replaced directly with VTU
The basic approach is to override the previous component logic in vtU.
With the safety net of testing in place, we refactor the original component logic using the Composition API
This ensures that components can run quickly
Document to upgrade
The solution we adopted for the official website documentation was to update all the demos and upgrade the previous Options API to composition API
Make it easier for new users to see how the Composition API works
It has also applied for a new domain name for easy user access: element3-uenterp rise
Package using rollup
On build, we dropped WebPack in favor of rollup
Multiple environments are supported:
- CJS (NodeJS Environment)
- Esm-browser (Browser environment)
- Esm-bundler (for packaging tools)
- Gloabl (global introduction)
The new logo
We also designed the element3 logo
And a little peripheral
Current results
component
Ninety-five percent of the component logic has been refactored so that users can use it directly, support multiple environments, and load on demand
Temporarily unsupported components:
Welcome to pr
Special instructions
The PR of the table component is borrowed from the element-Plus implementation
This is why we purposely highlight it on readme.md
We’ll rewrite it later
The document
The demo of all component documents is completely rewritten using composition API
If there are any omissions, please point them out
Tutorial output
In addition to doing a good job on the basis of development, but also produced a large number of tutorials
- Rewrite Button components by hand
- Vue3 Pothole Avoidance Guide: Resolve logic inconsistencies between DEV and PROd environments
- Developing Components with TDD — Notification (Part 1)
- Development of Components using TDD — Notification (Part 2)
- Here’s what you need to be prepared to win vue3
- Element3 Development Insider – Vue CLI plug-in development
- Element3.0 Upgrade Diary-Timeline component
- Work with me on Vue3 version ElementUI
We also have team Language Sparrow, which also has a lot of tutorials on Flower and Fruit Hill
Issues and pr
The number of existing issues and PR processing is not more than 10
It is our philosophy to serve the problems and needs of every developer
1.9 k star
Element3 doesn’t have a lot of exposure, except for nuggets and zhihu
However, we still have 1.9K star, which has won some recognition from everyone
community
We have a small developer base of 1500+
And enlist 10+ community active contributors.
The future planning
The component logic
The component logic is rewritten using TDD development
First of all, the composition API implemented from the Options API was not elegant enough. Most of them were hard changed from the Options API without considering the whole.
Secondly, with the composition API, you can continue to extract the common logic and precipitate a library of composition apis
Finally, I was not satisfied with the original component test, and the coverage needed to reach at least 80%.
Not only will users feel more comfortable with it, but they will feel more comfortable with subsequent extensions as well.
See this article to learn how to rewrite Button components using TDD touch
The tutorial
Tutorials are a feature of our teaching and research team. In addition to the normal development pace, tutorials are written for each component to help the majority of front-end developers learn
And in addition to text, there will be accompanying video.
The purpose is very simple, is to help everyone study well, day day up
website
Although the existing official website demo has been relatively clear, novice can understand a look, but it is not enough
In the future, we will use StroyBook to rewrite the component demo to make the experience of novice users more friendly
stroybook
monorepo
Monorepo is now used to manage projects in major libraries
The current technical solution is as follows: Lerna works with Yarn
Later we will use workspace of NPM V7 to do the upgrade
TS
Introduce typescript to refactor components
Exploration for the future
Exploring the future, with the Composition API, we can imagine the future direction of component libraries
For example, whether the user can override the internal logic of the component
Just like CSS, defining a class overrides the overrides
Class is the interface and style is the logic.
open
In addition to normal research and development and user use, we are also actively trying to be more open
Such as:
- Organize offline activities
- Provide technical support, etc
The last
So that’s what we do with Element3 and what we’re going to do in the future.
We just want to get down to business and contribute to the community
And it will help us grow, so we will keep doing it
If you have any ideas, you can join us