<title>Artsy x React Native</title>

<meta name="viewport" content="width=550px, initial-scale=1.0, maximum-scale=1.0">

<link

rel="stylesheet"

type="text/css"

href="https://webfonts.artsy.net/all-webfonts.css"

/>

html {

background-repeat: no-repeat;

background-size: 100%;

background-color: black;

}

body {

width: 60%;

margin: 120px auto;

margin-top: 250px;

font-family: "Adobe Garamond W08";

font-size: 32px;

color: #AEE6E7;

line-height: 80px;

}

@media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {

body {

width: 90%;

margin-top: 150px;

}

h1 img {

width: 80%;

}

}

h1 {

text-align: center;

margin-bottom: 0;

padding-bottom: 0;

margin-bottom: 200px;

}

div {

text-align: center;

margin-bottom: 200px;

font-size: 20px;

}

h2 {

margin-bottom: 100px;

line-height: 1.25em;

font-size: 64px;

font-weight: 400;

}

h3 {

margin-bottom: 100px;

line-height: 1.25em;

font-size: 40px;

font-weight: 400;

}

p {

line-height: 40px;

position: relative;

/* text-indent: -120px;

}

section.normal p {

text-indent: 0;

margin-left: 0;

font-size: 32px;

}

p span {

display: inline-block;

color: #AEE6E750;

text-align: left;

left: -120px;

position: absolute;

}

span.icon {

display: inline-block;

left: -10px;

position: absolute;

width: 30px;

margin-right: 0;

margin-top: 20px;

}

p span.icon img.a {

position: relative;

/* top: -6px; */

right: 16px;

}

p span.icon img.f {

position: relative;

top: -4px;

right: 19px;

}

span.icon img.t {

position: relative;

top: -1px;

right: 1px;

}

span.icon img.w {

position: relative;

top: -4px;

right: 9px;

}

p a {

color: rgb(204, 242, 243);

}

section {

clear: both;

}

li {

list-style: none;

padding-bottom: 40px;

font-size: 32px;

line-height: 40px;

}

hr {

width: 100px;

border: 3px solid #B3F6FC;

margin-top: 100px;

margin-bottom: 180px;

}

code {

font-size: 24px;

}

div.yt-placeholder {

width: 500px;

height: 300px;

background-color: grey;

margin-bottom: 0;

}

@media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {

ol {

padding-left: 40px;

}

.hide-mobile {

display:none;

}

}

#talks li {

width: 560px;

margin-bottom: 0px;

}

iframe {

margin-bottom: 6px;

}

ol {

padding-left: 00px;

}

ol p {

font-size: 24px;

margin-top: 12px;

}

ol p {

margin: 0;

text-indent: 0;

}

ol p.headline {

font-size: 30px;

margin-bottom: 20px;

}

ol p.summary {

opacity: 0.6;

}

ol .video-wrapper p {

text-align: left;

}

ol p.slides {

float: right;

text-align: right;

opacity: 0.6;

z-index: 50;

}

ol#questions {

padding-left: 20px;

margin-top: 20px;

}

ol.sublist li {

font-size: 20px;

margin: 0;

padding: 0;

list-style: circle;

}

ol.sublist li.no-icon {

list-style: none;

font-size: 20px;

margin-top: 40px;

margin-bottom: 20p;

}

ol.sublist li a {

color: white;

}

section p.hot-tip {

opacity: 0.6;

font-size: 24px;

margin-top: 12px;

}

section p.hot-tip span {

color: #AEE6E7;

}

<section>

<h1>

<span style="display: none;">Artsy x React Native</span>

<img src="/images/artsy-x-rn/artsy-x-rn-logo.svg">

</h1>

<h2>A single day conference on React Native for iOS developers in July 2018</h2>

<h3>We starting with talks, had a long Q&A, then moved into pragmatic workshops</h3>

<h3>All focused on how you can make quality iOS apps</h3>

<hr/>

</section>

<section>

<p style="line-height: 50px;" class="hide-mobile">

<span>Who</span>

<span class="icon" style='width:20px;'>

<img class='a' src='/images/artsy-x-rn/artsy-a.svg'>

</span>Orta Therox

</br/>

<span class='icon'></span>Maxim Cramer

<br/>

<span class='icon'></span>Eloy Dur&#225;n

<br/>

<span class='icon'>

<img class='f' src='/images/artsy-x-rn/facebook-f.svg'>

</span>Christoph Nakazawa

</p>

<p>

<span>What</span>

<span class='icon'>

</p>

<p>

</span>Adding React Native to existing Apps

</p>

<ol id="talks">

<li>

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/qupndH1zW_g" frameborder="0" allow="autoplay; encrypted-media"

allowfullscreen></iframe>

<p class='slides'><a href="https://speakerdeck.com/artsyopensource/adding-react-native-to-an-existing-app-artsy-x-react-native-2018">Slides</a></p>

<p>By Eloy Dur&#225;n</p>

<p class="summary">How and why we choose to integrate React Native into our native app</p>

</li>

<li>

<p class="headline">Artsy Omakase</p>

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/1Z3loALSVQM" frameborder="0" allow="autoplay; encrypted-media"

allowfullscreen></iframe>

<p class='slides'>

<a href="https://speakerdeck.com/artsyopensource/the-artsy-omakase-artsy-x-react-native-2018">Slides</a></p>

<p>By Orta Therox</p>

<p class="summary">What is the Artsy JavaScript tech stack? How did choose and improve our dependencies</p>

</li>

<li>

<p class="headline">Learning How to Learn</p>

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/zqnJBksguVI" frameborder="0" allow="autoplay; encrypted-media"

allowfullscreen></iframe>

<p class='slides'>

<a href="https://speakerdeck.com/artsyopensource/learning-how-to-learn-artsy-x-react-native">Slides</a></p>

<p>By Maxim Cramer</p>

<p class="summary">How to make you and your team resilient to changes in the technical landscape</p>

</li>

<li>

<hr/>

</li>

<li>

<p id='qanda' class="headline">Artsy Q&A on React Native</p>

<div id="qanda-yt"></div>

<p>Chaired by Christoph Nakagawa</p>

<p>With Eloy Dur&#225;n, Maxim Cramer and Orta Therox</p>

<p class="summary">An hour and a half of moderated, and audience questions.

<a href="#qandab" onclick="document.getElementById('questions').style.display = 'block'">Click here</a>

</a> to see the questions and timecodes.</p>

<ol id="questions" class="sublist" style="display:none;">

<li>What type of Apps is React Native a good fit for?

<a href='#qanda' onclick="qAndA(60)">00:01:00</a>

</li>

<li>What type of Apps is React Native a bad fit for?

<a href='#qanda' onclick="qAndA(106)">00:01:46</a>

</li>

<li>What are your thoughts on Android support?

<a href='#qanda' onclick="qAndA(205)">00:03:25</a>

</li>

<li>Is React Native useful enough to be useful when only supporting one platform?

<a href='#qanda' onclick="qAndA(290)">00:04:50</a>

</li>

<li>How does React Native compare for performance, how do you debug, and find performance problems?

<a href='#qanda' onclick="qAndA(494)">00:08:14</a>

</li>

<li>How do you handle the tension around React Native's lack of a general roadmap?

<a href='#qanda' onclick="qAndA(787)">00:13:07</a>

</li>

<li>How do we get people to think with React Native first?

<a href='#qanda' onclick="qAndA(925)">00:15:25</a>

</li>

<li>One of the big hype features for React Native is live deployment of JavaScript, do you use it?

<a href='#qanda' onclick="qAndA(1185)">00:19:45</a>

</li>

<li>Have you had any issues with App Review from Apple?

<a href='#qanda' onclick="qAndA(1391)">00:23:11</a>

</li>

<li>Do you think that Apple will change something that could make React Native not work?

<a href='#qanda' onclick="qAndA(1495)">00:24:55</a>

</li>

<li>You talk about de-siloing engineers, but different projects need different constraints like deployment for this

cause tension within the engineering group?

<a href='#qanda' onclick="qAndA(1636)">00:27:16</a>

</li>

<li>What is the biggest cultural issue we had in introducing React Native, and how did we resolve it?

<a href='#qanda' onclick="qAndA(1942)">00:32:22</a>

</li>

<li>Does de-siloing engineers de-skill them?

<a href='#qanda' onclick="qAndA(2184)">00:36:24</a>

</li>

<li>How would you try out React Native in a small way inside an existing app?

<a href='#qanda' onclick="qAndA(2420)">00:40:20</a>

</li>

<li>Can I use Swift with React Native?

<a href='#qanda' onclick="qAndA(2579)">00:42:59</a>

</li>

<li>Why didn't Swift solve your problems?

<a href='#qanda' onclick="qAndA(2657)">00:44:17</a>

</li>

<li>What resources would you recommend for learning React Native?

<a href='#qanda' onclick="qAndA(2846)">00:47:26</a>

</li>

<li class="no-icon">Audience Questions</li>

<li>How did you come to the conclusion that native should handle domains like navigation?

<a href='#qanda' onclick="qAndA(2987)">00:49:47</a>

</li>

<li>What are the value of types in JavaScript?

<a href='#qanda' onclick="qAndA(3078)">00:51:18</a>

</li>

<li>Is a new view by default React Native in the Artsy app?

<a href='#qanda' onclick="qAndA(3324)">00:55:24</a>

</li>

<li>Is there an effective way to debug in JS/iOS/Android at the same time?

<a href='#qanda' onclick="qAndA(3443)">00:57:23</a>

</li>

<li>Is there a point where the component library abstraction starts to not pay-off?

<a href='#qanda' onclick="qAndA(3566)">00:59:26</a>

</li>

<li>Are you recommending that if you can't truly own your dependencies you should not be using tools like React Native?

<a href='#qanda' onclick="qAndA(3752)">01:02:32</a></li>

<li>Do you see the same ownership and de-siloing on the platform side?

<a href='#qanda' onclick="qAndA(3957)">01:05:57</a>

</li>

<li>Would our setup be different with a more complex app? e.g more offline state

<a href='#qanda' onclick="qAndA(4149)">01:09:09</a>

</li>

<li>If you could fix one serious issue with React Native, what would you do?

<a href='#qanda' onclick="qAndA(4427)">01:13:47</a>

</li>

<li>What should you be mindful of, technically, when using React Native?

<a href='#qanda' onclick="qAndA(4520)">01:15:20</a>

</li>

</ol>

</li>

</ol>

<p style="line-height: 50px;">

<p>

<span>How.</span>Workshops

</p>

<ol class="sublist" >

<li><a href="https://github.com/artsy/x-react-native#workshop-11---building-a-components-library">Building a Pod Components Library</a> - <a href="https://youtu.be/ucQXL4vkP78">video</a></li>

<li><a href="https://github.com/artsy/x-react-native/tree/master/workshops/primitives">React Native Bread and Butter</a> - <a href="https://youtu.be/CIG4Fc2ixis">video</a></li>

<li>What happens with React Native init?</li>

<li><a href="https://github.com/artsy/x-react-native/tree/master/workshops/minimum_viable_tooling">Minimum Viable Tooling</a></li>

</ol>

<span class='icon' style='width:20px;'></span>

</p>

</section>

<section>

<p class="hot-tip hide-mobile" >

<span>Hot Tip</span>In Safari, right click twice in a Youtube video to access a menu which lets you move the video out of

the window using "Enter Picture in Picture".

</p>

<p>

<span>Add.</span>Other Resources

</p>

<ol class="sublist">

<li>

<a href='https://github.com/artsy/x-react-native'>github.com/artsy/x-react-native</a>

</li>

<li>

<a href='https://artsy.github.io/artsy-x-react-native-invite-2018.html'>artsy.github.io/artsy-x-react-native-invite-2018</a>

</li>

<li>

<a href='http://artsy.github.io/series/react-native-at-artsy/'>artsy.github.io/series/react-native-at-artsy</a>

</li>

</ol>

<p>

<span>&nbsp;</span>React Native at Artsy

</p>

<ol class="sublist">

<li>

<a href="/blog/2016/08/15/React-Native-at-Artsy/">React Native at Artsy </a>

</li>

<li>

<a href="/blog/2016/08/15/vscode/">Using VS Code for JavaScript </a>

</li>

<li>

<a href="/blog/2016/08/24/On-Emission/">On our implementation of React Native </a>

</li>

<li>

<a href="/blog/2016/11/14/JS-Glossary/">JavaScript Glossary for 2017 </a>

</li>

<li>

<a href="/blog/2017/02/05/Front-end-JavaScript-at-Artsy-2017/">Exploration: Front-end JavaScript at Artsy in 2017 </a>

</li>

<li>

<a href="/blog/2017/02/05/Retrospective-Swift-at-Artsy/">Retrospective: Swift at Artsy </a>

</li>

<li>

<a href="/blog/2017/07/06/React-Native-for-iOS-devs/">Intro to React Native for an iOS Developer </a>

</li>

<li>

<a href="/blog/2018/03/17/two-years-of-react-native/">React Native, 2 years later </a>

</li>

<li>

<a href="/blog/2018/04/17/making-a-components-pod/">Making a React Native Components Pod </a>

</li>

</ol>

</section>

<div id="player"></div>

<script>

// 2. This code loads the IFrame Player API code asynchronously.

var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";

var firstScriptTag = document.getElementsByTagName('script')[0];

firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;

function onYouTubeIframeAPIReady() {

player = new YT.Player('qanda-yt', {

height: '315',

width: '560',

videoId: 'Q2tfkpkmRLE',

});

}

function qAndA(seconds) {

player.seekTo(seconds, true)

}

</script>