Chadwin DeyselThere are a lot of popular frontend frameworks for JavaScript developers out there. Material UI and Bootstrap immediately comes to mind. However, I think there’s one to rule them all. The most underrated frontend framework - PrimeFaces.
I will be going over what PrimeFaces is and why you should be using it in your next project.
What is PrimeFaces?
PrimeFaces is a frontend framework that is available on popular libraries such as React, Angular and Vue.js.
Unlike most component libraries, it isn’t just made of a handful of pre built components made with a design system. It’s made of an eco system of component, icons, a powerful CSS libraries that supports multiple design systems.
Second to None Component Library
PrimeFaces has one of the biggest (if not the biggest) open source component libraries with 80+ components.
It’s comes with everything you’d expect such as form elements, buttons, drag and drop stuff, cards, tables etc.
But it also comes with a suite of other uncommon but very useful components such as interactive calendar views, skeleton loaders, map integrations and built in charts with Chart.js.
The existing components are also some of the best I’ve used in terms of their capabilities and ease of use, such as their data table.
Design System
PrimeFaces also has their own design system called PrimeOne, with everything you’d expect from a design system (text formatting, colors etc.) and great tooling such as Figma and Sketch templates to get you designing.
Here’s the best part though... PrimeFaces is also compatible with other popular design system. Google’s Material, Microsoft’s Fluent Design and even Tailwind!
These are configured as Themes and can be swapped out with a simple reference to a CSS file.
There are multiple themes available that support different looks, colors and are compatible with light and dark modes. Paid for premium themes are also available to give your organization an additional edge.
If you don’t find the look and feel you need, they’ve also built a theme builder so that you can design a custom library that works for you and your company.
Utility CSS and Icon Libraries
PrimeFaces also comes with great options for a utility CSS library and Icon library.
PrimeFlex, their utility CSS library, allows you to style your elements and components by configuring CSS properties with class names. It can be operated with the component library or by itself.
The icon library Prime provides also passes with flying colors as it has all the icons you would need. However it’s not as extensive as something like Font Awesome.
PrimeBlocks!
Another cool part of the PrimeFaces eco system is the PrimeBlocks library. This is essentially prebuilt example pages that were built on PrimeFaces components and PrimeFlex to be used in your application immediately.
There are example files for everything from E-Commerce, Landing Pages, Blogs, Web Application forms and even Dashboards.
The majority of them are behind a paywall, but the pricing is reasonable and the licensing is really flexible allowing you to buy once and use them across as many projects for your organization.
Checkout PrimeBlocks Licensing Agreement here
Useful Links to Get Started
PrimeFaces
PrimeFlex
PrimeBlocks
Conclusion
If you found this post useful, please follow me on Twitter for more Angular and development tips and check me out on GitHub.
Thanks for reading and have a great day! 😄
