CSS Enterprise:
5 Year Mission

Style and Class: May 13th, 2014

@stevemynett

[you•eye] (noun) - UI

Early stage startups

  • Speed
  • Agility
  • Velocity
  • Flexibility
  • Ship, ship, ship

Why did it sink?

  1. Poor monitoring
  2. Lacked agility
  3. Ineffective containment
  4. Poor culture

UI's at scale

Writing scalable & stable UI's

  1. Anticipate Scale
  2. Monitor everything
  3. Build a UI Culture
  4. More than HTML & CSS

Anticipate Scale

Everything will scale

10x Rule

  • 10x the users
  • 10x the load
  • 10x the features
  • 10x the team
  • 10x the css files

Don't let the first cracks in

  • Don't let shortcuts, hacks, bad things into your code
  • Easier to write your 10th !important than your first
  • Where possible, enforce this with pre-commit hooks

Don't launch without using a
scalable UI system

CSS if you don't use components

- @stubbornella

CSS if you do use components

Goals:

  • Portable
  • Confident
  • Focus

Principles:

  1. Component out, not page in
  2. Full encapsulation
  3. Everything on global scope

The promise of knowing what you are working on isn't blowing up other areas of the application is more important than reusing your code.

Nicholas Gallagher

</scaling>

Monitor Everything

Monitoring

  1. Do something
  2. Measure the metric
  3. Save the data
  4. Graph the data
  5. Watch data
  6. Improve the metric
  7. Set up notifications

Measure against releases

Good graphs to start with

  • Speed index / time (Speed Curve)
  • Page weight / time
  • Requests / time
  • Build time / time
  • Web performance
  • Technical Limitations

If it isn't monitored,
it doesn't exist

</monitoring>

Culture

The role of a UI developer is to develop and maintain the User Interfaces of a web application.

A role of a UI Dev is to be a domain expert and create an environment, systems, documentation and tooling that empower every developer to create UI's. Not simply be the one to create UI's.

Document | Standardize | Evolve

  • Document: Give all dev's everything they need to write UI's
  • Standardize: Make sure that everyone is writing the same things in the same way
  • Evolve: When there is a better way, change what you're doing!

Document

The real purpose of documentation

  • Share Knowledge
  • Remove interruptions
  • Decrease onboarding
  • Establish consistent coding style

Standardize

What to standardize

  • Coding Style
  • Naming Conventions
  • UI Elements
  • Colours
  • Font stacks

Evolve

Styleguide

Guilds

  • Organized around similar interests
  • Cross Teams
  • Establish roadmaps for language specific interests
  • Maintain the quality of that technical area

</culture>

Not just HTML & CSS

Application logic is being deferred to the client side and traditional operations aren't going with it.

June 2013 Alex Sexton published Front End Operations

Front End Operations

  • Build and maintain tooling (Grunt, Gulp etc)
  • Web Performance
  • Monitor client side errors
  • Keep dependencies up to date, secure and stable
  • Graph and test everything
  • Make sure that this works on everyone's machines
  • Automate these things

Labels Enable

  • Establish shared language
  • Establish best practices
  • Introduce this formally into teams

Lets make fast, measurement driven, easily maintained applications the starting point

Alex Sexton

</#FEOps>

Take Aways

  1. Invest the time to monitor everything
  2. Anticipate Scale
  3. Build a UI Culture
  4. Front End Ops

We're hiring

Thanks! Questions?

@stevemynett


Slides: mynettworks.com/styleclass