Replies: 10 comments 28 replies
-
Link to the previous discussion microcks/hub.microcks.io#17 |
Beta Was this translation helpful? Give feedback.
-
I think I agree with most points presented. Would discourage option 1 as more work than it's worth. I would understand a move to React, but it feels a bit heavy, and I agree with the concerns that you may end up in the same situation again in the future. Personally, I really like Svelte and SvelteKit, but have not used it more than on a smallish hobby project to try it out. Another option I find interesting is https://elm-lang.org/ |
Beta Was this translation helpful? Give feedback.
-
I propose to start from hub.microcks.io and focus on the Frontend folder first (because the main point is to develop an migration approach for Microck's FrontEnd related projects). |
Beta Was this translation helpful? Give feedback.
-
@lbroudoux in terms of proposed options: For Option 2 – I believe that framework selection should not be leaded by framework used in a ui component library. For Option 3 – we might consider astro as well, it allows to work with multiple framework and allow easily prerender static content (Example. hub.microcs.io can be prerendered, server as static, and later on even used without backend). Also we might use framework-agnostic UI components library like: https://shoelace.style/ based on web components. The limitation here is that SSR for web components not always works well. |
Beta Was this translation helpful? Give feedback.
-
Hello everyone, I am a React developer and a friend of @SebastienDegodez, who invited me to join this discussion. He thought that my perspective might be helpful. I don't yet have an in-depth knowledge of the Microcks project, but from what Sébastien has told me, it has piqued my interest. From what I understand, you're considering revamping or modernizing your frontend. I'd like to share some thoughts on the matter. I believe there's no inherently right or wrong solution. The choice of technology shouldn't be driven by the fear that it might become obsolete in the future. After all, your original choice probably wasn't guided by that concern, even if today your component library has become outdated—which is unfortunate, but such is the nature of technological evolution. To facilitate your decision, it's essential to return to the core of your needs and address them directly. What are your expectations for this new frontend? Do you need Server-Side Rendering (SSR)? Is accessibility (A11Y) a priority for you? Is Search Engine Optimization (SEO) a major concern for your application? These are all questions that should guide your choice. Regarding the technology to adopt, I would recommend React. Not just because I'm a React developer, but because it's a flexible and powerful JavaScript library for building interactive user interfaces. It is widely adopted, with around 42% of developers using it, and benefits from a massive community as well as a rich ecosystem of resources and tools. Supported by Meta (Facebook), React offers high performance through the use of the Virtual DOM and promotes a component-based architecture, which simplifies the development and maintenance of web applications. In summary, the choice of your front-end technology should be guided by your specific needs. Clearly identify what you expect from your application, then select the tool that best meets those requirements. If you have specific questions about React or how it could address your needs, I'd be happy to discuss it further. |
Beta Was this translation helpful? Give feedback.
-
@lbroudoux I've reimplemented hub.microcks.io, you can check it here https://github.com/soGit/hub.microcks.io/commits/migrate-to-astro. Still a lot to improve, no tests and about 90% of features are implemented. Can we discuss the next steps, for example during the one of community meetings? |
Beta Was this translation helpful? Give feedback.
-
Hey everyone! 👋 I’m a Fullstack developer, and I’d love to contribute to MicroHub’s frontend. After reviewing the project, I have some suggestions for improving the UI/UX and overall performance using modern tools and libraries. Tech Stack & Enhancements Why This Would Be Beneficial? I’d love to discuss these ideas further and contribute to the frontend development! Le Looking forward to collaborating! 😊 |
Beta Was this translation helpful? Give feedback.
-
so finally which techstack are we taking to work on under lfx mentorship? |
Beta Was this translation helpful? Give feedback.
-
Back from vacations! |
Beta Was this translation helpful? Give feedback.
-
Hey Microcks community! I wanted to give you fresh updates and share my opinion on the next steps on this topic. First, I'd like to share the progression on my latest microcks-angular-19 PoC. After 3 weeks elapsed and roughly 4 days on this topic, we now have nearly 3 fully working pages: A good amount of critical points have been explored and solved:
The complex parts here were the wizard component replacement (thanks @soGit for that) and the vendoring/upgrade of Patternfly NG. The latest "importers" screen was done after all the complex parts being solved and the migration was a breeze: less than 2 hours to have everything working correctly. Most importantly, the number of vulnerabilities has dramatically dropped from 103 to 6, and I'm confident we can even reduce it by vendoring Patternfly CSS (only the NG component has been vendored at the moment). As we reminded you during our latest community call, this was our driver number 1 in engaging this exploration. As of today, I'm confident that we can quickly finish this migration and make it available for a Microcks 1.12 release that could be delivered around early May. This deadline couldn't clearly be reached if moving to a new technical stack with very low resources (me and some help from @soGit) the project has at the moment. Pushing something by May will put us in a great position to support our application as a CNCF Incubate project, with security being a big part of the assessment. As a consequence, I'd like to ask for feedback on this migration approach and goodwill that would like to help and participate in this effort toward Microcks 1.12. What does that mean to all the re-design opportunities and contribution ease we foresee by opening the debate here in this thread? Does it mean we're closing the topics and waiting until the next big maintenance issue to start everything again? Certainly not. First, I think we'd be in a better position to welcome incremental enhancements! I think we have a lot on our plate:
With the vendoring process, we would have everything at hand to integrate incremental changes to make it look more modern and sexy to users. Please, use your best designing skills and propose new wireframes or Figma arts so that we can study things and build a look & feel theme that represents and supports the Microcks brand! Consistency is key in this kind of change integration. It would need a bit of effort, but I'd really like to help the best I can (as I don't have those skills!). During this time of incremental changes, I'll be super cautious about the questions: "Is it maintainable? How easy is it for people to contribute and propose changes?". If answers to those questions are not satisfactory, it will certainly re-open the debate of the technical stack at large. Finally, for those of you who were enthusiastic about a new technical stack choice and wanted to start from scratch, the maintainer's team would like to encourage you to keep up with a fresh mind and fresh ideas! It's not because we solved the "security milestone" issue that we can't look forward. If there was a group of motivated people, with great convictions, convinced they could demonstrate better UI with better execution, we'd be happy to support this initiative, help make their work visible and check if it could integrate the project's roadmap and grow the maintainer's team. Please let us know what you think and if/how you'd like to help. Onward et upward! 🚀 |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Hey Microcks community!
As we start a new year, I'd like to write a bit about the future of Microcks UI, hoping to generate comments, feedback and discussions.
What's the situation?
For many years now, Microcks UI has been built using Angular and the PatternFly design system. PatternFly has great resources that enables teams to create consistent and scalable enterprise products and the Microcks UI - even if it's not the more modern and fancy - does the job pretty well.
At the beginning (time of PatternFly v2 and v3), PatternFly was a set of patterns with multiple implementations (Pure HTML, Angular, React others...). However, with the advent of v4, PatternFly turns out to be implemented in React. This leads us to the situation where Angular users had no choice but sticking with PatternFly v3 and its supported version of Angular: Angular v8!
As of today, Microcks UI is then mainly made from:
^3.59.5
~8.2.14
with no easy way to move to newer versions - Angular is currently v19 and PatternFly v6 has just been released!
This put us in a bad situation because many of pulled transitive dependencies from those foundations are now outdated with a lot of CVEs as illustrated by the security vulnerabilities report of the frontend part:
Moreover the TypeScript version we rely on - forced by the version of Angular - is now incompatible with recent library released (see for example, this nasty trick we had to do to integrate Keycloak v26.0 directly importing it and changing it to fit our Typescript version 🤮 ).
We absolutely have to do something to preserve Microcks bright future!
What are the options?
Without further ado, here are the options I foresee -
Note
Please feel free to add some others if you have some ideas!
Option 1: Vendor and upgrade PatternFly + Angular to the most recent possible version
In this option, we fork and vendor the components of PatternFly Angular implementation we're using and make the job of updating them to the most recent Angular version possible. It means that we would maintain our own repository of UI components derived from
patterfly-ng
but updated to a recent Angular version. Bumping these components to a new Angular version can require a huge amount of work (see this upgrade guide)Still - independently of the PatternFly components, we'll also have to upgrade our services, controllers and util Typescript classes to more modern syntax and paradigms 🤔
Option 2: Replace Angular/PatternFly by React/PatternFly
In this option, we'll typically drop everything and totally change the model from Angular to React. This is typically the same thing as starting a new UI from scratch, but we (this means mainly myself at the moment) have to learn a totally new (and huge!) ecosystem. Of course, we can still benefit from PatternFly OOTB components, upgraded for React but we also have to endorse the full learning curve of React.
Option 3: Drop the UI and start something else
In this option, we're dropping everything and starting from scratch a new UI. Choosing a new frontend framework is a hard topic (see https://roadmap.sh/frontend/frameworks) but some reports highlight some big trends (see https://virtuslab.com/blog/frontend/trending-frontend-technologies) even if - not yet - aligned with the download trends on NPM: https://npmtrends.com/@angular/core-vs-react-vs-svelte-vs-vue
Analysis
As of today, I tend to think that:
I have already started studying and will focus the next weeks on investigating Option 3 unless some people help and convince me that other options may lead to better results.
To help in the choice of a new stack, I think some points from our past experience are super important:
Additional requirements
Follow-up
While I should have written this entry a few months ago, I already started a prototype of it using SvelteKit. This ongoing PoC is located here: https://github.com/lbroudoux/microcks-sveltekit
Feel free to check it out but also to react and comment on all the things above! Your inputs are crucial and your help more than welcome!
Beta Was this translation helpful? Give feedback.
All reactions