JSFoo 2016

Tackling speed and performance for JavaScript

@BilalBudhani

@bilalbudhani

Build high performance native mobile apps with React Native

Submitted Aug 8, 2016

React Native is changing the mobile application development landscape with it’s ground breaking way of writing native apps with JavaScript. React Native converts React components into truely native components (Yes, No WebViews) on mobile platforms without compromising native user experience. Companies like Facebook, Airbnb, SoundCloud, Myntra etc. are already using React Native in their production apps and many more joining the tribe each day (Check it our yourself http://facebook.github.io/react-native/showcase.html). So, how about we take a look into the future?

In this session, I’ll break the ice for you by deconstructing each step on how to get started with React Native development, What it has to offer, How to style React Native apps and more importantly how to reuse the code across platforms. At the end of this session you’ll have clear understanding on building your first React Native app (more than Hello World).

Outline

For the sake of simplicity the talk will be divided in to two parts. First half of the talk will be all about getting a hang of React Native, to elobrate:

  • We’ll start the session with a brief technical introduction of React Native. In this I’ll try to explain what inspired Facebook team to come up with React Native at the first place. How it works internally.
  • Then we’ll move on to understand, how to build components in React Native. How is View and Text components in React Native are equivalent of Div and Span in HTML. And, How to use them appropriately.
  • Moving on, we’ll take a look at how to use native components like ListView, Alert, Navigation, Map etc. with React Native. Surprising thing to note here is, You don’t necessarily need to know anything about on the native mobile APIs to build these components.
  • Further, in the talk, We’ll learn about applying styles to our components. We’ll understand how to apply platform specific styles, what are the tradeoffs of in-line styles vs StyleSheet component and what are caveat you should be aware of (If you know even basic CSS, then you’re in for a show).
  • Later, We’ll take a glimpse on Animations, building Gestures and other advance features of React Native. Trust me you’ll be mind blown with what all can be done with React Native.
  • Lastly, We’ll talk about how to debug React Native apps, what is HOT MODULE RELOAD and some tricks from the hat to be effective.

Second half of the talk will be all about looking at real world cases and code, to give you an idea:

  • We’ll explore an existing production level mobile application live demo on an iOS / Android simulator. We’ll make some change on the app and see it in action. (You can request me to show you them on real device after the talk :) )
    This will eventually help us to connect all the dots, which we’ve constructed in the first half of the talk.

Looking forward to talk to you guys :)

Requirements

  • Open mind.
  • Genuine Questions after the talk.
  • A feedback after the talk :D

Speaker bio

I’m a self taught developer with a passion to deconstruct complex technologies and simplying them for myself (then eventually share it with everyone). I’ve been writing code on various languages since last 10+ years. I’ve worked with great companies, Just to name a few ValuePitch, SupportBee, Embibe, Crowdfire. I’ve been writing JavaScript since last 5 years, varying from BackboneJS, AngularJS, EmberJS and ReactJS.

Currently I work for BigBinary as a full time React Native developer and I’ve been enjoying it so far. I’m also creator of https://conflist.io .

Comments

{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

JSFoo is a forum for discussing UI engineering; fullstack development; web applications engineering, performance, security and design; accessibility; and latest developments in #JavaScript. Follow JSFoo on Twitter more