Wstęp

Używając telefonów z system Android albo iOS codziennie korzystamy z wielu, różnych natywnych aplikacji. Z reguły są one ładniejsze i zapewniają lepsze wrażenia niż mobilne wersje stron www, które z konieczności są bardziej uniwersalne.

Wielu programistów webowych zapewne chciałoby pisać także na urządzenia z androidem lub iOSem. Aby to jednak robić należy znać odpowiednio Java, Objective C lub też Swift. O ile Swift jest całkiem przystępnym, bo też nowoczesnym, językiem programowania to pozostałe dwa należą do dość skomplikowanych, i niezbyt przyjaznych programiście. Co więcej, ich znajomość nie przyda się na wiele w codziennej pracy programisty webowego.

Osoby budujące aplikacje webowe posługują się zestawem technologii do tworzenia wartswy frontendowej. Są to HTML, CSS oraz Javascript i różnego rodzaju frameworki, które je wykrorzystują, Takie jak Scss w przypadku Css i Ember w przypadku Javascript. Jest ich oczywiście wiele więcej, ale nie to jest najistotniejsze tutaj. Istotne jest to, że bardzo ułatwiłaby nam życie możliwość korzystania z naszych ulubionych technologi frontendowych, aby napisać natywną aplikacę mobilną.

Nie byłaby to tylko strona z responsywnym layoutem, którą upodabniamy do natywnej aplikacji za pomocą odpowiedniego stylowania, ale taka aplikacja, którą moglibyśmy umieścić w App Store albo w Google Play. Innymi słowy, pełnoprawna* aplikacja natywna.

* nie do końca pełnoprawne ale o tym za chwilę.

W tym poście przyjrzymy się kilku narzędziom, które umożliwią nam tworzenie takich aplikacji, bez napisania jednej linijki Javy czy Objective C.

Oczywiście w przypadku iOS, wciąż jesteśmy ograniczeni koniecznością pracy na komputerze z system OSX.

Post ten nie jest tutorialem, a jedynie przeglądem dostępnych narzędzi.

Narzędzia

Zapoznamy się z trzema najpopularniejszymi narzędziami, które pozwalają stworzyć natywną aplikację wykorzystując tylko technologie webowe. Są to:

• Apache Cordova oraz Phone Gap
• Ionic
• React Native

W pierwszym punkcie mamy dwa produkty. Umieściłem je tam celowo, gdyż Phone Gap jest raczej rozwinięciem Cordovy niż osobnym narzędziem. Cordova pozwala nam kompilować nasz kod do plików .ipa dla iOS lub .apk dla androida, które możemy już bezpośrendio instalować na urządzeniu. Poza tymi najpopularniejszymi ekosystemami możemy tworzyć także aplikację na Windows Phone czy Blackberry, a i to nie wyczerpuje wszystkich możliwości.

Ionic buduje aplikacje wykorzystując Cordovę, ale omówię go osobno, gdyż ma on bardzo duże możliwości jeśli chodzi o tworzenie samej aplikacji, jej warstwy frontendowej, jak i logiki działania.

React Native pod maską używa innego silnika do budowaniu plików instalacyjnych. Ma on też większe możliwości, niż aplikacje tworzone za pomocą Cordovy czy korzystającego z niej Ionica. Pewnym minusem jest ograniczenie platform do iOS i Androida, a ten ostatni nie jest jeszcze w pełni wspierany. Jednak Android i iOS razem stanowią ponad 90% rynku urządzeń mobilnych, więc jest to raczej marginalny problem.

Ograniczenia

We wstępię napisałem, że tak tworzone aplikacje są pełnoprawnymi natywnymi aplikacjami. I dodałem gwiazdkę. Być może od początku wydawało się Wam to zbyt piękne, aby nie było żadnych haczyków. Jeśli tak to słusznie.

Wszystkie aplikacje, które są budowane za pomocą Cordovy korzystają z WebView. Jest to element systemu, który pozwala wyświetlać treści webowe jak dokumenty html lub po prostu otworzyć jakąś stronę internetową wewnątrz natywnej aplikacji. Jest to więc pewnego rodzaju oszustwo, gdyż tak naprawdę nasza aplikacja jest tylko opakowaniem na stronę webową, i jako taka nie korzysta w pełni z możliwości urządzenia. Ma to swoje odbicie w wydajności i dostępie do wewnętrznego api systemu.

Taka aplikacja nie będzie miała wszystkich możliwości aplikacji w pełni natywnych, jednak jest to cena, którą warto zapłacić za możliwość pisania w dobrze znanych językach i szybkość z jaką można zobaczyć efekty swojej pracy. Dodatkowo istnieje szereg pluginów do Cordovy, ktore pozwalają korzystać z narzędzi systemowych, kamery, połączeń przez bluetooth czy lokalizacji.

React Native pozwala nam na więcej. Nie korzysta on z WebView, zamiast tego wykorzystuje RCTBridge. Jest to natywny element platformy, który pośredniczy pomiędzy kodem Javascript, który piszemy, a innymi elementami systemu. Dzięki temu aplikacje tworzone za pomocą React Native są dużo bardziej wydajne i mogą lepiej wykorzystywać systemowe narzędzia.

Omówienie narzędzi

Należy pamiętać, że żadne z tych narzędzi samo w sobie nie wystarczy, aby stworzyć gotową aplikację. W przypadku aplikacji na iOS będziemy musieli zainstalować XCode na komputeraz apple oraz Android SDK niezależnie od systemu, jeśli chcemy aby nasza aplikacja mogła zostać zbudowana na urządzenia z systemem Android.

Zobaczmy co oferują i czym różnią się wspomniane narzędzia.

Apache Cordova i Phone Gap

Strona domowa: https://cordova.apache.org i http://phonegap.com

Cordova jest najbardziej podstawowym z wymienionych narzędzi, ale też i najbardziej elastycznym. Dużą zaletą jest też łatwość z jaką można dodawać kolejne platformy, na których ma działać nasza aplikacja.

Po wygenerowaniu nowego projektu otrzymamy podstawową stronę html składającą się z plików - index.html, index.js oraz index.css. Jest to zestaw od którego możemy zacząć budować każdą stronę internetową.

Za pomocą jednej komendy np. cordova emulate android Cordoba uruchomi dla nas emulator androida i włączy naszą aplikację. Będzie to odpowiednik Witaj Świecie.

Kolejne kroki będą podobne jak przy tworzeniu aplikacji webowej. Możemy wybrać framework javascriptowy, jeśli mamy na to ochotę - Ember czy Angular. Możemy też użyć JQuery Mobile, aby przyspieszyć pisanie aplikacji. Innymi słowy, robimy dokładnie to samo co w przypadku standardowej aplikacji webowej.

Jeśli używamy Phone Gap będziemy postępować podobnie z tą różnicą, że do dyspozycji będziemy mieć także aplikację desktopową zamiast poleceń wywoływanych z linii komend.

Ionic

Strona domowa: http://ionic.io

Jak już wcześniej wspominałem, Ionic także wykorzystuje Cordovę, jednak ułatwia nam development, poprzez dostarczenie gotowych komponentów, które możemy wykorzystać w naszych projektach. Dysponujemy biblioteką widgetów i elementów graficznych, które możemy dodawać do naszej aplikacji za pomocą kilku linijek kodu.

Wbudowane biblioteki javascript pozwalają wzbogacić naszą aplikację o różnego rodzaju interakcje z użytkownikiem.

Możemy uzyskać jeszcze większe możliwości jeśli skorzystamy z rozszerzeń wykorzystujących Angular.js.

Użycie Anguara dla jednych będzie zaletą, dla innych wadą. Nie da się jednak ukryć, że dzięki temu możemu stworzyć ładną i funkcjonalną aplikację dużo szybciej, niż gdybyśmy pisali ją od zera.

Poniższy kod bez napisania linijki kodu javascript da nam bardzo ładny efekt.

Jest to przykład ze strony projektu:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<div class="list">

  <a class="item item-icon-left" href="#">
    <i class="icon ion-email"></i>
    Check mail
  </a>

  <a class="item item-icon-left item-icon-right" href="#">
    <i class="icon ion-chatbubble-working"></i>
    Call Ma
    <i class="icon ion-ios-telephone-outline"></i>
  </a>

  <a class="item item-icon-left" href="#">
    <i class="icon ion-mic-a"></i>
    Record album
    <span class="item-note">
      Grammy
    </span>
  </a>

  <a class="item item-icon-left" href="#">
    <i class="icon ion-person-stalker"></i>
    Friends
    <span class="badge badge-assertive">0</span>
  </a>

</div>

Da nam następujący efekt:

Co więcej, Ionic udostępnia także platforme online, za pomocą której możemy ‘poskładać’ naszą aplikację z gotowych elementów a następnie ją zbudować.

Możemy także wysyłać wiadomości push do użytkowników aplikacji.

W przypadku prostych projektów, korzystanie z platformy jest darmowe.

React Native

Stron domowa: https://facebook.github.io/react-native/

Na sam koniec zostawiłem najciekawszą, moim zdaniem, propozycję. Jak można się domyślić React Native, wykorzystuje React.js do javascriptu. Podobnie jak w przypadku Ionic i Angulara, kwestią osobistych preferencji jest czy lubimy używać tego frameworku.

Jest jednak kilka punktów, które mocno przemawiają za używaniem React Native.

• został stworzony przez Facebook i jest wykorzystywany w niektórych aplikacjach mobilnych tej firmy. Gwarantuje to silne wsparcie technologiczne i ciągły rozwój narzędzia.
• pozwala używać standardowych komponentów platformy, na którą tworzymy aplikację np. UITabBar na iOS oraz Drawer na Androida.
• wspomniania wcześniej wyższa wydajność i silniejsza integracja z systemem operacyjnym urządzenia.
• wykorzystanie flexbox dla dobrego dopasowania elementów graficznych do różniej wielkości urządzeń.
• możliwość pisania modułów w natywnym języku platformy.

Przykładowy kod:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

// iOS

import React, {
  Component,
} from 'react';
import {
  TabBarIOS,
  NavigatorIOS,
} from 'react-native';

class App extends Component {
  render() {
    return (
      <TabBarIOS>
        <TabBarIOS.Item title="React Native" selected={true}>
          <NavigatorIOS initialRoute={{ title: 'React Native' }} />
        </TabBarIOS.Item>
      </TabBarIOS>
    );
  }
}
// Android

import React, {
  Component,
} from 'react';
import {
  DrawerLayoutAndroid,
  ProgressBarAndroid,
  Text,
} from 'react-native';

class App extends Component {
  render() {
    return (
      <DrawerLayoutAndroid
        renderNavigationView={() => <Text>React Native</Text>}>
        <ProgressBarAndroid />
      </DrawerLayoutAndroid>
    );
  }
}

Podsumowanie

Na tym kończymy przegląd dostępnych narzędzi, które pozwalają tworzyć aplikacje mobilne bez znajomości używanych tam języków.

Zachęcam do własnoręcznego spróbowania jak działają w praktyce, a ja w kolejnych postach porównam tworzenie prostej aplikacji w każdym z wymienionych narzędzi.

Dziękuję za uwagę i do zobaczenia :)