What makes a web application “modern” in 2019

With the multitude of technologies available, the proliferation of frameworks and the ever changing ecosystem, modern becomes outdated faster than ever. This article attempts to define what “modern” looks like in 2019.

Modern web applications must meet the definition of a progressive web app (PWA)

A progressive web app must be reliable, fast and engaging. On a desktop, it must be a snappy responsive single page application. On a mobile device, it must feel like a native application and it must be able to handle low connectivity situations by caching essential data. Get started with Google’s Progress Web Apps guide, Workbox and use the Lighthouse Chrome extension to benchmark your application. The RealTalk JavaScript podcast has a good introduction episode on the topic. Building a PWA will provide customer delight on a desktop, mobile devices or in a hybrid native application.

A modern web application must have a simple yet powerful build system.

Don’t waste time going down a rabbit hole configuring WebPack, Parcel or Rollup, unless you know what to expect and have a very specific use case in mind. Favor ready to use tools that will seed the folder layout and establish a solid foundation for the tools that will be used to build the application. The most popular frameworks and libraries have their dedicated command line interface (cli) tool. Angular has Angular CLI, React has create-react-app and Vue has Vue CLI. There are also third party alternatives like react boilerplate but they’re losing ground to the first party tools that are kept much more up to date. While it’s possible to setup Webpack from the ground up, there’s really no reason to do it until the web application becomes so large that it needs to be broken down in to several applications, in which case Lerna comes in play.

A modern web application needs to be written using a modern framework and a modern syntax

According to the State of JS 2018 survey, a modern web application in 2019 will be built with one of three front-end frameworks, React, Vue.js or Angular, and according to the same survey, it should be written using ES6 and TypeScript. Babel supports ES2018, now is as good a time as ever to learn it, and start using it.

…And a modern front-end framework needs a modern UI library

The quality and high level of customization available with component libraries like Material UI, Ant Design and Semantic UI makes building components from scratch less and less appealing. Accessibility, focus indicators, and responsiveness come out of the box with these component libraries, and at a level of quality that will be hard to replicate by a small team whose primary purpose is to build a functional app, not a UI library. Invest time perfecting a stylesheet and theme reflecting the desired identity of the web site, but don’t waste time building an auto select input field. Chances are someone has already done it, and perfected it over several iterations. For proof, check out React Select, and ask yourself how long it would take to replicate a similar component with feature parity.

A modern web application has to be accessible

Accessibility must be at the forefront of any web design. Large touch targets, support for screen resizing, high contrast, correct semantic structuring, and easy keyboard navigation make websites better for everybody. To provide user delight for every user regardless of their abilities, invest time learning how to use VoiceOver, and use A11y’s Web Accessibility Checklist, Chrome’s Accessibility Developer Tools, and accessibility linting rules.

A modern web application should be heavily tested from all sides. And then, tested again. And again, and again…

Without testing, there is no easy refactoring or upgrading foundational libraries. The more thoroughly tested an application is, the faster it can be released, and whatever time invested in testing will pay for itself many times over. Seeding an application with a first party CLI will make setting up the project for testing easier as a lot of the boilerplate will be taken care of. There are many different testing strategies in Node & JavaScript, and each has its own advantages.

• ESLint/TSLint
  Using a linter will make sure coding conventions are respected, and enforced. Sterile arguments such as tabs vs spaces or how many spaces constitute a tab can be snipped by adopting an external style guide like AirBnb’s JavaScript Style Guide, Google’s JavaScript Style Guide and the many TSLint rules available. Enforce consistent formatting using Prettier. Prevent developers from pushing code that is not linting using Husky and lint-staged. Settle opinion wars and avoid the highest paid person’s opinion (HiPPO) by voting in a Slack channel if rules need to change.
• Unit Tests with Jest
  Jest is my favorite test runner at the moment, because it plays well with Enzyme and React, comes with its own BDD style assertions, out of the box coverage, and opens the door to Snapshot testing. I again highly recommend using Git Hooks (with Husky) to enforce high code coverage and 100% passing unit tests before allowing code to be pushed.
• Component Driven Development and Component testing with Storybook
  Storybook is a powerful and easy to learn tool for component driven development. Instead of building screens, developers create components, and assemble them to create screens. Storybook allows for Structural Testing which allows to create and maintain a suite of unit tests that will actually fail should the layout of the web application change. This minimizes the amount of visual defects and allows developers to check for them prior to opening a pull request, and before the code is deployed. Storybook also enables Interaction Testing, Automated Visual Testing and Manual Testing. Quality engineers love this. Product owners can play with components without pestering the development team for a demo and provide UX/UI feedback at their leisure, so valuable demo time can be used to discuss feature enhancements rather than UI glitches.
• Integration and End2End tests with Cypress
  The days of hard to write and flaky tests with Selenium are over. Set up and write tests in minutes using Cypress, and run them in a matter of minutes both locally prior to pushing code and on a CI/CD environment. Stop repeating the same handful of steps while testing a new feature, and just have Cypress do it faster and more accurately than any manual testing could ever be.
• Experiment
  It is estimated that 80% of new features have a neutral or negative impact on users. Use Feature Toggles and A/B Testing to assess the impact of new features on your website. Do not be afraid to kill a new feature that took a long time and a lot of effort to build if it has a negative impact. What most would consider a failure should be treated as a successful market study, draw some lessons from this experience and move on.

What makes a modern web application modern today, will change throughout 2019, using technologies that have not yet been adopted widely (React Context and React Hooks for instance are redefining how we think of a ‘state’ in a React application). Also, there are many other things that go into building an application which this article does not touch on, such as backend integration and API calls (Rest/GraphQL), micro services, and cloud infrastructure and resiliency.

Finally, the most important part of a build is the people behind it, and that’s a whole other article in itself.