Sharing Code Between Web and Mobile Native Apps

on YouTube ↗27m

" summary

Shows how Angular + NativeScript let one repository produce web and native iOS/Android builds by sharing TypeScript business logic and swapping platform pieces. Uses a monorepo with a file convention .tns.html /.tns.ts convention (Webpack picks .tns files) and DI to provide web HttpClient or NativeScript HTTP client. Provides schematics to scaffold and migrate projects and components via ng g @nativescript/schematics and ng migrate commands. Demo app reuses a single ~170-line user service and a Petfinder API integration; discusses wrapper vs adapter approaches for mismatched plugin APIs.

AI-written summary · about

" chapters (8)

1. 0:00Introduction to code sharing
2. 1:09What is NativeScript
3. 4:18Project structure for code sharing
4. 8:34Demo of Petfinder app
5. 15:40Challenges in code sharing
6. 18:10Migrating existing projects
7. 22:46Demo of migration schematics
8. 26:28Closing and Q&A

" related talks

• 41mSharing Code between Web and Native Apps with Angular and NativeScript.Sebastian Witalec · Ng-Poland 2017
• 01h 09mSharing Code between Mobile Apps with Angular and NativeScriptSebastian Witalec · International JavaScript Conference Munich 2017
• 36mSharing Code Between Web and Native AppsSebastian Witalec · Angular Camp 2016
• 27mFrom Web to Mobile with NativeScript and AngularStanimira Vlaeva · GDG DevFest Sofia 2019
• 52mOne Source to Rule them AllJohn Niedzwiecki II · Developers Summit 2021
• 25mOne Source to Rule them AllJohn Niedzwiecki · OpenJS World 2021
• 22mNativeScript and CodeSharingNathan Walker · ngAtlanta Conf 2018
• 31mFrom web to mobile with NativeScript and AngularStanimira Vlaeva · ngAtlanta 2019