Last active
March 19, 2025 20:38
-
-
Save itproto/adb01d80267766b062b0abdb44891e4f to your computer and use it in GitHub Desktop.
Revisions
-
itproto revised this gist
Mar 19, 2025 . 1 changed file with 7 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -154,4 +154,10 @@ nx run-many --target=build --all --parallel=5 --- ## Q&A 🎤 ### Let's Discuss the Migration Process!     -
Mar 19, 2025 . 1 changed file with 157 additions and 144 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,144 +1,157 @@ # What is a Monorepo? - Best source: [[monorepo.tools](https://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: ```sh 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)](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: ```sh npx lerna add-caching ``` - Verify the dependency graph: ```sh nx graph ``` - Example image reference:  --- ### 2 FULL Migration using `nx init` - **Manual migration** for full control - Define `nx.json`, specify **inputs/outputs** for `dist` ```json "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 ```sh nx show projects nx show projects --with-target=build nx show project dtp-client-shell ``` ### 2 Task Build Cache ```sh nx build dtp-client-rxjs rm -rf dist && nx build dtp-client-rxjs ``` ### 3 Visualizing Dependency Graph ```sh nx graph ``` 📌 **Troubleshooting:** Use `nx reset` if needed ### 4 Affected Builds (Optimized Execution) ```sh nx affected --base=main --head=HEAD --graph nx affected --base=HEAD --target=build --graph --uncommitted ``` --- ## 5.Run All Builds in Parallel ```sh nx run-many --target=build --all --parallel=5 ``` - Example image reference:   --- ## 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! -
Jan 31, 2025 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,144 @@ # 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?