We wpisie odpowiadam na dwa z pytań, które dostałam po Live’ie „Tworzenie aplikacji webowych – od pomysłu do realizacji”.
- Od czego zacząć tworzenie aplikacji webowej? Frontend? Backend? Równolegle?
- Aplikacja webowa na start? Coś własnego? Czy odwzorowanie istniejącej?
Zgodnie z zapowiedzią, każdemu prowadzonemu przeze mnie Live’owi będą towarzyszyły wpisy.
Jeden – to notatki, konspekt, opracowanie tematu poruszanego na Live’ie. Drugi – to wynik ankiety, którą możecie wypełnić po każdym naszym spotkaniu, odpowiedzi na Wasze pytania. Czasem będzie to jeden wpis, zwłaszcza jeśli będę miała gdzie Was odesłać (bo np. już pisałam na ten temat), a czasem cała seria wpisów.
Tym razem mamy do czynienia z tym drugim przypadkiem. Pytań nie było wiele, jednak rozpisałam się mocno w odpowiedzi. A ponieważ niekoniecznie łączą się ze sobą będą stanowić temat kolejnych wpisów.
Wszystkie Live’y (w formie video), notatki oraz artykuły powiązane, możecie znaleźć na stronie NetteCode Live (na samym dole, w sekcji odpowiadającej danemu Live’owi).
Miłej lektury!
Pytanie: Od czego najlepiej zaczac tworzyc aplikacje – pomijajac to co juz mowilas? Chodzi mi o to czy zaczac od frontendu, backendu (Firebase), czy jakos jeszcze inaczej – moze tworzyc obie „strony” rownolegle? Nie mam doswiadczenia :-/. Chodzi o punkt zaczepienia, zeby to jakos ruszylo.
Odpowiedź:
Szczerze mówiąc, pierwsza odpowiedź, która mi się nasuwa to: zależy.
Jeśli zamierzasz wykorzystać sam Firebase w Backendzie – możesz od razu zacząć od Frontendu. Firebase jest w stanie załatwić Ci cały Backend dla aplikacji.
Możesz go też rozbudować. Wszystko zależy od potrzeb Twojej aplikacji. Jeśli jednak to Twoja pierwsza aplikacja sugerowałabym zacząć od samego Firebase. Przekonać się co Ci daje, a czego jeszcze potrzebujesz.
Jak coś polecam artykuł „Firebase – świetny backend dla nowoczesnej aplikacji”. Naprawdę świetne wprowadzenie do tematu.
Mimo wszystko, jedną z pierwszych rzeczy, jakie zrobiłabym po stronie Frontendu to połączenie z Backendem. Podpięcie Firebase.
Nie to, że się nie da inaczej. Ale sama się przekonałam, że zostawianie tego na później może generować problemy.
Chodzi mi o samo połączenie. Nie musisz od razu podpinać bazy danych, autentykacji czy innych funkcji.
Nie jest to jedyne słuszne podejście. Sama tworząc poprzednią aplikację zostawiłam to na później i skupiłam się w pełni nad częścią frontendową. Tym razem zdecydowanie zamierzam podpiąć Firebase oraz jego bazę danych już na początku.
Czyli tak: w Twoim przypadku zacznij od Frontendu.
Gdyby jednak w Backendzie nie siedział Firebase tylko był tworzony od zera… to znowu zależy. Przy czym skłaniałabym się do opcji: rób to równolegle. A zacznij od tego, co wolisz.
Nie jest tak, że część frontendowa nie może działać bez backendu (zwłaszcza w fazie developmentu). Możesz ją rozwijać niezależnie. Niezależnie budować też backend, a spiąć i przetestować dopiero na końcu.
Prywatnie wolałabym rozwinąć choć minimalnie backend, spiąć i wykorzystać w aplikacji frontendowej. Połączyć to na początku. Dopiero później rozwijać obie strony. Równolegle.
Dlaczego? Stworzenie struktury, komunikacja pomiędzy backendem a frontendem, wydaje mi się ważniejszym elementem niż późniejsze rozwijanie części klienckiej (frontend) bądź serwerowej (backend).
Cały czas podkreślam, że to moje osobiste preferencje i na pewno znajdziesz osoby, które powiedzą:
„Zacznij od Backendu!”, przy czym przytoczą milion argumentów,
oraz osoby, które powiedzą
„Zacznij od Frontendu!” ze swoim milionem argumentów 😉
Inne osoby powiedzą Ci, żebyś nie skupiał (skupiała?) się na Full Stack’u tylko specjalizował (specjalizowała?) po jednej ze stron.
Często w budowie aplikacji webowej uczestniczy więcej niż jeden zespół. Są specjaliści od Frontendu oraz specjaliści od Backendu. Obie strony rozwijane są równolegle i skomunikowane ze sobą. Frontend czegoś potrzebuje od Backendu? Backend to dostarcza. Backend dostarcza coś nowego? Zmienia coś? Frontend reaguje. Obie strony uzupełniają się, współpracują.
Rozwijając część frontendową może się okazać, że potrzebujesz czegoś od backendu. Dlatego nawet jeśli skończysz część backendową wcześniej – nie znaczy, że nie będziesz jej rozwijać równolegle.
Nawiasem polecam Ci również kategorię „Daj się poznać 2017” na blogu. W jej ramach zdawałam cotygodniowe raporty, które opierały się na odpowiedziach na trzy pytania:
- Co się udało?
- Co się nie udało?
- Co robię dalej?
Dzięki temu możesz prześledzić proces powstawania realnej aplikacji webowej na praktycznym przykładzie. Przy czym:
- aplikacja jest nadal nieskończona, także proces nie jest pełny, zdecydowanie,
- Backend = Firebase.
To była moja pierwsza aplikacja takiego kalibru*, którą robię na własną rękę**. Rozbudziła moją ochotę na więcej i od paru dni siedzę nad kolejną aplikacją webową, którą mam nadzieję skończyć (no dobra, Social Media Planner’a też prędzej czy później skończę).
* takiego kalibru = tworzyłam już kilkadziesiąt aplikacji mobilnych oraz na zegarki, pracowałam też nad większymi projektami, ale w zespole**.
Oczywiście wszystko to, co napisałam to już etap implementacji aplikacji, który powinien być poprzedzony jej zaprojektowaniem oraz zaplanowaniem prac. O czym mówiłam m.in. na Live’ie oraz pisałam w poprzednim wpisie.
Sugeruję również określenie funkcjonalności, które chcesz zrealizować na początku. Nie rozwijaj od razu gotowego produktu. Nie skupiaj się na szczegółach. Skup się na kluczowych elementach. A następnie rozszerzaj aplikacje.
Oczywiście nie oznacza to, że masz stworzyć pięć widoków o całkiem innej funkcjonalności niż to, co planujesz zrealizować. Chodzi o to, by okroić ilość funkcjonalności, np.
I iteracja:
- wyświetl listę elementów
- formularz dodawania nowych elementów
II iteracja:
- opcja edycji elementów na liście
itd. itd.
I to właśnie na funkcjonalnościach bym się skupiała.
Pytanie: Czy osobom początkującym polecasz wymyślanie własnej apki od zera, czy raczej może bardziej „odwzorowanie” jakiejś już istniejącej?
Odpowiedź:
I tak, i tak 🙂
Zarówno odwzorowywanie istniejącej aplikacji, jak i tworzenie jej od zera jest dobrym pomysłem. Ale przez odwzorowywanie mam na myśli:
patrzysz na aplikację, tworzysz swojego klona
nie:
zaglądasz do kodu i linijka po linijce przepisujesz, nawet nie rozumiejąc dlaczego
O ile w przypadku stron da się podejrzeć źródło, zastosowane rozwiązania (choć też nie zawsze), o tyle z aplikacjami nie jest zazwyczaj tak łatwo. Moim zdaniem nie ma też sensu próba napisania aplikacji bazując na jej kodzie na Github’ie.
Aplikacja jest zbyt skomplikowanym tworem. Budując ją – przebudowujesz jej kod nie raz. Realizując krok x, możesz uzyskać inny kod niż po kroku y. Ciężko więc z góry wnioskować dlaczego autor zastosował takie a nie inne podejście.
Warto korzystać z pewnych wzorców, schematów, rozwiązań opisywanych przez innych. Możesz analizować kod autora. Analiza cudzego kodu jest w ogóle świetnym pomysłem. Zwłaszcza analiza dobrego kodu. Ale nie zakładaj z góry, że autor taki napisał. Jeśli nie rozumiesz, dlaczego zastosował takie a nie inne rozwiązanie – szukaj. Nie ma lepszego sposobu nauki niż przez praktykę.
Jeśli chodzi o budowę aplikacji webowej w celach nauki, poszukałabym video, kursów w tym temacie. I tak, wtedy jak najbardziej wskazane jest odtwarzanie takiej aplikacji w trakcie kursu. Nie tylko oglądanie jak jest budowana. Powtarzanie tych kroków u siebie. Możesz się zdziwić, ile dodatkowych rzeczy może wyjść przy okazji. Coś nie zadziała, coś jest nieaktualne, inna konfiguracja.
Nie zdziw się za to, że budując taką aplikację, nawet na podstawie tutorialu, piszesz kod, który później kasujesz i zmieniasz na inny. To norma.
Często polecaną aplikacją na start jest aplikacja To do. I ja ją polecam 😉 A jak niektórzy wiedzą na blogu trwa aktualnie seria w temacie tworzenia aplikacji webowych, gdzie będziemy budować aplikację To do.
Będziemy? A seria już trwa? Owszem, ponieważ tworzymy tą aplikację w oparciu o spory stos technologiczny. I aktualnie trwają wprowadzenia do technologii, narzędzi, języków, które wykorzystamy.
Ciąg dalszy pytań i odpowiedzi nastąpi 🙂
P.S. Chcielibyście żebym przygotowała jakąś listę prostych projektów na start? Inspiracje? Kody? Coś co moglibyście właśnie odwzorować? Pomijając fakt, że niedługo pojawią się na blogu wymagania na aplikację To do, którą też będzie można spróbować zaimplementować nie tylko zgodnie z tutorialem, ale także w innych technologiach 😉
