Forem: BubblyDoo

Transitioning from Angular to React, without starting from scratch

Hans Otto Wirtz — Mon, 30 May 2022 10:28:00 +0000

While Angular is a great framework, the engineering effort put in by the React team and community is unmatched in the frontend world. So much so, that we have recently started transitioning from Angular to React.

Some differences are really important to us:

The latest and greatest stuff is happening in React world
More community components available
More developer-friendly API
Change detection is much easier to wrap your head around
Smaller API surface, meaning less confusion
Better choice of primitives (components as variables vs templates with ng-template and ng-content)
Clear path towards SSR
Integrating React Three Fiber

However, we have a perfectly good website that we don't want to throw away. That's why we decided to write a library that allows us to use React in Angular and Angular in React.

That may sound like quite a challenge, but we've figured out a way to do it rather easily (basically by just using ReactDOM.render).

I'll share a few extracts from our source code so you can see how we're doing it. If you want to dive right in, check out the library at github.com/bubblydoo/angular-react.

The basic idea is that there are wrapper components:

<!-- Using a React component in Angular: -->
<react-wrapper
  [component]="Button"
  [props]="{ children: 'Hello world!' }">
</react-wrapper>

// Using an Angular component in React:
function Text(props) {
  return (
    <AngularWrapper
      component={TextComponent}
      inputs={{ text: props.text }}>
  )
}

These wrappers should then render the components using the other framework.

React wrapper

The react-wrapper is basically implemented as follows:

@Component({
  selector: "react-wrapper",
  template: `<div #wrapper></div>`,
})
export class ReactWrapperComponent implements OnChanges, OnDestroy {
  @ViewChild("wrapper") containerRef: ElementRef;
  @Input()
  props: any = {};
  @Input()
  component: React.ElementType;

  ngAfterViewInit() {
    this.render();
  }

  ngOnChanges() {
    this.render();
  }

  private render() {
    ReactDOM.render(
      <this.component {...this.props} />,
      this.containerRef.nativeElement
    );
  }
}

You can find its full source code here.

Any time the component or the props change, React will rerender the component. Pretty simple!

This is possible because in React, components are very lightweight, we can easily pass components around and render them. There is no need for any global setup. On the other hand, in Angular, there is a need for a global context. What if we want to pass Angular children into a React component?

Angular wrapper

Mounting an Angular component inside an arbitrary DOM element is also possible, although not so elegant. We need to have the global NgModuleRef and an Angular Component to do so.

Using a callback ref, we mount the Angular Component into a React component.

We pass a div element to the Angular Component as its children, and then use React.createPortal to mount React children into it.

function AngularWrapper(props) {
  const ngComponent = props.component;
  const ngModuleRef = useContext(AngularModuleContext);

  const hasChildren = !!props.children
  const ngContentContainerEl = useMemo<HTMLDivElement | null>(() => {
    if (hasChildren) return document.createElement('div');
    return null;
  }, [hasChildren]);

  const ref = useCallback<(node: HTMLElement) => void>(
    (node) => {
      const projectableNodes = ngContentContainerEl ? [[ngContentContainerEl]] : [];
      const componentFactory = ngModuleRef.componentFactoryResolver.resolveComponentFactory(ngComponent);
      const componentRef = componentFactory.create(ngModuleRef.injector, projectableNodes, node);
    },
    [ngComponent, ngModuleRef]
  );

  return (
    <>
      {React.createElement(componentName, { ref })}
      {ngContentContainerEl && ReactDOM.createPortal(<>{children}</>, ngContentContainerEl)}
    </>
  );
}

There's much more to this file, such as:

event handling
inputs & outputs handling
passing the React.forwardRef correctly

You can find the source code here

Result

We can use Angular and React components interchangeably now!


@Component({
  selector: 'inner-angular',
  template: `<div style="border: 1px solid; padding: 5px">this is inner Angular</div>`,
})
class InnerAngularComponent {}

@Component({
  template: `
    <div style="border: 1px solid; padding: 5px">
      <div>this is outer Angular</div>
      <react-wrapper [component]="ReactComponent"></react-wrapper>
    </div>
  `,
})
class OuterAngularComponent {
  ReactComponent = ReactComponent;
}

function ReactComponent(props: { children: any }) {
  return (
    <div style={{ border: '1px solid', padding: '5px' }}>
      <div>this is React</div>
      <div>
        <AngularWrapper component={InnerAngularComponent} />
        {props.children}
      </div>
    </div>
  );
}

This renders correctly, as follows:

Using Angular services in React

Ever wondered how the dependency injection in Angular works? Well, it just keeps a simple key-value map internally. This key-value map is the injector.

In the react wrapper, we actually also provide the injector on the context:

ReactDOM.render(
  <InjectorContext value={this.injector}>
    <this.component {...this.props} />
  </InjectorContext>,
  this.containerRef.nativeElement
)

This way, we can get services as follows in React:

const injector = useContext(InjectorContext)
const authService = injector.get(AuthService)

We added a shorthand hook to the library to make this even shorter:

import { useInjected } from '@bubblydoo/react-angular'

const authService = useInjected(AuthService)

This way, it's easy to use Angular injectables in React components!

Using Observables in React

While there are more feature-complete solutions like observable-hooks, consuming RxJS Observables is so common in Angular that we also added a hook for it.

import { useObservable } from '@bubblydoo/react-angular'

const [value, error, completed] = useObservable(authService.isAuthenticated$)

if (error) return <>Something went wrong!<>

return <>{value ? "Logged in!" : "Not logged in"}</>

Example component: `Link` (inspired by Next.js)

This component makes it possible to use the Angular Router in React components.

interface Props {
  link?: string[];
  children: any;
}

export default function Link(props: Props) {
  const { link, children } = props;

  const router = useInjected(Router);
  const zone = useInjected(NgZone);
  const activatedRoute = useInjected(ActivatedRoute);
  const locationStrategy = useInjected(LocationStrategy);

  const onClick = (e?: any) => {
    e?.preventDefault();
    zone.run(() => {
      router.navigate(link);
    });
  };

  const urlTree = router.createUrlTree(link, { relativeTo: activatedRoute });
  const href = locationStrategy.prepareExternalUrl(router.serializeUrl(urlTree));
  const childProps = { onClick, href };

  return React.cloneElement(children, childProps);
}

Usage:

<Link link={['dashboard']}>
  <a>Go to dashboard</a>
</Link>

Where we can improve

i18n

Angular i18n is not handled very well yet. $localize is not working in .tsx files. It's also not possible to add i18n attributes to React components, because extract-i18n only looks at Angular templates.

NgZone

Working with NgZone: sometimes events coming from a React element should be handled with ngZone.run(() => ...), in case you want to use Angular services and the events are not being tracked by the Zone. See the Link example component above.

Getting a reference to the Angular component in React

This is not yet implemented either, but we could add a componentRef prop to the AngularWrapper to get a reference to the Angular component.

Passing Angular children into `react-wrapper`

Right now this is not possible:

<react-wrapper [component]="Button">
  <div>Angular Text</div>
</react-wrapper>

The workaround:

@Component({
  template: `<div>Angular Text</div>`
})
class TextComponent {}

@Component({
  template: `
<react-wrapper [component]="Button" [props]="{{children}}"></react-wrapper>
`
})
class AppComponent {
  children = React.createElement(
    AngularWrapper,
    { component: TextComponent }
  )
}

Adding this would make using the components interchangeably a lot easier.

Using the AngularWrapper outside of an Angular component

Right now, this library is meant to be used inside Angular projects. More testing should be done to make sure it also works inside Next.js and Create React App projects.

One of the problems is that you would need to create and provide an NgModule:

import { AngularModuleContext, AngularWrapper } from '@bubblydoo/angular-react'
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'

const ngModuleRef = await platformBrowserDynamic()
  .bootstrapModule(AppModule)

<AngularModuleContext.Provider value={ngModuleRef}>
  <div>
    <AngularWrapper component={Text} inputs={{ text: 'Hi!'}}/>
  </div>
</AngularModuleContext.Provider>

Another problem is the build system: Next.js and CRA projects aren't configured to read and bundle Angular code, which needs special compilers. This configuration is usually provided by @angular/cli, but it would be hard integrating that with the existing Next.js/CRA build system.

You would need to setup a separate Angular library project to build the Angular components into normal Javascript code.
You would need to use @angular/compiler-cli/linker/babel as a babel-loader plugin in your Webpack config.
You can then import the Angular components into your React project.

We're considering refining this approach in order to move to Next.js, so we can finally leverage SSG/SSR. We're experimenting with Turborepo in order to manage the separate projects.

Credits

Although they're very different projects, I mostly took inspiration from @angular/elements, and also from microsoft/angular-react (this is a legacy project, that doesn't work for newer Angular versions anymore).

How we keep our Serverless deploy times short and avoid headaches

Hans Otto Wirtz — Tue, 01 Feb 2022 09:30:37 +0000

At BubblyDoo we're building the world's most powerful product personalization platform, and we've gotten this far by using open-source software through all of our projects.

We're using Serverless Framework to deploy most of our backend. AWS Lambda, Cloudflare Workers and Deno Deploy are the Serverless platforms we've been using. Unfortunately, not all projects can be deployed to isolate-based platforms like Cloudflare Workers and Deno Deploy, as many still have binary dependencies or need filesystem access. That's why most of our infrastructure is deployed on AWS Lambda.

But how do you deploy a large Node.js project with hundreds of dependencies, and avoid long deploy times?

We've encountered this problem as well, and we've come up with a solution: the Serverless Externals Plugin.

Without any plugins

You create a Javascript file (lambda.js) which requires some Node modules. You include the whole node_modules folder in the Serverless deployment.
Serverless has some built-in optimizations: it can exclude your dev dependencies, which already helps reduce the size.

# serverless.yml
package:
  excludeDevDependencies: true

However, there's no tree-shaking, and a lot of unnecessary files are uploaded (e.g. documentation). For some of our deployments this would create zips of 100MB+.

Next to that excludeDevDependencies is inefficient and takes a very long time.

With a bundler

You use a bundler like Webpack, Rollup or esbuild to turn your code and all node_modules into a single bundled file (bundle.js).

You then exclude all node_modules from the deployment.

# serverless.yml
package:
  excludeDevDependencies: false
  patterns:
    - '!node_modules/**'

But there's a problem! Not all Node modules can be bundled. There are issues in bundlers, issues in packages, but there are also inherent problems: what if a Node module includes a binary file? In that case, it can't be bundled.

To solve this, we need a way to exclude some modules from the bundle, and keep them external. We can then upload only these modules in the deployment package.

With Serverless Externals Plugin

We don't like plugins that add magic, so you'll have to configure a few things.

Let's say we made a function that uses readable-stream, a module that can't be bundled.

const { Readable } = require('readable-stream');
const _ = require('lodash');

module.exports.handler = () => {
  ... // code using _ and Readable
};

The desired result is a bundle that has bundled lodash, but keeps the call to require('readable-stream').

You use Rollup, a bundler, to create a single bundled file.

In rollup.config.js:

import { rollupPlugin as externals } from "serverless-externals-plugin";

export default {
  input: { file: "src/lambda.js" },
  output: { file: "dist/bundle.js" },
  ...,
  plugins: [
    externals(__dirname, {
      modules: ["readable-stream"] // <- list external modules
    }),
    commonjs(),
    nodeResolve({ preferBuiltins: true, exportConditions: ["node"] }),
    ...
  ],
}

After running rollup -c, you'll have your bundle inside dist/bundle.js, and a report inside dist/node-externals-report.json:

{
  "isReport": true,
  "importedModuleRoots": [
    "node_modules/readable-stream"
  ],
  ...
}

Using this report, Serverless knows which node_modules it needs to upload.

In serverless.yml:

plugins:
  - serverless-externals-plugin

functions:
  handler:
    handler: dist/bundle.handler
    package:
      patterns:
        # include only dist
        - "!./**"
        - ./dist/**
    externals:
      report: dist/node-externals-report.json

Advantages of using this plugin

Node spends a lot of time resolving the correct Node module because it is I/O-bound. This is not great for cold starts. By inlining all code, a bundler basically removes this problem.
The bundled code is much smaller than the raw files. It's also tree-shaken, meaning unused code is removed.
The plugin can be added incrementally. If you're already bundling your code but you have one node_module you can't bundle, this plugin is for you.

How does it do that?

The Rollup plugin looks at your package-lock.json or your yarn.lock and builds a dependency tree for your application.
It uses your configuration to mark the right modules and all of their production dependencies as external.
It looks at the bundled file and checks which modules are actually imported. If a module isn't imported, it's not packaged.

This is why it doesn't matter if you add too many dependencies to the modules array, the unused ones will be filtered out.

The dependency tree is quite complicated when you take different versions into account, see our README for an example. This plugin handles different versions correctly.

Example

Let's say you have two modules in your package.json, pkg2 and pkg3. pkg3 is a module with native binaries, so it can't be bundled.

root
+-- pkg3@2.0.0
+-- pkg2@0.0.1
    +-- pkg3@1.0.0

Because pkg3 can't be bundled, both ./node_modules/pkg3 and ./node_modules/pkg2/node_modules/pkg3 should be included in the bundle. pkg2 can just be bundled, but should import pkg3 as follows: require('pkg2/node_modules/pkg3'). It cannot just do require('pkg3') because pkg3 has a different version than pkg2/node_modules/pkg3.

In the Serverless package, only ./node_modules/pkg3/** and ./node_modules/pkg2/node_modules/pkg3/** will be included, all the other contents of node_modules are already bundled.

When uploading the whole node_modules folder, all requires from ./node_modules/pkg2 to pkg3 would already require pkg2/node_modules/pkg3 because of the Node resolution algorithm. Because Rollup isn't made to make only subdependencies external, this plugin rewrites those calls to require('pkg2/node_modules/pkg3').

How does this compare to other plugins?

Serverless Jetpack

Jetpack is great but it doesn't go the bundling way. It does something like a bundler and analyzes the files on which the Lambda code depends, and generates include patterns from there. (in trace mode)
Because of this it doesn't have the benefits of bundling, namely fast module resolution and tree-shaking.

Serverless Webpack

By default, Serverless Webpack doesn't support externals, but Webpack can use Webpack Node Externals to exclude all modules from the bundle. All included modules have to be allowlisted, but this plugin doesn't look at subdependencies.
When used with custom.webpack.includeModules, the non-allowlisted modules are added to the deployment zip.

Serverless Plugin Tree Shake

There's not much documentation about this plugin, but it also doesn't use bundling. However, it uses @vercel/nft to analyze the files on which the Lambda code depends. It seems to support Yarn PnP, which this plugin doesn't.
It overrides the zip function of Serverless to achieve this.

Used in production

This plugin is used for all our AWS Lambda deployments, using a wide range of Node modules, some with more quirks than others. We use it together with Lambda Layer Sharp and Chrome AWS Lambda.

Webpack and esbuild Plugin

Although Rollup is great, Webpack and esbuild are more feature-rich and faster, respectively. I'd like to create plugins for these bundlers as well if the community is interested. Feel free to open an issue or comment here!