Fundamental NGX vs Fundamental Library Styles

Fundamental NGX and Fundamental Library Styles are both positioned under the Fundamental Library and as so, they have their own similarities to each other. A visible example is a design that both libraries share; the design is aligned with the SAP Fiori guidelines. Although sometimes the similarities can create confusion between users and developers, that’s why the purpose of this post is to show the distinguishing points between the two libraries. Additionally, this post will suggest some best-practice use cases for each library.

What is Fundamental Library?

Fundamental Library is an open-source and community-driven project to provide a consistent user interface across web applications. Everyone outside of the core team can contribute to the code or share ideas with the team. With accessibility, performance, and collaboration at the forefront, Fundamental Library continues to deliver modular and flexible components that are accessible and easy to implement.

Fundamental Library Styles

Fundamental Library Styles is part of the Fundamental Library. It is a lightweight presentation layer that helps build consistent SAP Fiori apps in any web-based technology; HTML, Angular, Vue, React, etc. The library consists of already designed and built components, so they can be easy to implement and work with. The Fundamental Library Styles does not provide the logic of the components; meaning that the data communication and backend should be handled by the user/developer.

Benefits

• A lightweight presentation layer that does not increase the size of the project.
• Can be used per component separately. There is no need to install the whole library if you need to use only certain components of the library. Check the Fundamental Library Styles Documentation for further information.
• Provides different packages that can be used separately if needed.
• Can be incorporated into any web technology; HTML, Angular, Vue, React, etc.

Use Fundamental Library Styles:

• If you have an already built and functioning project and you would like to incorporate a modern-looking design.
• If you are creating a new project (in any technology) and you would like to cut yourself some design headaches.
• If you are looking for a lightweight library to incorporate into your project.

Fundamental NGX

The Fundamental NGX library is based on the Angular framework and Fundamental Styles, giving its components a modern look. It offers already-built and ready-to-use components which reduce drastically the overall coding time and lines for the developer. The library is very straightforward and literal so everyone with little Angular background can pick it up.

Benefits

• Can reduce the developing time with the already-built components in any Angular project.
• It handles the values and functions of the components in the TS files. However, the developer using the library still needs to handle the database and backend part.
• Can be used per component separately. There is no need to install the whole library if you need to use only certain components of the library. Check the Fundamental NGX Documentation for further information.
• Provides an internationalization package that allows you to dynamically change the language of your application and it can be used with any translation library of your choice.
• Contains a Theme module that allows the developer to switch between different themes provided by the Fundamental NGX library: Fiori 3, Fiori 3 Dark, High Contrast Black, High Contrast White, Horizon, Morning Horizon, Evening Horizon, Light Dark, High Contrast Black Horizon, High Contrast White Horizon.

Use Fundamental NGX:

• If you are planning to build an Angular project and you would like to have a modern-looking application.
• If you don’t want to deal with finding icons and checking for design ideas.
• If you are looking for a lightweight library to incorporate into your project.

Conclusion

Both Fundamental Library Styles and Fundamental NGX are part of the Fundamental Library and as so they share the same themes and design guidelines. In this post, I mentioned some of the differences between the two libraries and their benefits. However, this post is not intended to show exactly which one is better for your project. Every developer has the freedom to choose what’s best and faster to pick for his/her project. I hope you find this post helpful.

Happy coding!