Daj Się Poznać #2 Github w 2 minuty. Dobre praktyki AngularJS


W drugiej już części projektu Daj Się poznać, której celem jest zbudowanie aplikacji Ionic MistrzMakro, skupimy się na obsłudze Githuba oraz wyjaśnimy parę podstaw AngularJS. Pokażę Ci też kilka dobrych praktyk, które warto wprowadzić już od początku nauki. Nie martw się, jeśli nigdy nie korzystałeś z Githuba, ani Angulara, mój post jest skierowany głównie do początkujących, aczkolwiek osoby z pewnym już doświadczeniem też będą miały okazję wyciągnąć z tego postu parę ciekawych informacji. Zaczynajmy!

# Co to jest GitHub? Instalacja Githuba

Github to system kontroli wersji ułatwiający pracę zespołom. Przechowuje na serwerze kod źródłowy aplikacji, który jest również rozdzielony na etapy w których był tworzony, czyli w praktyce, możesz obejrzeć cały cykl jego powstawania. Uważam, że początkujący programista, powinien juz od samego początku korzystać z Githuba, jako że przedstawione tam prace, oraz sama umiejętność korzystania z tego narzędzia jest świetną wizytówką podczas poszukiwania pracy. Jednak najważniejszą zaletą jest to, że możemy "cofnąć się w czasie" do wcześniejszej wersji naszego programu. Jeśli nie posiadamy konta studenckiego, lub nie opłacimy prywatnych repozytoriów, to nasz kod będzie dostępny publicznie. Przejdźmy do instalacji, którą wykonamy w systemie Windows:

Jeśli udało Ci się wszystko zainstalować, to będziesz miał teraz możliwość korzystania z git basha.

# Podstawy Githuba w 2 minuty

Na swoim koncie w repozytorium z projektem, jako pierwszy commit umieściłem skonfigurowany szablon zawierający już Angualara i inne potrzebne rzeczy. W kilku prostych krokach poprowadzę Cię do pierwszego commitu, który przyda się do tworzenia aplikacji Mistrz Makro. Oczywiście, wymienione poniżej kroki, można pominąć i po prostu forkować moje repozytorium, jednak dla celów edukacyjnych wybrałem taki sposób. Zaczynajmy!

  • Na początek pobierzemy szablon aplikacji na dysk

    • Jeśli zainstalowałeś Git for Windows, to po kliknięciu prawym przyciskiem w folderze pojawi się opcja "Git bash here", dzięki któremu przejdziemy do Githubowego terminala w aktualnej lokalizacji.
    • menu kontekstowe
    • Żeby pobrać szablon sklonujemy repozytorium:
    • $ git clone https://github.com/IdaszakDaniel/MistrzMakro.git 
    • Następnie musimy przejść do pierwszej wersji aplikacji, gdzie znajduje się tylko szablon. Commit z tą zawartością ma ID 35fb50ce7f90f1e6488b0cb715296481ab813099
    • $ git checkout 35fb50ce7f90f1e6488b0cb715296481ab813099
  • Jeśli posiadasz juz szablon na dysku, to teraz warto byłoby stworzyć repozytorium i dodać go na swojego Gita:

    • Załóż konto na githubie i stwórz repozytorium o dowolnej nazwie. Zrobisz to poprzez stronę https://github.com/new
    • W folderze z projektem utwórz lokalne repozytorium komendą:
    • $ git init
    • W pliku .gitignore znajdują się foldery, które Github zignoruje. Powinny tam być foldery gulpa i bowera, zawierające biblioteki i frameworki, których nie chcemy w repozytorium
    • Dodaj do utworzonego lokalnego repozytorium wszystkie pliki komendą:
    • $ git add . 
    • Teraz musimy podłączyć twoje lokalne repozytorium, z repozytorium na serwerze Githuba:
    • $ git remote add origin https://github.com/TWOJA_NAZWA_UŻYTKOWNIKA/TWOJA_NAZWA_PROJEKTU.git
    • Utwórz commit, dzięki któremu znajdziesz obecną wersję aplikacji, pamiętaj żeby nazwa pozwalała na łatwą identyfikację commita
    • $ git commit -m "NAZWA COMMITA"
    • Teraz wystarczy tylko wysłać lokalne repozytorium na serwer Githuba:
    • $ git push origin master 

# Gulp i Bower. AngularJS Model, Widok oraz Kontroler.

Teraz skupimy się na samym szablonie. Będziemy korzystać z NPM i Node.js. Pisałem o tym w pierwszej części Daj Się Poznać

Szablon skonfigurowany jest do pracy z AngularJS, Bootstrap, Sass oraz Gulp. Aby pobrać wszystkie potrzebne biblioteki należy wpisać komendę w terminalu z lokalizacją w folderze z szablonem

 npm install && bower install 

Gdy już wszystkie biblioteki zostaną zainstalowane, możemy uruchomić gulpa, który automatycznie uruchomi nasz projekt w przeglądarce i będzie nasłuchiwał zmian

 gulp serve 

Szablon pozwala na stylowanie aplikacji preprocesorem języka CSS - Sass. Nasz szablon przygotowany jest także do unit testów oraz testów e2e, ale więcej na ten temat napiszę w późniejszym poście.

Na początek powinienem pokrótce wyjaśnić czym jest framework AngularJS. A więc jest to framework MVC do budowania aplikacji SPA. A co oznaczają te akronimy? SPA to po prostu single page application, czyli aplikacja internetowa, która działa bez odświeżania strony internetowej. MVC to skrót od Model, Widok, Kontroler. Widok naszej aplikacji to wszystkie pliki HTML począwszy od index.html znajdującego się w folderze /src naszego szablonu. Jest to warstwa wizualna naszej aplikacji. Model to warstwa zawierająca dane i operująca na nich. Nasz model znajdziesz w folderze src/app/main/models. Kontroler to warstwa zapewniająca płynną komunikację między widokiem a modelem.

W pliku index.module.js w katalogu src/app mamy zadeklarowany moduł aplikacji o nazwie quizProject:

 
	(function() {
	  'use strict';

	  angular
	    .module('quizProject', []);

	})();
	

Moduł podłączony jest do aplikacji poprzez ng-app:

 
	<!DOCTYPE html>
	<html ng-app="quizProject">
	<head>
	...
	

Podłączeniem wszystkich plików zajmuje się za nas bower, który generuje je w sekcji head pliku index.html.

Model naszej aplikacji nazywa się "quizFactory" i w bloku funkcji zawarte będą wszystkie dane i operacje na nich. Podłączony jest do głównego modułu naszej aplikacji. Przechowywane będą tam zdjęcia i wszystkie makroskładniki, a odpowiednia metoda pozwali nam pobrać te wszystkie dane.

 
	(function() {
	  'use strict';

	  angular
	    .module('quizProject')
	    .factory('quizFactory', quizFactory);

	  function quizFactory() {
	  
	  };
	})();
	

Nasza aplikacja będzie korzystać z dyrektywy, która w prosty sposób pozwala na dołączanie kodu do widoku aplikacji umożliwiając reusability, czyli wielokrotny użytek kodu bez powtarzania się. Dyrektywa składa się z dwóch części - pliku gap.directive.js oraz gap.directive.html. Po napisaniu kodu, będzie działać to w taki sposób, że plik z logiką dobierze odpowiednie dane z modelu i utworzy kod html oraz umiejscowi go w miejsce, w którym pojawi się tag o wybranej przez nas nazwie. W tym przypadku będzie to tag "quiz"

 
	<body>
	  <div class="container">
	    <h1 class="title">QuizApp</h1>
	    <quiz/>
	  </div>
	</body>
	

W kodzie dyrektywy "quiz", który jest bardzo podobny do wcześniej omówionego modelu, dodatkowo można zauważyć Dependency Injection czyli wstrzykiwanie zależności. Widzimy to zjawisko w miejscu gdzie znajduje się parametr funkcji. Dyrektywa ma dzięki temu dostęp do wszystkich metod z modelu quizFactory. Wstrzykiwanie zależności ułatwia tworzenie niezależnych obiektów i sprawia że są one łatwiejsze do testowania.

 
	(function() {
	  'use strict';

	  angular
	    .module('quizProject')
	    .directive('quiz', quiz);

	  function quiz(quizFactory) {

	    };
	})();
	

# Dobre praktyki AngularJS

Dlaczego kod nie może znajdować się w jednym pliku? Po co każdy plik owinięty jest w IIFE? Co to jest strict mode? Dlaczego w innych tutorialach deklaracja modułu wygląda inaczej?

 
	(function() {
	  'use strict';

	})();
	

IIFE czyli Immediately Invoked Function Expression to anonimowa funkcja, wywołująca się automatycznie w miejscu, w którym została stworzona. Pozwala na użycie trybu strict tylko wewnątrz niej, co znacznie podnosi jakość naszego kodu. Jakie jeszcze ma zalety? Wszystkie zmienne zadeklarowane w jej wnętrzu są lokalne, dzięki czemu nie mają długości życia większej niż to potrzebne, oraz zapobiega to kolizji zmiennych.

Co to jest strict mode? Pracując w strict mode, JavaScript nie pomija niektórych mniejszych błędów, oraz poprawia błędy i złe praktyki pisania kodu, które przeszkadzają w optymalizacji kodu przez przeglądarkę. Przykładowo - przypadkowe stworzenie zmiennej globalnej zostanie pokazane jako błąd. Strict mode nie pozwala także na używanie słów kluczowych, które będą miały zastosowanie w nowszych wersjach ECMAScript.

Jeden komponent w jednym pliku, najlepiej żeby plik nie przekraczał 400 linii kodu. Jakie przynosi to zalety? Zwiększona czytelność, oraz spore ułatwienie, jeśli pracujesz nad projektem z całym zespołem. Pojedyncze pliki łatwiej debuggować oraz przeprowadzać na nich testy jednostkowe.

Dlaczego w innych tutorialach wszyscy przypisują moduł do zmiennej? Jest to niepoprawne, a w przypadku gdzie mamy jeden moduł na plik wręcz zbędne. Brak przypisanej zmiennej poprawia czytelność kodu, oraz zapobiega przypadkowemu użyciu tej zmiennej ponownie.

Published: March 23 2017

blog comments powered by Disqus