Unleashing NextJS/React Performance & Resiliency
A Practical & Pragmatic Workshop for Developers
Date
TBD
Duration
Duration: 3 hours
Location
TBD
Capacity
Limited to 15 attendees
Workshop Overview
Getting pragmatic with building performant and resilient React applications. This workshop will delve into React and NextJs to create scalable, high-performance web applications made for the real world, exploring architectural patterns, rendering techniques, and optimization strategies. We'll tackle data fetching management, performance measurement, and state management, offering tools and insights for efficient coding and stakeholder communication. Practical exercises and real-world examples will equip developers with the skills to build and maintain solid web solutions, additionally, emphasizing the importance of observability and monitoring post-deployment.
Workshop at a Glance
2-Hour Intensive Session
Concentrated learning with maximum value
Hands-on Coding Labs
Practical exercises with real-world examples
Take-Home Resources
Comprehensive materials for continued learning
Faris Aziz
Staff Frontend Engineer & Engineering Manager
"Join me to explore practical strategies for building performant and resilient React applications that stand up to real-world challenges."
CHF 150 per person
Limited spots available
Topics We'll Cover
Web Performance Pitfalls
Identify common performance issues and learn when to optimize and when it might be over-engineering. We'll explore practical examples of:
- •Detecting and fixing render bottlenecks
- •Real-world tradeoffs between performance and DX
- •Balancing optimizations with development time
Software Resilience Patterns
Explore strategies to build applications that can handle unexpected issues gracefully. Learn about:
- •Error boundaries and fallback UIs
- •Strategic loading states and skeletons
- •Circuit breakers for API dependencies
React Reconciliation Deep Dive
Understand how React updates the DOM and optimize your components for better rendering performance:
- •How the React diffing algorithm works
- •Memoization strategies (useMemo, useCallback)
- •Server Components vs. Client Components
Component Architecture
Learn best practices for structuring your components for maintainability and performance:
- •Atomic design principles for React applications
- •Composable and reusable component patterns
- •Optimizing component tree structure
Data Fetching at Scale
Explore efficient data fetching strategies using React Query for large-scale applications:
- •Caching strategies and invalidation
- •Optimistic updates and mutations
- •Prefetching and parallel queries
Observability & Feature Flags
Learn how to monitor your application's health and implement feature flags for safer deployments:
- •Setting up client-side monitoring
- •Implementing feature flags in React/Next.js
- •Analyzing performance metrics post-deployment
What You'll Take Away
Deeper understanding of React reconciliation and rendering
Hands-on experience through practical coding labs
Pragmatic performance optimization techniques
Strategies for building resilient applications
Insights into monitoring and observability post-deployment
Comprehensive learning materials and code samples
Note: All participants will receive the full workshop materials including code samples, slides, and cheatsheets to review at their own pace after the session.
Who Should Attend
Front-End Engineers (beginners to experienced)
Technical Leads and Engineering Managers
Developers working with React and NextJS in production environments
Perfect for: Teams looking to implement real-world performance optimization strategies without over-engineering their solutions.
Workshop Requirements
Intermediate understanding of JavaScript (ES6+)
Working knowledge of React (hooks, component lifecycle)
Experience with production applications
Laptop with Node.js installed (latest LTS version)
Pro tip: For the best experience, we recommend reviewing the React docs on hooks and performance optimization before the workshop.
Secure Your Spot
Includes workshop materials, code samples, and certificate of completion
Join our exclusive workshop for practical React performance techniques you can apply immediately to your projects.
Workshop ticket is sold separately from conference tickets
Workshop Structure
Introduction & Concepts (30 min)
Core performance principles and React's rendering mechanisms
Hands-on Coding Labs (60 min)
Interactive exercises on real-world performance scenarios
Advanced Techniques (20 min)
Exploring resilience patterns and monitoring strategies
Q&A and Resources (10 min)
Address specific questions and provide additional resources
This focused 2-hour format ensures maximum learning with minimal time investment.
Your Instructor
Areas of Expertise: React Performance, Frontend Architecture, Engineering Management, Scale & Resilience
Faris comes from a boot camp and self-taught background, having contributed to open-source projects in his spare time. His passion for technology extends beyond coding; he loves consulting on web projects and aiding start-ups with technical strategy.
Having worked in many industries, including Connected TV, Fintech, Digital Asset Management, SaaS, and Fitness, Faris has found his niche in start-ups. Some of his previous work has revolved around building large-scale full-stack solutions for notable companies like Fiit, Discovery, GCN, Eurosport, Navro (formerly Paytrix) and SmallPDF, serving millions of users globally.
Frequently Asked Questions
Is this workshop suitable for beginners?
This workshop is designed for developers with intermediate JavaScript knowledge and some experience with React. If you're a complete beginner, we recommend gaining some basic React experience first.
What should I bring?
Please bring a laptop with the latest LTS version of Node.js installed. Before the workshop, we'll email you setup instructions for the coding exercises.
Will refreshments be provided?
Yes, water and light refreshments will be available during the workshop.
Will there be recordings available?
This is a hands-on workshop, so we recommend attending in person for the best experience. Workshop materials will be provided to all participants, but the session itself won't be recorded.
Is this workshop related to the conference?
This is a foundations workshop organized by ZurichJS. While it complements the conference content, the workshop ticket is sold separately from conference tickets.
June 15, 2024 • 2-hour intensive workshop • Limited to 15 participants
Ready to Build Performant React Apps That Scale? 🚀
Join this exclusive 2-hour workshop to learn pragmatic performance techniques directly applicable to your real-world React and NextJS applications. Limited spots available!
"This workshop focuses on actionable techniques you can implement immediately in your projects. No fluff, just practical performance strategies that work in production."
— Faris Aziz, Workshop Instructor