|
| 1 | +--- |
| 2 | +sidebar_position: 4 |
| 3 | +title: Why There's TypeScript Editor Inside Rete? |
| 4 | +sidebar_label: TypeScript in Rete Editor |
| 5 | +description: Understanding the synergy between visual programming and text-based scripting (TypeScript, JavaScript, JSON) within Bitbybit's Rete editor. |
| 6 | +tags: [getting-started, rete, typescript] |
| 7 | +--- |
| 8 | + |
| 9 | +<img |
| 10 | + class="category-icon-small" |
| 11 | + src="https://s.bitbybit.dev/assets/icons/white/code-icon.svg" |
| 12 | + alt="Coding editors category icon" |
| 13 | + title="Coding editors category icon" /> |
| 14 | + |
| 15 | +import Admonition from '@theme/Admonition'; |
| 16 | + |
| 17 | +You might have noticed that Bitbybit's Rete visual programming editor includes integrated editors for TypeScript, JavaScript, and even JSON. At first glance, this might seem counterintuitive. If visual programming is so powerful, why "cheat" by including code editors? |
| 18 | + |
| 19 | +The answer lies in our philosophy of providing both an intuitive entry point and a pathway to deeper control and understanding. Visual programming is fantastic for many things, but it's one tool in a larger creative and development toolkit. |
| 20 | + |
| 21 | +## Visual Programming: The Intuitive Surface |
| 22 | + |
| 23 | +Wiring algorithms together visually with nodes and connections in Rete is: |
| 24 | + |
| 25 | +* **Intuitive:** It often maps more directly to how we think about data flow and processes. |
| 26 | +* **Expressive:** Complex relationships can be visualized and understood quickly. |
| 27 | +* **Engaging:** It's a fun and interactive way to build logic, especially for those new to programming or exploring new domains like 3D geometry. |
| 28 | + |
| 29 | +Bitbybit offers a vast library of pre-built Rete components (currently over 1,300 and growing!). These components encapsulate a significant amount of underlying code, making complex operations accessible through simple visual blocks. |
| 30 | + |
| 31 | +<Admonition type="info" title="The Iceberg Analogy"> |
| 32 | + Think of the visual components as the visible tips of icebergs. They are powerful and useful on their own. However, beneath each one lies a much larger, more intricate body of code—the "deep ocean" of algorithms and logic that makes them work. |
| 33 | +</Admonition> |
| 34 | + |
| 35 | +## Scripting Editors: Your Submarine for Deeper Exploration |
| 36 | + |
| 37 | +While visual components cover a vast range of functionalities, there are times when you need to dive deeper. This is where the integrated scripting editors become invaluable. They are your "submarines," allowing you to: |
| 38 | + |
| 39 | +1. **Access Unexposed Functionality:** |
| 40 | + * Not every single feature or parameter of underlying libraries (like BabylonJS can be exposed as a visual node. Sometimes, for fine-grained control or to access very specific, less commonly used features, writing a few lines of code is the most direct and efficient way. |
| 41 | + * **Example:** You might want to tweak an advanced particle system property in BabylonJS that doesn't have a dedicated Rete node yet. |
| 42 | + |
| 43 | +2. **Implement Custom Logic:** |
| 44 | + * There will always be scenarios unique to your project that require custom logic not covered by existing components. Instead of waiting for a new component, you can implement it directly with TypeScript or JavaScript. |
| 45 | + * **Example:** "Ugh, if only I could just write these five lines of code to combine these data points in a very specific way..." With the script editor, you can! |
| 46 | + |
| 47 | +3. **Prototype and Extend:** |
| 48 | + * If you find yourself repeatedly writing the same custom script, it might be a candidate for a new, reusable Rete component. The script editor is a great place to prototype this logic. If the idea proves to be generic and useful, we might even incorporate it as a new official component in a future release. |
| 49 | + |
| 50 | +4. **Debug and Understand:** |
| 51 | + * Sometimes, seeing the underlying data or a snippet of code can help you understand why a visual graph isn't behaving as expected. The JSON editor can be useful for inspecting the raw structure of your Rete graph. |
| 52 | + |
| 53 | +5. **Overcome Limitations and Avoid Getting Stuck:** |
| 54 | + * One of the most powerful aspects of this hybrid approach is that you're rarely truly "stuck." If a visual approach hits a wall, you have an alternative. This flexibility is crucial for more complex projects and continuous development. |
| 55 | + |
| 56 | +## A Pathway for Growth: From Explorer to Developer |
| 57 | + |
| 58 | +Bitbybit is designed to be a learning platform. We want to help users grow from curious explorers of visual programming to confident developers capable of tackling complex challenges. |
| 59 | + |
| 60 | +* **Visual Programming as a Gateway:** Rete provides an accessible and engaging entry point. It lowers the barrier to creating sophisticated 3D scenes and algorithmic designs. |
| 61 | +* **Scripting as the Next Step:** As your projects become more ambitious, or your curiosity drives you to understand the "how," the scripting editors are there to support your journey. Learning to read and write code unlocks a new level of capability and understanding. |
| 62 | + |
| 63 | +While "vibe coding" and AI-assisted development are exciting trends, the fundamental ability to understand and write code remains an invaluable skill. Think of visual programming as your map and compass, and scripting as your diving gear—both essential for exploring the vast ocean of possibilities. |
| 64 | + |
| 65 | +<Admonition type="tip" title="Practical Example"> |
| 66 | + Want to see this hybrid approach in action? |
| 67 | + <ul> |
| 68 | + <li>Check out tutorials (like those found at [Bitbybit School](https://bitbybit.dev/school/courses/typescript-component-for-magical-powers-in-rete)) that might show how scripting can complement visual graphs.</li> |
| 69 | + <li>Explore live demo projects (like the one at [Magical Paricles Project](https://bitbybit.dev/projects/public/HyCMepiRhTWfua1QRaba/project-magical-particles-by-author-bitbybit)) where this synergy is applied.</li> |
| 70 | + </ul> |
| 71 | +</Admonition> |
| 72 | + |
| 73 | +## It's Not "Either/Or" — It's "Both/And" |
| 74 | + |
| 75 | +The inclusion of TypeScript, JavaScript, and JSON editors within the Rete environment isn't about choosing one paradigm over the other. It's about providing a flexible, powerful, and adaptable platform where you can use the best tool for the task at hand, and grow your skills along the way. |
| 76 | + |
| 77 | +Happy exploring, and happy coding! |
0 commit comments