{"id":5334,"date":"2017-09-14T16:35:16","date_gmt":"2017-09-14T16:35:16","guid":{"rendered":"https:\/\/cheesecakelabs.com\/blog\/?p=5334\/"},"modified":"2022-07-01T17:32:39","modified_gmt":"2022-07-01T17:32:39","slug":"native-react-native","status":"publish","type":"post","link":"https:\/\/cheesecakelabs.com\/blog\/native-react-native\/","title":{"rendered":"From native to React Native"},"content":{"rendered":"

After developing mobile applications for more than eight months, I had the opportunity of joining a project that was being developed using React Native<\/a>, an open source JavaScript library<\/span> that, according to its documentation, lets you build mobile apps using only JavaScript. I always loved challenges and learning new things, so I immediately accepted this opportunity.<\/span><\/p>\n

<\/p>\n

React Native it’s a very new technology announced on the beginning of 2015 \u2013 just a couple years ago \u2013 where the main objective is to allow the development of mobile apps using the same design as React<\/a><\/span>, letting you compose a rich mobile UI from declarative components.<\/span><\/p>\n

If you haven’t heard about these technologies, you should definitely read about \u2013 but for now let’s focus on my experience when I started using them.<\/span><\/p>\n

First steps<\/strong><\/h2>\n

There were so much stuff to learn at the beginning that I felt overwhelmed. One of the biggest challenges when I started was JavaScript itself: a high-level, multi-paradigm, dynamic, weakly typed, object-based programming language.<\/span><\/p>\n

Migrating from Swift, the weakly typed treat was one of the biggest differences at first. This means it is not necessary to determinate the type of variables or parameters of functions at compiling time, allowing, for example \u2013 and you can see on the sample code below \u2013 the function argument <\/span>arg<\/span><\/em> to be either a number, a string, an object or even a function, thus being impossible to know that just by reading the method declaration.<\/span><\/p>\n

function logType(arg) {\n    console.log(typeof(arg))\n}\n\nlogType(150) \/\/ output: number\nlogType(\"150\") \/\/ output: string\nlogType({ value: 150 }) \/\/ output: object\nlogType(function someFunction() {}) \/\/ output: function\n<\/code><\/pre>\n
A more concise way to write functions is to use arrow functions (changing the way functions are binded): <\/span><\/p>\n
logType = (param) => {\n    console.log(typeof(param))\n}\n<\/code><\/pre>\n
The next step was learning the principles of <\/span>React<\/b>, which forces the developer to break the application into small components. That was something that I was already used to while developing native apps, so it was an easy step. The only small change at this stage was to learn how to style the components. Styles on <\/span>React Native <\/b>are done using JavaScript objects with properties that are very similar with CSS.<\/span><\/p>\n
The big challenge: Redux<\/strong><\/h2>\n
When developing projects using React, one of the first things that you have to understand is that you have to develop thinking on the state of the view\/component. Redux<\/a> is a small library written by Dan Abramov in 2015 that helps the developer to manage the state of the whole application in a single immutable object, working as the source of truth for the app.<\/span><\/p>\n
Besides that, it also works in a reactive manner: meaning that when the redux state is updated, all the components that are connected to it will get the new information and can be re-rendered automatically, updating the UI when some action happens on the app.<\/span><\/p>\n
This is very different from what I was used to do on native apps, especially considering that I was only developing using MVC and VIPER architectures, where the data flows bidirectionally. Managing the state when the information can be flowing in multiple directions sometimes get really tricky.<\/span><\/p>\n
Redux aims to centralize all the information, but it can be hard to grasp at the beginning. After a while you’ll have an ‘ah-ha’ moment and everything will start to make sense.<\/span><\/p>\n
Things I enjoyed the most and not so much<\/strong><\/h2>\n
There were a lot of things that I enjoyed about developing a React Native app<\/a>, like the flexibility that you can get out of JavaScript after get used on how it works and the core concepts of React.<\/span><\/p>\n
Breaking up the views into small components improves the code reuse and makes it easy to see the layout and how the components are combined. It is possible to create abstractions over those components allowing them to be extended, boosting maintainability.<\/span><\/p>\n
One last thing that is definitely worth mentioning is the hot reload feature. I was amazed when I start developing and could see the changes I was making on the layout immediately reflected on the phone. It saves a lot a time when creating new components\/screens or when you need to tweak the design.<\/span><\/p>\n
https:\/\/www.youtube.com\/watch?v=2uQzVi-KFuc<\/a><\/p>\n
On the other hand, there were of course a few things that I didn’t like about the stack. To begin with I could mention the steep learning curve and the huge amount of libraries that I had to study in order to succeed the development of the application.<\/span><\/p>\n
Another huge problem that I faced on the beginning was with navigation. Navigation is still a huge challenge on React Native and there are some open source libs to aid that task, but they are far from the flexibility offered by native coding.<\/span><\/p>\n
Is it worth trying?<\/strong><\/h2>\n
At the beginning, there was so much to learn that I didn’t feel productive at all, but I had my mind prepared for that. After a couple weeks, when I had time to digest all the concepts and practice them all, everything started to change.<\/span><\/p>\n
I had a really great time working with React Native and after developing the base components I felt that creating new screens was even faster than coding on native languages.<\/span><\/p>\n
Besides that, learning the way redux works and manage states also opened my mind for a lot of new possibilities even when developing natively. I strongly believe that knowledge is never enough.<\/span><\/p>\n
Another great factor that makes it easy to develop apps using React Native is the fact that the JavaScript community is huge, this means lots and lots of knowledge shared on Stack Overflow.<\/span><\/p>\n
Last but not least, the one thing that boosted my learning experience of React Native<\/a> was working next to Daniel Leite<\/a>, a front-end specialist on Cheesecake Labs that helped me understand deeply how the library works and how I should use JavaScript in the correct way.<\/span><\/p>\n
\"\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
After developing mobile applications for more than eight months, I had the opportunity of joining a project that was being developed using React Native, an open source JavaScript library that, according to its documentation, lets you build mobile apps using only JavaScript. I always loved challenges and learning new things, so I immediately accepted this opportunity.<\/p>\n","protected":false},"author":65,"featured_media":5354,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[432],"tags":[400,15],"class_list":["post-5334","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-engineering","tag-tag-javascript","tag-tag-mobile"],"yoast_head":"\nFrom native to React Native<\/title>\n<meta name=\"description\" content=\"React Native main objective is to allow the development of mobile apps using the same design as React.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cheesecakelabs.com\/blog\/native-react-native\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"From native to React Native\" \/>\n<meta property=\"og:description\" content=\"React Native main objective is to allow the development of mobile apps using the same design as React.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cheesecakelabs.com\/blog\/native-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=\"2017-09-14T16:35:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-01T17:32:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/nativereact_banner.png\" \/>\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\/png\" \/>\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=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/native-react-native\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/native-react-native\/\"},\"author\":{\"name\":\"Andrio Frizon\"},\"headline\":\"From native to React Native\",\"datePublished\":\"2017-09-14T16:35:16+00:00\",\"dateModified\":\"2022-07-01T17:32:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/native-react-native\/\"},\"wordCount\":964,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/native-react-native\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/nativereact_banner.png\",\"keywords\":[\"JavaScript\",\"Mobile\"],\"articleSection\":[\"Engineering\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/cheesecakelabs.com\/blog\/native-react-native\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/native-react-native\/\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/native-react-native\/\",\"name\":\"From native to React Native\",\"isPartOf\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/native-react-native\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/native-react-native\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/nativereact_banner.png\",\"datePublished\":\"2017-09-14T16:35:16+00:00\",\"dateModified\":\"2022-07-01T17:32:39+00:00\",\"author\":{\"@type\":\"person\",\"name\":\"Andrio Frizon\"},\"description\":\"React Native main objective is to allow the development of mobile apps using the same design as React.\",\"breadcrumb\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/native-react-native\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cheesecakelabs.com\/blog\/native-react-native\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/native-react-native\/#primaryimage\",\"url\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/nativereact_banner.png\",\"contentUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/nativereact_banner.png\",\"width\":2000,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/native-react-native\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cheesecakelabs.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"From native to React Native\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#website\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/\",\"name\":\"Cheesecake Labs\",\"description\":\"Nearshore outsourcing company for Web and Mobile design and engineering services, and staff augmentation for startups and enterprises..\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cheesecakelabs.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"name\":\"Andrio Frizon\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/11\/andrio-300x300.jpg\",\"contentUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/11\/andrio-300x300.jpg\",\"caption\":\"Andrio Frizon\"},\"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:\/\/cheesecakelabs.com\/blog\/autor\/andrio\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"From native to React Native","description":"React Native main objective is to allow the development of mobile apps using the same design as React.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cheesecakelabs.com\/blog\/native-react-native\/","og_locale":"en_US","og_type":"article","og_title":"From native to React Native","og_description":"React Native main objective is to allow the development of mobile apps using the same design as React.","og_url":"https:\/\/cheesecakelabs.com\/blog\/native-react-native\/","og_site_name":"Cheesecake Labs","article_publisher":"https:\/\/www.facebook.com\/cheesecakelabs","article_published_time":"2017-09-14T16:35:16+00:00","article_modified_time":"2022-07-01T17:32:39+00:00","og_image":[{"width":2000,"height":720,"url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/nativereact_banner.png","type":"image\/png"}],"author":"Cheesecake Labs","twitter_card":"summary_large_image","twitter_creator":"@cheesecakelabs","twitter_site":"@cheesecakelabs","twitter_misc":{"Written by":null,"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/cheesecakelabs.com\/blog\/native-react-native\/#article","isPartOf":{"@id":"https:\/\/cheesecakelabs.com\/blog\/native-react-native\/"},"author":{"name":"Andrio Frizon"},"headline":"From native to React Native","datePublished":"2017-09-14T16:35:16+00:00","dateModified":"2022-07-01T17:32:39+00:00","mainEntityOfPage":{"@id":"https:\/\/cheesecakelabs.com\/blog\/native-react-native\/"},"wordCount":964,"commentCount":0,"image":{"@id":"https:\/\/cheesecakelabs.com\/blog\/native-react-native\/#primaryimage"},"thumbnailUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/nativereact_banner.png","keywords":["JavaScript","Mobile"],"articleSection":["Engineering"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/cheesecakelabs.com\/blog\/native-react-native\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/cheesecakelabs.com\/blog\/native-react-native\/","url":"https:\/\/cheesecakelabs.com\/blog\/native-react-native\/","name":"From native to React Native","isPartOf":{"@id":"https:\/\/cheesecakelabs.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cheesecakelabs.com\/blog\/native-react-native\/#primaryimage"},"image":{"@id":"https:\/\/cheesecakelabs.com\/blog\/native-react-native\/#primaryimage"},"thumbnailUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/nativereact_banner.png","datePublished":"2017-09-14T16:35:16+00:00","dateModified":"2022-07-01T17:32:39+00:00","author":{"@type":"person","name":"Andrio Frizon"},"description":"React Native main objective is to allow the development of mobile apps using the same design as React.","breadcrumb":{"@id":"https:\/\/cheesecakelabs.com\/blog\/native-react-native\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cheesecakelabs.com\/blog\/native-react-native\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cheesecakelabs.com\/blog\/native-react-native\/#primaryimage","url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/nativereact_banner.png","contentUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/nativereact_banner.png","width":2000,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/cheesecakelabs.com\/blog\/native-react-native\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cheesecakelabs.com\/blog\/"},{"@type":"ListItem","position":2,"name":"From native to React Native"}]},{"@type":"WebSite","@id":"https:\/\/cheesecakelabs.com\/blog\/#website","url":"https:\/\/cheesecakelabs.com\/blog\/","name":"Cheesecake Labs","description":"Nearshore outsourcing company for Web and Mobile design and engineering services, and staff augmentation for startups and enterprises..","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cheesecakelabs.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","name":"Andrio Frizon","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cheesecakelabs.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/11\/andrio-300x300.jpg","contentUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/11\/andrio-300x300.jpg","caption":"Andrio Frizon"},"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:\/\/cheesecakelabs.com\/blog\/autor\/andrio\/"}]}},"_links":{"self":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/5334","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/comments?post=5334"}],"version-history":[{"count":1,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/5334\/revisions"}],"predecessor-version":[{"id":10270,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/5334\/revisions\/10270"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/media\/5354"}],"wp:attachment":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/media?parent=5334"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/categories?post=5334"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/tags?post=5334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}