Flutter vs React Native. Který je lepší?

Co je programování CROSS-PLATFORM?

„V oblasti počítačů je software napříč platformami (software pro více platforem nebo software nezávislý na platformě) počítačový software, který je implementován na více výpočetních platformách. [1] Software napříč platformami lze rozdělit na dva typy; jeden vyžaduje samostatnou budovu nebo kompilaci pro každou platformu, kterou podporuje, a druhou lze přímo spustit na jakékoli platformě bez zvláštní přípravy, např. software napsaný v interpretovaném jazyce nebo předem sestavený přenosný bajtkód, pro který tlumočníci nebo run-time balíčky jsou běžné nebo standardní součásti všech platforem. “

Źródło https://en.wikipedia.org/wiki/Cross-platform_software

Programování napříč platformami (v tomto případě mobilní aplikace) není ničím jiným než vytvořením jednoho zdrojového kódu a UX / UI, které zajistí všechny funkce a vzhled na každé z platforem (iOS, Android).

Flutter je na trhu IT dostupný za méně než React Native. Google spustil a vydal nový hybridní nástroj, který nám umožňuje vytvářet hybridní aplikace pro Android a iOS. Novinkou spojenou s tímto produktem je zcela nový programovací jazyk s názvem Dart. Zajímavým faktem je, že Dart 2 Flutter rozpoznává zdrojový kód také napsaný v jiném jazyce, například v jazyce Java, Swift nebo Objective C.

React Native je rámec vyvinutý společností Facebook k vytváření aplikací v nativním stylu pro iOS a Android. JavaScript je společným jazykem pro obě platformy.

Skutečnost, zda je nějaký rámec lepší nebo horší, je do značné míry subjektivním hodnocením. Samozřejmě je těžké nesouhlasit s fakty, že správně zvolený rámec může naši práci zjednodušit, automatizovat jednotlivé pracovní funkce a umožnit nám dělat více s menším řádkem kódu. Nechám vás s otázkou odpovědi.

Trendy Google

Během minulého roku můžeme přesně sledovat popularitu React Native a Flutter. Jak si myslíte, který programovací jazyk se používá častěji?

Instalace a konfigurace

TŘEPETÁNÍ:

Proces instalace se nezdá komplikovaný. Stahování správné sady SDK je poměrně jednoduché a pohodlné. Samozřejmě, v závislosti na platformě, na kterou chcete nainstalovat sadu SDK, jsou rozdíly v instalaci minimální, ale všechno jde jen o stahování komprimovaného balíčku a export cesty nové knihovny.

Příklad instalace Flutter pro platformu MacOS:

1. Stáhněte si příslušný SKD balíček z webových stránek výrobce (https://flutter.io/docs/get-started/install/macos)

2. Rozbalte stažený balíček na místě, které jsme si vybrali

cd ~ / dev

unzip ~ / Soubory ke stažení / flutter_macos_v1.0.0-stable.zip

3. Přidáme knihovnu Flutter na hlavní cestu

export PATH = $ PATH: `pwd` / flutter / bin

Pokud je vaším cílem ověřit, zda mají nainstalovat další nástroje nebo balíčky ovladačů, které neznáte a které jsou nezbytné pro dokončení nastavení pomocí nápovědy, dorazí příkaz „flutter doctor“.

flutter doktor

Tento příkaz důkladně ověří vaše vývojové prostředí a zobrazí příslušnou zprávu v terminálu.

Pokud jde o samostatnou instalaci jazyka Dart, není to nutné. Je součástí Flutter SDK. Seznam balíčků je důležité pečlivě ověřit, protože například v sadě Android SDK může něco chybět a budeme muset něco nainstalovat. Více informací o tomto odkazu naleznete zde [https://flutter.io/docs/get-started/install].

REAKTIVNÍ NATIVE:

Instalace základních komponentů pro práci s React Native jako v případě Flutteru není složitá. Například pro platformu macOS probíhá instalace pomocí Homebrew takto:

vařit instalační uzel

vařit instalaci hlídače

Je důležité, aby verze uzlu byla 8,3 nebo novější. Watchman je nástroj napsaný Facebookem ke sledování změn v souborech. Myslím, že to stojí za instalaci.

Dalším krokem je instalace „Reagovat Nativní CLI“. Díky Node můžeme použít instalátor balíků, tj. Npm.

npm install -g React-native-cli

Více informací naleznete zde [https://facebook.github.io/react-native/docs/getting-started.html].

Struktura kódu

TŘEPETÁNÍ:

Ve srovnání s RN Flutter neodděluje data, styly a šablony. Znalost RN se zdá být neobvyklá, ale může to být určitým způsobem výhodné. Flutter vám ušetří čas tím, že eliminuje nutnost přechodu z designu na kód a naopak.

PŘÍKLAD KÓDU V DART

import 'balíček: flutter / material.dart';

void main () => runApp (MyApp ());

třída MyApp rozšiřuje StatelessWidget {

@override

Sestavení widgetu (kontext BuildContext) {

návrat MaterialApp (

title: „Vítejte u Flutteru“,

domů: Lešení (

appBar: AppBar (

title: Text („Welcome to Flutter“),

),

tělo: Centrum (

child: Text („Hello World“),

),

),

);

}

}

Zdroj https://flutter.io/docs/get-started/codelab

REAKTIVNÍ NATIVE:

React Native používá JavaScript jako programovací jazyk, o kterém víme, že je velmi dobře používán. Používá se jako výchozí skriptovací jazyk pro vytváření webových stránek, v současné době také pro vytváření mobilního softwaru a rámec Node.js představil JavaScript pro programování serverů, který ukazuje jeho široké aplikace.

PŘÍKLAD KÓDU V RN

import React, {Component} from 'React';

importovat {Text, View} z "reag-native";

export výchozí třídy HelloWorldApp rozšiřuje komponentu {

poskytnout() {

vrátit se (

Ahoj svět!

);

}

}

Podpora IDE

Třepetání:

Flutter je docela nový hybridní software a bohužel není podporován všemi editory. V současné době provozuje Flutter:

- Android Studio (https://developer.android.com/studio/)

- kód VS (https://developer.android.com/studio/)

- IntelliJ IDEA (https://www.jetbrains.com/idea/)

Nativní reakce:

React Native existuje již více než 3 roky, a proto jej podporuje téměř každý editor IDE dostupný na trhu, například:

- Nuclide (https://nuclide.io/)

- Atom (https://atom.io/)

- Sublime Text (https://www.sublimetext.com/)

- kód VS (https://code.visualstudio.com/)

  • WebStorm (https://www.jetbrains.com/webstorm/

Výkon

Vyrovnat výkon Flutter s React Native je v podstatě to, že React Native potřebuje specifický most JS pro interakci s nativními prvky. Architektura React se skládá ze dvou hlavních částí, tj. JavaScriptu a nativního programovacího jazyka. Pravděpodobně se ptáte, co se přesně děje? Aplikace zpočátku funguje pomocí JavaScriptu, ale za účelem interakce se zařízením (např. Dotykové události), používá most, který je příkazem převést odpovídající komponenty (proměnné JavaScriptu) na nativní.

Flutter nevyžaduje most pro interakci s komponentami operačního systému. Výhodou Flutteru oproti RN je jejich minimalizace, protože s Skia Engineem řeší mnoho problémů. Jak jsem zmínil výše, Flutter používá Dart, ale v jeho jádru najdeme také rychlý jazyk, kterým je C ++. Výsledkem je, že vygenerovaná aplikace má vysoké fps, které se zdá být vloženo do prohlížeče.

Reagovat Native je velmi odolný. Negativním efektem je, že pomalý je v rozsahu, o kterém dokonce mluvíme o animacích. Velkým problémem na získané úrovni jsou fakta: JS v nativním kódu.

Stručně shrnuto, porovnání výkonu Flutter vs React Native lze popsat takto:

Flutter je nativní aplikace v reálném čase, zatímco React Native je známá aplikace používající JavaScript a React. Tento názor je samozřejmě subjektivní. Co si o tom myslíš?

Když se ptáte sami sebe, který rámec je pro vás lepší, přemýšlejte o tom, zda je pro vás parametr výkonu, který jsme přesunuli výše, tak důležitý. Příklad, který jsem uvedl o špatných výsledcích animace RN, byl vyřešen pomocí knihoven, stejně jako Flutter.

Příklady aplikací vytvořených pomocí jedné a druhé technologie

Přestože je Flutter poměrně mladý rámec, myslím, že můžeme říci, že může konkurovat React Native. Níže jsou uvedeny aplikace, které používají specifické technologie.

Hot Reload Support

Pomocí rámců React Native a Flutter můžeme zapomenout na ruční kompilaci kódu. Průběh práce na aplikaci lze pravidelně sledovat z náhledu Hot Reload. Díky této funkci to po provedení změn v souboru provede automatické opětovné načtení automaticky, překompiluje kód a umožňuje zachovat myšlenku rychlého opětovného načtení aplikace a zachování nové verze upravených souborů.

Závěr

React Native i Flutter mají své klady a zápory. Který jazyk si vyberete as kým budete pracovat pohodlněji, záleží pouze na vás. Pokud se chcete o těchto jazycích dozvědět více, zanechte komentář. Připravíme pro vás něco!

Nakonec uvádíme krátké grafické shrnutí obou jazyků.