Praca programisty wymaga ciągłego rozwoju. Rozpoczynając swoją pierwszą pracę kilka lat temu nie sądziłem, że kiedykolwiek będę odpowiedzialny za front-end. Nieśmiało wchodząc w świat ASP.NET Web Forms zacząłem stykać się z HTML, CSS czy JavaScript. Ostatni rok to kompletne odwórcenie trendu, 90% czasu pracy spędzone w technologiach front-end a reszta w języku C#.

Z uwagi jednak na nadchodzące projekty i powrót do proporcji 50/50 chciałbym rozpocząć nowy cykl dotyczący pracy z Angularem. Jest on znacznie popularniejszy niż Oracle JET , z drugiej stronie nie miałem z nim styczności więc warto zagłębić się w tą technologię, żeby mieć jakiekolwiek porównanie. Jako kolejny argument przedstawię poniższy wykres:

Poniższy artykuł to pierwszy z 4 obszerynych wpisów dotyczących Angulara i jego stosu technologicznego w połączeniu z .NET. Każdy kolejny artykuł z serii będzie bardziej szczegółowy a efektem ma być "kompletny" poradnik na kształt tego przygotowanego dla języka C#.

Angular jest świetnym sposobem tworzenia single page application, które są łatwe w testowaniu, korzystają z Dependency Injection oraz wzorca projektowego Separation of Concerns. Powyższe punkty nakładają jednak na programistę konieczność dokonania wyboru zastosowanej architektury – wybór zwykle uzależniony jest od potrzeb projektu, doświadczenia zespołu oraz wymaganych terminów. W tym artykule postaram się odpowiedzieć na pytanie jak zacząć oraz którą ścieżkę wybrać.

Zanim jednak przejdziemy dalej powiedzmy sobie pare słów o wspominanych powyżej zagadanieniach single page application oraz Separation of Concerns.

Pierwszy z konceptów zyskał w przeciągu ostatnich kilkunastu lat (niewątpliwy wzrost popularności to ostatnie lata) i jest intensywnie rozwijany. Głównym założeniem jest załadowanie całego front-end’u, który następnie będzie przetwarzał dane otrzymane z serwera i w odpowiedni sposób łączył je z HTML’em. Przejścia do kolejnych elementów aplikacji (nawigacja) odbywa się bez przeładowania całej strony a jedynie określonych części drzewa DOM. Jeżeli jeszcze nie do końca rozumiesz to podejście zaloguj się do swojej poczty GMAIL. Jest to klasyczny przykład takiej aplikacji. Spróbuj przejść z elementu ‘Odebrane’ do np. ‘Wysłane’. Kolejnymi przykładami takich aplikacji jest Facebook, Instagram czy Twitter.

Czym z kolei jest Separation of Concerns (SoC)? Jest to wzorzec mówiący o podziale aplikacji na odrębne moduły, które nie pokrywają się funkcjonalnością – jest to tzw. modułowa budowa programu. Celem jest utworzenie systemu w którym każda z części (modułów) pełni określoną, znaczącą role a jednocześnie zachowuje możliwość prostej adaptacji do zmian. Samo pojęcie nie odnosi się jedynie do architektury tworzonego systemu ale również do podziału aplikacji na poszczególne warstwy, tj. prezentacja, logika biznesowa, warstwa dostępu do danych czy sama baza danych.

Kiedy przystępujemy do tworzenia nowej aplikacji internetowej stoimy w obliczu wielu wyborów architektonicznych. Jako programiści platformy .NET oraz (jak teraz zdecydowaliśmy) Angulara wciąż musimy zdecydować się na kilka alternatywnych sposobów połączenia tych architektur.

W przeciwieństwie do swojego poprzednika, AngularJS, obecna wersja platformy "stoi przed nami" z określonym stosem technologicznym. Angular współpracuje z TypeScript, Webpack, npm oraz Node.js. Wszystkie wymienione tutaj technologie są powszechnie spotykane z ekosystemie JavaScript.

TypeScript jest językiem wybranym dla Angulara oraz posłużył do opracowania kodu źródłowego platformy. Łączy on w sobie dynamiczny świat języka JavaScript z zaletami silnego typowania i elementami składni, którą można "porównać" do C#. Tak napisany kod musi zostać skompilowany do JavaScript, który następnie jest uruchamiany w przeglądarce lub NodeJS.

Webpack jest statycznym modułem łączącym nowoczesne aplikacje JavaScript. Pakiet ten zawiera w sobie zasoby, które zależą od siebie i powinny zostać przekazane do Klienta w odpowiedzi na żądanie. Pakiet taki może zawierać JavaScript, CSS, HTML i prawie każdy inny rodzaj pliku.

Webpack porusza się po kodzie źródłowym aplikacji w poszukiwaniu instrukcji import tworząc wykres zależności i emitując jeden lub więcej pakietów. Pakiet, dzięki wtyczkom i specjalnym regułom, może przetwarzać i minimalizować pliki inne niż JavaScript, tj. TypeScript, SASS czy LESS.

Konfiugracja Webpack odbywa się za pomocą pliku konfiguracyjnego webpack.config.js

Podstawowym sposobem zainstalowania Angulara i jego zależności jest użycie npm. Jest to menadżer pakietu wybrany dla ekosystemu JavaScript. Dodatkowo, npm służy jako moduł uruchamiający zadania podczas tworzenia aplikacji.

Spójrzcie na powyższy obrazek – nie są to zazwyczaj pierwsze technologie, które przychodzą na myśl, gdy rozważamy aplikację ASP.NET. Dodatkowe narzędzia i biblioteki zostały dodane do Visual Studio 15.x, .NET Core SDK 2.0 oraz ASP.NET Core 2.0. Pozwalają one na wypełnienie luki pomiędzy tym co programiści uznawali za świat C# i JavaScript. Wraz z ASP.NET Core 2.0 w Visual Studio możemy znaleźć szablon projektu Angular zawierający Angular Services - bibliotekę, która wyodrębnia Webpack oraz NodeJS. Możemy również zainstalować interfejs graficzny użytwkonika (GUI) dla npm.

Powyższymy krokami zajmiemy się w kolejnych wpisach. Z własnego doświadczenia w pracy na front-end’em polecam Visual Studio Code. Jest to wieloplatformowy edytor, która zapewnia dodatkowe funkcjonalności takie jak IntelliSense, obsługę debuggowania oraz wbudowaną integrację z Git.

Jest to idealne narzędzie (wg. preferencji – testowałem również Sublime Text) do tworzenia aplikacji internetowych. Jest lekki, szybki a jednocześnie bardzo funkcjonalny. Po zainstalowaniu odpowiednich wtyczek stanie się potężnym narzędziem do pracy. Jeżeli jeszcze nie mieliście styczności z tym edytorem zapraszam do dwóch krótkich artykułow na jego temat:

• Visual Studio Code - Debugowanie aplikacji webowej
• Visual Studio Code - Popularne wtyczki

Nie, nie, nie...to oczywiście nie koniec :) Pierwszy wpis będzie podzielony na 4 części. Chciałbym, aby to co napisałem powyżej stanowiło jedynie wprowadzenie wraz z wyjaśniem podstawowych pojęć. Teraz jest czas, żeby poczytać nieco więcej o zagadnieniach, które są dla Ciebie obce.

W kolejnych wpisach (wprowadzenie) postaram się pokazać dlaczego Angular jest przyszłością rozwoju technologii ASP.NET Core. Omówimy różne rozwiązania architektoniczne, spróbujemy stworzyć natywne aplikacje dla systemów Android czy iOS. Porozmawiamy również o możliwości skalowania projektów w zależności od wybranej przez nas architektury. Dlaczego jednak zaczynam od tak obszernego wpisu? Potrzeby projektu, wiedza oraz znajomość terminów pozwolą nam podjąć właściwe decyzje w przyszłości odnośnie zastosowanej architektury. Będziemy też w stanie obronić swoje stanowisko w zespole sugerując jakieś rozwiązanie.