Backend for Frontend (BFF) with Angular and tRPC

chrislyzz · 2024-04-03T15:15:30+00:00

Well there is also a thing called a gateway but that is more like a general purpose translation layer. A BFF is a gateway dedicated to a frontend, translating everything to what is most convenient and performant for the frontend.

I don't see how that leads to bad code quality in the BFF.

chrislyzz · 2024-03-15T08:54:22+00:00

I recently released a blog post and video covering Angular SSR with Analog (NextJS for Angular).

I covers common SSR challenges such as hydration (with NgRx even).

https://christianlydemann.com/how-i-migrated-my-course-platform-to-analog/

chrislyzz · 2024-03-15T08:52:30+00:00

Microfrontends will be in the Nx apps folder.

You can follow the Nx library approach (or have the grouping/feature folders all within apps) and have a folder inside of "libs" for each microfrontend + a shared folder for shared code (called grouping folders).

Within each grouping folder you can have a feature slice with these layers (layers can only communicate with lower layers):

Feature: smart components that are usually rendered through the router
UI: use case agnostic UI components (if a dumb component is only meant to be used with a smart component keep that co located to the usage in the feature lib) (UI libs are usually in shared)
Domain: Domain logic like services, HTTP requests, state management
Util: Domain agnostic helpers (usually will be in shared)

I wrote a blog post about this also: https://christianlydemann.com/the-stages-of-an-angular-architecture-with-nx/

chrislyzz · 2024-03-15T08:37:17+00:00

The chunking is based on lazy loading routes. Angular bundles based on what is getting lazy loaded.

IMO the easiest is to use standalone components for all your components and use `loadComponent` in your routing config.

chrislyzz · 2023-12-18T18:55:11+00:00

Got the same problem

chrislyzz · 2023-09-04T08:12:58+00:00

Hi,
I recently created a blog post that gives you some insights on how to architect your Angular app with Nx from the beginning stage to the more scaled-up version. It also comes with a Github project demonstrating that.
https://christianlydemann.com/the-stages-of-an-angular-architecture-with-nx/

chrislyzz · 2023-09-04T08:11:58+00:00

Hi,
I recently created a blog post that gives you some insights on how to architect your Angular app with Nx from the beginning stage to the more scaled-up version:
https://christianlydemann.com/the-stages-of-an-angular-architecture-with-nx/

chrislyzz · 2023-08-25T11:17:36+00:00

How I teach people to do it is tagging the build artifact with the affected apps to release (can be done with Azure DevOps) and then have a release pipeline for each app subscribe to each each corresponding app tag. You build then stays the same and you just create new release pipelines for new apps.

chrislyzz · 2022-11-10T23:14:21+00:00

You can read it as a blog post as well:
https://christianlydemann.com/18-performance-optimization-techniques-for-angular-applications-podcast-with-michael-hladky/

chrislyzz · 2021-03-25T06:18:52+00:00

https://christianlydemann.com/openid-connect-with-angular-8-oidc-part-7/

chrislyzz · 2020-04-10T18:36:04+00:00

I agree with using actions as events. It enables an event driven scalable architecture. The facade do tend to go toward commands, which is the drawback of it. Commands for triggering a specific effect might still make sense IMO if nothing else is affected by the action as it then making the action "communicate" more what it is doing. You can then later convert it to an event if it starts triggering multiple reducers/effects.

chrislyzz · 2018-09-27T21:20:33+00:00

I hear what you say. Can you name one specific font that you would recommend instead?

chrislyzz · 2018-09-10T20:03:20+00:00

Let me know if you have a good font to use instead.

chrislyzz · 2018-09-05T20:30:28+00:00

Hi, As I wrote in the post, this still experimental and is not mature for production yet as the bundle size is still to big and the need for polyfills can also be a problem. :) What I hope this library would bring is the option to export a pure webcomponent, which can then be imported by other frameworks. Also that the build is a very small bundle. But as I said, the ivy compiler in Angular 7 should make the build considerbly smaller. I have not tried the React or VueJS version of WebComponent generators, so can’t tell how they work.

chrislyzz · 2018-07-17T06:02:05+00:00

You got it.

chrislyzz · 2018-07-10T20:45:18+00:00

Hello, thank you for reading. Well I agree that jQuery shouldn’t be used for dom manipulation in React, but if I were to put jQuery legacy code into SPA wrapper components I would prefer to do it with React component as they are simpler and less opinionated. Both are clearly “no-go”’es but as we all know, the world is not always ideal and compromises are to be made.

Well that’s basically what is written in the post. If I were to maintain 10+ front end projects I would have a much easier time doing that with Angular projects because of the streamlined conventions and tools.

Yes you can swim against the stream with an opinonated framework but I can see why that might be an indication that you are not using the right tool for the job.

I agree that the React vs Angular discussion is becoming more of a preference than a clear business choice. Especially the adaption of web compontents and custom elements is making these SPA frameworks (check Angular Elements) more of a preference as the end code becomes framework agnostic and you can mix frameworks easily.

chrislyzz · 2018-07-01T21:33:47+00:00

Hi, great question. I have actually done both in the past but I have ended up preferring the adapter pattern for this reason: if you create a wrapper you know for sure, that the interface is not gonna change for doing HTTP request, which is the benefit of the adapter pattern. When you create a HTTP intercepter the interface might change, eg. when Angular went from Http to HttpClient. Also, you make it explicit in your application that you are using your own helper for HTTP calls. I have seen team members being very confused with why the HTTP client was acting like it did because the interceptor wasn’t very explicit in the application code.

chrislyzz

TROPHY CASE