JSFoo 2019

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

Demystifying front-end tech stacks

Submitted by Dheeraj Kumar (@codepodu) on Jun 6, 2019

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

Abstract

“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.

Links

Comments

{{ gettext('Login to leave a comment') }}

{{ gettext('You need to be a participant to comment.') }}

{{ formTitle }}
{{ gettext('Post a comment...') }}
{{ gettext('New comment') }}

{{ errorMsg }}