Skip to content

Instantly share code, notes, and snippets.

@itproto

itproto/mizo.md

Last active March 19, 2025 20:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save itproto/adb01d80267766b062b0abdb44891e4f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save itproto/adb01d80267766b062b0abdb44891e4f to your computer and use it in GitHub Desktop.
Download ZIP
mizo.
Raw
mizo.md

Mizuho – Second Round Interview Cheat Sheet (Extended Version)

About Mizuho Financial Group

  • Founded: 2000 (merger of Dai-Ichi Kangyo, Fuji, and Industrial Bank of Japan)
  • Headquarters: Tokyo, Japan (~900 global offices)
  • CEO: Masahiro Kihara
  • Core Services: Investment banking, FX trading, trust banking, securities, asset management
  • Total Assets: ~$1.6 trillion
  • Global Workforce: ~52,000 employees
  • Recent Financials:
    • Q2 2024: 62% increase in net profit due to higher interest rates
    • 820 billion yen annual profit forecast
    • First share buyback in 16 years (100 billion yen)
  • Stock Listings: Tokyo Stock Exchange, New York Stock Exchange
  • Technology Focus: eFX trading, modular UI, scalability, and low-latency systems
  • Investment in AI & Automation: Exploring AI-driven trade execution & automation

Mizuho’s Vision, Values, and Culture

Vision

  • "Innovate together with our clients for a prosperous and sustainable future."
  • Aim to be a leading global financial services group, leveraging technology, sustainability, and client partnerships.

Core Values (Mizuho Five Principles)

  • Integrity: Act with the highest ethical standards, ensuring transparency.
  • Passion: Drive innovation and excellence in financial solutions.
  • Agility: Quickly adapt to market changes and evolving technology.
  • Creativity: Develop cutting-edge financial technology solutions to serve clients better.
  • Empathy: Work collaboratively across teams and ensure client-first decision-making.

What This Means for You as a Frontend Developer

  • You are expected to challenge existing technology choices and bring innovative ideas.
  • Collaboration with backend, trading, and risk teams is crucial to align technical and business goals.
  • Mizuho values resilience, automation, and performance—key factors in low-latency trading UIs.

Second Round Interview Panel

Ece Tanova (UI Team – Frontend Specialist)

  • React performance optimizations
  • Microfrontends & Module Federation
  • WebSockets handling in UI
  • State management with Redux/Zustand
  • Virtualization (AG Grid, Infinite Scrolling)
  • Web Performance (GPU optimizations, lazy loading)
  • Best practices for real-time UI updates

Adnan Benachar (UI Team – Frontend & Swaps Specialist)

  • Kafka & Avro integration in frontend
  • Web Workers for streaming data processing
  • Handling FX swap trading workflows
  • Frontend scalability in high-frequency trading
  • Efficient WebSocket event handling
  • Schema evolution & backward compatibility in Avro
  • Managing large-scale state updates in real-time UIs

Nishant Goswami (Director, Front Office IT – Architecture & Business Focus)

  • Microservices & modular UI architecture
  • Low-latency trade execution
  • API design for scalable frontend-backend interaction
  • System resilience & fault tolerance
  • Smart order routing & market aggregation
  • Balancing security, performance, and compliance
  • Large-scale frontend system design

Jonathan Smith (MD, Head of Front Office IT – Strategy & Vision)

  • Aligning technology with business objectives
  • Driving innovation in financial technology
  • Regulatory compliance in trading platforms (MiFID II, SEC, FCA)
  • Security concerns in real-time WebSockets
  • Cloud adoption in trading applications (hybrid-cloud approach)
  • AI/ML in automated trading & risk management
  • Leadership strategies in tech decision-making

Key Knowledge Areas for the Interview

React & Frontend Performance (Ece Tanova)

  • React 19 improvements: Automatic memoization, useOptimistic(), Suspense for Data Fetching
  • State management: Redux, Zustand, Context API, Reselect for efficient updates
  • Microfrontends: Module Federation, independent deployments, runtime loading
  • WebSockets & Data Streaming: Efficient batching, deduplication, latest-result only
  • Virtualization: AG Grid optimizations, lazy rendering, avoiding expensive DOM updates
  • Cross-module communication: Event bus (RxJS), BroadcastChannel API, shared Zustand store

Kafka & Avro in Trading Systems (Adnan Benachar)

  • Kafka Consumer Groups: Scaling real-time price processing
  • Backpressure Handling: Skipping stale messages, batch processing
  • Avro Serialization: Compact message format, schema evolution strategies
  • Web Workers for Avro Decoding: Offloading heavy computations
  • Deduplication Strategies: Using event timestamps & message keys
  • WebSocket Fan-out: Efficiently pushing Kafka messages to thousands of clients
  • Handling message lag: Prioritizing real-time trade events over non-critical data

System Architecture & Trading Infrastructure (Nishant Goswami)

  • Low-latency design: Optimizing frontend-backend data flow
  • Fault tolerance: Fallback mechanisms for failed price updates
  • Hybrid cloud adoption: Balancing performance with cost
  • API Gateway Strategies: Routing & rate-limiting for trading endpoints
  • Distributed UI Services: Using gRPC, GraphQL, or WebSockets for efficient data fetching
  • Event-driven microservices: Using Kafka as an event backbone for pricing & execution

Business & Leadership (Jonathan Smith)

  • Aligning tech with trading objectives: Why low-latency matters for market makers
  • Handling resistance to new technology: Strategies to implement change in teams
  • Security in trading UIs: JWT authentication, request signing, access control
  • Future of electronic trading: AI, blockchain, decentralized finance trends
  • How compliance affects frontend design: Ensuring order transparency & auditability
  • Tech decision-making: How to challenge & improve system architecture
  • Hiring philosophy: What Mizuho looks for in frontend trading engineers

Follow-Up Questions You Might Face

Frontend/UI Performance

  • How do you optimize React for high-frequency price updates?
  • Explain how useTransition() helps prevent UI lag in trading.
  • How do you manage WebSockets efficiently in a microfrontend system?
  • What are the trade-offs between Redux & Zustand for a large-scale trading app?
  • How do you reduce memory leaks in a long-running WebSocket connection?

Kafka & Avro Streaming

  • How does Kafka handle order execution messages with high reliability?
  • Explain how you would deserialize Avro-encoded trade data in the frontend.
  • How do you ensure price updates are processed in the correct order?
  • What’s the difference between Kafka log compaction and log retention?
  • How do you handle schema evolution without breaking the UI?

Trading System Architecture

  • How do you design a frontend that can gracefully recover from backend failures?
  • What’s your approach to cross-window state synchronization in OpenFin?
  • How would you design a modular FX UI that allows independent feature deployments?
  • Explain how Web Workers help in processing large trade logs.
  • What are the benefits of using GraphQL vs. REST vs. WebSockets in trading?

Business & Strategic Thinking

  • Can you give an example where you challenged a tech decision successfully?
  • How do you ensure real-time compliance reporting in trading UIs?
  • What security concerns arise when building low-latency WebSockets for trading?
  • How would you explain the importance of low-latency UI performance to a trader?
  • What factors do you consider when migrating a legacy trading UI to a modern tech stack?

Final Prep Checklist

  • Review React 19: Suspense, automatic memoization, useOptimistic(), Server Components
  • Understand Kafka & Avro integration: WebSockets, batching, backpressure handling
  • Know Mizuho’s eFX strategy & business focus
  • Have 2-3 real-world examples (e.g., React Portal OpenFin solution at SCB)
  • Prepare strong questions about team structure, Mizuho’s frontend roadmap, and trading tech trends

Good luck! Would you like a final mock interview session?

@itproto
Copy link
Author

itproto commented Mar 19, 2025

What is a Monorepo?

  • Best source: [monorepo.tools](https://monorepo.tools)
  • Inspired by John’s presentation
  • A single repository with multiple linked projects
  • Why use a monorepo?
    • No overhead for new repositories (avoids extra git/pipelines/boards)
    • One version across all packages (avoids versioning hell)
    • Single commit fixes everything (ensures atomic changes)

My Take on Monorepos

Monorepo is a new code organization abstraction, evolving from:

  • Function/Routine → Class → Project

Project Tools Evolution:

  • YUI Compressor → Ant → Flex → Grunt → Gulp → Webpack → TypeScript → Rust tools?

Monorepo Evolution:

  • Polyrepo (npm linking) → Linking Scripts → Lerna → Rush → Nx

Tools & Features

Popular Monorepo Tools

  • Lerna
  • Nx
  • Rush
  • Bazel / Gradle / Turborepo

Core Features

  1. Linking Projects/Packages (npm link) – enables cross-package imports
  2. Task Runners – execute scripts
    • Parallel Execution
    • Ordered Execution

FooUpgrade (Task Runner)

Using Lerna under the hood as a task runner:

foo start fx --env.dev1 --fast  
npx lerna ls -la

Why Upgrade to Nx?

Key Reasons:

  • Nx (by Nrwl) takes over Lerna → [Lerna Docs](https://lerna.js.org/docs/lerna-and-nx)
  • Visualized Graphs – Improved dependency tracking
  • Faster Builds – Caching results locally & remotely
  • Nx Console & Tooling – Advanced task management
  • Move & Refactor Support – Controlled project reorganization
  • Code Generators – Automate repetitive code tasks
  • CI Improvements – Avoids rebuilding everything for a single change
  • Potential AI Integration – Metadata & automation

Main Challenges in Migration

  • Hybrid Structure Issues – Some packages have package.json, others don’t
  • Codegen Packages Not Recognized
  • nx init failed to build the project graph
  • Custom Conventions Conflicts
    • Lerna vs. Nx (tsconfig.base.json vs. tsconfig.json)
    • No src/, dist/, folder structure in Nx
  • Command Differences – Older Lerna workflows need adaptation
  • CI Caching Strategy – How to reuse build cache efficiently?

Upgrade Process

1 SIMPLE useNx flag in Lerna

  • Claiming 2-10x faster builds using Nx execution in Lerna (from version 8+)
  • Install caching with Lerna and enable it: 
    npx lerna add-caching
  • Verify the dependency graph: 
    nx graph
  • Example image reference:
    Lerna Graph

2 FULL Migration using nx init

  • Manual migration for full control
  • Define nx.json, specify inputs/outputs for dist 
    "build": {
  "dependsOn": ["^build"],
  "inputs": ["{projectRoot}/**/*"],
  "outputs": ["{projectRoot}/dist"],
  "cache": true
}
  • Define custom sourceRoot in {projectRoot}/index.ts
  • Use project.json to define project type (e.g., shell/common)
  • Set "implicitDependencies": ["dtp-client-rxjs"]

DEMO: Nx in Action

1 Checking Available Projects

nx show projects
nx show projects --with-target=build
nx show project dtp-client-shell

2 Task Build Cache

nx build dtp-client-rxjs
rm -rf dist && nx build dtp-client-rxjs

3 Visualizing Dependency Graph

nx graph

📌 Troubleshooting: Use nx reset if needed

4 Affected Builds (Optimized Execution)

nx affected --base=main --head=HEAD --graph
nx affected --base=HEAD --target=build --graph --uncommitted

5.Run All Builds in Parallel

nx run-many --target=build --all --parallel=5
  • Example image reference:
    Graph Common
    Affected Projects

Future Enhancements

  • Resolve tsconfig.root issues for better project referencing
  • Use Nx DevKit Plugin System to define certain features declaratively
  • Integrate AI-powered project metadata analysis (e.g., Copilot, AI tools)

Q&A 🎤

Let's Discuss the Migration Process!

@itproto
Copy link
Author

itproto commented Mar 19, 2025

image
image
image
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment