DEV Community: 张传辉

A Stunning New AI Coding IDE Is Released

张传辉 — Tue, 29 Jul 2025 02:13:41 +0000

With major breakthroughs in large - model technologies such as GPT - 4o, Claude - 3.5, and Qanwen3 - corder, many large enterprises at home and abroad are competing to launch their own AI Coding IDE products. Tools like Cursor and GitHub Copilot, which are already well - known, are quite popular among developers. Domestically, large companies such as ByteDance, Alibaba, and Tencent have also launched related products like Trae, Tongyi Lingma, and Tencent Cloud Code Assistant CodeBuddy respectively. Today, we focus on introducing a newly launched AI Coding IDE - Joker Intelligent Visual IDE.

Joker Intelligent Visual IDE focuses more on web - end project development. Combined with an AI Coding assistant, it provides a more efficient, stable, and flexible visual development experience, taking AI Coding from the coding era to the visual interaction era. Through AI - driven code generation, intelligent completion, and a visual development interface, it greatly improves developers' efficiency, especially demonstrating significant advantages in enterprise - level development and web application scenarios.

It is committed to serving developers globally by adapting well to various development environments and collaborating seamlessly with international practices. This makes it a versatile tool that can be smoothly utilized by developers from different regions and backgrounds in their web project development efforts.

A Highly Flexible Front - end Visual IDE

In the traditional development process, web - end project development often requires developers to spend a lot of time writing code, repeatedly debugging styles and layouts. The process is tedious and prone to various compatibility issues. However, Joker has changed this situation. It presents developers with an intuitive operation interface where various front - end components are clearly visible. Page layouts can be easily completed through simple drag - and - drop operations. It is like building with building blocks: placing components reasonably, then finely configuring the properties of the components according to specific project requirements, and the page design can quickly take shape. Moreover, whether it is a simple corporate official website, a front - end page of a large e - commerce platform with many functions and complex interactions, or a social application interface with personalized needs, Joker can skillfully meet the development needs of all these complex scenarios with its high flexibility, turning front - end development from tedious code writing into a creative and interesting visual construction process.

It adopts a model that is in line with developers' habits, allowing complex business logic designs that could only be completed locally to be intuitively presented through online visualization, helping developers get started quickly. What is more noteworthy is that the visual assets we develop can be directly converted into standard source code, supporting secondary development, and the deployment method can also be chosen freely.

AI Coding IDE

With the development of AI towards multi-modality and the continuous evolution of models, cloud-based visual IDE will undoubtedly become an excellent carrier for in-depth integration with AI products. We can imagine such an ideal scenario: when interacting with large models, what they directly generate is no longer just abstract code, but visual results that can be presented instantly. Moreover, by selecting specific elements, you can direct them to modify the relevant content. Such an interactive experience is difficult for current products like Copilot and Cursor to achieve.

The Joker platform has unique advantages. Thanks to its unique underlying design, AI can actively understand the data context at any logical node and then put forward correct repair suggestions covering data types, variable definitions, logical errors and so on. Meanwhile, the visual designer of the Joker platform can help AI efficiently sort out the description information of components and methods, which enables AI to not only utilize the general component knowledge on the Internet but also accurately grasp the usage of private components and private methods.

Core Advantages of Joker AI Coding

Deeply Engaged in Segmented Fields: Focuses on providing professional web - end AI coding assistants with stronger professionalism.
Innovating Visual Interaction Experience: Creates a visual interaction mode for AI coding to accurately capture interaction needs during development.
Unified Context Understanding Standards: All components and methods of the platform follow unified specifications, enabling the AI coding assistant to more accurately understand and identify development intentions.
Supporting Localized Targeted Modifications: With interactive AI coding functions, it can achieve more specific targeted modifications, effectively avoiding unknown risks caused by secondary generation of the entire file.

Permanently Free

For numerous developers, especially independent developers, small start-up teams, as well as teachers and students engaged in teaching and research, the cost of development tools has always been an important factor that needs to be considered. Many powerful development tools on the market require high fees for use, which undoubtedly brings economic pressure to a lot of developers and restricts their exploration in development and innovative practices. However, Joker's free model has broken such restrictions, enabling everyone with a development dream to use this excellent tool without any concerns and to give full play to their creativity to build amazing web projects.

Joker Intelligent Visual IDE, with its innovative functions, permanently free model, and focus on web project development, has brought a new development experience to developers and injected new vitality into the AI Coding IDE field. It is believed that in the future, it will continue to evolve and improve, help more developers realize their creativity, facilitate the efficient implementation of more web projects, and become a bright star in software development tools.

Official website

Joker Visual Coding IDE Update Log - July 27, 2025

张传辉 — Mon, 28 Jul 2025 03:27:13 +0000

Dear users, hello! In this version update, we have significantly achieved the integration of data and two access points for the international and domestic versions of Joker. At the same time, we have brought functional upgrades to the portal, workbench, and core underlying systems, aiming to provide you with a better, more efficient, and multi - region - compliant user experience.

Highlights of Portal Upgrade

Separation of Data Languages and Loading Optimization: The Chinese and English data of the portal has been separated, enabling the loading of different content according to the language, meeting the needs of users in different languages.

Fix for Team Message Reminder: The problem that team managers did not receive system messages when someone applied to join the team has been resolved, ensuring smooth team communication.
Warehouse Traffic and Display Optimization: A warehouse view count statistics function has been added. Combined with an intelligent algorithm, the most popular warehouses are displayed, allowing users to quickly discover high - quality resources.
Optimization of Version Release Process: After completing code inspection and returning to the warehouse home page, the system will automatically open a guidance prompt to help users quickly confirm version information and improve the version release efficiency.
Compliant Handling of Cookies: A Cookie usage description has been added, and a downgraded handling solution for Cookie privacy agreements that complies with EU requirements has been provided to ensure user privacy and security.

Expansion of Social Media Links: More social media accounts of Joker, such as the X platform, ProductHub, and Zhihu, have been added, and quick access entrances are set at the bottom for users to learn more about the latest news.

Optimization of Avatar Upload Function: The avatar upload control has been optimized. For small and extra - large pictures, more reasonable display effects are provided, and users are also supported to crop the image, improving the quality of avatar display.
New Login Method Added: The QQ login authorization function has been added. Users can use their QQ accounts to authorize and log in to Joker, providing more login options.

Enhancements of Workbench Functions

Support for Multilingual Configuration: In data maintenance, multilingual configurations have been added to titles and descriptions. Warehouses are allowed to set multiple languages for data such as variables, methods, and events to meet internationalization needs.

AI Assistant to Facilitate Script Writing: An AI assistant has been introduced in the logical script, supporting functions such as Mock data writing, script logic context recognition, and exception recognition, improving the efficiency and accuracy of script writing.

Independent Application for NPM Resources: An NPM resource application function is provided. Users can independently submit applications for NPM package references to enrich project resources.

Optimization of NPM Version Management: The NPM reference logic has been optimized. There is the ability to manage NPM package versions, support multiple versions of the same NPM package, automatically upgrade versions during project operation, and analyze and remind of reference exceptions.

Guarantee of NPM Resource Loading: The NPM resource reference has been optimized. Automatic switching between the main CDN and the backup CDN is realized. When the main CDN fails to load, it automatically switches to the backup CDN to ensure the smooth loading of NPM online resources in regions such as China.
Optimization of Configuration File Management: In the previous configuration file management, paging functions have been added to Class and CSS Vars, and a batch import function is provided to improve management efficiency.

Fix for Logical Check Issues: Related type check and logical check issues such as for loops and return logical nodes have been resolved to ensure the correctness of code logic.
Automatic Language Switching of AI Assistant: The AI assistant has the ability to automatically recognize languages and can automatically switch between Chinese and English according to the current operating environment, improving usability.

Core Underlying Upgrade

Upgrade of SFC Parsing Library: The SFC parsing library has been upgraded to make Joker syntax parsing more stable and reliable.
Optimization of Joker CLI: The Joker CLI has been upgraded, and the problem of scoped processing for :root styles has been solved, avoiding affecting the configuration of :root root content.
Upgrade of Vscode Plugin: The Vscode Joker Plugin has been upgraded to provide more stable syntax hints and code highlighting functions, enhancing the development experience.

This version update covers multiple dimensions from user experience to functional depth, from local adaptation to international compliance. Every optimization aims to make Joker more suitable for your usage scenarios. We will continue to listen to user feedback and keep iterating to create a more powerful and user - friendly development and collaboration platform for you. Thank you for your support of Joker, and wish you a pleasant use!

Joker FrontEnd framework

张传辉 — Sat, 26 Jul 2025 11:21:45 +0000

Joker

Joker is a framework platform engineered to support all development scenarios. Within its ecosystem, Joker.front stands as a front-end development framework. It delivers standardized front-end development protocols and employs an object-oriented, component-based programming model to facilitate efficient user interface development. Whether handling simple or complex interfaces, Joker.front operates with seamless proficiency.

What is Joker?

Joker is a versatile framework platform built on TypeScript, designed to cater to diverse development needs—from basic interface tasks to complex user interface challenges. It ensures exceptional performance and stability across all use cases. As a key part of this ecosystem, Joker.front serves as a front-end development framework, offering standardized specifications and leveraging object-oriented, component-based programming to streamline efficient UI construction, handling both simple and complex interfaces with ease.

Key features include:

Robust Scalability: Joker provides a component-based framework with scalability as a foundational design principle. It integrates seamlessly into existing projects or systems, supports the construction of scalable web applications, and allows for customization based on project requirements.
Comprehensive Component Library: Joker.front offers a full suite of front-end components, including meticulously designed and optimized functional and UI elements such as routing and scaffolding. These components enable developers to quickly build visually appealing, high-performance user interfaces.
Complete Development Toolchain: To enhance development efficiency, Joker includes a range of supporting tools—such as debugging and build tools—designed to streamline the development process, enabling accurate and rapid coding, building, testing, and updating.
Class API: Joker adopts TypeScript as the standard for script development and employs a standard Class API, aligning with object-oriented development requirements.
Responsiveness: Joker automatically tracks JavaScript states and updates the DOM reactively in real time when states change.
High Performance: It achieves point-to-point data synchronization for data and DOM updates, eliminating the need for DOM difference comparison and delivering a high-performance experience with instant update rendering.
Official Visual Development IDE: Joker comes with its own official visual development IDE, which enables rapid development, allowing developers to build interfaces and implement functions more efficiently through visual operations.

Performance

Joker utilizes specialized rendering logic to map the association between responsive data and the DOM. This enables point-to-point node updates when data changes, bypassing full virtual node redraws and binary tree comparisons—significantly boosting rendering performance.

How to Use

The Joker CLI facilitates project creation, application and library code generation, and continuous development tasks such as testing, packaging, and deployment.

Help Documentation

To install the Joker CLI, open a terminal/console and execute:

pnpm i -g @joker.front/cli

Run the CLI command joker create with the project name my-app:

joker create my-app

Navigate to the my-app directory and install dependencies:

cd my-app

pnpm i

The CLI will generate a new workspace and a simple welcome application, ready for immediate use.

Running the Application

The Joker CLI includes server and build commands. The server command simplifies local application building and service provisioning.

Two default commands are provided: dev (development environment) and build (code building).

Navigate to the workspace folder (e.g., my-app):

cd my-app

Execute the following command:

npm run dev

Upon successful execution, a sample page will be displayed.

Visual Development Tools

A front-end framework with built-in visual tools: Visual Coding IDE

Documentation

Help Documentation

Related Projects

Official Website

Official UI Library

Joker Visual Coding IDE

The JOKER visual development tool has ushered in a major update.

张传辉 — Thu, 20 Mar 2025 01:04:34 +0000

20250319 Version Update Instructions

2025-03-19 11:47:17 20250319 Version Update Instructions

To keep up with the cutting-edge trends in the industry and meet the growing needs of developers, we carried out a comprehensive upgrade of the platform on March 13, 2025. This update focuses on the convenience of front - end interaction, the power of server - side functions, and the smoothness of general operations, with in - depth optimizations in multiple aspects. Notably, in this version, we achieved the association of front - end and back - end projects, marking the complete completion of our front - end and back - end integrated development mechanism. This milestone achievement will significantly improve the collaboration efficiency between the front - end and back - end, break down the data interaction barriers, and work in tandem with other updated content to strive for a more efficient, reliable, and user - friendly development environment for you. The detailed content of this update is as follows:

Front - End

Interface Import Function

The interface import function has been successfully implemented in the interface management section. After developers enter the interface management page, they can enter keywords in the search box to quickly query the list of server - side projects corresponding to them. After selecting a specific server - side project, they can batch - select the required server - side API interfaces and achieve a one - click import operation. If the interface already exists, the interface information can also be quickly updated through this function, greatly improving development efficiency and reducing the cumbersome process of manually entering interface information.

CSS Style Real - Time Preview

During the component development process, the platform now comes with a powerful CSS style real - time preview function. When developers modify the CSS style of a component in the dedicated CSS editing area, the corresponding component on the page will be updated and rendered in real - time, presenting the effect of the style adjustment immediately, just like directly editing a static page locally, achieving true WYSIWYG (What You See Is What You Get) hot update. Moreover, if developers close the editing window without saving the edited content, the CSS style of the component will automatically roll back to its original value, ensuring the stability and controllability of the style version.

Expression Expansion of Routing Jump Logic

In the setting of routing jump logic nodes for front - end logic orchestration, the platform has given a new expression expansion function. In the past, developers could only select from fixed jump address options. Now, they can flexibly specify the jump address by entering dynamic variables. For example, after a user logs in successfully, they can jump to different user operation pages according to the user's role type, a dynamic variable, greatly enhancing the flexibility of the routing jump logic and meeting diverse business requirements.

Default Drag - and - Drop Container Display for Sub - pages

When developing sub - pages in the front - end, if no components have been added to the sub - page yet, the system will default to displaying a clear and eye - catching drag - and - drop container. This drag - and - drop container has obvious markings and prompt information. Developers can intuitively understand the structural framework of the page layout container and directly drag the required components from the component library into this container to quickly build the sub - page structure, reducing the understanding cost of page layout in the initial development stage.

Fix for Selecting Inner Elements of Copied and Pasted Components

The problem that occurred during the component copy - and - paste operation using Ctrl + C/V has been successfully fixed. Previously, after pasting, the inner elements of the component could not be selected, causing great inconvenience for subsequent fine - tuning of the component's internal details. After the update, developers can freely select various elements such as text, icons, and buttons inside the component after completing the component copy - and - paste operation, and perform operations such as style modification and event binding just like operating on the original component, ensuring the integrity and usability of the component copy - and - paste process.

Server - End

New SID_KEY Environment Variable

A new SID_KEY environment variable has been introduced into the configuration system of server - side projects. Developers can define the JWT token value - taking attribute according to actual business requirements during project deployment or in the configuration file. By setting the KEY value of the SID_KEY environment variable, developers can flexibly adjust the basis for obtaining JWT tokens, making the server - side more customizable and adaptable in the identity verification process.

Addition of updateItem Method for MAP - type Caches

For MAP - type caches in the server - side cache, an updateItem method has been newly added. During the project operation, if developers find that the data stored in the MAP cache based on a certain KEY needs to be updated, they can directly call the updateItem method and pass in the corresponding KEY value. This method will automatically obtain the latest data from the data source and refresh the data corresponding to the KEY in the cache, ensuring the real - time nature and accuracy of the cache data and avoiding business exceptions caused by stale cache data.

NPM Service types Reference Expansion

The NPM service has been significantly expanded in functionality and now supports types reference expansion. For packages that do not provide type definitions when published, we will add associated type - type packages for them. This function effectively solves problems such as the lack of code hints and type - checking errors in strong - type language development environments due to the lack of type definitions in packages, improving the development experience and code quality.

Configuration of Enumerated Values for string Fields

When performing field configuration operations, when the field type is selected as string, the platform provides the function of configuring enumerated values (optional values) for it. Developers can implement type constraints on this field in the field configuration interface.

Quick Association of Enumerations for string Field Optional Values on the Server - End

During the startup phase of server - side projects, when configuring optional values for string fields, the platform thoughtfully provides a function for quickly associating enumerations. In the configuration interface, developers only need to click the "Associate Enumeration" button to select the matching enumeration type from the existing data model enumeration type list and quickly establish a binding relationship. For example, when configuring the order status field, it can be directly associated with the order status enumeration type defined in the data model, avoiding the repeated maintenance of order status values in different places and improving development efficiency and data consistency.

Resolution of readme Display Issues on the Workbench Component/Method Market Plug - in Details Page

The readme display issues on the plug - in details page in the workbench component/method market have been resolved. Previously, problems such as the inability to display readme files properly and format confusion occurred on the plug - in details page. After optimization, regardless of the format in which the readme file is written, it can be completely displayed in a clear and tidy format on the plug - in details page. Developers can smoothly view key information such as the plug - in's function introduction, usage method, and update log, facilitating the accurate assessment of whether the plug - in meets project requirements.

Method Return Value Type Deduction Function in Logic Orchestration

In the logic orchestration module, a practical function of "deducing the method return value type based on logic variables" has been added. During the logic orchestration process, developers no longer need to manually maintain the method return value type when creating a method, as in the past. The system can automatically deduce the method return value type based on the input logic variables of the method and the internal logic processing. Developers can quickly configure the method's return type by combining the provided variable types.

Optimization of Method Return Value Type Verification in Logic Orchestration

The method return value type verification mechanism in logic orchestration has been deeply optimized. During the editing process of the return node expression, the system will real - time verify the type of the input value to determine whether it matches the method - defined return type. Once the input value type does not meet the requirements, the system will immediately give a clear error prompt. For example, when the method - defined return value type is a number and the input expression returns a string, it will prompt "The return value type does not match. Please check the expression", helping developers to discover and correct errors in a timely manner and ensuring the correctness and stability of logic orchestration.

With this comprehensive update, the fluency of front - end interaction has achieved a qualitative leap, with more sensitive and accurate visual feedback, greatly enhancing the user operation experience. The server - side demonstrates strong performance in resource scheduling and data processing, significantly shortening the response time and providing a solid guarantee for the stable operation of the system. The general - function module, by constructing a rigorous and flexible type and configuration system, effectively enhances the standardization and freedom in the development process. Most importantly, the successful association of front - end and back - end projects has completely opened up the development link, eliminated data interaction obstacles, optimized the collaboration process, and overcome the key problem that has long restricted development efficiency, building a solid and efficient basic framework for subsequent project development.

Here, we sincerely thank every developer for their unwavering support and valuable feedback over the years. Your suggestions are the driving force for our continuous progress. In the future, we will continue to increase investment in the field of technological innovation, continuously polish the software platform with the attitude of striving for perfection, and move forward hand in hand with the majority of developers. Relying on the significant advantages brought by the front - end and back - end integration, we will deeply explore the development potential and comprehensively improve the development efficiency, jointly promoting the software development industry to steadily move towards new heights and creating a more brilliant industry new situation.

Now, let us share an exciting piece of gossip with you: Our AI assistant has entered the internal testing stage. It will bring a visual AI - interactive development experience, making the development process more intelligent and convenient. In the near future, this innovative function will officially meet you, adding new impetus to your development work. Stay tuned!

JOKER LOWCODE PLATFORM 20250204 UPDATED LOG

张传辉 — Wed, 05 Feb 2025 04:07:21 +0000

This update of the JOKER Low - Code Platform covers optimizations and new features in multiple key areas, including code generation, environment variables, and visual development tools. It is dedicated to providing developers with a more efficient, secure, and convenient development experience. Meanwhile, the official release of server - side functions and core upgrades further enhance the overall performance and competitiveness of the platform.

I. Function Updates and Optimizations

(1) Code Generation Function Optimization

In previous development, the repeated appearance of "?" and "undefined" in the type declarations of null - valued variables often made the code chaotic and increased the probability of errors. This update deeply optimizes this pain point. When developers deal with complex data structures, such as objects nested in arrays where the arrays contain variables of different types, the optimized code generation function can accurately determine null - value situations and reasonably declare types. This not only makes the code structure clearer but also enables the discovery of potential errors during the compilation phase, reduces runtime exceptions, lowers developers' maintenance costs, and improves the overall quality and readability of the code.

(2) New Environment Variable Function

Customization of multi - environment configuration files: In actual project development, different environments have significantly different configuration requirements. Developers can now easily create multiple different environment configuration files according to project needs. For example, in the development environment, detailed log output may be required for debugging; in the test environment, real - production data needs to be simulated without using real sensitive information; and in the production environment, more emphasis is placed on performance and security. By customizing multi - environment configuration files, developers can achieve fine - grained management of different environments and ensure the stable operation of the project at all stages.

Convenient environment variable invocation: On the front - end side, with the help of import.meta.define, when building front - end pages, developers can quickly obtain variables corresponding to different environments. For example, they can get API addresses in different environments and dynamically load different resource files. On the server - side, through process.env, when handling business logic, developers can flexibly configure database connection parameters, cache server addresses, etc. This convenient invocation method realizes differential configuration in multiple environments and greatly improves development flexibility and deployment efficiency.

Data desensitization protection: When non - organizational members access the public repository, the platform will automatically desensitize environment variables. For example, sensitive information such as database passwords and API keys will be replaced with specific desensitization identifiers. This function provides a solid guarantee for enterprise data security, preventing the leakage of sensitive information due to access to open - source repositories and reducing the security risks faced by enterprises.

Generation of different configuration files: During the process of repository code generation, configuration files suitable for different environments will be automatically generated. In the past, developers needed to manually copy and modify configuration files, which was not only cumbersome but also error - prone. Now, whether it is the local configuration for the development environment or the server configuration for the production environment, it can be generated with one click, reducing the cumbersome work of manual configuration and improving development efficiency.

(3) Visual Development Tool Optimization

Optimization of if - judgment nodes: In complex business logic, conditional judgment is a very common operation. Previously, if - judgment nodes were forcibly restricted to the boolean type, which brought a lot of inconvenience to developers. For example, when judging whether a user is logged in, in addition to simple true or false, there may also be a state where the user is not logged in but is in the process of login redirection. After this optimization, a more user - friendly experience in null - value judgment has been achieved. It is no longer forcibly restricted to the boolean type, allowing developers to perform conditional judgments more flexibly, meet the requirements of complex business logic, and reduce code redundancy and errors caused by type restrictions.

Default settings for deeply nested object properties: In the type design panel, when creating properties of deeply nested objects, they are set to non - null by default. For example, when designing an e - commerce order data structure, the order object contains a product list, and each product in the list has detailed properties. Setting these deeply nested properties to non - null by default can effectively reduce potential risks caused by null values, such as null pointer exceptions, improve the reliability and stability of data, and make developers more confident when dealing with complex data structures.

(4) NPM Service Upgrade

Differentiation between web and nodejs: The NPM service has added a differentiation between web and nodejs. In development, the front - end (web) and the server - side (nodejs) have very different requirements for dependent packages. For example, the web - end may need some packages for page rendering and interaction, while the server - side needs packages for database connection and network request handling. By differentiating between web and nodejs, more accurate package query and extension functions are provided for the server - side, enabling developers to more conveniently manage and use different types of dependent packages and avoid development problems caused by mistakenly introducing incompatible packages.

Operation history record: When performing operations such as package reference, uninstallation, and update, the platform will actively record the operation history. When compatibility issues occur in a project after a developer updates a certain package, they can quickly locate which package update caused the problem by checking the operation history. At the same time, these operation histories also provide detailed reference information for version releases. The development team can clearly understand the changes in dependent packages in each version, improving the traceability of project management.

(5) Enhancement of the Type Design Panel Function

Addition of validation condition design: When designing the types of input items in the controller, a new validation condition design function has been added. When designing a user registration interface, validation conditions such as length restrictions and format requirements can be set for input items such as usernames and passwords. In this way, data security and access security can be better managed at the interface design stage, effectively preventing the input of illegal data and malicious access, and improving the security and stability of the system.

Type import function: A function for importing existing types has been provided. Developers can directly import other pre - designed types into the existing types. When developing multiple related projects, there may be some common data types, such as user information types and address types. Through the type import function, duplicate type design work can be avoided, development efficiency can be improved, and code reusability can be promoted, reducing code redundancy.

(6) Visual Operation Panel Optimization

Optimization of running and debugging: When encountering abnormal problems during the development and debugging process, the visual editor will directly pop up a window to prompt error information and provide a function to quickly locate the source of the problem by clicking on the error. In the past, developers might have spent a lot of time searching for the error location in the code during debugging. Now, when syntax errors or logical errors occur, the error code line can be quickly located, greatly shortening the problem - solving time, improving development efficiency, and making the development process more smooth.

(7) Expansion of the Type Design Function

Addition of File and Date types: File upload and date - type functions have been provided for the server - side. When developing a file management system, operations such as file upload, download, and storage can be conveniently handled through the File type. When developing business such as schedule management and order processing, the Date type can accurately handle date calculations, comparisons, formatting, etc., meeting the requirements of more business scenarios and enabling developers to more conveniently handle business logic related to files and dates.

(8) Replacement of the Online Text Editor

The replacement of the online text editor in the main network has been completed, replacing the rich - text editor with the Markdown mode. The Markdown mode, with its simple syntax (for example, using "#" to represent headings and "*" to represent lists), allows developers to quickly write structured text. Moreover, when displaying code, it supports the code - block syntax, which has good support for code display, is more in line with the usage habits of developers, and can better support developers in writing content. It is more convenient for writing documents, annotating code, or recording development ideas.

II. Official Release of Server - Side Functions

(1) Database Model Design

Through the visual function, developers can quickly design database tables. When designing an e - commerce database, complex table relationships among product tables, user tables, and order tables, as well as design functions such as composite indexes set to improve query efficiency, can all be easily achieved. This lowers the threshold for database design. Even developers with limited knowledge of databases can quickly get started. At the same time, it improves the efficiency and accuracy of database design, laying a solid foundation for subsequent business development.

(2) Data Caching Function

Active data cache design: In high - concurrency scenarios, the frequent access to hot data can put a huge strain on the database. Developers can actively design data caches according to business needs. For example, they can cache popular product information, users' common configurations, etc. In this way, when users request this data, it can be directly retrieved from the cache, effectively avoiding the frequent access of hot data to the database, reducing the database load, improving system performance, and enhancing the user experience.

Dual - mode switching: It supports dual - mode switching between in - memory caching and Redis caching. In - memory caching is fast and suitable for scenarios with extremely high requirements for response speed and small data volumes. Redis caching, on the other hand, supports distributed deployment and is suitable for scenarios with large data volumes and the need to share cached data among multiple servers. Developers can choose the most suitable caching method according to the actual scenario, improving the flexibility and adaptability of the system and meeting the requirements of different business scales and architectures.

(3) Visual Database Operations

Visual operations for database creation, deletion, modification, query, grouped query, and aggregated statistical query are provided. When developing a reporting system, complex grouped queries and aggregated statistical queries on a large amount of data are required. Through intuitive interface operations, developers can quickly build query conditions and achieve complex business operations, such as complex table - related queries. This reduces the difficulty of database operations. Even developers without in - depth database knowledge can complete complex data operations, improving development efficiency and accelerating the project development progress.

III. Core Upgrades

(1) Front - End Core Library Optimization

For virtual node query methods such as find and closest, an active terminal query operation has been added. When building complex front - end pages, such as single - page applications with a large number of dynamic components, the previous query methods may perform many ineffective operations when searching for virtual nodes, wasting performance. After the optimization, when querying a specific virtual node, it can actively determine the query boundary, avoid ineffective query operations, improve front - end query efficiency, optimize front - end performance, make page loading and interaction more smooth, and bring a better experience to users.

(2) Release of the Server - Side Core

The server - side core @joker.server/core has been officially released. This core library integrates the basic functions and key modules required for server - side operation, such as route management, middleware processing, and error handling. It provides a solid foundation for the stable operation and efficient development of the server - side, helps to improve the performance and reliability of the entire server - side architecture, and enables developers to more quickly and stably build server - side applications based on it to meet various complex business requirements.

Joker 前端框架组件的生命周期

张传辉 — Wed, 11 Dec 2024 10:33:53 +0000

在 Joker 框架中，组件的生命周期是一个重要的概念，它涵盖了从组件实例化到销毁的整个过程。

一、生命周期概述

当组件类被实例化并开始渲染其视图及其子视图时，组件的生命周期便正式开始。在这个过程中，Joker 会持续进行变更检测，监控数据绑定属性的变化，并在必要时对视图和组件实例进行更新。当组件实例被销毁且其渲染的模板从 DOM 中移除时，生命周期宣告结束。同时，在 Joker 执行过程中，指令也会经历类似的生命周期。

二、响应生命周期事件

应用程序可以通过实现 core 库中定义的一个或多个生命周期钩子接口，来响应组件或指令生命周期中的关键事件。这些接口为开发者提供了在合适时机对组件或指令实例进行操作的机会。

（一）钩子接口及方法

每个接口都包含一个唯一的钩子方法。例如：

create钩子函数：如果在组件或指令类中实现了这个方法，Joker 会在首次检查完组件或指令的输入属性后，立即调用此方法。

（二）示例代码

以下是一个简单的组件类示例，展示了如何实现一些常见的生命周期钩子方法：

import { Component } from "@joker.front/core";

export default class extends Component {
    created() {
        //组件创建时触发
    }

    mounted() {
        //组件渲染并挂载到DOM后触发
    }

    destroyed() {
        //组件销毁后触发，作为声明周期最后一个钩子函数
    }
}

开发者不需要实现所有生命周期钩子，只需根据实际需求选择实现即可。

三、生命周期的顺序

当应用通过调用构造函数来创建一个组件实例时，Joker 会依据实例生命周期的阶段，调用相应实现的钩子方法。

（一）默认生命周期顺序

首先是constructor构造函数被调用。
接着组件被装载（$mount），同时进行数据劫持监听。
然后created钩子被触发，此时组件已创建。
之后判断是否有模版，如果有则进行渲染模板（$render）操作，再将其挂载到 DOM，此时mounted钩子被触发。
最后在组件销毁时，会先调用$destory，然后卸载子组件，在beforeDestory阶段清理数据劫持监听和清理事件数据，最后在destroyed阶段清理节点数据，生命周期结束。

（二）保持状态的组件生命周期

在默认的 Joker 体系下，组件的挂载和卸载是一次性的，不存在状态保持。为了满足组件状态保持的需求，Joker 提供了keep - alive属性。

当组件带有keep - alive属性时，在调用destroy时，只销毁 DOM 节点，而不销毁组件实例。组件被“睡眠”，sleeped钩子函数被触发。
当组件再次被装载时，会使用存活实例重新render DOM，wakeup钩子函数被触发，实现组件状态保持。

四、在可视化平台中如何管理组件生命周期

在组件或者页面可视化面板中我们可以在方法事件管理面板中去添加生命周期函数。

在事件面板中，我们可以在这里去编写生命周期逻辑。

五、生命周期钩子函数介绍

通过对组件生命周期的了解，开发者可以更好地掌握组件在不同阶段的行为，从而更有效地进行应用程序的开发。

JOKER Front-End Framework: A Front-End Dark Horse with a Built-in Cloud Visual IDE

张传辉 — Mon, 09 Dec 2024 09:52:57 +0000

JOKER Front-End Framework: A Front-End Dark Horse with a Built-in Cloud Visual IDE

1. Introduction

In the diverse field of front-end development today, the JOKER front-end framework is like a dazzling star, opening up an efficient and convenient innovative path for developers with its unique and powerful functions.

1.1 The Positioning of JOKER and the Role of the Core Framework

JOKER is not merely an ordinary framework; it is a comprehensive framework platform aiming to provide all-round and seamless support for all possible development scenarios. Among them, Joker.front, as the core framework dedicated to front-end development under this platform, with its standardized front-end development standards and the advanced object-oriented and component-based programming model, has become a powerful assistant for developers when constructing user interfaces. Whether facing simple and intuitive interface requirements or handling complex user interaction scenarios, Joker.front has demonstrated astonishing adaptability and high efficiency.

1.2 Advantages Based on TypeScript

It is worth mentioning that JOKER is an all-round development platform meticulously built based on TypeScript. This choice endows it with excellent performance and rock-solid stability when handling various front-end development tasks. Whether it is lightweight simple interface development or dealing with extremely challenging complex user interface design, JOKER can handle it with ease and perform outstandingly.

2. Features of the JOKER Framework

2.1 Powerful Extensibility

From the initial design stage of the framework, extensibility has been placed in a crucial position. This means it can seamlessly integrate with existing projects or systems without any sense of incongruity. Moreover, it also provides a solid foundation for the construction of scalable web applications, enabling developers to carry out highly customized development according to the unique requirements of specific projects, truly achieving tailored development.

2.2 Rich Component Library

Joker.front presents developers with a dazzling array of front-end component libraries, including meticulously crafted and optimized functional components such as routing and scaffolding, as well as pleasing UI components. These components are like carefully polished puzzle pieces, helping developers piece together beautiful and high-performance user interfaces in a short time, greatly shortening the development cycle and improving development efficiency.

2.3 Comprehensive Development Tools

To further enhance the work efficiency and development experience of developers, JOKER is equipped with a complete set of supporting development tools. This includes powerful debugging tools that help developers quickly locate and solve problems when they occur, and efficient build tools that ensure the smooth and accurate conversion of code from the development environment to the production environment. The existence of these tools is like a series of bright lights lit on the path for developers, enabling them to move more steadily and quickly in the development journey.

3. Examples and Functions of the JOKER Framework

3.1 Core Functions

Through a basic example, we can clearly see some of the core functions of the JOKER framework. For example, it sets the standard Class API based on TypeScript as the development specification, which perfectly meets the strict requirements of object-oriented development and brings clear structure and high maintainability to code organization and management. At the same time, the JOKER framework also has the powerful ability to automatically track the state of JavaScript and update the DOM in a reactive manner instantly when the state changes. This reactive update mechanism is fast and efficient, completely abandoning the virtual DOM difference comparison process, thus achieving a more fluid and instant user interface interaction experience.

3.2 Key Knowledge Points in Application

3.2.1 Single-File Components

In most JOKER projects with build tools enabled, developers are fortunate to be able to write Joker components in a file format similar to HTML. This unique file is vividly called a single-file component (or simply referred to as a *.joker file, known as Single-File Components in English, abbreviated as SFC). As the name implies, Joker's single-file component cleverly encapsulates the logic (implemented in JavaScript), template (presented in HTML), and style (defined by CSS) related to a component in the same file. This innovative design makes the development process more efficient and focused. Developers no longer need to switch frequently between multiple different files, thus being able to fully focus on the development and optimization of components.

To maximize the advantages of the.joker single-file component, we highly recommend using IDE plugins for operation. Currently, we have provided comprehensive support for the most popular development tool on the market - VSCODE. Developers can easily search for "Joker Front Tools" in the VSCODE extension store to install it, or choose to download and install it locally from the official channel. By using single-file components, developers can develop at lightning speed and focus highly on a single page or component, significantly improving development efficiency.

3.2.2 Templates

Each Joker component is equipped with a dedicated HTML template, whose main responsibility is to accurately define the rendering method and presentation effect of the component. In actual operation, developers can flexibly choose to inline the template directly inside the.joker file or reference an external independent template through a convenient file path.

To further expand the functional boundaries of HTML, Joker ingeniously introduces a series of special syntax elements. Among them, the @dynamic directive is undoubtedly a bright star, allowing developers to cleverly insert dynamic values in the component. When the state of the component changes subtly, the JOKER framework will automatically and quickly update the rendered DOM content. A typical application of this amazing function is to insert dynamic text, ensuring that the interface remains perfectly synchronized with the real-time state of the component, bringing a smooth and coherent interaction experience to users.

In addition to the above amazing dynamic directive, Joker also generously provides many practical commands to help developers quickly build dynamic templates.

If you feel a little strange or confused about the above grammar when you first come into contact with it, don't worry at all. In the subsequent learning process, we will gradually go deeper and unravel the mystery to help you understand the essence of Joker's grammar more thoroughly.

3.2.3 Built-in Libraries

In the "Joker Application: Key Points" section, we have briefly introduced the key architectural elements necessary for building a Joker application. However, when your application is like a growing sapling, constantly expanding and growing, and you are eager to add more colorful features to it (such as convenient site navigation or flexible user input interaction), the true charm and powerful advantages of Joker will be fully demonstrated. At this critical moment, you can skillfully utilize one of the powerful built-in libraries provided by the Joker platform to inject new vitality and functions into your application. This process not only greatly simplifies the complexity of development and significantly improves development efficiency but also makes your application more colorful and attractive.

In addition, it also provides a cloud-based visual IDE tool, specifically designed for the visual development of this framework and also provides code generation.

Joker Intelligent Development Platform - The Leader in Efficient Low-Code Development, Helping Enterprises in Digital Transformation
lowcode.jokers.pub

Some of the built-in libraries that you can choose to use include:

3.2.3.1 @joker.front/cli

Joker scaffolding, used for running and building projects, adopting advanced esbuild and dynamic compilation mechanisms, with remarkable performance advantages.

3.2.3.2 @joker.front/router

Joker routing library, specifically used for managing page routing, providing practical functions such as page jumping, value passing, and keepalive.

3.2.3.3 @joker.front/ui

The PC-side component library officially provided by Joker, with complete interaction components, capable of meeting the business development needs in various complex scenarios.

These built-in libraries not only expand the capabilities of your application but also allow you to focus more energy and attention on developing unique and innovative features, making your application stand out among many competitors. Only when you truly perceive the need for them to enrich the functions of the application or solve specific thorny problems should you consider introducing these libraries. This design concept can ensure the lightweight and high efficiency of the application and quickly obtain powerful functional support when needed.

4. Conclusion

In conclusion, the JOKER front-end framework, with its comprehensive and powerful functions and flexible and convenient application methods, provides a highly valuable tool for front-end developers. Through in-depth learning, practice, and exploration, developers will be able to fully unleash the infinite potential of JOKER and build stunning high-quality front-end applications, bringing an unprecedented excellent experience to users.

Unveiling Joker: The All-in-One Intelligent Development Solution

张传辉 — Tue, 19 Nov 2024 11:09:24 +0000

Unveiling Joker: The All - in - One Intelligent Development Platform

In the fast - paced realm of software development, having the right tools can make a world of difference. Today, we're excited to introduce you to Joker, a revolutionary full - stack intelligent development platform that's set to revolutionize the way developers operate.

1. Introduction to Joker

Joker is crafted with developers at its core, presenting a highly adaptable development model that marries simplicity with potent capabilities. Whether you're an experienced developer or just beginning your journey, Joker offers an intuitive interface that empowers you to build applications swiftly and effectively.

2. Key Features of Joker

a. Low - Code Platform

The Joker Lowcode Platform, a cloud - based IDE, enables developers to create applications with minimal coding. Its robust visual editor allows you to design and construct applications by simply dragging and dropping components. Moreover, the platform features a rich component market and a vibrant community, giving you access to a vast array of pre - built components and a platform to share your own creations.

b. Open Community

Joker's open community is a hotbed of innovation and teamwork. Developers can freely publish component libraries and public method sets, which others can directly reference. This collaborative environment encourages sharing and learning, allowing developers to leverage the collective wisdom of the community.

c. Component Development

With Joker, you have the freedom to develop custom components and method sets to meet the specific demands of your projects. These custom components can then be published in the market, sharing your expertise and contributing to the community's growth.

d. Logic Orchestration

The platform offers an expression - based logic orchestration system, allowing you to build intricate business logic through a straightforward "drag and drop" process. You can effortlessly handle tasks like logical judgments, interface calls, and method invocations, streamlining the development process.

e. Code Inspection

Joker's code inspection feature guarantees the stability and quality of your projects. It provides real - time feedback on potential issues, enabling you to address them promptly and avoid costly errors in the future.

3. Popular Use Cases

a. Service Precipitation and Component Reuse

Joker helps enterprises optimize their core business processes by facilitating the high - quality precipitation of front - end component libraries and domain services. This not only cuts down development costs but also boosts efficiency through component reuse.

b. Expansion of Core System Functions

The intelligent development platform provides flexible application integration capabilities, making it easier to extend and enhance existing systems. This ensures the continuity and stability of your software while reducing the technical complexity of upgrades.

c. Business Rehearsal and Feasibility Assessment

With Joker, you can rapidly prototype and test new business ideas by combining and extending your existing business capabilities. This enables you to gather market feedback early on and make well - informed decisions about the viability of your innovations.

4. Development Environment

a. Cloud Development

Joker's cloud development environment allows you to work on your projects from anywhere, using any device with an internet connection. The online market offers seamless installation and instant access to a wide range of tools and components.

b. Local Development with VS Code Plugin

For those who prefer local development, Joker offers a VS Code plugin that enriches the development experience with Joker - specific syntax highlighting and other productivity - enhancing features.

c. Rich Component Library

The platform provides an extensive collection of front - end components, including APP and PC components, saving you time and effort in building user interfaces.

d. Complete Development Tools

Joker comes with a comprehensive set of development and deployment tools, such as route management and scaffolding, to assist you in building, testing, and deploying your applications with ease.

home