RN to Native Upskilling
Upskilling
As part of the Native rebuild project we would like our developers to have an upskilling path to follow so you're not immediately thrown in the deep end. The plan is to iteratively add delivery teams to the Native project and work through three upskilling phases.
Phase 1: Self guided learning (1 week)
This phase allows you to familiarise yourself with native frameworks at your own pace. One week has been allocated for this task, and recommended material for learning has been placed below:
Android:
Before starting I suggest having a read of this page Kotlin basic syntax
SSO into https://entainanz.udemy.com/ and then search for "Android Jetpack Compose: The Comprehensive Bootcamp" (note that directly linking to the course bypasses SSO and causes licensing issues).
Course Suggestions
- Course mainly focuses on building app, I would suggest taking a look at the Kotlin docs first before starting the course.
- Recommended to watch at 1.5x speed.
- Skip section 6 and start with section 7, as it covers the basics of Kotlin.
- Section 6 can be skipped all together as it will all be covered in later sections
- Watch out for videos 249 and 252, they are the same just with different implementations.
- Testing is not covered, but Android does have some training for testing
Additional Resources
- Apollo (GraphQL) introduction project
- Kotlin style guide
- Kotlin coding conventions
- Android Developers Youtube
- Android Weekly
iOS:
Udemy Course:
Before starting, it's suggested to read The Basics for Swift
Additionally, if you're coming from a TS/RN background, you may find these helpful for highlighting the parallels between Typscript/Swift and React/SwiftUI:
- Single Sign-On (SSO): Access the Udemy platform through https://entainanz.udemy.com/ using your credentials.
- Course Selection: Search for the course titled iOS 17, SwiftUI 5, & Swift 5.9: Build iOS Apps From Scratch on Udemy and enroll.
As you progress through the course, here are some key considerations to keep in mind:
- SwiftUI Focus: This guide primarily emphasizes SwiftUI for native iOS development. While at Entain, we will primarily be using SwiftUI, it's crucial to understand how Storyboards work overtime because you may encounter projects or legacy code that still use them. Familiarity with both SwiftUI and Storyboards will make you a more versatile iOS developer.
- Customized Learning: Feel free to skip sections that you are already comfortable with. However, exercise caution when doing so, as even seemingly simple topics may offer unique insights or best practices in the iOS development ecosystem.
- Outdated Content: Some content within the course may become outdated over time. Feel free to contact the native iOS developers for any assistance.
Course Suggestions
- It's more of a practical course, so you may benefit from reading up on fundamental Swift/SwiftUI concepts to supplement your learning.
- Recommended to watch at 1.5x speed.
- The Course Outline mentions "visionOS, watchOS, tvOS", but doesn't cover them in the course.
- Section 2 should be skipped and revisited last. It covers a new features introduced by iOS 17, so it's recommended that you finish the rest of the course first.
- Section 7 is quite long and repeats a lot of the same concepts from earlier sections. If you're feeling comfortable at this point, you could skip the sections after animations are covered.
- Section 8 is just a placeholder so you can ignore it.
Additional Resources:
While the Udemy course will be your main learning source, consider exploring these supplementary resources to deepen your knowledge when you have additional time:
- Swift Programming Language Documentation
- The Swift Programming Language by Apple
- Develop in Swift Fundamentals or other books by Apple Education
- Official Apple Courses:
- WWDC Videos
- Apollo (GraphQL) Introduction Project
- 100 Days of SwiftUI by Hacking with Swift
- YouTube:
- Swiftful Thinking: Some great playlists that cover many of the common SwiftUI views and modifiers in individual videos.
Phase 2: Native project code-alongs (1 week)
The next step is applying the knowledge gained from Phase 1 and applying it to the Native project.
This involves targeted sessions run by the native developers on the following topics:
Sessions (sequenced)
- 1.1: IDE and App structure (30 min)
- 1.2: App design patterns w/examples - (1 hr)
- 1.3: Consolidation of knowledge from Stage 1 - (45 m)
- 1.4: App codealong - in-memory todo list - (> 1.5h)
- 1.5: Concurrency + timers - (1 hr)
- 1.6: Networking, parsing JSON + error handling - (> 1.5h)
- 1.7: App codealong - in-app NTG with favourites - (2h)
- 1.8: Testing & automation - (1h) (9 hours total)
These foundational sessions lead onto standalone sessions where built native views of our mobile app's screens are worked through together.
Onboardee Notes
Design patterns and software architecture can take a while to grasp if they're new to you. Spending some time reading/watching up on these topics will help you get the most out of the sessions. Most importantly, focus on why these patterns exist and when to use them.
Standalone sessions (not sequenced)
- s.1.0: Simple forms with Login Screen - (1h)
- s.1.1: Login screen biometrics with keychain - (45m)
- s.1.2: Forgot Password screen - (self paced)
- s.2.0: Complex Scrollable layouts with more menu - (1h)
- s.3.0: Simple Lists - Displaying lists from network response
- s.3.1: Sports A-Z List - (45m)
- s.3.2: Sports Leagues List - (45m)
- s.3.3: Sports Competitions List - (45m)
- s.3.4: Sports Home NTG - (self paced)
- s.4.0: More Advanced lists - promotions page - (2h)
- s.5.0: More complex screens - Punters Assist
- s.5.1: PA Home screen - (1h)
- s.5.2: Punters Assist Curfew Screen - (1h)
- s.5.3: Punters Assist Block out Screen - (1h)
- s.5.4: Punters Assist Check in Screen - (1h)
- s.5.5: Punters Assist Activity Statements List Screen - (1h)
Phase 3: Development in our app
Here is where the journey to development in our app begins and you become an active contributor to the codebase. You will be embedded alongside Native developers, set-up with a buddy, and will pair program with the native engineer on stories. As part of these stories, you will begin with writing the tests for the developed task, and when comfortable for future stories, swap over to being the primary developer and drive the pairing sessions.
Some documentation worth reviewing before getting started:
- 1.0: App structure
- 1.1: Arch decision explaination & Documentation
- 1.2: Folder structure
- 1.3: Running the app
- 2.0: Networking
- 2.1: GraphQL in native - Session 3h
- 2.1.1: Codegen
- 2.1.2: Query writing
- 2.1.3: Mocking
- 2.2: Websockets - Session 1h
- 2.3: Networking framework - Session 1h
- 2.1: GraphQL in native - Session 3h
- 3.0: Entain UI kit
- 3.1: Brands and components - Documentation
- 3.2: Component library companion app - Documentation
- 3.3: Contibuting to the component library - Session 1.5h
- 3.4: Using component library components - Session 1h
- 4.0: React native
- 4.1: Architecture overview
- 4.2: One-way communication with React Native
- 4.3: Two-way communication with React Native
- 5.0: Event tracking - Documentation
- 5.1: How to add new events
- 5.2: Examples
- 6.0: Putting it together
- 6.1: Taking standalone session code from stage two and integrate into our app - session (2h)
- 6.2: Now you try - buddy system / pairing
- 7.0: Feature flags
- 7.1: Integrating flags - Documentation
- 7.2: Integrating A/B tests - Documentation