Building Universal applications with Expo

This talk focuses on how you can leverage the power of Expo & React Native to build truly Universal Apps that virtually run on all platforms.

Find the video at https://www.youtube.com/watch?v=4aiDekX4IiA

Transcript

1. Dani Akash Building Universal Apps with Expo
2. Powered by React You just need to know a bit of JavaScript!
3. And here’s the summary ﹣ • What exactly are platforms? • How does modern App Development work • Why build a Native App • Why you shouldn’t build a Native App • Cross platform development tools • A bit of Javascript • The React Native “Platform” • Expo • A bit of coding • Some discussion We are gonna learn some stuff
4. Platforms A platform is a group of technologies based on which other applications are developed. Xbox, PlayStation, Nintendo ﹣ are all platforms for developing games
5. Targeted Platforms Almost all businesses require some form of platform
6. Desktop Mobile Web Desktop Native Universal Windows Platform Android iOS Mobile Web
7. Android Platform A few things to know Apps are built with Java, Kotlin or C++ ﹣ Uses XML for UI Layouts ﹣ The final app is packaged as .apk or .abb ﹣ Usually distributed through Play Store ﹣
8. iOS Platform A bunch of more things to know Apps are built with Objective-C or Swift ﹣ Uses Interface Builder or Swift UI for Layouts ﹣ The final app is packaged as .ipa ﹣ Can only be distributed through App Store ﹣
9. Web You might already know this Apps are built with HTML, CSS and JavaScript ﹣ Uses Flexbox or CSS Grids for Layouts ﹣ The final app is packaged as .html, .CSS or .js ﹣ Can be distributed throughout the web ﹣
10. Cross Platform Development tools Ionic Flutter React Native Uses the webview Uses its own rendering engine Uses a native bridge
11. Flutter An excellent framework if you are targeting only mobile apps!
12. Android Text is rendered using platform’s native “TextView” iOS Text is rendered using platform’s native “UILabel” What Makes React Native awesome The Native Bridge This will convert the Text Component into the platform’s native text element <Text> A React Native Text Component
13. The Native Bridge is powerful Since all the UI elements of React Native is defined as platform independent terms like Text, View, ScrollView etc. The Native Bridge can be extended to almost any platforms.
14. Twitter PWA Built with React-Native-Web where native bridge extends React native components to render HTML & CSS
15. React Native Windows It is a framework which extends React Native Components to Universal Windows Platform
16. And these usually don’t affect people who are familiar with the platform • Complicated Setup • Too much native code • Lack of many inbuilt modules like Camera, Push Notifications • Platform Specific Components • Need a Mac for iOS Apps There are few things in React Native that make it difficult for new developers to learn
17. State of JS 2019
18. Meet Expo A Framework Built on Top of React Native
19. A few benefits ﹣ • You don’t have to know Native Development • You don’t need to search for external libraries • You don’t need a mac to build iOS Apps • It can extend upto all platforms with little to no change Expo organizes things neatly
20. Before we start... Node VSCode Google Chrome Yarn React Expo CLI
21. Thanks Follow me on: @dani_akash_ daniakash.com
22. You can find the projects we did in this session here... Github - Not Instagram - https://github.com/DaniAkash/not-instagram Snack - Todolist App - https://snack.expo.io/@daniakash/todolist RESOURCES