Tweet
Tweet

Slide 1

Slide 1 text

BUILDING CROSS-PLATFORM
 WITHOUT SACRIFICING PERFORMANCE

Slide 2

Slide 2 text

LET’S IMAGINE
 YOU’RE STARTING A NEW DIGITAL PRODUCT
 TODAY…

Slide 3

Slide 3 text

WHAT ARE THE CHOICES
 YOU NEED TO MAKE? STARTING FRESH

Slide 4

Slide 4 text

STARTING FRESH CHOICES ▸ Desktop, mobile, web.. or all of the above? ▸ Which technology stack to choose? ▸ How to recruit and build a team? ▸ Which features/platform to get to market first?

Slide 5

Slide 5 text

▸ Full-size computer ▸ Smartphone ▸ Smart TV ▸ Tablet ▸ Wearables ▸ VR INTERFACES TODAY

Slide 6

Slide 6 text

MOBILE IS KING If you expect to compete you MUST prioritize mobile. ▸ Mobile is the primary interface for most users ▸ Vast majority of time is spent on mobile devices ▸ Online revenue and commerce is rapidly moving toward mobile

Slide 7

Slide 7 text

MOBILE WEB VS MOBILE APPS LET’S TALK ABOUT

Slide 8

Slide 8 text

MOBILE WEB VS MOBILE APP THE WEB IS A COMPELLING PLATFORM ▸ Open Standards ▸ Cross-platform ▸ URLs are awesome for usability ▸ Your site is just a Google search away ▸ No installation required ▸ We’ve become good at navigating the web’s limitations

Slide 9

Slide 9 text

THE WEB PLATFORM 20 YEARS OF INFLUENCE A lot of the really exciting application design paradigms originated from the web. In many ways, this is a product of the innovation required to leverage the web for delivering applications.

Slide 10

Slide 10 text

BUT…

Slide 11

Slide 11 text

THE WEB IS NOT CAPABLE OF DELIVERING IMMERSIVE EXPERIENCES COMPARABLE WITH NATIVE APPS.

Slide 12

Slide 12 text

FOR EXAMPLE ▸ Rich gestures and interactions ▸ Natural-feeling animations at 60fps ▸ Gyro, accelerometer ▸ Location services ▸ Push notifications ▸ Microphone, Music, Camera ▸ Bluetooth, NFC, Biometrics ▸ Offline Experiences ▸ Background services ▸ Native APIs such as contacts and sharing THE MOBILE EXPERIENCE

Slide 13

Slide 13 text

TOP MOBILE APPS IF YOU’RE IN A HIGHLY COMPETITIVE SPACE Delivering a mobile app is NOT optional.

Slide 14

Slide 14 text

IN MOST CASES You’ll need to deliver on ▸ Android ▸ iPhone ▸ Web … at the minimum.

Slide 15

Slide 15 text

HOW CAN WE
 DELIVER ALL THAT?

Slide 16

Slide 16 text

DELIVERING A PRODUCT LET’S DO THIS: 1. Hire a dedicated Android team that understands Java and Android Studio 2. Hire a rockstar iOS team that understands Swift and Xcode and Native SDKs 3. Hire a web team to do the HTML, CSS, JavaScript (and one of the 387 JS frameworks available today) (Protip: You’ll need a backend too)

Slide 17

Slide 17 text

YOUR USERS WILL BE VERY HAPPY.

Slide 18

Slide 18 text

PAYING THREE SEPARATE TEAMS YOU’LL BE BUILDING MOST FEATURES THREE TIMES AND…

Slide 19

Slide 19 text

DELIVERING A PRODUCT SOME COMPANIES CAN AFFORD THREE TEAMS But there are still challenges to this approach… ▸ The teams tend to be somewhat siloed ▸ Keeping feature parity between platforms is challenging ▸ It’s difficult to manage all those engineers ▸ Customer support for three different products

Slide 20

Slide 20 text

SHIP IT IDEALLY… We just want to build our App once and deliver it to all our awesome users. Even if they’re using Android. or iPhone. (or worse, Windows Phone)

Slide 21

Slide 21 text

CROSS-PLATFORM LET’S TALK ABOUT

Slide 22

Slide 22 text

CROSS-PLATFORM TECHNOLOGIES LUCKILY, WE HAVE A FEW OPTIONS

Slide 23

Slide 23 text

CROSS-PLATFORM TECHNOLOGIES TWO APPROACHES TO CROSS-PLATFORM ▸ HTML5 Hybrid Approach (sometimes called a webview)
 - for example Cordova or Ionic ▸ A framework that abstracts each platform’s native view components
 - such as Xamarin, NativeScript and React Native Both approaches need to expose features from the underlying SDK such as access to camera or GPS.

Slide 24

Slide 24 text

HTML5 HYBRID / WEBVIEW LET’S TALK ABOUT

Slide 25

Slide 25 text

HTML5 BACK IN 2009, WE GOT
 A HOT NEW THING CALLED HTML5 ▸ Flash wasn’t winning on mobile ▸ HTML5 was riding a wave of excitement ▸ Everyone thought HTML5 was the answer to cross-platform ▸ PhoneGap and friends made some strong promises for mobile

Slide 26

Slide 26 text

WHY? The HTML5 Hybrid approach essentially augments the normal web technologies with access to hardware features such as camera/ location/bluetooth. Everyone was already familiar with web technologies. HTML5

Slide 27

Slide 27 text

THE FACEBOOK HYBRID APP ▸ Around that time, Facebook did not have a successful mobile app. ▸ They decided to build on HTML5 hybrid technology ▸ Their hybrid app was released in 2010 for both iPhone and Android

Slide 28

Slide 28 text

1.5 STARS

Slide 29

Slide 29 text

“OUR BIGGEST MISTAKE WAS BETTING TOO MUCH ON HTML5“ Mark Zuckerberg - 2012 THE FACEBOOK HYBRID APP

Slide 30

Slide 30 text

THE FACEBOOK HYBRID APP FACEBOOK WENT BACK AND FORMED A NATIVE TEAM FOR IOS
 
 AND ANOTHER FOR ANDROID

Slide 31

Slide 31 text

IS NOT AN OPTION IF YOU'RE IN THE TOP 100
 OR YOU COMPETE IN THAT LEAGUE,
 SACRIFICING THE USER EXPERIENCE

Slide 32

Slide 32 text

WEB-BASED TECHNOLOGY HAS IMPROVED A LOT But ultimately, it can’t compete with native on user experience or performance. ▸ Animations ▸ Gestures ▸ Response time ▸ Physics ▸ Memory consumption HTML5

Slide 33

Slide 33 text

WHAT'S THE IDEAL SOLUTION for cross-platform?

Slide 34

Slide 34 text

THE CROSS PLATFORM HOLY GRAIL WE WANT ALL OF THE FOLLOWING ▸ One expressive language/framework across iOS, Android (and ideally Web too) ▸ Native level performance ▸ Reasonable amount of code re-use while maintaining the native look and feel for each platform ▸ Excellent user experience ▸ 60fps animations

Slide 35

Slide 35 text

LET’S TALK ABOUT
 REACT

Slide 36

Slide 36 text

REACT FOR THE WEB REACT Just a year or so after their Hybrid App situation,
 Facebook dreamed up a new thing called React. ▸ React was new and controversial ▸ Angular was the dominant web framework ▸ The early adopters of React were fueling some incredible innovation in the front- end space. ▸ A lot of these ideas were very unpopular

Slide 37

Slide 37 text

“REACT IS PACKED WITH IDEAS THAT WERE RADICAL AT THE TIME OF ITS INTRODUCTION.” Dan Abramov REACT FOR THE WEB

Slide 38

Slide 38 text

REACT FOR THE WEB We could spend a whole talk on how transformational React was at the time. ▸ Declarative UI ▸ View as a function of state ▸ Immutability ▸ Composable UI components ▸ Batched, asynchronous rendering

Slide 39

Slide 39 text

BUT THERE’S ONE IMPORTANT CONCEPT I WANT TO EXPLORE…

Slide 40

Slide 40 text

REACT

Slide 41

Slide 41 text

VIEW LOGIC IT TELLS YOU VERY LITTLE ABOUT THE UNDERLYING DISPLAY MEDIUM If you look at that piece of code …

Slide 42

Slide 42 text

REACT

Slide 43

Slide 43 text

“THE BROWSER IS JUST AN IMPLEMENTATION DETAIL” Smart people in the React Community REACT

Slide 44

Slide 44 text

REACT In theory, React views could target any display medium, not just a web browser. In fact, several teams started trying it: ▸ Flipboard -> HTML5 Canvas ▸ Netflix -> “Gibbon” for Smart TVs ▸ (Some brave people) -> Terminal Interface ▸ … even a PDF renderer

Slide 45

Slide 45 text

REACT NATIVE REACT CONF, JANUARY 2015

Slide 46

Slide 46 text

REACT NATIVE ▸ The same ideas powering React ▸ Truly native view components ▸ No HTML, CSS or Webviews ▸ Emphasis on performance ▸ Modern JavaScript ▸ iOS, Android and even Windows!

Slide 47

Slide 47 text

REACT NATIVE FAMILIAR PRINCIPLES, NEW PRIMITIVES

Slide 48

Slide 48 text

LEARN ONCE, WRITE ANYWHERE. React Native

Slide 49

Slide 49 text

CODE RE-USE

Slide 50

Slide 50 text

REACT NATIVE CODE RE-USE ‣ Reasonable amount of code re-use while maintaining the native look and feel for each platform. ‣ Android should feel like Android; iOS like iOS. ‣ You CAN maximize for code re-use and brand your app with a similar look/feel across platforms if you choose.

Slide 51

Slide 51 text

REACT NATIVE CODE RE-USE ‣ Your views, styling and business logic is 100% JavaScript ‣ You can even get some code re-use with React for web (especially business logic)

Slide 52

Slide 52 text

PERFORMANCE

Slide 53

Slide 53 text

REACT NATIVE PERFORMANCE ▸ Async, batched Rendering ▸ UI on a separate thread ▸ Take advantage of multi-core architectures

Slide 54

Slide 54 text

STYLING & LAYOUT

Slide 55

Slide 55 text

REACT NATIVE STYLING & LAYOUT ▸ Styling and Layout is done 100% in JavaScript ▸ Some ideas are borrowed from CSS, specifically Flexbox ▸ Flexbox provides a powerful way to describe your layout.

Slide 56

Slide 56 text

ANIMATIONS

Slide 57

Slide 57 text

REACT NATIVE ANIMATIONS ▸ React Native provides powerful, declarative animation constructs. ▸ The animations run fully in native, so the performance is smooth. ▸ Once you learn the API, it’s fairly intuitive. ▸ You get access to gestures such as swipes and scroll-based animations.

Slide 58

Slide 58 text

REACT NATIVE REACT NATIVE AS A BUSINESS DECISION

Slide 59

Slide 59 text

DEVELOPER EXPERIENCE

Slide 60

Slide 60 text

ONE OF THE REALLY GREAT THINGS ABOUT THE WEB… The Developer Experience is top notch.

Slide 61

Slide 61 text

DEVELOPER EXPERIENCE BRINGING THE BEST OF THE WEB TO NATIVE ▸ Almost zero compile time ▸ Hot Reloading ▸ Develop on multiple devices simultaneously ▸ Dev tools make debugging painless ▸ Powerful layout using Flexbox

Slide 62

Slide 62 text

BUT…

Slide 63

Slide 63 text

JAVASCRIPT FOR REAL? ▸ JS is not as bad as it used to be! ▸ React Native is built on modern JS or “ES Next” ▸ We get powerful constructs such as async/await and Promises ▸ Optional Typing and strong compile-time guarantees

Slide 64

Slide 64 text

YOU DON’T HAVE TO USE JS ACTUALLY, TECHNICALLY

Slide 65

Slide 65 text

JAVASCRIPT ALTERNATIVES THERE ARE LANGUAGES THAT WILL COMPILE TO JS ▸ TypeScript (from Microsoft) ▸ Scala ▸ ClojureScript ▸ Reason — New from the creators of React! ▸ Sound type system. Fully supported React Bindings. ▸ Used already in production by Facebook

Slide 66

Slide 66 text

COMMUNITY

Slide 67

Slide 67 text

JAVASCRIPT ALTERNATIVES THE COMMUNITY AROUND REACT NATIVE IS GREAT ▸ Open Source UI kits, Navigation ▸ Dev Tooling ▸ Bindings to third-party SDKs (such as Voip or Analytics) ▸ Community Support ▸ Learning Resources

Slide 68

Slide 68 text

EXPO SNACK

Slide 69

Slide 69 text

INSTANTLY GET STARTED EXPO ROCKS ▸ Go to the website ▸ Scan the QR code with your phone ▸ Edit code and instantly see the results on your device!

Slide 70

Slide 70 text

SO WHAT’S THE FUTURE OF NATIVE CODE?

Slide 71

Slide 71 text

FUTURE OF NATIVE CODE CAN REACT NATIVE REPLACE JAVA/SWIFT? ▸ Not Really ▸ React Native is written in those native languages ▸ All the components that you use in your RN app are native components built in native languages ▸ However, we’re seeing a shift where native languages are used by library/ component authors and React Native is used by app developers.

Slide 72

Slide 72 text

REACT NATIVE FRONT-END ENGINEERING IS GOING THROUGH A SORT OF RENAISSANCE ▸ Languages are evolving. ▸ Developer experience is improving. ▸ Barriers are coming down.

Slide 73

Slide 73 text

THANK YOU @sstur_ I’m Simon. I run a software agency: 
 We build and consult React Native.