EulerFold
ToolsGeneratorPlannerPractice
Research & LibraryResearchArticlesLibraryLeaderboard
PlatformAboutPricing
Get Started
Mobile Developers

React Native Performance: Hermes & Reanimated

4 weeks
0 Learners
eulerfoldeulerfold
Jul 23

“The difference between a janky 30fps app and a smooth 60fps one comes down to these two. This comprehensive curriculum is designed to give you hands-on experience with React Native Performance: Hermes & Reanimated.”

Share:

About this Course

The difference between a janky 30fps app and a smooth 60fps one comes down to these two. This comprehensive curriculum is designed to give you hands-on experience with React Native Performance: Hermes & Reanimated. This Mobile Developers curriculum is designed to give you hands-on experience and deep conceptual understanding. Across 4 intensive modules, you'll tackle real-world challenges and build practical projects that reinforce your learning. By the end of this journey, you'll have the skills and proof of work to demonstrate your expertise.

What you'll learn

Master the core concepts of hermes engine internals & bytecode compilation.
Gain hands-on experience with reanimated 3 & ui thread animations.
Understand the architecture behind list rendering optimization: flashlist & virtualization.
Implement production-grade new architecture & native module optimization.

Prerequisites

intermediate Level

Requires basic familiarity with the tech stack.

  • JavaScript & DOM fundamentals
  • Familiarity with React components

Ideal for

Mobile Developers

Frontend Developers
W1

Hermes Engine Internals & Bytecode Compilation

Master the core concepts of hermes engine internals & bytecode compilation.

3 videos•40m
3 readings
3 topics
1 homework
Learn

Topics

1.1
Hermes JS Engine Architecture & Bytecode Pre-compilation
20 minutes
1.2
Profiling Hermes Execution with Chrome DevTools
8 minutes
1.3
Memory Management & Heap Snapshots
12 minutes

Study Resources

→GitHub - facebook/hermes: A JavaScript engine optimized for running...→Using Hermes · React Native→Optimizing React Native Apps with the Hermes JavaScript Engine
W2

Reanimated 3 & UI Thread Animations

Gain hands-on experience with reanimated 3 & ui thread animations.

3 videos•62m
2 readings
3 topics
1 homework
Learn
W3

List Rendering Optimization: FlashList & Virtualization

Understand the architecture behind list rendering optimization: flashlist & virtualization.

3 videos•39m
3 readings
3 topics
1 homework
Learn
W4

New Architecture & Native Module Optimization

Implement production-grade new architecture & native module optimization.

3 videos•60m
3 readings
3 topics
1 homework
Learn
01

Learn

Watch curated videos and read study resources

02

Practice

Practice what you learned

03

Build Projects

Build projects using your new gained knowledge

04

Submit & Verify

Submit your project and get verified by our system

References

01GitHub - facebook/hermes: A JavaScript engine optimized for running...
02Using Hermes · React Native
03Optimizing React Native Apps with the Hermes JavaScript Engine
04React Native Reanimated 3: The Ultimate Guide to... - DEV Community
05React Native Reanimated
06FlashList – fast and performant React Native list
07Lists & Virtualization - React Native SME Cookbook
08React Native FlatList Slow with 100+ Items? — xjavascript.com
09Native Modules: Introduction · React Native
10Complete guide to React Native New Architecture migration.
11Expo — Build Native Apps with React

Rate this course

0.0
0 reviews

Help the community find verified technical paths.

Community Insights

0

Join the discussion

Sign in to share your thoughts and technical insights.

Loading insights...