https://visualhunt.com/photo/194685/

Angular 2 początki

https://angular.io

Cześć! Kolejnym wpisem zmieniam nieco tematykę, na moment odchodząc od Sterownika domowego i DSP2017. Chciałbym, aby dzisiejszy post był pewnym wstępem do tematów związanych z frameworkiem Angular. Jak już wcześniej pisałem, wielkim fanem front-endu nie jestem, jednak z informacji zwrotnej, jaką niedawno otrzymałem wynika, że powinienem podszkolić się trochę z tej części tworzenia aplikacji webowych.

Trzeba działać – pomyślałem. Tak się akurat złożyło, że w mojej niedalekiej okolicy, w Gdańsku, organizowane są jednodniowe warsztaty zatytułowane ANGULAR 2 PRAGMATYCZNIE, na które udało mi się zakwalifikować. Co prawda wskoczyłem dopiero z listy rezerwowej, ale to nie zmienia faktu, że będę mógł w nich uczestniczyć! 🙂

Jeśli chodzi o moje oczekiwania i o to, co chcę osiągnąć – mam nadzieję, że warsztaty będą dobrym wstępem do poznania nowej dla mnie technologii, ułatwią start, pokażą kierunek rozwoju i elementy, na które warto zwrócić uwagę. Wiadomo, że wszystkiego można się nauczyć samemu, a w zasadzie to jedyna możliwość nauki, bo nikt za nas samych się nie nauczy, ale zawsze lepiej posłuchać kogoś z wiedzą ekspercką. Na pewno przyspiesza to proces nauki, a szczególnie na starcie. Poza tym z doświadczenia wiem, że warto brać udział w takich inicjatywach, bo to po prostu się sprawdza. Jako przykład mogę podać imprezę CODE{sun}DAY organizowaną przez fundację CODE:ME, podczas której uczestniczyłem w warsztatach z języka Python, które przekonały mnie, że to ciekawe narzędzie warte poznania.

O możliwości uczestnictwa w warsztatach związanych z Angularem dowiedziałem się na 4 dni przed i ten czas postanowiłem poświęcić na wstępne rozpoznanie tematu, przejrzenie tutoriali oraz przeczytanie kilku wpisów na blogach. Wszystko dlatego, żebym więcej wiedzy wyniósł z samych warsztatów. Wychodzę z założenia, że jeśli będę miał niezerowy poziom wiedzy, w mojej głowie zostanie więcej informacji, a to co wiem, będę mógł sobie uporządkować w głowie.

Do tej pory z Angularem nie miałem do czynienia, a moja ignorancja spowodowała, że wiedziałem tylko, że jest to framework frontendowy. Słyszałem również o istnieniu dwóch wersji, a z krążących opinii jeszcze o niestabilności tej drugiej (choć nie wyrokuję, że to prawda). Jest również wersja oznaczona numerem 4, która wyszła w marcu tego roku.

Z tego co udało mi się do tej pory dowiedzieć, Angular 2 dedykowany jest urządzeniom mobilnym oraz bazuje na koncepcji Web Components, czyli na możliwości tworzenia własnych elementów, których implementacje logiki biznesowej oraz widoku są zagnieżdżone wewnątrz.

Sugerowanym językiem, w którym zaleca się pisanie aplikacji to TypeScript, który jest nadzbiorem języka JavaScript i ma taką zaletę, że na wczesnym etapie programista zostanie poinformowany o ewentualnym błędzie. Dla niezainteresowanych TypeScript jest możliwość korzystania z ECMA6, natomiast z tego co widzę, duża większość społeczności operuje na TypeScript, co niewątpliwie nie jest bez znaczenia, chociażby ze względu na wsparcie w postaci przykładów, tutoriali, itp.

Szukając informacji w internecie o Angular 2, bardzo często trafiam na porównanie do wcześniejszej wersji, czyli AngularJS. Często pisze się (lub mówi) o rezygnacji ze specyficznych elementów, które były złą praktyką programistyczną. Zmiany mają skutkować tym, że wersja 2 jest lżejsza i łatwiejsza w obsłudze.

Wracając jeszcze do warsztatów, dostałem informacje, jak powinienem się przygotować. Stworzyłem krótką checklistę:

  1. zainstalować WebStorm (trial 30 dni),
  2. zainstalować Git,
  3. zainstalować node.js,
  4. zainstalować Angular CLI.

Punkt nr 1 póki co odpuściłem, z uwagi na wersję trial. Wiem, że JetBrains robi dobre produkty (korzystam z PyCharm w wersji community), jednak wolę coś na innej licencji. Wstępny rekonesans wykazał, że Visual Studio Code ma wsparcie dla TypeScript, więc to będzie mój pierwszy wybór środowiska pracy. Wracając do checklisty, Git w moim systemie już się znajduje, więc kolejny punkt z głowy. Z node.js nie było żadnych problemów, wszystko zgodnie z dokumentacją. Przy instalacji Angular CLI pojawiły się błędy typu permission denied, jednak nie jest co coś, z czym nie można sobie poradzić. 🙂

maciek@z510:~$ ng --version
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.0.0
node: 7.9.0
os: linux x64

Jak się okazało, stworzenie pierwszej aplikacji „Hello world” w Angularze 2, było niesłychanie proste. Początkowo chciałem konfigurować wszystko po kolei, tworzyć ręcznie strukturę katalogów, pliki package.json, itp., jednak okazało się to zbyteczne – polecenie ng new hello-world-app załatwiło wszystko za mnie!

maciek@z510:~/Angular2$ ng new hello-world-app
installing ng
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  (...)
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Successfully initialized git.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Project 'hello-world-app' successfully created.

Jak się okazało, uruchomienie aplikacji to również pestka! 😉

maciek@z510:~/Angular2/hello-world-app$ ng serve
** NG Live Development Server is running on http://localhost:4200 **
Hash: b931e9a7010cd41d02e9                                                              
Time: 7103ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 3.62 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 9.77 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.37 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.

Po otwarciu projektu w Visual Studio Code stwierdziłem, że narzędzie to wygląda i zachowuje się całkiem przyzwoicie i jak na mój poziom zaawansowania będzie odpowiednie do nauki.

Projekt otwarty w Visual Studio Code wygląda całkiem przyzwoicie.
Projekt otwarty w Visual Studio Code wygląda całkiem przyzwoicie.

Czas nagli, więc wracam do lektury dokumentacji Angulara. Po warsztatach z pewnością napiszę swoją krótką opinię, więc zapraszam do odwiedzenia mojego bloga po weekendzie:)

Literatura obowiązkowa

Angular 2 odkrywa karty
Wprowadzenie do Angular 2
Wstęp do Angular 2
Learn TypeScript in 30 Minutes
Czym są Web Components?
Norbert Sienkiewicz: My first time with Angular 2 [PL] – 2016-04-13 – WarsawJS Meetup #20

2 thoughts to “Angular 2 początki”

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *