beruti / frontend-playbook

Battle-tested set of conventions, pragmatic approaches and best practices for Front-End Development

Deloitte Digital Front-End Playbook

Hello and welcome! This is our playbook.
It's filled with things we've learned based on our own experience and study of others'.
It is a battle-tested set of conventions, practical approaches and best practices that allow us to design and build systems that move our client projects forward.

This document covers all the vital components of the web app: client and server side JavaScript, CSS and SASS, HTML5, Accessibility, Performance, Automation and Tooling. This is a living document, and we are keen to share our knowledge on our journey towards making the web a better place.

What the playbook is

• a space to share our standards / gotchas for front-end development and DevOps and facilitate discussions around it.
• a document that is primarily aimed at our own developers, but is generic enough to be consumed by a wider audience.
• a place where we focus more on principles and practices over specifics of tooling and implementation.
• a curated list of resources and links for recommended tools / boilerplates / libraries that meet our standards and can help us speed up development.

What the playbook is not

• a collection of starter apps and boilerplates. We believe that a separate repo can help keep the code up-to-date and attract external contributors.
• a learning catalogue. Learning Resources should cover all of our front-end learning recommendations.
• a place for technology-specific advice better covered elsewhere, time-sensitive information, browser support, specs, comparisons, metrics. The source is likely to be more up-to-date, so we should point to external resources which are better maintained.

Contributing

This playbook belongs belongs to everyone in the DD front-end teams. You own this as much as anyone else, and your thoughts and suggestions are crucial to making it useful to others. Get stuck into it!

Read the full contributor guide.

Contents

Development

• Accessibility
• API Mocks
• Architecture
• Design
• Frameworks
• HTML
• JavaScript
• Responsive
• Responsive Email Templates
• Tools of Trade

Production

• Performance

Learning

• Learning Resources