Today I recommend two Tencent open source front-end frameworks, namely wujie (unbounded) and Omi.
wujie (unbounded)
Unbounded micro-frontend is a micro-frontend framework based on Web Components + iframe, which has a series of advantages such as low cost, fast speed, native isolation, and strong functions.
Web Components is a component packaging technology natively supported by browsers, which can effectively isolate the styles between elements. iframe can provide a native isolated running environment for sub-applications. Compared with self-constructed sandbox iframe, it provides independent window and document , history, and location can be better decoupled from the outside world.
The unbounded micro-frontend adopts the sandbox mode of webcomponent + iframe, which solves the above problems relatively well under the premise of realizing native isolation.
characteristic
low cost
Low cost of use for the main application
Low sub-application adaptation cost
high speed
The opening speed of the first screen of the sub-app is fast
Sub-apps run fast
Native isolation
CSS styles can be strictly natively isolated through Web Components
js runs in iframe to achieve strict native isolation
Powerful
Support sub-application keep alive
Support sub-application nesting
Support for multiple application activation
Support application sharing
Support for decentralized communication
Support for lifecycle hooks
Support plug-in system
Support vite framework
Open source project address: https://github.com/Tencent/wujie
Water
Omi is a front-end cross-framework cross-platform framework.
characteristic
Cross-framework, any framework can use Omi custom elements
Provide desktop, mobile and applet overall solutions
Small size and high performance
Design based on Shadow/Light Dom
In line with the development trend of browsers and API design concepts
Web Components + JSX/TSX merged into one framework Omi
JSX/TSX is the UI expression with the best development experience (smart prompts), the least grammatical noise, and Turing completeness. The template engine is not complete, and the template string is complete but the grammatical noise is too much
Look at the comparative advantages of Facebook React and Web Components, Omi combines the advantages of each, and gives developers the freedom to choose the way they like
Shadow/Light DOM and Virtual DOM are integrated. Omi uses both virtual DOM and real Shadow DOM to make the view update more accurate and faster
The best solution for partial CSS (Shadow DOM), the community has tossed a lot of frameworks and libraries for partial CSS (using js or json to write styles, such as: Radium, jsxstyle, react-style; binding with webpack to generate a unique className file Name-class name-hash value, such as: CSS Modules, Vue), and the way of injecting scoped atrr at runtime are all hack technologies; Shadow DOM Style is the most perfect solution
Friendly to custom elements, pass false through the string '0' or 'false', pass any complex type through: and Omi.$
Enhanced CSS to support rpx units, based on 750 screen width
The project also gives nearly 20 examples, such as: the Snake game with MVP architecture written by Omi, Omi Piano, and static website documents generated with Markdown, etc.
Open source project address: https://github.com/Tencent/omi
------
We have created a high-quality technical exchange group. When you are with excellent people, you will become excellent yourself. Hurry up and click to join the group and enjoy the joy of growing together. In addition, if you want to change jobs recently, I spent 2 weeks a year ago collecting a wave of face-to-face experience from big factories. If you plan to change jobs after the festival, you can click here to claim it !
recommended reading
··································
Hello, I am DD, a programmer. I have been developing a veteran driver for 10 years, MVP of Alibaba Cloud, TVP of Tencent Cloud. From general development to architect to partner. Along the way, my deepest feeling is that we must keep learning and pay attention to the frontier. As long as you can persevere, think more, complain less, and work hard, it will be easy to overtake on curves! So don't ask me if it's too late to do what I do now. If you are optimistic about something, you must persevere to see hope, not to persevere only when you see hope. Believe me, as long as you stick to it, you will be better than now! If you have no direction yet, you can follow me first, and I will often share some cutting-edge information here to help you accumulate capital for cornering and overtaking.