Anatomy of a Web App

Some of the terminology I will use below have a variety of meanings but for this blog post I'm going to define them in (what I hope) is in a simple and straightforward manner.

The basic building blocks:

  • Components - A physical section of the app. This includes the HTML, CSS, and JSS needed to make that particular section work. This aligns with the idea of Web Components and the components that React espouses.
  • Utilities - These are small, single-purpose tools that are used multiple times. Think of this as the embodiment of the Unix way.
  • Coordination - This is what facilitates the interactions across the various components. 
    • Note: I know I should think of a better name but I wanted to highlight that some architectures don't have a single unifying interface while others such as the React-Flux architecture by Facebook uses a single Dispatcher instance (is this an example of the Singleton pattern?) to coordinate the sending of events. On the other hand, the popular Reflux architecture / library uses a more streamlined approach and does away with the single Dispatcher by having the actions trigger directly to the various data stores.

A more complete anatomy:

  • Router - Frequently implemented both on the client and server side.
  • Data layer - The source of truth for your user data. This can either be directly accessing your database or using an ORM (object relational mapping) to interface with the database indirectly.
    • Caching layer - As websites scale up, there's typically a caching intermediary between the service asking for the data and the database itself. A popular open source choice is currently Redis.
  • API endpoints - The most popular being RESTful interfaces which help you decouple the interface from the implementation. Also, versioning and good documentation is very important, especially if these are public API endpoints for outside consumption.

Technical Infrastructure:

  • Testing - Even within testing there are so many parts, but I will list the big categories:
    • Unit testing - enables refactoring
    • Functional testing / Acceptance testing - interacts with the application from the user interface and treats it like a black box
    • Integration testing - ensure that data flows properly between various services 
    • UI testing - catch visual regressions in a semi-automated way
  • Source Code Management (SCM) - Using a Distributed Version Control system such as Git or a traditional centralized Version Control System. Tools such as GitHub are also important part of this codebase check-in / check-out process.
  • Dependency management - In the Javascript world, there's still a bit of a divide between client-side dependencies (the most popular manager probably being Bower) and server-side dependencies (the standard which is NPM). It seems like the trend is towards 'isomorphic' dependencies which can run in both the browser and server and NPM being the de-facto registry for dependencies.
  • Build system - Packages up the individual files and puts the application into a releasable state. The build system (e.g. Grunt or Gulp are the most popular ones for Javascript right now) help you concatenate, minify, and lint files to make it ready for production.
  • Integration / Deployment - Along the lines of the previous one, this helps you get your application moving through the various stages up until production
  • Monitoring / Logging - Once your application is in production, you need to ensure its health through a variety of tools and metrics.
  • Load Balancer  - Helps you scale your application across multiple machine instances
  • Serving Static vs Dynamic content - You will usually use something AWS S3 for static content and AWS EC2 for dynamic content. This helps you reduce the load on the workers doing the dynamic content.

Bonus Points:

  • I18n - Making the website usable for those not in your primary locale / language
  • Accessibility - Making the website usable for those with disabilities
  • CDN (content delivery network) - Making your website physically closer to people around the world by distributing static contents to various endpoints around the world.
  • Analytics - Third party services such as Google Analytics and Mixpanel make this easier.
  • Offline caching - This can be done through a mechanism like Local Storage which allows users to store a certain amount of data on their computer so they can (potentially) interact with the application even when they don't have internet connection.
  • Comprehensive testing - Once you've covered the major testing categories above, there's ways of improving test coverage even further by testing across different devices, OS, browser vendors, browser versions, and i18n locales.
Posted

views