Add support for Angular

[marcushellberg]

Many developers have asked about Angular support. Let's use this issue for the discussion.

Please upvote the issue if you are interested in Angular support.

[JusticeN]

here are some points for angular

• 2-way data bind and good training content
• separation of concern by design
• directives to enhance component with reusable logic like translations, ...
• guards for better permisssion checking on routes
• is the most typed frontend framework, it feet very well with java stack. it reduce context switch after writing code in java and switch to agular to present it
• the standalone component added in version 15 significantly reduce boiled module code to write
• stabile type-safe library like @angular/forms can be used for form bindings
• advanced CLI to manage app. the generated hilla frontend part can still be done in a way that the already existing ng commands continue to work properly
• Google offers its Long-Term Support (LTS) to Angular
• Angular offers a type of safety experience i didn't have with react
• steel belongs to the most used ones

[JusticeN]

1. what does it take to add angular ? practically hilla cli just make a http call on https://start.vaadin.com/ with given params.
2. what are the steps required to finally have a hilla angular support

[marcushellberg]

There are a few things that would be required. What comes to at least:

• Get the build tooling to work with Angular. Vite does not have built-in Angular support, so some work is needed here
• Design how endpoints should be accessed from Angular in an Angular-native way, probably by returning RxJS observables
• Figure out what format to use for validations. We may be able to reuse whatever format we generate for React and Formik
• Investigate if the components need Angular wrappers or if it's ok to use the web components as-is. If needed, create wrappers

So, while the work is fairly straightforward, there's still a fair amount of it if we want to offer a polished solution.

[JusticeN]

Thank you for your detailed response. Where can i See the hilla-react implementation code to have a kind of ideas?

[pkomuda]

Would you consider adding support for Svelte as well?

[marcushellberg]

@JusticeN - create an app with npx @hilla/cli init --react app-name and it'll contain the config.

@cromoteca has been doing some early prototyping that you can find here https://github.com/cromoteca/hilla-angular

[marcushellberg]

@pkomuda - Please create a ticket so we can track that separately and get a sense of what level of interest there is.

[web-padawan]

Apart from build tooling, proper support for Angular would also need helpers for integrating Vaadin web components. Here's a prototype: https://github.com/sissbruecker/vaadin-angular-integration

[JusticeN]

My suggestion will be to concentrate on React integration and optimize the existing tools first.

I tried an MVP with Hilla+react and come to the conclusion that i will not use it yet(many issue with Openid and not completly documented yet). i really like angular but it will be no problem for me to use react as well.

my proposition for you is to focus first on react and add more tutorials with different cases. like Documentation, video tutorials, adding oder css libraries, more examples with security and OpenID, hooks for Endpoints, and better and simple integration with Oauth2/OpenID. the same can be done later for Angular.

here is my point: forget about angular for now and bring react close to perfection first. this can even convince ng developers to learn React just for the advantage Hilla bring. Let us thing about time saving using Hilla instead of combining different tools.

Thanks for Hilla :-)

[web-padawan]

my proposition for you is to focus first on react and add more tutorials with different cases.

I'm not part of the Hilla team, but our colleagues do have plans to polish React integration, especially forms support. Also, please let us know about anything that needs better documentation, especially components React wrappers.

We're going to have next week dedicated to making various docs improvements, minor additions and clarifications. This will naturally include the upcoming stable releases of Vaadin 24.0 and Hilla 2.0 including Hilla React, too.

[tarekoraby]

here is my point: forget about angular for now and bring react close to perfection first. this can even convince ng developers to learn React just for the advantage Hilla bring. Let us thing about time saving using Hilla instead of combining different tools.

@JusticeN, thanks for the feedback. Our priority is to continue polishing React support, the APIs, docs, starters, and tutorials. We will certainly not embark on Angular support before React support is in good shape.

[marcushellberg]

@JusticeN - agreed. As Serhii and Tarek already mentioned, finalizing React support and docs is our first priority before we start considering adding other frameworks. I created this issue so we could keep discussions around the Angular support in one central place. Thanks for the feedback!

[TechTinkerer42]

I completely agree with @JusticeN. In my opinion, it is better to prioritize one framework first and make it as perfect as possible before moving on to the next one. By concentrating on React, developers who are already familiar with it will have some incentive to use Hilla. Building APIs just for UI can be a chore. React is currently the dominant force in the front-end development space, and its ecosystem is unmatched in terms of its breadth and depth.

Additionally, please consider adding support for using Vaadin Flow with React or hybrid apps. It appears that currently, this may not be possible due to the use of React Router in hilla react.

[TechTinkerer42]

Angular and React are not stagnant targets. Even if initial support is achieved, it would require ongoing effort to keep up with changes in these JavaScript frameworks, as well as in Vaadin Flow, litelment(WC) and Hilla. Ryan Carniato's YouTube video, 'JavaScript Frameworks in 2023,' is an excellent resource, as it covers all major JS frameworks and provides insights into what we can expect from them in the 2023. The video is more than 5 hours long and offers valuable information for developers looking to stay up-to-date with the latest trends in front-end development.

[marcushellberg]

I completely agree with @JusticeN. In my opinion, it is better to prioritize one framework first and make it as perfect as possible before moving on to the next one

For the sake of clarity for future readers: this is the plan. As Tarek said above, we do not intend to start adding support for additional frameworks before we have React support in good shape.

React is currently the dominant force in the front-end development space, and its ecosystem is unmatched in terms of its breadth and depth.

That is true in the general front-end space. But the split between React and Angular is more even when it comes to companies that use Java on the backend, which makes Angular a relevant framework to consider.

[tarekoraby]

Additionally, please consider adding support for using Vaadin Flow with React or hybrid apps. It appears that currently, this may not be possible due to the use of React Router in hilla react.

Thanks for the suggestion. Yes, we will consider adding that support. See https://github.com/vaadin/hilla/issues/744.

[TechTinkerer42]

That is true in the general front-end space. But the split between React and Angular is more even when it comes to companies that use Java on the backend, which makes Angular a relevant framework to consider.

I hadn't previously considered this, but I agree it's an excellent point that Angular is often the preferred choice for Java backends. This preference may be due in part to the use of TypeScript in Angular.

[ndedobbeleer]

We are a team of primarily Java developers, and we've considered standardizing our projects using Hilla. We've built a few views with React to get a sense of how it works. The consensus was unanimous: we don't like React.

I don't think React is a bad framework (otherwise it wouldn't be one of the most used), but as a Java developer, I find Angular much easier to learn and its concepts are closer to what we are accustomed to.

[grimsi]

• Get the build tooling to work with Angular. Vite does not have built-in Angular support, so some work is needed here

Angular 17 now comes with native support for Vite, so this should reduce some of the pain of integrating Angular and Hilla 🙂

[elgreco247]

• Get the build tooling to work with Angular. Vite does not have built-in Angular support, so some work is needed here

Angular 17 now comes with native support for Vite, so this should reduce some of the pain of integrating Angular and Hilla 🙂

Well, Angular 17+ uses Vite as a dev server but if iiuc you need this to compile angular with Vite: https://www.npmjs.com/package/@analogjs/vite-plugin-angular

see also: https://www.linkedin.com/posts/brandontroberts_the-analogjs-plugin-for-using-vite-and-activity-7198364423395098624-q1C0

[elgreco247]

• Design how endpoints should be accessed from Angular in an Angular-native way, probably by returning RxJS observables

Well, RxJS will be optional in Angular in the near future: https://thenewstack.io/angular-to-make-rxjs-optional-drupal-devs-on-going-headless/#:~:text=%E2%80%9CWe're%20working%20towards%20making,coming%20in%20the%20next%20years.%E2%80%9D