Flutter

Krzysztof Kempiński
kkempin’s dev blog
8 min readJul 3, 2024

W ramach podcastu “Porozmawiajmy o IT” miałem okazję porozmawiać z Adamem Stelmaszykiem o Flutter.

Posłuchaj naszej rozmowy w wersji audio 🎧 👇

Cześć!

Mój dzisiejszy gość od ponad 5 lat komercyjnie projektuje i tworzy aplikacje mobilne w technologii Flutter. Obecnie pełni rolę senior Flutter developera w jednej z największych firm Flutterowych w Czechach EmbedIT. Po godzinach działa jako freelancer oraz rozwija swoje własne projekty. W swojej karierze napisał kilkanaście różnych Flutterowych aplikacji mobilnych i webowych, z których jedna osiągnęła ponad 1 mln pobrań. W wolnym czasie jest pasjonatem podróży, zwłaszcza tych dalekich i nieoczywistych. Moim i Waszym gościem jest Adam Stelmaszyk.

Cześć, Adam. Bardzo miło mi gościć Cię w podcaście.

Cześć, miło się spotkać.

Dla tych wszystkich, którzy uważnie słuchali Twojego przedstawienia, jasna już jest tematyka tego odcinka. Będzie o Flutter, masz dużo doświadczenia zawodowego związanego z tą technologią, więc bardzo się cieszę, że będziemy mogli o niej porozmawiać. Sam będę miał okazję się przy tym czegoś nauczyć, bo nigdy nie miałem sposobności działać we Flutterze, więc tym bardziej się cieszę na nasze spotkanie.

Zanim przejdziemy do tych technicznych pytań, to chciałbym Ci zadać takie bardziej otwierające pytanie, czy słuchasz podcastów. Jeśli tak, to może masz jakieś ciekawe audycje, o których chciałbyś powiedzieć słuchaczom?

Tak, nie słucham może jakoś bardzo intensywnie podcastów, ale na pewno bardzo ciekawym podcastem jest Porozmawiajmy o IT. Nie wiem, czy też słuchasz. Ale też z takich popularnonaukowych, trochę technicznych, ale nie aż tak bardzo, to Techstorie. Ich słuchanie wyszło przez przypadek, bo panią Sylwię Czubaszek spotkałem w Japonii, wymieniliśmy się po krótkiej rozmowie instagramami i tak dowiedziałem się, że ona nagrywa te Techstoria i dlatego zostałem z nimi dłużej. Poza podcastami korzystam np. z TechCruncha, czytam blogi lub też z Medium lubię pozyskiwać informacje.

Fajnie, dzięki za te rekomendacje. To może zacznijmy od tego, czym w ogóle ten Flutter jest, skąd się wywodzi, dlaczego powstał i na jakim języku programowania bazuje. Myślę, że to są takie podstawy, które pozwolą nam później pójść dalej.

Flutter to platforma, framework od Google’a, który bazuje na języku Dart. W zasadzie Dart tak naprawdę w niczym innym nie jest wykorzystywany czy znany, jak tylko we Flutterze. Obecnie we Flutterze można stworzyć tak naprawdę wszystko, od aplikacji mobilnych, webowych, poprzez desktopowe, i jest nawet framework do backendu. Ale takim głównym corem Fluttera są aplikacje mobilne i najczęściej w firmach jest on wykorzystywany do tego.

I może trochę wróćmy do początku, porozmawiajmy o tym języku, Darcie. Powstał on w 2011 roku, został wtedy zaprezentowany w Korphus, w Danii przez komórkę Google’a, a prace zaczęły się podobno rok wcześniej. Flutter miał też nawet takie zamierzenie, żeby trochę zastąpić JavaScript w webie, ale to się nie udało, Flutter nie jest popularnym frameworkiem dla weba, więc Dart też oczywiście nie poszedł w tę stronę. Ale tak naprawdę, jakby Dart miał swój framework albo bibliotekę Angular Dart, co jest też dość ciekawe, że chcieli coś stworzyć na wzór świata Angularowego, JavaScriptowego, ale finalnie skończyło się na tym, że Dart jest bardzo sprzężony z Flutterem i Flutter go zaadaptował i tak naprawdę pierwsza wzmianka o Darcie była w 2015 roku i w zasadzie nie nazwali tego frameworka Flutterem, ale Sky. I ten framework miał takie założenie, że był dostępny tylko na androida i mógł wyświetlać 120 klatek/sekundę, co w mojej ocenie wówczas było bardzo dużo jak na platformy mobilne. I oni to przez cały czas rozwijali, a w 2017 roku zmienili nazwę na Flutter.

To była bardzo prozaiczna rzecz, dlaczego zmienili nazwę, a mianowicie wyszły względy prawne. W 2018 roku wyszła pierwsza stabilna wersja Fluttera, na androida i iOS-a, później zrobili release, ale jeszcze niestabilny, że można było we Flutterze budować weba i desktopa, i w 2021 roku, kiedy Flutter osiągnął wersję 2.0, platforma webowa stała się stabilna i było już bardziej rekomendowane, żeby budować produkcyjnie aplikacje internetowe we Flutterze, co niektóre firmy zaadaptowały i nawet przed tą stabilną wersją budowały aplikacje webowe.

Rok później Flutter wszedł na 3.0 i wtedy, lub trochę później, weszły stabilne wersje dla Windowsa, Ubuntu i Macrosa, więc Flutter wszedł już również na stabilną wersję dla desktopa. I dla takich geeków technologicznych, Flutter 2024 ma stabilną wersję web assembly dla weba.

Czyli mamy relatywnie młodą technologię, ale z dużym graczem stojącym za nią. Mówiłeś o tej multi platformowości jako o czymś takim, co od początku stało za tworzeniem technologii Flutter, ale to nie jest jedyna technologia multi platformowa, spośród których możemy na rynku wybierać. Jak wygląda konkurencja, obecny rynek, jakie są różnice, mocne strony konkurentów Fluttera?

Właśnie to, co powiedziałeś. Flutter faktycznie ma dość dużą konkurencję i jest w zasadzie jedną z najmłodszych technologii multi platformowych, ale jest bardzo dojrzały i stabilny w porównaniu do innych technologii. Na pewno największym graczem jest React Native, później jest np. Xamarin, Kotlin multiplatform i Cordova.

I zacznijmy od końca, od tych trochę najsłabszych graczy: Cordova albo Ionic. Ja nigdy nie programowałem w tych technologiach, ale o ile wiem, one wykorzystują JavaScript, HTML i CSS do budowania widoków, i to wszystko jest odpalane w web view, tzn., że nie korzystamy z natywnych komponentów środowiska natywnego albo tak jak Flutter nie renderujemy swojego własnego widoku, ale tak jakby zaszyta jest przeglądarka w aplikacji.

To powoduje, że jeżeli chcielibyśmy sobie zrobić jakąś skomplikowaną aplikację, która by miała wiele animacji i wiele jakichś innych rzeczy, mogłoby to nie być do końca optymalne. Po pierwsze nie jest to dobrze przystosowane, sami widzimy, że np. jak korzystamy z jakiejś aplikacji w telefonie, która jest na przeglądarce, to wolimy sobie ściągnąć aplikację mobilną, która działa o wiele płynniej. Możemy to zobaczyć np. na Instagramie — w telefonie, nawet jeśli ktoś ma iPhone’a 14, to działa trochę słabiej od aplikacji mobilnej.

Później następnym takim graczem jest Kotlin multiplatform. Jest on natywnym językiem dla androida. JetBrains stworzył Kotlin multiplatform, w którym można przenieść logikę biznesową z androidowej aplikacji do iOS-owej. Ostatnio czytałem, że stworzyli nawet Compose multiplatform, co jest takim ukłonem nie tylko w stronę budowania logiki dla iOS-a, ale też budowania wyglądu, tego UI-a dla iOS-a, że można korzystać z komponentów, które wytworzy się na androida, na iOS-ie. Jeszcze pół roku temu zależności były tylko logiczne, a wygląd trzeba było tworzyć osobno dla androida i iOS-a, a teraz podobno jest ten Compose multuplatform.

Zabawna rzecz: dla androida jest stabilny, ale dla iOS-a jest cały czas w wersji BETA, co powoduje, że przez cały czas lepiej tworzyć wszystko natywnie, w SWIFT.

Jeszcze mamy dwóch takich graczy. Pierwszy to Xamarin. On ma dużo problemów z wersjonowaniem, z nowymi update’ami. Czasami się okazywało, że jak wyszedł nowy update, to trzeba było przebudowywać cały projekt, więc ja jestem bardzo sceptyczny akurat dla takiego rozwiązania.

I największym konkurentem jest React Native. Oni są na początku tego peletonu i się tylko prześcigają, ile aplikacji jest napisanych we Flutterze, a ile w React Native. I jest on fajnym frameworkiem i jeśli ktoś nie chce wybrać Fluttera, to warto wybrać w mojej ocenie React Native. Dużą jego zaletą i wadą zarazem jest to, że korzysta on z natywnych komponentów iOS-a i androida. To polega na tym, że jeśli iOS sprawi, że strzałka wygląda trochę inaczej, to automatycznie React Native się do tego zaadaptuje, czego akurat Flutter w tym przypadku nie ma.

Ale trzeba pamiętać, że ten kod, który napiszemy w React Native, musi być przetransformowany do kodu natywnego, tego iOS-owego albo androidowego, co powoduje, że mogą być np. problemy z animacjami albo ta multiplatformowość nie jest wcale taka łatwa, bo coś widokowo nam zadziała na androidzie, ale już nie zadziała na iOS-ie, bo pod spodem jest już inna biblioteka, jakieś dependency mogą się zmienić, więc tutaj mogą być takie problemy.

Co jest fajne i co też akurat posiada Flutter, to jest hot reload. Czyli programujemy sobie aplikację i np. chcemy od razu zobaczyć te zmiany, które zaimplementowaliśmy na widoku, więc klikamy sobie komendę i automatycznie nie tracimy skanu ekranu, który posiadamy ani nie cofamy się do początku aplikacji, tylko automatycznie te zmiany są podmieniane, co jest akurat bardzo fajnym rozwiązaniem, bo development jest o wiele szybszy.

I wydaje mi się też, że np. state menadżer, który jest jednym z bardziej popularnych w React Native, tj. Redux. Też jest adaptacja tego Reduxa, tego state menadżera do Fluttera.

Szybki disclaimer: state menadżer to jest taka rzecz w aplikacji, która trzyma stany aplikacji, dane, które są jakimiś danymi biznesowymi. Albo np. state menadżer w zależności od architektury łączy np. widok z warstwą serwisową, czyli tą, z której pobieramy dane z backendu bądź z jakiejś bazy danych, którą mamy wewnętrznie w aplikacji.

Bardzo uczciwie pokazałeś wady i zalety konkurentów Fluttera, to myślę, że teraz warto byłoby powiedzieć, czym ten flutter się wyróżnia, jakie ma zalety na tle konkurencyjnych technologii.

Flutter został stworzony też do bardzo fajnych animacji. Ma swój własny renderer, który nazywa się do dzisiaj Skia, w zasadzie to jest silnik graficzny 2D, który nie został stworzony dla Fluttera i jeszcze niedawno był głównym silnikiem graficznym, ale tak naprawdę flutter teraz zaadaptował do iOS-a Impeller i jest on już w pełni stabilny. I jest on w 100% dedykowany do Fluttera. Czyli on jest stworzony pod niego i na iOS-a jest w stabilnej wersji, ale np. na androida, jeżeli nie obsługuje on innego silnika Volcano, to wtedy Skia wchodzi do gry i przejmuje tę rolę, czyli są tutaj jeszcze jakieś zależności, które są tutaj jakimś problemem. Ale tak ogólnie powiedziałbym, że to jest bardzo fajne, bo te animacje we Flutterze są płynne, co powoduje, że nasz kod Flutterowy nie używa żadnych pomostów do kodu natywnego androidowego i iOS-owego, dzięki czemu możemy robić optymalizację tych widoków, że one mogą się o wiele szybciej odświeżać, mogą być o wiele płynniejsze, co jest w mojej ocenie bardzo dużym benefitem.

Flutter jest też w pełni zaadaptowany do Material Appa, co jest standardem stylistycznym od Google’a, i jest też zaadaptowany do Apple Cupertino. Jeżeli ktoś wpadłby na taki pomysł, co nie jest oczywistym rozwiązaniem przy tworzeniu we Flutterze, bo raczej zawsze się myśli, żeby był jeden design dla dwóch platform (iOS-a i androida), ale jeżeli ktoś chciałby stworzyć dwa osobne designy, to jest taka możliwość.

Wydaje mi się też, że ma dojrzałą multiplatformowość. W mojej ocenie to jest dobre, ale czasami również złe, bo jak zajmujesz się wszystkim, to może się okazać, że nie zajmujesz się niczym, ale Flutter trochę idzie w stronę mobilną, z tym że jeżeli ktoś stworzy aplikację mobilną i fajnie, jakby ona była też na weba, i to nie jest żadna strona internetowa, która musi się pozycjonować, ale backoffice’owa aplikacja, że korzysta z tego pół firmy i fajnie, jakby było też w webie, bo macie komputery. Więc łatwo można zmigrować aplikację mobilną do webowej i w zasadzie nawet można, jeżeli nie będzie jakichś bibliotek, które są dedykowane tylko dla androida i iOS-a, odpalić ją tak naprawdę w ciągu 5 minut, ale wygląd okna powiększonego z aplikacji mobilnej do weba będzie straszny. Ale jeżeli chodzi o funkcjonalności, to będzie spełniał te same, które są w aplikacji mobilnej.

Flutter został stworzony też do bardzo fajnych animacji. Ma swój własny renderer, który nazywa się do dzisiaj Skia, w zasadzie to jest silnik graficzny 2D, który nie został stworzony dla Fluttera i jeszcze niedawno był głównym silnikiem graficznym, ale tak naprawdę flutter teraz zaadaptował do iOS-a Impeller i jest on już w pełni stabilny. I jest on w 100% dedykowany do Fluttera. Czyli on jest stworzony pod niego i na iOS-a jest w stabilnej wersji, ale np. na androida, jeżeli nie obsługuje on innego silnika Volcano, to wtedy Skia wchodzi do gry i przejmuje tę rolę, czyli są tutaj jeszcze jakieś zależności, które są tutaj jakimś problemem. Ale tak ogólnie powiedziałbym, że to jest bardzo fajne, bo te animacje we Flutterze są płynne, co powoduje, że nasz kod Flutterowy nie używa żadnych pomostów do kodu natywnego androidowego i iOS-owego, dzięki czemu możemy robić optymalizację tych widoków, że one mogą się o wiele szybciej odświeżać, mogą być o wiele płynniejsze, co jest w mojej ocenie bardzo dużym benefitem.

👉 Czytaj dalej: https://porozmawiajmyoit.pl/poit-251-flutter/

--

--

Krzysztof Kempiński
kkempin’s dev blog

IT expert. Ruby on Rails/iOS/Elixir programmer. Blogger. Podcaster.