This tutorial is sponsored by ✨StepZen✨ - a GraphQL server with a unique architecture that helps developers build APIs fast and with less code
❇️ Get your free account here: bit.ly/46Yqo4d
In this video, we are covering in depth Image Performance Optimization in React Native. Starting with a slow loading app, we explore the data loaded, then use Amazon's Serverless Image Handler to enhance the performance. We cover deployment, the buffer package installation, and also touch on advanced features like Amazon Rekognition for image moderation and smart cropping.
❗Try our FREE 4-day Masterclass on notJust.Academy:
assets.notjust.dev/masterclass
📚 Step-by-step guide: www.notjust.dev/blog/aws-imag...
✨ Asset Bundle: assets.notjust.dev/aws-image-...
This video includes a lot of tools and technologies, providing an excellent opportunity to learn about:
- Amazon's Serverless Image Handler: A comprehensive solution for handling images, ideal for public applications.
- React Native Image Performance Optimization: Techniques to improve image loading speed, enhancing the overall app performance.
- Advanced Amazon features: Introduction to Amazon Rekognition for automatic image detection and moderation, smart cropping techniques, and the use of Thumbor filters for image manipulation.
📚 Enroll NOW in The Full-Stack Mobile Developer course and don’t miss out on your chance to become a 6-figure dev in 2023! Check out what our successful students are saying about their experience:
academy.notjust.dev
💬 Join the notJust Development gang and let's build together:
Twitter: / vadimnotjustdev
Instagram: / vadimnotjustdev
Facebook: / notjustdev
LinkedIn: / vadimsavin
Discord: / discord
Timecodes:
0:00 - Introduction to Image Optimization
0:39 - Before and After Optimization Demo
2:08 - Solution Overview and AWS S3 Usage
2:48 - Detailed Implementation Walkthrough
3:25 - Deploying AWS Solution
4:00 - Exploring and Testing the Demo UI
4:34 - Client-Side Integration Steps
5:17 - Sponsor Acknowledgment
5:56 - Prerequisites for Implementation
7:16 - Launching AWS Cloud Formation Stack
9:23 - Configuring AWS Cloud Formation Stack
10:56 - Completing AWS Stack Setup
11:35 - Waiting for Stack Creation
13:51 - Benefits of Optimized Images
14:36 - Before vs After Implementation
16:00 - Startup Project Implementation
17:22 - Testing the AWS Solution
18:44 - AWS Configuration and Testing
23:11 - React Native Implementation
25:36 - Optimizing Image Requests
27:04 - Starting the Starter Project
29:10 - Analyzing the Starter Project
30:38 - Creating the Smart Image Component
34:00 - Integration Steps in React Native
37:06 - Use Memo for URL Calculation
38:39 - Further Optimization Techniques
40:13 - Assigning Image Dimensions
42:51 - Network Requests and Caching
44:58 - Recapping Integration Process
46:30 - Amplify Project Specifics
49:17 - Additional Advanced Features
50:32 - Smart Cropping Feature Demo
52:43 - Content Moderation Feature
56:03 - Content Moderation Implementation
57:29 - Content Moderation Results
1:01:18 - Solution Architecture Overview
1:07:34 - Pricing and Cost Expectations
1:13:05 - Limitations and Final Thoughts
1:14:31 - Conclusion
Disclaimer: This build is for educational purposes only. All views, opinions, and technology choices expressed in this video are my own and do not represent the views, opinions, or technology choices of any entity I have been, am now, or will be affiliated with.
#notjustdev #stepzen #reactnative