[Sebastian Witalec] Sharing Code Between Web and Native Apps

Presentation from GDG DevFest Ukraine 2017 - the biggest community-driven Google tech conference in the CEE.

Learn more at: https://devfest.gdg.org.ua

Transcript

1. Sharing Code between 
 Web and Native apps You know Angular. Now you know mobile. @sebawita
2. Sebastian Witalec @sebawita
3. Why Native? http://www.lukew.com/ff/entry.asp?1954
4. Why Web? http://www.lukew.com/ff/entry.asp?1954
5. “The Web is for audience reach and native apps are for rich experiences. Both are strategic. Both are valuable. So when it comes to mobile, it's not Web vs. Native. It's both.” - Luke Wroblewski
6. Android iOS Web
8. an open source framework for building truly native mobile apps with JavaScript. Use web skills, like TypeScript, Angular and CSS, and get native UI and performance on iOS and Android. NativeScript is…
9. Component

10. Component

11. Component

12. Template - Web

13. Template - Web

14. Template - Web

15. Template - NativeScript

16. Template - NativeScript

17. Key differences between and
18. Project Structure Build tools UI app/code src/app/code NativeScript CLI Angular CLI Mobile Style Web Style Mobile Components Web components
19. What is 

20. What can be shared?
21. “What are the possible solutions?”
22. Approach 1: Multiple projects Shared Platform Agnostic Code Services Components Pipes SASS Variables Angular Web Project Angular {N} Project Shared Shared Web Code Mobile Code Copy Directives
24. The Good The Bad The Ugly Easy Setup Good for small projects No learning curve Code Duplication Doesn't scale Maintenance
25. Approach 2: Monorepo
 Monorepo Services Pipes SASS Variables Directives Web Style {N} Style Navigation Modules Components Web ngModule {N} ngModule Navigation Components Web HTML {N} HTML TS Class Build Process
26. Approach 2: Monorepo
 Monorepo Services Pipes SASS Variables Directives Web Style Navigation Modules Components Web ngModule Navigation Components Web HTML TS Class Build Process {N} Style {N} ngModule {N} HTML
27. Approach 2: Monorepo
 Monorepo Services Pipes SASS Variables Directives {N} Style Navigation Modules Components {N} ngModule Navigation Components {N} HTML TS Class Build Process Web Style Web ngModule Web HTML
29. The Good The Bad The Ugly Angular CLI Great for complex project All in one place Overkill for small projects Needs additional build process How do I even start?
30. “HOW DO I EVEN?”
31. Project seed
 https:/ /github.com/TeamMaestro/angular-native-seed
32. Custom build How does it work?
 Mobile app Business as usual Monorepo angular-native-seed {N} Project Structure Web Project ng serve npm run android npm run ios
33. How to do code splitting? Components Web HTML TS Class {N} HTML NameComponent name.component.html name.component.ts name.component.tns.html
34. How to do code splitting? Components Web HTML TS Class {N} HTML NameComponent name.component.html name.component.ts name.component.tns.html Web Style {N} Style name.component.scss name.component.tns.scss
35. “What are the challenges?”
36. Challenge #1 Library API mismatch
37. Resolving API Differences Common Service Higher Abstraction
38. Common Angular Data Service Interface Service Abstraction Web Plugin {N} Plugin Web Data Service Components Components Business Logic Web Data Service Business Logic
39. Common Plugin Interface Higher Abstraction {N} Plugin Web Plugin Wrapper {N} Plugin Wrapper Components Components Data Service Business Logic Web Plugin
40. angularfire2 vs {N} firebase
41. Issue 1: Different user models $ ≠%
42. Issue 1: Different user models uid name displayName email verifiedEmail refreshToken profileImageURL photoURL providers providerData anonumous isAnonymous
43. Solution: Define unified model + parse User Model User Model Common User Model Parse
44. Common

45. {N}

46. Using Parse
47. Issue 2: Different Response Management Observables vs Listeners
48. Data sync
49. Solution: Convert Listener to Observable
50. Challenge #2
 Angular + {N} Extensions TypeScript Errors
51. Router vs {N} RouterExtensions
52. Solution: Add ”Extra” Interfaces
53. Solution: And wrap in a service navigation.service.tns.ts navigation.service.ts
54. And use like
55. Challenge #3
 Different Modules
56. Infinite scroll for web npm install ngx-infinite-scroll --save-dev
57. Solution: create two @NgModules @NgModule @NgModule shared shared unique
58. infinite.module.ts
59. infinite.component.html
60. infinite.module.tns.ts
61. infinite.component.tns.html
62. “Are there any tools to help me do the magic?”
63. nativescript-angular-cli > tns extension install nativescript-angular-cli > tns generate shared-component name > tns g sc name > tns generate shared-module name > tns g sm name
64. “Demo”
65. Code Sharing Goals and plans
66. Closing down the gaps Integration with Angular CLI
67. Sharing is caring Move from Gulp build to WebPack npm packages with code sharing split
68. Upgrade your existing project Migration process
69. Helping you get into it Real life examples Workshop
70. Q & A @sebawita