Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Evolving Web Applications with Modular Design C...

Evolving Web Applications with Modular Design Components

Web applications need to evolve over time. The best way to encourage this evolution is by building module based component systems. This allows for easier iteration, less refactoring, and better products for the consumers.

Mike Kivikoski will show how to design a module based component system using a CSS preprocessor, such as Sass. This technique allows us to design faster and in the browser, gives us the chance to put together various layouts while reusing UI patterns, and to help create cohesion and comfort for the user. Mike will demonstrate how to setup this system, build it, and use it within a product.

Mike Kivikoski

October 20, 2015
Tweet

More Decks by Mike Kivikoski

Other Decks in Technology

Transcript

  1. What is a Module Component System? A design approach that

    subdivides a system into smaller parts.” “ Wikipedia https://en.wikipedia.org/wiki/Modular_design
  2. vv

  3. vv

  4. vv

  5. vv

  6. Atomic Design A methodology for creating design systems, with five

    distinct levels” “ Brad Frost, @brad_frost
  7. How to start Use .classes instead of IDs Single Responsibility

    Principle Allow classes to combine Use variables Review everything
  8. When to start regression After initial components are created Otherwise,

    you may go mad Try to test components, not screens
  9. Play nice with others The name ‘LEGO’ is an abbreviation

    of the two Danish words “leg godt”, meaning “play well”. http://www.lego.com/en-us/aboutus/lego-group/the_lego_history