Multiplatform Team with Expo

My talk about using Expo to build Cross-Platform Products in a small team. I talk about the new alpha package @expo/html-elements

Transcript

1. Multiplatform team with Expo Universal apps using Expo SDK
2. @mauriciord @mauriciord https://atalkwith.dev Maurício R Duarte Front End developer
3. Overview • A product designed for various platforms • Some realities of teams in Brazil • Different experiences in the same product • Cross-Platforms Apps • Expo Web instead of React Native Web • Build it once with Expo for Web (@expo/html-elements)
4. Platforms
5. You have to plan specific teams by platform
6. Off-topic: Brazil Let's take a look at some situations in our scenario: •Expensive Apple products •A teenager probably doesn’t buy a Mac to start programming iOS apps •It’s difficult to find and hire an iOS app team
7. Your team will create a design system, so how to manage the platform-specific UX? Use case
8. Websites - - - Apps React DOM Vue NextJS Gatsby Swift / Obj-C Kotlin / Java Flutter React Native Xamarin
9. Cross-Platform Apps
10. React Native for Web by @necolas
11. Used by • Twitter • Major League Soccer • Flipkart • Uber • The Times • DataCamp.
12. Primitives <View /> <div> android.view UIView iOS Web Android
13. RN Web Issues/Bad Practices
14. Expo for Web from Expo SDK
15. What is Expo SDK? Expo is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and Web apps from the same JavaScript/TypeScript codebase.
16. Universal SDK Expo Services CLIs • Expo Camera • Expo Permissions • … • Expo Client • Expo Snack • … • Expo Publish • Expo Build • Turtle CLI • …
17. Expo Workflows Managed Bare Expo takes care of the rest for you React Native + Expo modules
18. Expo Workflows A developer using the managed workflow doesn't use Xcode or Android Studio, they just write JavaScript code and manage configuration through app.json {
 // …
 “platforms”: [
 “android”,
 “ios",
 “web"
 ],
 // …
 }
19. Build it once @expo/html-elements https://github.com/expo/expo/tree/master/packages/html-elements
20. @expo/html-elements • Optimize SEO and Accessibility a11y rules • Every component accepts Stylesheet API <H1 /> <h1> Textview UILabel iOS Web Android
21. You can create an excellent PWA, too expogram.netlify.com
22. @expo/html-elements https://snack.expo.io/@bacon/app-store-elements @Baconbrix https://snack.expo.io/@iclinic-dev/mauriciord @mauriciord
23. Whats next? • Expo HTML Elements alpha • Open Issues and contribute to package • Product-Minded Software Developer • Use Snack as Playground
24. References • https://hackernoon.com/9-popular-cross-platform-tools-for-app-development-in-2019-53765004761b • https://github.com/necolas/react-native-web • https://en.wikipedia.org/wiki/Cross-platform_software • https://www.swyx.io/writing/react-native-web-singularity/
25. We are hiring :-] https://iclinic.gupy.io
26. Thank you :-}