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

8 of which are re-usable generics!

and that's how our new,
modular framework of components
allows us to build complex
user interfaces quickly