YamUI
Reusable component framework for Yammer.com
Overview
YamUI is a UI component framework specifically designed for Yammer.com, built using React and Office UI Fabric components. Although it is now in maintenance mode—with only minor updates planned—it provides a robust foundation for developing user interfaces within Yammer applications. For those currently using YamUI, it is recommended to lock the version to 9.4.1 or fork the project from the previous commit before important features were rolled back in version 10.0.0.
Understanding its structure and functionality can greatly enhance your application development process. With comprehensive documentation and a variety of components available, YamUI caters to developers looking for a streamlined UI development experience, particularly when integrated into existing Yammer applications.
Features
-
React-Based Framework: Leveraging React alongside Office UI Fabric, YamUI offers a modern and efficient approach to building user interfaces.
-
Minimal CSS Footprint: The baseline CSS is approximately 4kb when minified and gzipped, allowing for a lightweight, consistent styling foundation for your application.
-
Component-Based Architecture: Each UI component is compiled from TypeScript into a designated directory, facilitating the import of only the components needed, helping to minimize bundle size.
-
Visual Regression Testing: Visual diff regression tests ensure that updates do not unintentionally alter the appearance of components, providing peace of mind during development.
-
Docker Integration: Visual diff tasks run in a Docker container, ensuring that environments remain consistent across development and continuous integration (CI) processes.
-
Comprehensive Documentation: The inclusion of a living style guide offers detailed documentation and examples for each component, which is crucial for correct implementation.
-
Easy Setup and Configuration: The installation process is straightforward, with clear instructions on setting up Docker and configuring the environment for visual testing.
-
Custom Component Creation: Developers can easily create and document new components with straightforward commands, promoting efficient development and modularity.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
- Webpack
Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.