search

Sage-Bionetworks / research-benchmarking-technology

Main repository of the Research & Benchmarking Technology Team
Apache License 2.0
1 stars 1 forks source link

Demonstrate how to re-use an Angular component in a React app #18

Open tschaffter opened 3 years ago

tschaffter commented 3 years ago

Motivation

This year we are moving forward with the development of at least two prototypes: ROCC and the challenge platform. There are a few other frontend projects that I have in mind, such a creating a prototype of leaderboards whose content can be customized using query parameters, e.g. to highlight the submission from a specific team from the URL of a badge in a GH repository.

Since I have advanced experience working with Angular, we will use this framework for the R&BT prototypes. One of main reference is the code base that we developed for the SageBio Collaboration Portal.

Since Angular 6, it is possible to export Angular components as Angular Elements that can be imported in React application. The goal of this ticket is to demonstrate this feature, which can contribute to increase acceptance at Sage for developing frontends in both Angular and React, whatever a developer is more comfortable using.

A suitable Angular components for this demonstration could be one of the re-usable components developed in #17.

jaeddy commented 3 years ago

I stumbled on this post a couple years ago and thought it might be helpful. The examples are a bit old at this point, but the concepts and approaches might still be relevant: https://softeng.oicr.on.ca/chang_wang/2017/04/17/Using-AngularJS-components-directives-in-React/

tschaffter commented 3 years ago

@jaeddy The structure of AngularJS (1.x) and Angular (>=2) has changed quite a lot. A recent way to achieve the goal of this ticket is to export an Angular component to a Web Component.

Throughout this tutorial, we’ve introduced web components (also called custom elements) to Angular developers. Next, we’ve used the Angular Elements package to build a web component from an Angular component used to fetch news data from a third-party news API. This component can be used outside the Angular project in any JavaScript based project. You can find the source code of this project from this GitHub repository.

This article also describes how to create a web component from an Angular component as well as from a React and Vue component.

This article describes how Angular can consume a web component, which could be used in combination of the above article to demonstrate the use of a React component in an Angular app. An alternative could be to use this npm package: https://github.com/microsoft/angular-react

Here is a potential way to integrate web component to a React app.

And here is an article about Angular Element.

So wouldn’t it be cool if we could somehow mix these libraries and frameworks together so that we get something that has the advantages of all these frameworks? Maybe doing this also fills up some of the holes/deficits that we faced while using these libraries/frameworks.

This is what Angular Elements does for us by allowing us to use our Angular Components inside other JavaScript libraries such as React and Vue. Let’s take a look at how we can do this with React.

The articles should enable us to demonstrate how to integrate an Angular component in a React app and vice-versa.