JSFoo

JSFoo 2019

On component architecture, front-end engineering and Developer Experience (DX)

Demystifying front-end tech stacks

Submitted Jun 6, 2019

Section: Full talk (40 mins) Technical level: Intermediate

“Should I go with React or Vue?”
“I want to use Elm in my company, it looks really interesting!”
“What library do you recommend for X?”

Sounds familiar? This talk is for you.

The front-end ecosystem evolves faster than most of us can keep up. When it comes to making architectural decisions, like choosing a tech stack, it is difficult to make informed, future-ready decisions. I’ll be talking about

Why are these decisions difficult to make?
Factors to consider along 3 axes
- Business
- Tech
- People
- Process
How to approach decision making
Case study from Quintype of choosing a tech stack for a major front-end rewrite, the whys, what worked, and what didn’t

Outline

Why are these decisions difficult to make?

Cost of initial development vs. Cost of maintenance
Definition of architecture - decisions that take significant costs/resources (time/money/business growth/people) to change
Front-end fatigue
Resume-driven development/attracted to shiny, new things
Goal - to build confidence in the decision

Factors to consider along 3 axes

Business
- Support 2-3 years of features/improvements
- Costs/Resources
- Setup
- Operational
- Cross-pollination
Tech
- Integration - will it play well with existing tech in the org?
- Enabling useful abstractions
- Ecosystem
People
- How do we prevent people from making mistakes?
- Community
- Cross-pollination
- Hiring
- Familiarity
Process
- Fast feedback loop
How to approach decision making
Spikes
Kitchen Sink
Architecture Decision Record (ADR)

Case study - major front-end rewrite

Quick introduction of the app’s major features
Why do a rewrite?
Tech stack + what led to picking these (Popularity isn’t one of them)
- Typescript + strict mode
- npm
- create-react-app
- Prettier
- VSCode settings
- React
- Redux + Thunk
- React Router
- connected-react-router
- Prosemirror
- Jest
- Enzyme’s shallow & mounting tests as rule & exception
- Cypress
- CSS variables
- CSS modules

Requirements

Write down all the questions you have about your tech stack decisions, and ask me before/after the talk.

Speaker bio

Dheeraj has been working for about 10 years now, in the nexus of tech, people, product and process. Technically, he’s a full stack engineer because he can create issues in any layer of a system. He just says he is a specialist in being a generalist. Dheeraj loves bad jokes; others around him aren’t as… appreciative. He likes video games, and someday, to create his own.