{"id":4810,"date":"2016-08-29T17:41:49","date_gmt":"2016-08-29T17:41:49","guid":{"rendered":"https:\/\/blog-stg.cheesecakelabs.com\/blog\/sharing-code-reactjs-react-native\/"},"modified":"2022-07-01T17:55:36","modified_gmt":"2022-07-01T17:55:36","slug":"sharing-code-reactjs-react-native","status":"publish","type":"post","link":"https:\/\/blog-stg.cheesecakelabs.com\/br\/sharing-code-reactjs-react-native\/","title":{"rendered":"Sharing code between platforms: my approach to ReactJS and React Native"},"content":{"rendered":"

Hybrid technologies have been employed for quite a while in mobile application development. Frameworks such as PhoneGap and Ionic come with an appealing motto: <\/span>Develop once, run everywhere<\/span><\/i>. And they actually do what they promise: you write a web-based app once and release it everywhere, from iOS to Android and the Gates of Mordor, as long as it gives support.<\/span><\/p>\n

I do believe that they play an important role in the mobile app development scene: the huge community of web developers can write mobile app code and are able to deploy fast. But, in my opinion, the idea of developing one shared application for all platforms is dead <\/span>per se<\/span><\/i>.<\/span><\/p>\n

That’s where React Native<\/a> lands. It has a slightly different motto: <\/span>Learn once, write everywhere<\/span><\/i>. It might seem the same but with a closer look, you’ll spot the difference: it’s still JavaScript code, but with a dedicated one for each platform. And that changes everything. Each platform has its peculiarities and user expectations vary from one to another.<\/span><\/p>\n

React Native<\/a> implements a bridge between web and native components. Instead of reinventing the wheel, it leverages the hard work designers and engineers at Apple and Google have done to release their native SDKs. As an alternative to having dedicated apps developed with Objective-C (or Swift) and Java (or Kotlin), you’ll have dedicated apps written in Javascript. This way it’s easier to process your application logic, store state and take use of the huge JavaScript technology stack, and still deliver the looks and feels of a native application, bypassing the use of WebViews by rendering native ones.<\/span><\/p>\n

\"I-Love-Magic\"<\/p>\n

At this point you might be wondering…<\/h2>\n

…the title said something about code reusability and this guy keeps talking development philosophy. Sorry about that, it’s part of the thinking process. I just want to emphasize: don’t expect full reusability on the UI components. You’ll be able to use a couple of generic widgets seamlessly across both platforms, but that’s the beautiful thing of React Native, it encourages and gives the tools to write dedicated UI code for each platform when needed: it’s as simple as adding a `.ios.js` or `.android.js` suffix. <\/span><\/p>\n

React Native not only solves the performance issue present on other hybrid solutions, it improves the application quality with a native user experience<\/a>.<\/p>\n

Now let’s say you have already implemented a React web application. It’s up and running, you have used the whole Redux pattern stack<\/a>, configured webpack for bundling, created actions, reducers, all HTTP requests for API integration, tests, etc. You don’t want to re-implement everything (even if it’s just copying and pasting from the webapp). It’s not just a matter of development time, you would have to manually keep track of updates on both of them, fix bugs on both codebases, and so on. Reusing code is a good idea in the short and long terms.<\/span><\/p>\n

 <\/p>\n

Sold! Tell me how…<\/span><\/h2>\n

You can easily inject your web application code as a dependency of your mobile code, using npm. This way you normally access your actions, reducers or helper functions from React Native as any other dependency. And further on, it’s possible to separate the logical part, that is shared between applications, in a different directory.<\/span><\/p>\n

\"\"<\/span><\/p>\n

The view part will have to be done from scratch. Not only because it’s necessary to replace the HTML elements with React Native components, but also because the components will probably have a very different behaviour on the mobile app.<\/p>\n

Wait a second, if all platforms share so much code, why don’t we put everything under the same codebase? Well, source code is not the only part of it, each project has a very distinct development environment, build scripts, tests and so on. They could actually reside in separate folders under the same repo: mobile, web and modules. But what if someone has to release a bug fix on a webapp component, it affects other devs that are only working on the mobile components and the other way around. That’s not scalable. Splitting is good<\/a>.<\/span><\/p>\n

 <\/p>\n

Wrapping Up<\/h2>\n

React Native still has a lot to evolve and it doesn’t replace real native coding, yet. But it opens mobile development<\/a> doors for a huge number of web engineers, that now are a few API docs away from building good-quality mobile applications. It makes possible to share most of the core logic between web and mobile applications, not only reducing development time, but also creating applications with a more consistent behavior. Together with a native look and feel, it improves user experience and product standards.<\/span><\/p>\n

Interested on seeing a sample application on this subject? Drop me a line and I’ll be glad to prepare part 2!<\/span><\/p>\n

\"\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Hybrid technologies have been employed for quite a while in mobile application development. Frameworks such as PhoneGap and Ionic come with an appealing motto: Develop once, run everywhere. And they actually do what they promise: you write a web-based app once and release it everywhere, from iOS to Android and the Gates of Mordor, as […]<\/p>\n","protected":false},"author":65,"featured_media":8920,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[471,344],"tags":[],"class_list":["post-4810","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-engenharia","category-opiniao"],"yoast_head":"\nSharing code between platforms: my approach to ReactJS and React Native | Cheesecake Labs<\/title>\n<meta name=\"description\" content=\"Here are my insights on how to implement a reusable codebase that can be shared across ReactJS and React Native apps, helping you save development time.\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sharing code between platforms: my approach to ReactJS and React Native | Cheesecake Labs\" \/>\n<meta property=\"og:description\" content=\"Here are my insights on how to implement a reusable codebase that can be shared across ReactJS and React Native apps, helping you save development time.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blog-stg.cheesecakelabs.com\/br\/sharing-code-reactjs-react-native\/\" \/>\n<meta property=\"og:site_name\" content=\"Cheesecake Labs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/cheesecakelabs\" \/>\n<meta property=\"article:published_time\" content=\"2016-08-29T17:41:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-01T17:55:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/08\/Banner_reactnative4.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Cheesecake Labs\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@cheesecakelabs\" \/>\n<meta name=\"twitter:site\" content=\"@cheesecakelabs\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/sharing-code-reactjs-react-native\/\",\"url\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/sharing-code-reactjs-react-native\/\",\"name\":\"Sharing code between platforms: my approach to ReactJS and React Native | Cheesecake Labs\",\"isPartOf\":{\"@id\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/#website\"},\"datePublished\":\"2016-08-29T17:41:49+00:00\",\"dateModified\":\"2022-07-01T17:55:36+00:00\",\"author\":{\"@type\":\"person\",\"name\":\"Bernardo Smaniotto\"},\"description\":\"Here are my insights on how to implement a reusable codebase that can be shared across ReactJS and React Native apps, helping you save development time.\",\"breadcrumb\":{\"@id\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/sharing-code-reactjs-react-native\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog-stg.cheesecakelabs.com\/br\/sharing-code-reactjs-react-native\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/sharing-code-reactjs-react-native\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sharing code between platforms: my approach to ReactJS and React Native\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/#website\",\"url\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/\",\"name\":\"Cheesecake Labs\",\"description\":\"Empresa de desenvolvimento e design de aplicativos mobile & web que est\u00e1 reinventando o desenvolvimento de produtos com times remotos. N\u00f3s desenvolvemos aplicativos iOS, Android e aplica\u00e7\u00f5es Web com as melhores empresas dos EUA, do Brasil e do mundo.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"name\":\"Bernardo Smaniotto\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/11\/bernardo-300x300.jpg\",\"contentUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/11\/bernardo-300x300.jpg\",\"caption\":\"Bernardo Smaniotto\"},\"description\":\"10 years of experience in Marketing and Sales in the Technology sector. My main purpose is help, support and structure efficient operations and also develop independent and multidisciplinary teams.\",\"url\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/\/autor\/bernardo-smaniotto\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Sharing code between platforms: my approach to ReactJS and React Native | Cheesecake Labs","description":"Here are my insights on how to implement a reusable codebase that can be shared across ReactJS and React Native apps, helping you save development time.","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"pt_BR","og_type":"article","og_title":"Sharing code between platforms: my approach to ReactJS and React Native | Cheesecake Labs","og_description":"Here are my insights on how to implement a reusable codebase that can be shared across ReactJS and React Native apps, helping you save development time.","og_url":"https:\/\/blog-stg.cheesecakelabs.com\/br\/sharing-code-reactjs-react-native\/","og_site_name":"Cheesecake Labs","article_publisher":"https:\/\/www.facebook.com\/cheesecakelabs","article_published_time":"2016-08-29T17:41:49+00:00","article_modified_time":"2022-07-01T17:55:36+00:00","og_image":[{"width":2000,"height":720,"url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/08\/Banner_reactnative4.jpg","type":"image\/jpeg"}],"author":"Cheesecake Labs","twitter_card":"summary_large_image","twitter_creator":"@cheesecakelabs","twitter_site":"@cheesecakelabs","twitter_misc":{"Escrito por":null,"Est. tempo de leitura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog-stg.cheesecakelabs.com\/br\/sharing-code-reactjs-react-native\/","url":"https:\/\/blog-stg.cheesecakelabs.com\/br\/sharing-code-reactjs-react-native\/","name":"Sharing code between platforms: my approach to ReactJS and React Native | Cheesecake Labs","isPartOf":{"@id":"https:\/\/blog-stg.cheesecakelabs.com\/br\/#website"},"datePublished":"2016-08-29T17:41:49+00:00","dateModified":"2022-07-01T17:55:36+00:00","author":{"@type":"person","name":"Bernardo Smaniotto"},"description":"Here are my insights on how to implement a reusable codebase that can be shared across ReactJS and React Native apps, helping you save development time.","breadcrumb":{"@id":"https:\/\/blog-stg.cheesecakelabs.com\/br\/sharing-code-reactjs-react-native\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog-stg.cheesecakelabs.com\/br\/sharing-code-reactjs-react-native\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/blog-stg.cheesecakelabs.com\/br\/sharing-code-reactjs-react-native\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog-stg.cheesecakelabs.com\/br\/"},{"@type":"ListItem","position":2,"name":"Sharing code between platforms: my approach to ReactJS and React Native"}]},{"@type":"WebSite","@id":"https:\/\/blog-stg.cheesecakelabs.com\/br\/#website","url":"https:\/\/blog-stg.cheesecakelabs.com\/br\/","name":"Cheesecake Labs","description":"Empresa de desenvolvimento e design de aplicativos mobile & web que est\u00e1 reinventando o desenvolvimento de produtos com times remotos. N\u00f3s desenvolvemos aplicativos iOS, Android e aplica\u00e7\u00f5es Web com as melhores empresas dos EUA, do Brasil e do mundo.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog-stg.cheesecakelabs.com\/br\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-BR"},{"@type":"Person","name":"Bernardo Smaniotto","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/blog-stg.cheesecakelabs.com\/br\/#\/schema\/person\/image\/","url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/11\/bernardo-300x300.jpg","contentUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/11\/bernardo-300x300.jpg","caption":"Bernardo Smaniotto"},"description":"10 years of experience in Marketing and Sales in the Technology sector. My main purpose is help, support and structure efficient operations and also develop independent and multidisciplinary teams.","url":"https:\/\/blog-stg.cheesecakelabs.com\/br\/\/autor\/bernardo-smaniotto\/"}]}},"_links":{"self":[{"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/posts\/4810","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/comments?post=4810"}],"version-history":[{"count":1,"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/posts\/4810\/revisions"}],"predecessor-version":[{"id":10334,"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/posts\/4810\/revisions\/10334"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/media\/8920"}],"wp:attachment":[{"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/media?parent=4810"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/categories?post=4810"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/tags?post=4810"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}