Rewrite this template and NodeJS WS template to new react rendering engine

[derberg]

Reason/Context

This and also nodejs-ws-template are writing with old Nunjucks templating engine. We need to rewrite them to React templating engile that should become the default and only engine in the future.

Description

1. First rewrite nodejs-ws-template as this is a template that is more used as showcase, for demos, so any mistake in the work and release will not cause issues for users in production.
2. Then rewrite this template to new engine

With this task you will learn in dept:

• how code generation works
• what is the purpose of code generation and what you can generate
• you will learn the structure of AsyncAPI spec, its purpose and what does it give you
• you will write JavaScript code and unit tests
• you will learn AsyncAPI parser and use it extensively

[Krishks369]

I would like to work on this issue

[atharvagadkari05]

@derberg Thanks for raising this issue. I have seen both Nunjucks and React engine and I think we can convert this template into a new one with similar features. Though I have some doubts regarding this issue, I think they will get resolved as we move forward.
Looking forward to working on this issue. 😃
cc: @fmvilas @magicmatatjahu

[derberg]

@atharvagadkari05 thanks folks for volunteering. We did not yet start the selection process but to be honest @atharvagadkari05, we already got some contributions to both templates from @Krishks369 and he know the code base which makes him the best candidate so far. @atharvagadkari05 did you have a look at other issues that do not have volunteers yet?

[atharvagadkari05]

@derberg Honestly, I did not look at other issues as I was quite confident about this issue but if this is so then, I might look at other issues as well.

[derberg]

there are other templates that are not yet or react, so if you won't find any interesting issue on the current list I will contact respective maintainers if they need help and want to mentor you.

[Krishks369]

If this project is selected for the mentorship program I would be glad to be part of it, nevertheless I have started working on it actually:relaxed:

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience ❤️

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience ❤️

[SumantxD]

Hey @derberg, I was wondering if I could take on this issue under the mentorship program . I am well versed in JS and would love to deep dive into code generation.

[Tusharjain123]

Hey @derberg , I would like to work on this issue through the AsyncAPI Mentorship Programme.

[Nishu0]

Project Proposal: Rewrite this template and NodeJS WS template to the new React rendering engine

Introduction🔍

This proposal outlines the project to rewrite the existing template and NodeJS WS template, which currently uses the old Nunjucks templating engine, to a new React templating engine. The purpose of this project is to transition to the React rendering engine as the default and sole engine for future development and maintainability. By migrating to React, we aim to leverage its powerful features, maintain a consistent technology stack, and enhance the overall performance and user experience of the templates.

Project Goal 🎯

The primary goal of this project is to rewrite the existing templates to utilize the new React rendering engine. This will involve refactoring the codebase to replace Nunjucks with React components, ensuring compatibility and functionality are retained during the transition. By achieving this goal, we will have a modernized and standardized template architecture that aligns with industry best practices and facilitates easier maintenance and extensibility.

Project Scope: 📜

The scope of this project includes two main tasks:

1. Rewrite NodeJS WS Template:

   • Refactor the NodeJS WS template to replace Nunjucks with React components.
   • Ensure that the existing functionality and features of the template are preserved.
   • Perform thorough testing and verification to guarantee that the refactored template functions correctly.
   • Document any modifications or improvements made during the rewrite process.

2. Rewrite This Template:

   • Adapt the "this" template to the new React rendering engine.
   • Update and convert the existing Nunjucks templates to React components.
   • Validate and ensure the correct rendering and behavior of the template after the transition.
   • Create comprehensive unit tests to verify the functionality and correctness of the refactored template.
   • Provide detailed documentation on the changes made and any additional learnings obtained during the rewriting process.

Approach: 💻

To accomplish the project goals, we propose the following approach:

1. Familiarization:

   • Review the existing codebase of both templates to gain a thorough understanding of their structure, features, and dependencies.
   • Acquire knowledge about the AsyncAPI specification, code generation techniques, and the AsyncAPI parser.

2. Refactoring NodeJS WS Template:

   • Identify the sections in the NodeJS WS template that rely on Nunjucks templating.
   • Replace Nunjucks syntax with React components and JSX syntax.
   • Ensure compatibility with the existing backend functionality and validate the changes through rigorous testing.
   • Refine the codebase to improve readability, maintainability, and adherence to React best practices.

3. Rewriting This Template:

   • Analyze the "this" template to identify areas requiring migration from Nunjucks to React.
   • Develop React components that replicate the functionality and rendering of the original Nunjucks templates.
   • Verify the correctness and visual fidelity of the refactored template through comprehensive testing.
   • Optimize the codebase for performance, scalability, and reusability.

4. Documentation and Testing:

   • Document the process and learnings acquired during the rewrite of both templates.
   • Create comprehensive unit tests to ensure the functionality of the templates remains intact.
   • Conduct integration testing to verify the templates' compatibility with the existing systems and dependencies.
   • Document any potential issues or limitations discovered during testing and provide recommendations for mitigation.

Deliverables: 📦

The following deliverables are expected upon completion of the project:

1. Refactored NodeJS WS Template:

   • Codebase with Nunjucks replaced by React components.
   • Thoroughly tested and validated a template that replicates the functionality of the original.
   • Documentation outlining the changes made, test coverage, and any additional enhancements.

2. Rewritten This Template:

   • Refactored template with Nunjucks replaced by React components.
   • Extensive unit tests and integration tests to validate the correctness and compatibility of the template.
   • Detailed documentation on the migration process, code improvements, and potential future enhancements.

Conclusion: 🤝

The proposed project aims to migrate the existing template and NodeJS WS template from the old Nunjucks templating engine to the new React rendering engine. By doing so, we expect to achieve improved maintainability, extensibility, and performance while leveraging the benefits of React's ecosystem. Successful completion of this project will enable us to modernize our templates and provide a solid foundation for future development endeavors.

[AceTheCreator]

Hey Folks,

To clarify how to submit a proposal, you should contact the project Mentor/s on Slack and send them your submission in the form of a document or ask them how best they'd prefer you submit your proposals.

[derberg]

hey folks, if you are interested in this idea, you are probably in our slack already, if not, you should 😄

here is a note with requirements about proposal: https://asyncapi.slack.com/archives/C023A7K5M3N/p1687182408765199

[derberg]

fyi folks, in case of this idea, the deadline to submit proposals is not tomorrow, but by end of the month

[derberg]

Congrats @kaushik-rishi for being selected as mentee for this idea

The first task to solve is defined: #217