The Inherent Complexity of Frontend Web Development

a review

This is not...

A critique

A recommendation

A judgment of anyone

A judgment of any opinion

A scolding

A callout

 

This is...

An aknowledgement

A reminder

A primer

Something I need to remind myself of often

Maybe something we each need to be reminded of

This could be...

A challenge

Unnecessarily complex

Overly engineered

Duplicated code

It wasn't this hard when I built...

[server-side framework] already has a solution for this

brittle

JavaScript Fatigue

Control

Got 99 problems but control ain't one.

Got 100 problems.

https://speakerdeck.com/chriscoyier/what-we-dont-know?slide=32

Concerns

• Performance
• Ergonomics
• Readability
• Maintainability
• Adaptability

Concerns

User experience

[The browser is] the most hostile software engineering environment imaginable.

Douglas Crockford
http://cs-server.usc.edu:45678/resources/json/rwe_keynote.pdf

User Controlled

• Network speed

  • fiber

  • cabel

  • wifi

  • dsl

  •  landline

  • 4g, 3g, 2g

  • bluetooth

  • wi-max

  • mesh

  • tor

• Language

  • ES3

  • ES5

  • ES6

  • ES2016

  • ES2017

  • ES2018

  • WASM

  • No JS

• Feature availability

• Input methods

  • Keyboard

  • mouse

  • voice

  • touch

  • input granularity

  • digital crown

• Competing third-party code
• User overrides
• platform overrides
• dropped network connections
• changing network connections
• device switching
• persistence availability
• persistence methods
•  

• Execution environment

  • Chrome

  • Firefox

  • Safari

  • IE

  • Edge

  • Opera

  • Opera Mini

  • Beaker

  • Tor

  • Seamonkey

  • Silk

• Output methods

  • Display size

  • Display existence

  • teletype

  • text-to-speech

Platform Controlled

• Browser version
  • changes 6wks - 1 year
• Network type
  • Cell tower upgrades
  • Tower lease agreement changes
  • Last-mile upgrades
• Network speed
• Throttling
• Infrastructure upgrades
• Language support

Security

Nearly all security breaches originate with a human on the client

• DDOS attacks
• man-in-the-middle
• XSS
• CSRF
• cookie hijacking
• malicious ads
• unsafe 3rd party scripts
• unsafe CSS!

Attempts at Mitigation

Babel

Typescript

Linting

Testing

Polyfills

Browser usage states

Metrics

WASM

QA

Proxy servers

Front-end development is hard.

 

It is not hard for hard’s sake.

 

The problem space itself is hard

 

It has yet to be completely figured out

 

More and more variables to balance all the time

 

It’s unlikely there will ever be a silver bullet solution, only informed tradeoffs