{"id":6643,"date":"2022-08-12T09:47:50","date_gmt":"2022-08-12T06:47:50","guid":{"rendered":"https:\/\/softcand.com\/?p=6643"},"modified":"2022-08-12T09:47:50","modified_gmt":"2022-08-12T06:47:50","slug":"flutter-ile-react-native-arasindaki-farklar-2022","status":"publish","type":"post","link":"https:\/\/softcand.com\/tr\/flutter-ile-react-native-arasindaki-farklar-2022\/","title":{"rendered":"Flutter \u0130le React Native Aras\u0131ndaki Farklar 2022"},"content":{"rendered":"<p>Bugun sizlerle Flutter ile React Native dilleri aras\u0131ndaki farklar\u0131, art\u0131 ve eksi y\u00f6nleri payla\u015faca\u011f\u0131z. Bu g\u00fcnlerde \u00f6ne \u00e7\u0131kan ve pop\u00fcler olan iki mobil cross platform var. Bunlar React native ve Flutter. \u0130kisinin benzer \u00f6zellikleri olsa da birbirinden ayr\u0131ld\u0131klar\u0131 \u00f6nemli konular da var. Bu yaz\u0131m\u0131zda \u00f6ncelikle Flutter ve React Native tan\u0131yarak ba\u015flayal\u0131m.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>K\u0131saca Flutter<\/strong><br><img loading=\"lazy\" decoding=\"async\" width=\"602\" height=\"296\" src=\"https:\/\/lh5.googleusercontent.com\/6C2a-tiPD-bMtuRe-NxnuPOf2b2J9NMViIxFsLebBlO81hp7twpLs3nrW-u7Ykn30QsZG0S75PmD3omwmynpjweEyjNXlXPQyNPRur3WQjOlvD40UDZJSQRSserFQdHkdGIrkMCweMOTzPLkUcTYFo0\"><\/h2>\n\n\n\n<p>Flutter 2017 y\u0131l\u0131nda , Google taraf\u0131ndan olu\u015fturun a\u00e7\u0131k kaynakl\u0131 bir UI yaz\u0131l\u0131m geli\u015ftirme arac\u0131d\u0131r. \u0130lk \u00e7\u0131kt\u0131\u011f\u0131ndan beri geli\u015ftirmeler alan Flutter 5 y\u0131l i\u00e7inde hatalar\u0131ndan ar\u0131nm\u0131\u015f ve cross platform i\u00e7in uygulama geli\u015ftirmede popular bir geli\u015ftirme kiti olmu\u015ftur.<\/p>\n\n\n\n<p>Flutter \u00fczerinden geli\u015ftirmeye ba\u015flamadan \u00f6nce yapman\u0131z gereken ilk \u015fey Dart yaz\u0131l\u0131m dilini \u00f6\u011frenmelisiniz. Flutter bir UI geli\u015ftirme arac\u0131\u00a0 iken g\u00fc\u00e7 ald\u0131\u011f\u0131 programlama dili Dart <a href=\"https:\/\/softcand.com\/tr\/\" target=\"_blank\" data-type=\"page\" data-id=\"4412\" rel=\"noreferrer noopener\">yaz\u0131l\u0131m<\/a> dilidir. Darta ne kadar hakim olursan\u0131z Flutter i\u00e7inde performansl\u0131 uygulama geli\u015ftirmeniz o kadar kolay olacakt\u0131r.\u00a0<\/p>\n\n\n\n<p>Flutter kodu, herhangi bir cihazda h\u0131zl\u0131 performans sa\u011flamak i\u00e7in JavaScript&#8217;in yan\u0131 s\u0131ra direkt olarak ARM veya Intel makine koduna derlenir. Bu sebeple performans olarak iyi seviyededir.<\/p>\n\n\n\n<p>Flutter ayn\u0131 zamanda Hot Reload \u00f6zelli\u011fi ile yapt\u0131\u011f\u0131n\u0131z de\u011fi\u015fiklikleri kaydetti\u011finiz an geli\u015ftirme ekran\u0131nda kar\u015f\u0131l\u0131\u011f\u0131n\u0131 g\u00f6rmektesiniz. Bu \u00f6zellik ekran geli\u015ftirme s\u0131ras\u0131nda \u00f6nemini g\u00f6stermektedir.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">&nbsp;<\/h2>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>K\u0131saca React Native<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/Lnzi-tCbxW8-3Ug1nIRJhJrb6esjyZE8UpYwxs9TRhMgUg9iD2oikBAPVm7Cj_sZgLo_3XXjX0M7gZTathpI51XsVH1-yMoyKBhYydvsJMs3PdhcE9Y88jRbaVBtNFYGMa-GhLK0ZGB5ddLEAaDG-_c\" alt=\"\" width=\"524\" height=\"294\"\/><\/figure>\n\n\n\n<p>React Native Facebook taraf\u0131ndan \u00fcretilen, cross-platform mobil uygulama geli\u015ftirme olana\u011f\u0131 sa\u011flayan bir framework olarak adland\u0131rabiliriz. Tek bir kod taban\u0131 \u00fczerinden farkl\u0131 i\u015fletim sistemine sahip mobil cihazlara uygulama geli\u015ftirmemize sa\u011flayan React Native\u2019i biraz daha yak\u0131ndan inceliyelim.<\/p>\n\n\n\n<p>Flutter da oldu\u011fu gibi bu framework\u00fcn arkas\u0131nda b\u00fcy\u00fck bir \u015firket bulunmaktad\u0131r. Flutter da Google olan firma React Native taraf\u0131nda Facebook olmu\u015ftur. Facebook\u2019un ortaya \u00e7\u0131kard\u0131\u011f\u0131 bu framework\u00fc kendi uygulamalar\u0131 i\u00e7in de kullanmakta.<\/p>\n\n\n\n<p><a href=\"https:\/\/reactnative.dev\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/reactnative.dev\/\" rel=\"noreferrer noopener\">React Native<\/a> ba\u015flamadan \u00f6nce bilmeniz gereken programlama dili javascript olmas\u0131 gerekiyor. Ayn\u0131 \u015fekilde javascriptte Facebook taraf\u0131ndan geli\u015ftirilmi\u015f nesneye y\u00f6nelik programlama dili olarak hayat\u0131m\u0131za girmi\u015ftir.<\/p>\n\n\n\n<p>React Native, kullan\u0131c\u0131 aray\u00fcz\u00fc olu\u015fturmak i\u00e7in g\u00fcc\u00fcn\u00fc JavaScript kitapl\u0131\u011f\u0131 olan React\u2019tan almaktad\u0131r. G\u00fcn\u00fcm\u00fczde web uygulamas\u0131 i\u00e7in kullan\u0131lan React\u2019\u0131n g\u00fcc\u00fcn\u00fc kullanarak native uygulamalar yazabilirsiniz. JavaScript ve React bilginiz varsa React-Native size hi\u00e7 de yabanc\u0131 gelmeyecek.<\/p>\n\n\n\n<p>Hot Reload \u00f6zelli\u011fi ayn\u0131 \u015fekilde React-Native de bulunmaktad\u0131r. Kod ekran\u0131nda yapt\u0131\u011f\u0131n\u0131z de\u011fi\u015fikli\u011fi anl\u0131k olarak da geli\u015fim ekran\u0131 \u00fczerinden de g\u00f6rebilirsiniz.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><\/strong><\/h2>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Flutter ve React Native Kar\u015f\u0131la\u015ft\u0131rmas\u0131<\/strong><\/h2>\n\n\n\n<p>\u0130ki mobil uygulama geli\u015ftirme ortam\u0131 da cross-platform hedefleyen ortamlar kullan\u0131c\u0131ya sunmaktad\u0131r.\u0130kisi de ayn\u0131 \u015feyi yapmas\u0131na kar\u015f\u0131 birbirinden de farkl\u0131l\u0131klar\u0131 vard\u0131r. Bu b\u00f6l\u00fcmde bunlar\u0131 inceleyece\u011fiz.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Programlama Dili Fark\u0131<\/strong><\/h3>\n\n\n\n<p>Flutter, Google taraf\u0131ndan geli\u015ftirilen Dart yaz\u0131l\u0131m dili \u00fczerine geli\u015ftirilmi\u015ftir. Daha \u00f6nce nesneye y\u00f6nelik bir programlama dili bilginiz varsa Dart yaz\u0131l\u0131m diline al\u0131\u015fman\u0131z kolay olacakt\u0131r.<\/p>\n\n\n\n<p>React Native\u2019in g\u00fc\u00e7 ald\u0131\u011f\u0131 yaz\u0131l\u0131m dili olarak JavaScript\u2019i kullan\u0131r. JavaScript d\u00f6k\u00fcmantasyon fazlal\u0131\u011f\u0131 ve yayg\u0131nl\u0131\u011f\u0131 ile \u00f6\u011frenmesi daha kolay bir yaz\u0131l\u0131m dili seviyesine gelmi\u015ftir.<\/p>\n\n\n\n<p><strong>Flutter ile React Native<\/strong> k\u0131yaslayacak olursak, JavaScript \u00e7o\u011fu web geli\u015ftiricisi taraf\u0131ndan yayg\u0131n olarak kullan\u0131ld\u0131\u011f\u0131ndan ve JavaScript hakk\u0131nda internet d\u00fcnyas\u0131ndan daha fazla bilgi alaca\u011f\u0131n\u0131z i\u00e7in , React Native\u2019i sizin i\u00e7in daha kolay olacakt\u0131r.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>UI Bile\u015feni ve Geli\u015ftirme API\u2019si<\/strong><\/h3>\n\n\n\n<p>React Native, mevcut iOS ve Android kodunu JavaScript mod\u00fclleri olarak yeniden kullanman\u0131za ve yerel UI bile\u015fenleriniz ile bunlar\u0131 olu\u015fturmay\u0131 i\u015fleyecek JavaScript kodu aras\u0131ndaki k\u00f6pr\u00fcy\u00fc manuel olarak olu\u015fturmak i\u00e7in baz\u0131 API&#8217;leri a\u00e7\u0131\u011fa \u00e7\u0131karman\u0131za olanak tan\u0131yan bir k\u00f6pr\u00fcyle birlikte gelir.<\/p>\n\n\n\n<p>Flutter, UI olu\u015fturma, cihaz API eri\u015fimi, test etme gibi bir\u00e7ok kitapl\u0131k y\u00fckl\u00fc \u015fekilde geli\u015ftiriye gelir. Bu zengin component k\u00fcmesi, d\u0131\u015fardan bir kitapl\u0131k kullanma ihtiya\u00e7 duyman\u0131z\u0131 en aza indirmektedir.Flutter ayr\u0131ca, geli\u015ftiricilerin hem iOS hem de Android platformunda kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc kolayca olu\u015fturmalar\u0131na olanak tan\u0131yan Materyal Tasar\u0131m ve Cupertino i\u00e7in widgetlara sahiptir.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Mobil platformlar aras\u0131nda kodun yeniden kullan\u0131m\u0131<\/strong><\/h3>\n\n\n\n<p>React Native, hem iOS hem de Android geli\u015ftirirken kullan\u0131labilecek kendi API setiyle birlikte gelir.Dilerseniz iOS ve Android uygulamalar\u0131n\u0131z aras\u0131nda payla\u015f\u0131lan bile\u015fenler yazman\u0131z da m\u00fcmk\u00fcn.<\/p>\n\n\n\n<p>Flutter uygulamalar\u0131, platforma \u00f6zel kodlarla olu\u015fturulmu\u015ftur, bu nedenle iOS ve Android uygulaman\u0131z aras\u0131nda herhangi bir kod payla\u015fman\u0131z m\u00fcmk\u00fcn de\u011fildir. Ancak, mevcut yerel bile\u015fenlerin yeniden kullan\u0131m\u0131n\u0131 kolayla\u015ft\u0131rmak i\u00e7in \u00fc\u00e7\u00fcnc\u00fc parti kitapl\u0131klar\u0131 mevcuttur.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Performans<\/strong><\/h3>\n\n\n\n<p>\u00a0React Native JavaScript dillerinde yaz\u0131lm\u0131\u015ft\u0131r. Uygulamalar i\u00e7in y\u00fcksek d\u00fczeyde performans g\u00f6stermek i\u00e7in yeterli de\u011fildir. Bu nedenle, geli\u015ftiricilerin istenen etkiyi elde etmek i\u00e7in ekstra etkile\u015fimleri yerel olanlarla birle\u015ftirmesi gerekir. React Native&#8217;in mimarisi JavaScript ve yerel olmak \u00fczere iki b\u00f6l\u00fcmden olu\u015ftu\u011fundan, \u00e7er\u00e7evenin yerel \u00f6\u011felerle etkile\u015fime girmesi i\u00e7in bir JS k\u00f6pr\u00fcs\u00fc gerekir. Bu, React Native&#8217;i di\u011fer ara\u00e7lardan biraz daha yava\u015f yapan ba\u015fka bir \u015feydir.<\/p>\n\n\n\n<p>Flutter Dart dilinde yaz\u0131lm\u0131\u015ft\u0131r, bu da JavaScript&#8217;ten daha h\u0131zl\u0131 bir kod derlemeye izin verir. \u00dcstelik bu sayede Flutter, animasyonlar\u0131 standart olarak 60 fps&#8217;de g\u00f6steriyor. Flutter, kullan\u0131c\u0131lara istenen sonu\u00e7lara ula\u015fmalar\u0131na yard\u0131mc\u0131 olacak \u00f6neriler sunar.<\/p>\n\n\n\n<p>&nbsp;Bu \u00f6neriler \u015funlar\u0131 i\u00e7erir:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Tree shaking ve deferred loading ile performans optimizasyonu<\/li><li>G\u00f6r\u00fcnt\u00fc yer tutucular\u0131, \u00f6nbelle\u011fe alma ve devre d\u0131\u015f\u0131 b\u0131rak\u0131lm\u0131\u015f gezinme ge\u00e7i\u015fleriyle performans iyile\u015ftirmesi<\/li><li>Performans g\u00f6steren Flutter widget&#8217;lar\u0131 olu\u015fturma<\/li><\/ul>\n\n\n\n<p>Ayr\u0131ca Flutter, yap\u0131m maliyetlerini kontrol etmenizi, efektleri ve widget&#8217;lar\u0131 yaln\u0131zca ger\u00e7ekten ihtiyac\u0131n\u0131z oldu\u011funda uygulaman\u0131z\u0131, \u0131zgaralar ve listeler i\u00e7in tembel y\u00f6ntemler kullanman\u0131z\u0131 ve \u00e7er\u00e7eveleri 16 ms&#8217;de olu\u015fturman\u0131z\u0131 ve g\u00f6r\u00fcnt\u00fclemenizi \u00f6nerir. Flutter, React Native performans\u0131na k\u0131yasla daha \u00f6n\u00fcnde bulundu\u011funu s\u00f6yleyebiliriz.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Destek ve Topluluklar<\/strong><\/h3>\n\n\n\n<p>React Native\u2019in en b\u00fcy\u00fck art\u0131lar\u0131ndan biri sahip oldu\u011fu topluluktur. Uzun y\u0131llard\u0131r hayat\u0131m\u0131zda olmas\u0131yla birlikte sizin ya\u015fad\u0131\u011f\u0131n\u0131z hatay\u0131 biri ya\u015fam\u0131\u015f ve bu topluluklar \u00fczerinden \u00e7\u00f6z\u00fcme kavu\u015fturmu\u015ftur. Ya\u015fayaca\u011f\u0131n\u0131z bir hatan\u0131n \u00e7\u00f6z\u00fcm\u00fcn\u00fc <a href=\"http:\/\/www.stackoverflow.com\" target=\"_blank\" data-type=\"URL\" data-id=\"www.stackoverflow.com\" rel=\"noreferrer noopener\">stackoverflow<\/a> gibi topluluklarda \u00e7ok rahatl\u0131kla bulabilirsiniz.<\/p>\n\n\n\n<p>Flutter ise React Native g\u00f6re gen\u00e7 ve bu sebeple topluluk konusunda Reacttan daha geridedir. Ancak zaman ge\u00e7tikce Flutter da geni\u015f bir toplulu\u011fa sahip olacak ve bu konuda size yard\u0131mc\u0131 olacakt\u0131r. Yeni ba\u015flayacaksan\u0131z Flutter topluluklar\u0131ndan yararlanabilir ancak spesif bir sorunda \u00e7\u00f6z\u00fcm konusunda sizi zorlayacakt\u0131r.&nbsp;<\/p>","protected":false},"excerpt":{"rendered":"<p>Bugun sizlerle Flutter ile React Native dilleri aras\u0131ndaki farklar\u0131, art\u0131 ve eksi y\u00f6nleri payla\u015faca\u011f\u0131z. Bu g\u00fcnlerde \u00f6ne \u00e7\u0131kan ve pop\u00fcler olan iki mobil cross platform var. Bunlar React native ve Flutter. \u0130kisinin benzer \u00f6zellikleri olsa da birbirinden ayr\u0131ld\u0131klar\u0131 \u00f6nemli konular da var. Bu yaz\u0131m\u0131zda \u00f6ncelikle Flutter ve React Native tan\u0131yarak ba\u015flayal\u0131m. K\u0131saca Flutter Flutter 2017 [&hellip;]<\/p>","protected":false},"author":1,"featured_media":6644,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[58],"tags":[80,81,82],"class_list":["post-6643","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-genel","tag-flutter","tag-flutter-ile-react-native-arasindaki-farklar","tag-react-native"],"acf":[],"_links":{"self":[{"href":"https:\/\/softcand.com\/tr\/wp-json\/wp\/v2\/posts\/6643","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/softcand.com\/tr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/softcand.com\/tr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/softcand.com\/tr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/softcand.com\/tr\/wp-json\/wp\/v2\/comments?post=6643"}],"version-history":[{"count":0,"href":"https:\/\/softcand.com\/tr\/wp-json\/wp\/v2\/posts\/6643\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/softcand.com\/tr\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/softcand.com\/tr\/wp-json\/wp\/v2\/media?parent=6643"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/softcand.com\/tr\/wp-json\/wp\/v2\/categories?post=6643"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/softcand.com\/tr\/wp-json\/wp\/v2\/tags?post=6643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}