<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <id>https://netease.github.io/tango/en/blog</id>
    <title>使用 Tango 构建你的低代码生产力工具 Blog</title>
    <updated>2023-08-30T00:00:00.000Z</updated>
    <generator>https://github.com/jpmonette/feed</generator>
    <link rel="alternate" href="https://netease.github.io/tango/en/blog"/>
    <subtitle>使用 Tango 构建你的低代码生产力工具 Blog</subtitle>
    <icon>https://netease.github.io/tango/en/img/favicon.ico</icon>
    <entry>
        <title type="html"><![CDATA[Tango LowCode Builder Released!]]></title>
        <id>https://netease.github.io/tango/en/blog/2023/08/30/welcome</id>
        <link href="https://netease.github.io/tango/en/blog/2023/08/30/welcome"/>
        <updated>2023-08-30T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[📝 Introduction]]></summary>
        <content type="html"><![CDATA[<h2 class="anchor anchorWithStickyNavbar_fF9Z" id="-introduction">📝 Introduction<a href="#-introduction" class="hash-link" aria-label="Direct link to 📝 Introduction" title="Direct link to 📝 Introduction">​</a></h2><p>Tango is a low-code builder framework for quickly building low-code platforms or tools. With Tango, you only need a few lines of code to build a basic low-code builder. The Tango low-code builder reads the source code of the frontend project directly, executes and renders the frontend view based on the source code, and provides users with low-code visual building capabilities. User's building operations will be translated into modifications to the source code. With low-code tools or platforms built using Tango, it is possible to achieve the effect of "source code in, source code out" and seamlessly integrate with the existing development flow within the enterprise.</p><h3 class="anchor anchorWithStickyNavbar_fF9Z" id="-features">✨ Features<a href="#-features" class="hash-link" aria-label="Direct link to ✨ Features" title="Direct link to ✨ Features">​</a></h3><ul><li>After actual testing in the production environment of NetEase Cloud Music, it can be flexibly integrated and applied to low-code platforms, local development tools, and more.</li><li>Driven by source code AST, with no private DSL and protocols.</li><li>Provides real-time code output capability, supports source code input and output.</li><li>Out-of-the-box front-end low-code designer, providing flexible and easy-to-use designer React components.</li><li>Developed using TypeScript, providing complete type definition files.</li></ul><h3 class="anchor anchorWithStickyNavbar_fF9Z" id="️-code-based-low-code-solution">🏗️ Code-based Low-Code Solution<a href="#️-code-based-low-code-solution" class="hash-link" aria-label="Direct link to 🏗️ Code-based Low-Code Solution" title="Direct link to 🏗️ Code-based Low-Code Solution">​</a></h3><p>Due to the fact that the engine kernel is completely based on the source code-driven implementation, Tango low-code engine can achieve the visualization building capability of source code input and source code output, without providing any private intermediate products. If the company already has a complete R&amp;D system (code hosting, building, deployment, CDN), Tango low-code engine can be directly used to integrate with existing services to build a low-code development platform.</p><p><img loading="lazy" alt="engine flow" src="/tango/en/assets/images/engine-flow-7059c2a7522a5f6ef996a913579cfda5.png" width="2372" height="406" class="img__Ss2"></p><h3 class="anchor anchorWithStickyNavbar_fF9Z" id="-code-in-code-out">📄 Code in, Code out<a href="#-code-in-code-out" class="hash-link" aria-label="Direct link to 📄 Code in, Code out" title="Direct link to 📄 Code in, Code out">​</a></h3><p>Due to the engine kernel being completely driven by source code, the Tango low-code engine can achieve the visual construction capability of source code in and source code out, without providing any private intermediate products. If the company already has a complete development system (code hosting, building, deployment, CDN), then it can directly use the Tango low-code engine to integrate with existing services to build a low-code development platform.</p><p><img loading="lazy" alt="code in, code out" src="/tango/en/assets/images/codein-codeout-5effb2d60bb0cb669938c7886efdaf89.png" width="2454" height="1092" class="img__Ss2"></p><h3 class="anchor anchorWithStickyNavbar_fF9Z" id="-advantages">🏆 Advantages<a href="#-advantages" class="hash-link" aria-label="Direct link to 🏆 Advantages" title="Direct link to 🏆 Advantages">​</a></h3><p>Compared to the low-code building solution based on private schema, Tango low-code engine has the following advantages:</p><table><thead><tr><th>Comparison Items</th><th>Schema-base low-code solution</th><th>Tango (Code-based)</th></tr></thead><tbody><tr><td>Applicable Scenarios</td><td>Targeted vertical building scenarios, such as forms, marketing pages, etc.</td><td>🔥 Applicable to application building scenarios centered on source code</td></tr><tr><td>Language Capabilities</td><td>Relies on private protocols for extension, inflexible, and difficult to align with programming language capabilities</td><td>🔥 Based directly on JavaScript language, can use all language features, no extensibility issues</td></tr><tr><td>Development Capability</td><td>LowCode</td><td>🔥 LowCode + ProCode</td></tr><tr><td>Source Code Export</td><td>Centered on schema, one-way code output, irreversible</td><td>🔥 Source code-centered, two-way transcoding</td></tr><tr><td>Custom Dependencies</td><td>Need to be encapsulated according to private protocol extension, high customization cost</td><td>🔥 Existing components can be seamlessly and low-cost integrated</td></tr><tr><td>Integrated R&amp;D Facilities</td><td>High customization cost, additional customization required</td><td>🔥 Low-cost integration, can directly reuse existing deployment and publishing capabilities</td></tr></tbody></table><p>The specific technical architecture is shown in the following figure:</p><h2 class="anchor anchorWithStickyNavbar_fF9Z" id="-architecture">📐 Architecture<a href="#-architecture" class="hash-link" aria-label="Direct link to 📐 Architecture" title="Direct link to 📐 Architecture">​</a></h2><p>The Tango low-code engine has been layered and decoupled in implementation, enabling independent development and maintenance of the upper-level low-code platform and the lower-level low-code engine, allowing for fast integration and deployment. In addition, Tango's low-code engine defines an open material ecosystem, allowing developers to freely contribute to extension components and configure property setters that enhance low-code materials.</p><p>The specific technical architecture is shown in the following diagram.</p><p><img loading="lazy" alt="low-code engine" src="/tango/en/assets/images/engine-components-ce0610b4888d60a3591ffb629ff4d62f.png" width="2350" height="1134" class="img__Ss2"></p><h2 class="anchor anchorWithStickyNavbar_fF9Z" id="-milestones">⏰ Milestones<a href="#-milestones" class="hash-link" aria-label="Direct link to ⏰ Milestones" title="Direct link to ⏰ Milestones">​</a></h2><p>Tango low-code engine is the core component of NetEase Cloud Music's internal low-code platform. Open sourcing involves a lot of decoupling work of core logic, which will bring us a lot of additional work in our normal work. Therefore, we plan to promote the open source of Tango low-code engine in stages.</p><ol><li>Today we officially released the first community version of Tango low-code engine, which will include the core code library of Tango low-code engine, TangoBoot application framework, and low-code component library adapted to antd v4.</li><li>We plan to release the 1.0 Beta version of the low-code engine on September 30th this year. This version will refactor the core implementation for community scenarios, remove some compatibility code we have internally in Cloud Music, and optimize the implementation of the core.</li><li>We plan to release the 1.0 RC version of the low-code engine on October 30th this year. This version will ensure that the core API is basically stable and no longer has BREAKING CHANGE. At the same time, we will provide comprehensive and detailed development guides, deployment documents, and demonstration applications.</li><li>The official version will be released before the end of Q4 2023, and we will further improve our open source community operation mechanism.</li></ol><p><img loading="lazy" alt="milestones" src="/tango/en/assets/images/tango-milestones-9d5c77551a9197dbd3a96a75ff294f11.png" width="1196" height="176" class="img__Ss2"></p><h2 class="anchor anchorWithStickyNavbar_fF9Z" id="-community">🤝 Community<a href="#-community" class="hash-link" aria-label="Direct link to 🤝 Community" title="Direct link to 🤝 Community">​</a></h2><p>Our open source work is actively advancing, and you can learn about our latest progress through the following information:</p><ul><li>Github Repository: <a href="https://github.com/NetEase/tango" target="_blank" rel="noopener noreferrer">https://github.com/NetEase/tango</a></li><li>Documentation Site: <a href="https://netease.github.io/tango/" target="_blank" rel="noopener noreferrer">https://netease.github.io/tango/</a></li></ul><p>Welcome everyone to join our community and participate in the open source construction of the Tango low-code engine. Any questions can be reported to us through <a href="https://github.com/NetEase/tango/issues" target="_blank" rel="noopener noreferrer">Github Issues</a>, and we will follow up and deal with them promptly.</p><h2 class="anchor anchorWithStickyNavbar_fF9Z" id="-acknowledgements">💗 Acknowledgements<a href="#-acknowledgements" class="hash-link" aria-label="Direct link to 💗 Acknowledgements" title="Direct link to 💗 Acknowledgements">​</a></h2><p>Thanks to the Netease Cloud Music Public Technical Team, the Front-End Team, the Live Broadcasting Technical Team, and all the colleagues who participated in the Tango project.</p><p>Thanks to the Sandpack project provided by CodeSandbox, which provides powerful browser-based code building and execution capabilities for Tango.</p><p>Tanks to the Babel project, which provides powerful javascript ast parsing and traversing capabilities for Tango.</p>]]></content>
        <author>
            <name>Wells SUN</name>
            <uri>https://github.com/wwsun</uri>
        </author>
        <category label="netease" term="netease"/>
        <category label="tango" term="tango"/>
        <category label="open-source" term="open-source"/>
    </entry>
</feed>