Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

Summary

The web is the most important platform for software development today, and more and more organisations are embracing this. They demand quicker turn around to be able to respond to changes, and are bringing software development closer to the rest of their business. The ability to respond quickly and make changes without long waits can now make-or-break an organisation, and this has led to the rise of the "full-stack" developer: one who feels comfortable working on code at the system, database, API, middleware or user interface level, depending on the task in hand. The full-stack developer is more than just a programmer. They do more than simply write code, they develop solutions to problems (often expressing those solutions in code), but also have to understand the problem in the first place. Working as part of a team, they need to be able to deal with the big picture and the little details.

This book is aimed at recent graduates, new and junior developers, as well as those retraining from being specialists into the more generalist field of "full-stack" web development. It recognises skills beyond the technical, and aims to give foundational knowledge of the wide set of skills needed in a modern software development team. Where programming examples are given, they are given in the context of the web as it is in 2017, but care is taken for these only to be used to explain an underlying concept that will remain relevant as the web evolves.

Chris Northwood is a Senior Engineer working for BBC Research & Development, the research arm of the world's largest public service broadcaster. With a career starting out with Computer Science degrees from the University of York (BEng) and the University of Sheffield (MSc), Chris has worked at major organisations including ThoughtWorks & the University of Oxford, as well as freelance work. He wrote this book distilling the information he learnt over his career as it's the book he wishes he had when he started.

Introduction

The introduction outlines the context of development in modern organisations, as well as what the book aims to cover.

(1000 words)

The Modern Web

The Modern Web outlines the journey to where the web is today from it's origins.

  • History and Rise of the Web
  • Mobile web
  • Evolution of standards and specifications
  • Web apps

(2,500 words)

Planning Your Work

"Weeks of programming can save you hours of planning"

Planning is an important skill in software engineering. It can help identify the work you need to do, how to co-ordinate that work in a larger team, and help you communicate with stakeholders to set expectations.

  • Agile vs Waterfall
  • Requirement gathering: workshops, research, analytics
  • User stories: defining them, writing them, "INVEST"
  • Tracking progress: tools, scrum, kanban
  • Retrospectives
  • Managing backlogs
  • Prioritisation
  • Bug tracking
  • Continuous delivery

(12,500 words)

UX

Ultimately, the end-user of the web is a human. The interface between a human and the computer must be usable and optimised for the human, and it is from this that the field of user experience has arisen. Although there are many user experience specialists, they often work closely with developers, and an appreciation of this skill set will greatly increase your effectiveness.

  • What is UX
  • Information Architecture
  • Affordances
  • User testing
  • A/B tests
  • Visual design
  • Translating it into code: grids, component libraries and style guides

(7,500 words)

Designing Systems

An individual application will often sit as part of a larger system, as well as being a system itself. Software architecture is the term given to managing these systems at a high-level, and understanding the technical relationships of your app to a larger system minimises any mismatches that might occur. Designing a robust and reusable system will allow your code to stand the test of time, as well as systematically solve some of the concerns that your application has.

  • System architectures (microservices to monoliths)
  • Identifying subsystems
  • Identifying interactions and data flows
  • Abstractions
  • Integrating with external systems
  • Legacy systems
  • Cross-functional requirements ** Caching ** Resilience
  • Designing sub-systems
  • Design patterns
  • Refactoring
  • Tools

(10,000 words)

Ethics

As an engineering professional, you're expected to behave in a professional manner. As software has a huge impact on the world today, software engineers are under a lot of pressure to act ethically, but how to do so may not always be clear.

  • Professional behaviour (codes of conduct, etc)
  • Minimising user harm (e.g., cognitive load)
  • Minimising global harm (e.g., energy usage)
  • Trust & privacy

(2000 words)

Front-End

The "front-end" is the part of the application that interacts with the user. Front-end code has a set of design patterns and ways of working that are distinct from the back-end (which runs behind the scenes). This explores those and specifically how the front-end of the web looks.

  • HTML
  • CSS
  • Rendering pages (transforms & templates)
  • Styling approaches
  • Component libraries
  • Responsive design
  • Progressive enhancement
  • SEO
  • Build tooling

(12,500 words)

Testing

A developer is expected to deliver high-quality applications. Testing helps you both verify that you are doing this, as well as aiding you find bugs and issues in the software as you build it. But testing is more than just something that happens after development, the test process starts at the design stage and helps identify issues with what is being asked for before any code even gets written.

  • Test-driven development
  • The test pyramid (unit, integration, end-to-end tests)
  • Behaviour-driven development
  • "Three Amigos"
  • Manual testing
  • Automated testing
  • Visual testing
  • Testing cross-functional requirements

(5,000 words)

JavaScript

JavaScript is the programming language of the web. This chapter is a tour of the patterns of development used in JavaScript covering NodeJS and the front-end. It is aimed at refining the knowledge of someone who knows the basics of JavaScript towards building more advanced applications.

  • Dealing with asynchronous (patterns, promises, callbacks, etc)
  • JavaScript in a browser environment (the journey from simple enhancement to rich apps, dealing with cross-browser complexity with transpilers and polyfills)
  • Offline-first
  • DOM
  • Server-side JS (NodeJS, differences between that and the browser)
  • Modules and code structure in JavaScript
  • JavaScript types
  • Object-oriented flavoured JavaScript (prototypes, ES6 classes, differences from languages like Java/C#, the magic this)
  • Functional programming flavoured JavaScript
  • Events
  • Dependency injection
  • Introduction to JS testing
  • JavaScript build tooling

(12,500 words)

Accessibility

As Tim Berners-Lee said "This is for everyone". Web technologies are fundamentally compatible with technologies that enable users who have accessibility needs. This chapter gives an introduction of accessibility tools to developers as well as outlining how important it is and the information needed to not break compatibility with accessibility tools.

  • Accessibility in the design stage
  • Using Assistive Technologies
  • Structuring HTML in an accessible way
  • Patterns for interactive UI
  • Accessibility testing
  • A "common mistakes" checklist

(6,500 words)

APIs

The interface between a front-end and a back-end is the API exposed by a back-end. Getting the API design right allows for good separation of concerns between many services in a complex system, or in a small system, can simplify the front-end.

  • Patterns for APIs (SOAP, AJAX, REST)
  • Defining API domains
  • Patterns for REST APIs
  • API security
  • Event-based APIs
  • Service discovery
  • Consuming APIs

(8,500 words)

Storing Data

Behind an API sits a way of storing the data at the heart of your system. This chapter gives an introduction to how databases form part of a typical web application, and how they interact with other parts of the stack.

  • Database types
  • SQL databases
  • NoSQL databases
  • Where data should be persisted in your system
  • Accessing databases (SQL, ORMs, NoSQL, indexing)
  • Managing a database
  • Protecting a database

(5,000 words)

Security

The Internet is open to everyone, including your application and system. That includes potentially hostile users, and you must consider security at any point across the stack to protect your organisation and it's users. This chapter covers the basics of making a secure application and managing any security risks in your application.

  • Managing trust
  • Managing secrets
  • Responding to security incidents
  • Sanitisation and validation
  • Threat modelling
  • Secure coding checklists
  • Passwords
  • Security in dependencies
  • Protecting your infrastructure

(10,000 words)

Deployment

Building a website is useless unless it's deployed somewhere. Modern full-stack teams are often responsible for managing their own code deployments.

  • Twelve-factor apps
  • Development environments
  • Production environments
  • Moving code from dev into prod
  • Managing your application's configuration
  • Managing the infrastructure of your application
  • Immutable infrastructure
  • Continuous delivery and deployment

(3,500 words)

In Production

Once your application is in production, it will need to be managed: Not only deployments, but managing any issues that occur on a running environment. Although this may be done by a dedicated operations team, it is increasingly common that this is now done by the team that makes it. This chapter will ensure your application is in the best shape and to prepare you for the dreaded "prod is down at 3am" incident.

  • Fire drills
  • Run books
  • On-call
  • Monitoring metrics
  • Logging
  • Incident response

(3500 words)

Constant Learning

Once your application is live, the work does not end there. You and your team will be constantly learning more about your users and organisation and how to respond to that, but there's a wealth of data that the application itself can give you to help improve. This chapter gives an going beyond just providing technical support, but ensuring your application is best meeting your user's and organisation's needs.

  • Hypothesis-driven development
  • KPIs
  • Analytics
  • Experiments

(2000 words)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment