Skip to content

Latest commit

 

History

History
898 lines (660 loc) · 14.8 KB

slides.re.mdx

File metadata and controls

898 lines (660 loc) · 14.8 KB

export { Components } from './Components'; export { Themes } from './Themes'; export { Transitions } from './Transitions';

--

<Stack center stretch style={{ imageRendering: 'pixelated', inset: 0, overflow: 'hidden', position: 'absolute', zIndex: 0, zoom: 0.63, }}

<Video src="/AC.mp4" style={{ transform: 'translateY(-7%)', }} /> <Stack center selfCenter stretch style={{ width: '78.5%', zIndex: 1, }} vertical

<TitleBox children={ <h1 style={{ marginBottom: 0 }}> Unlocking Front-End Development Velocity } /> <TitleBox children={ <> by Christoph Nakazawa{' '} <a href="https://cpojer.net" style={{ textDecoration: 'none' }}> @cpojer </> } style={{ alignSelf: 'end', color: '#000', marginTop: 20, padding: '12px 20px', }} /> <TitleBox children={ <a href="https://dev-velocity.nakazawa.dev/" style={{ textDecoration: 'none' }} > dev-velocity.nakazawa.dev } style={{ alignSelf: 'end', marginTop: 20, padding: '12px 20px', }} />

image: Cover.jpg

--

Nakazawa Tech KK

image: CoverEmpty.jpg transition: none

--

React Native

image: CoverEmpty.jpg transition: none

--

Jest & JavaScript Infra

image: CoverEmpty.jpg theme: dark transition: leaveOnly

--

Nakazawa Tech KK

Work with us! 
- [nakazawa.dev](https://nakazawa.dev)

- [christoph@nakazawa.dev](mailto:christoph@nakazawa.dev)

theme: dark

--

Why focus on DevX?

Development Cycles

transition: none

--

Development Cycles

transition: none

--

Development Cycles

transition: leaveOnly

--

Development Cycles

DevX Issues at Big Tech

  • Development cycles become slow due to scale (code, people, products)

  • Tools and infrastructure break down

  • Easy to become complacent

    → Product quality goes down

    → Product launches get delayed

    → Business outcomes will be worse

How to solve DevX at Big Tech

  • Focus on the User

  • Incremental Migrations

  • Maximize Option Value

  • DevX Metrics

    → Requires out-of-the box thinking far into the future

    → Invest in DevX and Dev Productivity teams or organizations

Metrics

  • Measure Everything: Measure organizations with qualitative and quantitative metrics
  • Instrument all tooling: install times, startup times, runtime
  • Timeline: Define metrics for velocity to capture the inner and outer loop
  • Track Errors: Capture when developers run into crashes
  • "Sad User" Metric: Number of people who have a bad experience with your tool

Example: React Native Setup

  • Install native toolchains (XCode, gcc etc.)

  • Install and setup iOS simulator and Android emulators

  • Install JavaScript, iOS and Android package managers, build tools and toolchains

  • Install JavaScript, iOS and Android dependencies

  • Build your app

    → Takes ~2-4 hours.

Dev Setup Time

transition: none

--

Dev Setup Time

transition: leaveOnly

--

Dev Setup Time

Remote Development

  • Request a remote server within seconds

  • Repository is already set up with your configuration

  • Application and JavaScript bundler are already running

  • Most used JavaScript bundles are pre-built ahead of time

  • Request a new server for each feature

    → Setup time reduction from 2-4 hours to 10 seconds

    → Daily time reduction from ~30-60 minutes to 10 seconds

Example: Bundler Speed

  • Took 20 minutes to bundle JavaScript once per day

  • "Hot reloading" took two minutes

    → People didn't believe it could be improved

Solution

  • Proposed and executed a project to switch bundlers

    → Reduced 20 minutes (1200 seconds) to 6 seconds.

theme: dark transition: leaveFade

--

<span className="colorful" style={{ filter: 'hue-rotate(90deg)', }}>Athena Crisis

theme: dark transition: opacity

--

The <span className="colorful" style={{ filter: 'hue-rotate(90deg)', }}>Athena Crisis Stack

<CenteredText style={{ fontSize: '2em', }}

Vite, pnpm, TypeScript, React, Relay, Emotion, Prisma, GraphQL, graphql-pothos, socket.io

Demo

Development Environment

- Spend time customizing your environment
- Create shortcuts
- [Fish Shell](https://fishshell.com/), [Bat](https://github.com/sharkdp/bat),
[delta](https://github.com/dandavison/delta)
- Quickstart: [`@cpojer/dotfiles`](https://github.com/cpojer/dotfiles)

transition: none

--

Development Environment

- Spend time customizing your environment
- Create shortcuts
- [Fish Shell](https://fishshell.com/), [Bat](https://github.com/sharkdp/bat),
[delta](https://github.com/dandavison/delta)
- Quickstart: [`@cpojer/dotfiles`](https://github.com/cpojer/dotfiles)

transition: leaveOnly

--

Development Environment

- Spend time customizing your environment
- Create shortcuts
- [Fish Shell](https://fishshell.com/), [Bat](https://github.com/sharkdp/bat),
[delta](https://github.com/dandavison/delta)
- Quickstart: [`@cpojer/dotfiles`](https://github.com/cpojer/dotfiles)

VS Code Setup

  • Error Lens: Optimize your editor to get signal as fast as possible

<img src="/ErrorLens.png" width="90%" style={{ borderRadius: 20, margin: '0 auto' }} />

<img src="/AllAutocomplete.png" width="60%" style={{ borderRadius: 20, margin: '0 auto' }} />

Dep Management with pnpm

Fast and Scalable: Parallelized Installs

Other package managers
pnpm

transition: none

--

Dep Management with pnpm

Space Efficient: No package duplication across projects

<img src="/pnpm3.svg" width="70%" style={{ borderRadius: 20, margin: '0 auto' }} />

transition: leaveOnly

--

Dep Management with pnpm

Feature-rich: Covers all package management use-cases

Feature pnpm Yarn npm
Workspace support ✔️ ✔️ ✔️
Isolated node_modules } /> ✔️ - The default ✔️ ✔️
Hoisted node_modules } /> ✔️ ✔️ ✔️ - The default
Zero-Installs ❌ ✔️ ❌
Patching dependencies ✔️ ✔️ ❌
Managing Node.js versions ✔️ ❌ ❌
Has a lockfile ✔️ - pnpm-lock.yaml ✔️ - yarn.lock ✔️ - package-lock.json
Overrides support ✔️ ✔️ - Via resolutions ✔️
Content-addressable storage ✔️ ❌ ❌
Dynamic package execution ✔️ - Via pnpm dlx ✔️ - Via yarn dlx ✔️ - Via npx
Side-effects cache ✔️ ❌ ❌

Update dependencies early, and often

  • Never spend too much time updating dependencies
  • Isolate issues with a single dependency more easily
  • Receive the latest security fixes
  • Have access to the latest features

Vite

  • Bundling done Right
  • Extremely Fast and Scalable
  • Reliable

transition: leaveOnly

--

Vite

Legacy Bundlers
Vite

@nkzw/eslint-config

npm install --save-dev @nkzw/eslint-config

Principles

  • Error, Never Warn
  • Strict, Consistent Code Style
  • Prevent Bugs
  • Fast
  • Don't Get in the Way

Reduce Cognitive Overhead

<Stack nowrap style={{fontSize: '0.85em'}}>

```ts const actionResponse = { from, hasCounterAttack: !!counter, playerA: a.player, playerB: b.player, to, type: 'AttackUnit', unitA: playerUnit, unitB: opponentUnit, } ```
```ts const actionResponse = { playerB: c.player, from, unitA: opponentUnit, hasCounterAttack: false, type: 'AttackUnit', playerA: a.player, unitB: playerUnit, to, } ```

transition: leaveOnly

--

Reduce Cognitive Overhead

<Stack nowrap style={{fontSize: '0.85em'}}>

```ts const actionResponse = { from, hasCounterAttack: !!counter, playerA: a.player, playerB: b.player, to, type: 'AttackUnit', unitA: playerUnit, unitB: opponentUnit, } ```
```ts const actionResponse = { from, hasCounterAttack: false, playerA: a.player, playerB: c.player, to, type: 'AttackUnit', unitA: opponentUnit, unitB: playerUnit, } ```

transition: leaveOnly

--

Reduce Cognitive Overhead

Parallelize Aggressively

  • Type checking, linting and testing is often done serially
  • Use npm-run-all to parallelize. In your package.json, change:
"scripts": {
  "test": "npm-run-all --parallel tsc lint jest"
}
  • Use Nx, Turborepo or Bazel with remote caching and intelligent dependency tracking for large projects.

transition: leaveOnly

--

Use ECMAScript Modules

Requirements

  • Auto save while typing
  • Use native ECMAScript Modules and remove TypeScript types fast
  • Fast Refresh on the client
  • Immediately restart all servers when a file changes

transition: leaveOnly

--

Use ECMAScript Modules

  • Use ts-node with swc. In your tsconfig.json:
"ts-node": {
    "transpileOnly": true,
    "transpiler": "ts-node/transpilers/swc",
    "files": true,
    "compilerOptions": {
      "module": "esnext",
      "isolatedModules": false
    }
}

transition: leaveOnly

--

Use ECMAScript Modules

Create script.tsx, run chmod +x script.ts, execute via ./script.tsx:

#!/usr/bin/env node --experimental-specifier-resolution=node --loader ts-node/esm

console.log('Your code goes here.');

Prefix with nodemon to restart anytime a file changes:

```js #!/usr/bin/env node_modules/.bin/nodemon -q -I --exec node --experimental-… ````

A Template to get started

GitHub

Blog Posts

theme: dark

--

One More Thing

ReMDX

image: CoverEmpty.jpg theme: dark

Nakazawa Tech KK

Work with us!

- [nakazawa.dev](https://nakazawa.dev)

- [christoph@nakazawa.dev](mailto:christoph@nakazawa.dev)