ar·chi·tec·ture

Architecture is both the process and the product of planning, designing, and constructing buildings and other physical structures.

@elyseholladay

ar·chi·tec·ture

Architecture is both the process and the product of planning, designing, and constructing buildings and other physical structures.

ar·chi·tec·ture

Architecture is both the process and the product of planning, designing, and constructing buildings and other physical structures.

So what is Front End Architecture?

Front-end Architecture is a collection of tools and processes that aim to improve the quality of our front-end code while creating a more efficient and sustainable workflow.

Front-end Architecture is a collection of tools and processes that aim to improve the quality of our front-end code while creating a more efficient and sustainable workflow.

code standards · documentation · visual regression testing · automation · pattern libraries · build systems · maintainability · performance · tooling · DRY code · front end ops · clarity · efficiency · scalability · extensibility · dependency management · unit testing · style guides · continuous integration

code standards · documentation · visual regression testing · automation · pattern libraries · build systems · maintainability · performance · tooling · DRY code · front end ops · clarity · efficiency · scalability · extensibility · dependency management · unit testing · style guides · continuous integration

code standards · documentation · visual regression testing · automation · pattern libraries · build systems · maintainability · performance · tooling · DRY code · front end ops · clarity · efficiency · scalability · extensibility · dependency management · unit testing · style guides · continuous integration

A Front End Developer's audience is the website user.

A Front End Architect's audience
is the developers themselves.

A Front End Developer's audience is the website user.

A Front End Architect's audience
is
the developers themselves.

A Front End Architect builds the design and construction.
An Architect is more a designer of constructions, not the actual builder.

A Front End Architect builds the design and construction.
An Architect is more
a designer of constructions, not the actual builder.

You are the builders of the web.

My current job description:

“refactoring & documenting Sass/CSS/HTML modules, making a consumable package of Sass for other apps, visual direction and UX of a living style guide tool, versioning the tool, testing it, producing release notes, and of course, actually building it.”

AN INTERNAL AUDIENCE

DEVELOPER ERGONOMICS

LONG TERM MAINTENANCE

AN INTERNAL AUDIENCE

Front End Architects are not
writing CSS for the browser.

<div class="c2 p1 usr-ntfy usr-box cf">

DEVELOPER ERGONOMICS

er·go·nom·ics

the study of people's efficiency in their working environment.

What is your primary skillset?

& how often do you struggle with something else?

LONG TERM MAINTENANCE

Technical Debt

Technical Savings

HUMAN READABLE CODE.

·   keep the authoring style sheets accessible

·   don’t needlessly complicate simple needs

·   one-to-one parity of file names

·   prefer unambigious names over shorthand

“Don’t write clever code. Write embarassingly obvious code.”

—Scott Stevenson, @scottstevenson

PRACTICE SAFE CSS.

“By preventing name collisions with other components, chunks of CSS can be more easily moved one environment to another (prototype, stg, prod),... or be removed in the safe knowledge that their removal will not affect others.”

—Ben Frain

“I don’t know what that’s for, so just leave it in.”

But yes, also

MODULAR, REUSABLE,
COMPOSABLE CODE.

easily reusable code > the cleanest code to the browser

DOCUMENTATION

DOCUMENTATION

You can find what you need.

Backend developers or designers don't want to spend
time on the nuances of front end code. It has nothing to
do with their intelligence, but it isn't their core competency. Recognizing that—and solving for it—is crucial. It frees them up to do the work they are best at.

Backend developers or designers don't want to spend
time on the nuances of front end code. It has nothing to
do with their intelligence, but it isn't their core competency. Recognizing that—and solving for it—is crucial.
It frees them up to do the work they are best at.

“If we think about CSS first, we’ll be able to think about CSS less.”

—Michelle Bu, @hazelcough #cssconfoak

Thank you!




@elyseholladay