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

Made with Slides.com