TOTVS Labs
Front-end Framework
Angular material
- Great if you are – or want to look like – Google
- Great if you want to be locked in to Angular forever
- Great if the problems you have are the same as theirs
- Good for building prototypes or Android web apps
BUT We are totvs!
- We have unique requirements and challenges
- We want to differentiate ourselves from the rest
- We want to keep up to date with the latest technology
- We're building real products for real people
Why create a framework?
- Angular Material includes lots of components & features that we'll never use – this unnecessarily punishes our users
- The components it does have weren't built for us –so customizing is hard and time consuming
- Customizing then harms our ability to upgrade – so we
may end up maintaining our own version anyway - With our own framework, we can easily create
what we want, when we need it
progress so far?
- In just 5 weeks, we have a lightweight, scalable framework and a growing, modular, component library
- That's 16 global, and 5 Fluig Data components already identified and built in just one section of the app
- Components are dumb and portable. They can be dropped in to any project & styled to suit as required
- It's standardizing the look and feel across the app, but is flexible so that Utility Classes are provided for edge cases where we need to "break free" on a case-by-case basis
- We're using native browser controls & features so the front-end performance is a lot better/more robust
- The accessibility of components is considered from the outset, so you can use it regardless of device/disability
- Developers are enjoying creating for and implementing it
- and…
The file size has
decreased MASSIVELY
- Before:
8827 lines | Before：1.01MB | After：209.05KB | Ratio：20.20% | Gziped: 28.11KB
- After:
2085 lines | Before：178.75KB | After：37.76KB | Ratio：21.13% | Gziped: 6.6KB
How have we done this?
- By applying an Object Oriented approach to CSS. Our Single Responsibility Principle means every component does one thing only, and one thing well
- We're using an industry-standard CSS methodology called BEM to achieve this, which allows us to reduce the complexity and develop with speed & predictability
- We've separated the concerns of components, so the framework, appearance and behavior of components are not tied to each other
- Introduced coding guidelines and standards
The result?
10 unique components were used
