Portals: Decoupling presentation from ownership.

This week I learned how to create portals in Angular.

Portals in real life — Touch bar — Photo by Tinh Khuong on Unsplash

Problem

Frameworks like Angular, Reactjs, and Emberjs make it easy for front-end developers to write clean, reusable, and maintainable code. They achieve this reusability by providing an API for encapsulating similar functionalities into components.

Component is a coupling/combination of user interface(UI) and the controlling logic that brings the UI to life.

This coupling means that all action elements will have to live close together, which makes it hard to satisfy all user experience needs.

For example, you want to allow a customer to apply for insurance once they have filled out the required information.

  1. When user opens the site, you show them some explanation of what you sell and “Get a Quote” button to send them to the product section.
  2. Once he/she provide required information, an “Apply Now” button shows up.
  3. Now, if he/she decides to go back to the information section, it would be convenient for them to see an “Apply Now” instead of “Get a Quote” button.

Illustration

Solution

In order to achieve this presented case (example above), we need a way to break the component encapsulation (Or, basically declare a piece of UI in one component, then display it in a different component).

Fortunately, these Frameworks provide developers with the tools to do just that, and today I’ll show you how to use Angular provided tools to help our users remember to save their progress.

Reactjs provides built-in API for Portals and there is a third party library for Emberjs

Implementation

Disclaimer: The code presented below is incomplete and for demo purpose only.

  • Prepare a container where ported UI will be displayed.
  • Put UI inside the owning component, and wrap it inside a “portal”.
  • Create the Portal and give it access to the container.
  • Now if you open your app, the UI should appear in the container and any action you take should be handled by the owning component.

Conclusion

The portal concept allows developers to satisfy UX requirements without breaking the Framework encapsulation mechanism.

Resources

--

--

We’re an integrated and cloud-native insurtech platform sharing how we solve our technology problems. Perhaps you’d like to join us? Check out our careers page: https://www.haventech.us/join-us/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Marcellin Nshimiyimana

Marcellin Nshimiyimana

Always debugging, because problem knowledge equals half the solution!