3

I'm a software developer, and the kind of developer we call "front end developer". I'm working on stuff like Angular JS, Angular 2 and others.

I wanted to know how we can organize our front end code so that we can fit a modular based microservices like architecture.

Basically I am thinking of Platform as a Service like front end app where module can be load independently based on admin configuration and role wise. In a platform as service like apps we select components that application need and they load independently without affecting whole application.

How can we organize code, so that our front end code can matches these requirements?

I don't want to build monolithic applications in a microservice and big scale context. I was thinking of a way to split my front end components. But the problems come when we try to expose those components in a webpage that would aggregate them to build a real application...

I'm a bit lost in this situation and I need some help understanding the flow on a front end side.

If you can, please link any articles, or practices that could help me.

  • In basic, you want to take a look at [Microfrontends][1]. The term first occured on [Thoughtworks Technology Radar][2]. [1]: https://micro-frontends.org/ [2]: https://www.thoughtworks.com/radar/techniques/micro-frontends – Thomas Junk Apr 24 '18 at 13:45
  • As a first rule of thumb, I'd say that the "front end" should be as independent as possible of the "back end". It just interacts with a REST API for example. As such, you don't care about all the orchestration, container, docker, kubernetes, etc ...this is all about deployment and has *nothing* to do about your front-end code. Honestly, this whole post seem to be written just for the fun of conflating trendy terms. – dagnelies Apr 24 '18 at 14:37
  • Its not like that. I am thinking of component base front end approach where components/module are independent and can be added or removed on runtime based on configuration. – Ghazanfar Khan Apr 24 '18 at 17:50

1 Answers1

1

The Web itself already has a very good approach to this: Hyperlinks.

Each section should be a separate "Web Page" or "Web App". They can share the same authentication system (which should be an external off-the-shelf component anyway). The frontends don't necessarily need to know about each other, the backend could do the work of generating the right URLs.

Seriously, hyperlinks are often overlooked once people start thinking "Angular" SPA. With hyperlinks, one "module" might be Angular, the other one React, and another one a Flutter Mobile app (hyperlink to mobile app).

Kind Contributor
  • 802
  • 4
  • 12