JSFoo 2019

Annual conference of 800+ front-end, backend and fullstack engineers

Participate Propose a session

Demystifying front-end tech stacks

Submitted by Dheeraj Kumar (@codepodu) on Wednesday, 5 June 2019

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

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

  • Abhishek Balaji (@booleanbalaji) Reviewer a month ago

    Hi Dheeraj,

    Thank you for submitting a proposal. We need to see detailed slides and a preview video to evaluate your proposal. Your slides must cover the following:

    • Problem statement/context, which the audience can relate to and understand. The problem statement has to be a problem (based on this context) that can be generalized for all.
    • What were the tools/frameworks available in the market to solve this problem? How did you evaluate these, and what metrics did you use for the evaluation? Why did you pick the option that you did?
    • Explain how the situation was before the solution you picked/built and how it changed after implementing the solution you picked and built? Show before-after scenario comparisons & metrics.
    • What compromises/trade-offs did you have to make in this process?
    • What is the one takeaway that you want participants to go back with at the end of this talk? What is it that participants should learn/be cautious about when solving similar problems?

    We need your updated slides and preview video by Jun 27, 2019 to evaluate your proposal. If we do not receive an update, we’d be moving your proposal for evaluation under a future event.

    • Dheeraj Kumar (@codepodu) Proposer 29 days ago

      I’ll add them by 27th. Thank you!

Login with Twitter or Google to leave a comment