Czas ogłosić jak będzie wyglądał stos technologiczny aplikacji, nad którą będziemy pracować.
Teraz tak: pada tu dużo być może nie zrozumiałych pojęć. Przygotowałam więc dla Was „słowniczek” właśnie na potrzeby tego artykułu 🙂 Tłumaczę tam część pojęć oraz odsyłam po dalsze informacje. Tak, by nie zaciemnić treści, ale ułatwić start osobom, które za chwile nic nie będą rozumieć z tego, co piszę 😀 Albo przeczytajcie wcześniej „słowniczek” albo otwórzcie go sobie z boku do wglądu w trakcie czytania tego artykułu.
No to zaczynamy!
Stos technologiczny
Nie mogę nie wykorzystać okazji by sama nauczyć się czegoś nowego także tym razem skorzystam z Angulara w wersji 4.
Czemu akurat Angular 4? Bo Angular w wersji 1.x już znam. Poprzednio uczyłam się Reacta. I ogólnie i tak mam w planach Angulara w wersji 4. + jest dość popularnym frameworkiem, jeśli chodzi o JavaScript (i oferty pracy dla Frontend Dev’a). Przyznam, że zastanawiałam się nad innymi frameworkami jak Vue JS czy Ember. Nie przekreślam szansy, że kiedyś jeszcze coś na nich oprę 😉 Tym razem Angular v4.
Zdaję sobie sprawę, że w przypadku takiej aplikacji mogłabym skorzystać z samego HTML5, CSS oraz JavaScriptu. Jednak takich aplikacji znajdziecie na pęczki na Codepenie (przykłady). Chcę, żeby była trochę bardziej rozbudowana, bardziej realna.
Skorzystam z TypeScriptu, którego podstawy dopiero co opanowałam na rzecz tej serii oraz Bootstrapa w wersji 4.
Początkowo chciałam uniknąć konieczności korzystania z TypeScriptu, żeby nie utrudniać na start. Jednak jego wykluczenie z projektu byłoby większym utrudnieniem. Wiele przykładów bazuje na TypeScript’cie, wręcz cała dokumentacja Angulara v4. Także niestety nie da się tego obejść.
Zastanawiałam się pomiędzy Bootstrapem v4 a Angular Material (implementującym Material Design). Dlaczego wygrał Bootstrap? Wydaje mi się jednak szerzej stosowany oraz częściej wymagany w ofertach pracy (także może lepiej dla Ciebie jeśli nauczysz się właśnie jego). Material Design stosowałam w swojej poprzedniej aplikacji (SMPlanner) w formie Material UI. No i Bootstrapa znam, a co za dużo nowości to jednak niezdrowo 😉
Zdecydowałam, że zamiast czystego CSS skorzystamy jednak z Sass-a.
Będziemy również korzystać z funkcjonalności oferowanych przez EcmaScript 6.
Jeśli już jesteś przerażona/przerażony – spokojnie! Do wszystkiego dojdziemy z czasem. Będzie to wymagało od Ciebie pewnej ilości nauki, ale jeśli myślisz o programowaniu – musisz się do tego przyzwyczajać 😉
Choć Yarn kusił zdecydowałam się jednak pozostać tym razem przy npm.
W Back-endzie aplikacji znajdzie się Node JS. A sama aplikacja wyląduje na Firebase (jako DEMO). Skorzystam z oferowanej przez Firebase nierelacyjnej bazy danych (NoSQL).
Kod aplikacji wyląduje oczywiście na Githubie.
Myślę, że utworzę oddzielne branche, by każdy mógł sobie prześledzić jak wyglądał rozwój aplikacji. Wiem, że wejście na start w rozbudowaną aplikację i tysiące linijek kodu – może być ciężkie. Stąd co jakiś czas postaram się zamknąć pewną ilość kodu – tak by każdy mógł sobie podejrzeć jak wyglądała aplikacja i kod po miesiącu pracy. Jak wygląda po dwóch. A jak po trzech. Przy czym kryterium nie będzie czas, a funkcjonalności.
Podepniemy oczywiście lintery (JSHint, ESLint, TSLint, itd.), a do kodu napiszemy testy z wykorzystaniem Jasmine (testy jednostkowe) oraz Protractora (testy e2e). Testy uruchomimy z wykorzystaniem Karmy.
Jeśli chodzi o edytor kodu – zdecydowałam się jednak na Visual Studio Code zamiast Atoma. Zobaczymy jak wypadnie w porównaniu do WebStorm IDE 😉
Czemu mam uczucie, że za bardzo przytłaczam Cię na start? Jeśli tak jest – daj znać w komentarzu. Postaram się Cię uspokoić. Programowanie wydaje się niektórym „czarną magią”. Jedną z przyczyn może być rzeczywiście mnogość niezrozumiałych pojęć i nazw – zdaję sobie z tego sprawę. Chciałabym, żeby wszystko było dla Ciebie jasne. Dlatego w razie problemów – śmiało zadawaj pytania. Jest kilka sposobów kontaktu ze mną. Zawsze możesz też spytać na grupie wsparcia 🙂
Pierwsze wpisy będą kolejno wszystko wyjaśniać J
Podsumowując
Stos technologiczny
Visual Studio Code (edytor kodu)
HTML5, CSS, JavaScript
Angular 4
TypeScript
Bootstrap 4
Sass
ES6
Node JS
npm
Firebase
Baza NoSQL (oferowana przez Firebase)
Karma, Jasmine, Protractor
JSHint, ESLint, TSLint
Git
Co dalej?
Ponieważ nic na mnie tak nie działa jak obligacja zewnętrzna będę zdawać relację z postępów prac na Fanpage’u. Coś w stylu środowego posta:
Co jakiś czas napiszę również raport na blogu, zbierający te wszystkie posty, wnioski, informacje. Będzie to luźny wpis, z uwagami, podsumowaniem.
Jak to ja oczywiście rozpisałam już sobie projekt 😀 Korzystając przy okazji z motywacji do przetestowania Asany. Rozpisałam wstępną listę tematów, które chcę poruszyć.
Sierpień będzie tak naprawdę wprowadzeniem do technologii wykorzystywanych w projekcie. Być może napiszę już pierwsze linijki kodu, ale artykuły na ten temat pojawią się zapewne we wrześniu, jak nie później.
Najpierw wprowadzę Was do technologii z jakich skorzystamy. Pojawią się artykuły w temacie nauki, m.in. TypeScriptu, Angulara v4, Bootstrapa. Opiszę narzędzia, z których skorzystamy, jak Firebase (hosting + baza danych), Node JS, lintery. Przygotuje dla Was materiały, zadania, krótkie fragmenty kodów z omówieniem.
Ot, takie wprowadzenie dla osób, które nie znają tych technologii bądź wybranych elementów stosu, z jakiego skorzystamy.
Dla mnie też to będzie wprowadzenie. Tak jak pisałam dopiero zaczynam naukę Angular v4 (jeśli to pocieszające to już mój kolejny framework, znam m.in. Angulara v1.x oraz Reacta). Nie miałam też do czynienia z TypeScriptem (do zeszłego poniedziałku). Reszta stosu jest mi znana, choć nie ze wszystkiego korzystałam praktycznie czy dużo.
Pomiędzy artykułami wprowadzającymi pojawi się również artykuł konfiguracji środowiska do naszej pracy. Przypominam, że będę pracować na Windowsie z wykorzystaniem Visual Studio Code.
Korci mnie założenie grupy wsparcia dla osób, które podejmą się wyzwania stworzenia aplikacji z wykorzystaniem tej serii… I pewnie prędzej czy później to zrobię. Będę na pewno o tym pisać 😉
To tyle na dziś. Ja siadam do kolejnych artykułów. Piszę, piszę, piszę, ale mam wrażenie, że wciąż za mało i za wolno 😀 Chwilami myślę, że takie serie powinny pojawiać się w dwóch częściach – zapowiedź i całość 😀 Tymczasem mogę zapowiedzieć, że w przyszłym tygodniu pojawi się duża paczka materiałów do nauki HTML5 & CSS dla osób, które rzeczywiście zaczynają od zera 😉 Ale nie będzie to jedyny artykuł.
Przygotowałam również małą ankietę dla osób, które chcą wziąć udział w wyzwaniu i stworzyć swoją pierwszą aplikację webową. Interesuje mnie poziom Waszej wiedzy. Będzie to bardzo pomocne w tworzeniu kolejnych materiałów. Będę wdzięczna za odpowiedzi. Ankieta jest krótka, 3 pytania, żadne nie jest obowiązkowe. Najbardziej interesuje mnie pierwsze. Z góry dziękuję za wszystkie odpowiedzi!
