node js

DSP2017.1 – Technologia pierwsza: NodeJS

Postanowiłam, że pierwsze z serii postów konkursowych będą poświęcone technologiom, których chcę użyć. Pokażę, jak skonfigurować i przygotować proste projekty z ich użyciem, by następnie połączyć każdą z tych technologii w całość.

Dziś padło na rdzeń całego przedsięwzięcia – serwer.

Czym jest Node?

Jest to środowisko uruchomieniowe JavaScriptu. Służy przede wszystkim do tworzenia serweru. Dlatego dość często można usłyszeć: Frontend to piszę w tym i tym, a backend to w Node. W Polsce jeszcze się nie spotkałam, ale za granicą bardzo popularnym słówkiem jest izomorficzny JavaScript. Oznacza ono ni mniej, ni więcej sytuację, gdy piszemy w JS po stronie klienta (zwykle) oraz po stronie serwera (niezwykle).

Najnowsze wersje JSa pozwalają nam w tym języku pisać serwery, a za pomocą Node możemy je uruchomić – ot, cała filozofia.

Node jest bardzo modułowy: raz, że sam kod składa się z modułów, a dwa, że udostępnia menadżer pakietów npm, który pozwala na doinstalowanie (globalne bądź do lokalnego projektu), wielu pakietów ułatwiających życie. Więcej o nich później.

Przygotowanie do tworzenia projektu

Oprogramowanie

Do programowania używam IDE WebStorm (więcej o nim w notce o IDE i edytorach tekstu). Przede wszystkim dlatego, że jestem leniwa – WS robi za mnie dużo męczących rzeczy typu konfiguracja projektu i poszczególnych pakietów. Potrafi bardzo upłynnić pracę, pod warunkiem, że się wie, co robi. Skonfigurowanie i stworzenie startowego programu w Node zajęło mu kilka minut.

IDE - WebStorm

Ach, bo bym zapomniała: na powyższym zrzucie ekranu jest Ubuntu, ale obecnie działam na systemie Windows 10. Lubię linuksy i to bardzo, ale na starym laptopie miałam problem z konfiguracją Cordovy. Linux tak czasami ma – nie i już. Moja zabawa z Cordovą na Ubuntu to długa historia kilku dni walki.

Z kolei na Windzie nie miałam z Node i jego pakietami żadnego problemu. Czyste szczęście. Nie każdy tak ma – dzisiaj napisał do mnie programista, któremu nie chciał się skonfigurować Firebase. Windows 7 vs Windows 10 – 0:1.

Używam Node w wersji 6.95 (najnowsza stabilna), pakiety instaluję przez tzw. Node.js command prompt – taki dodatkowy terminal dla ludzi Windowsa.

Korzystam z systemu kontroli wersji Git. O Gicie powstało wiele poradników, które wyjaśnią, co to jest i jak się z tego korzysta dużo lepiej, niż ja to zrobię kiedykolwiek. Zbiór linków do nich na samym końcu.

Dzięki Gitowi mogę udostępnić Wam mój kod na Githubie, a także mam możliwość cofnięcia wprowadzonych zmian, jeśli zrobię coś głupiego oraz pracy nad kilkoma różnymi wersjami programu jednocześnie na tzw. branchach (czyt. branczach, eng. branch = gałąź).

Pakiety

Sam Node zapewnia jedynie backend, silnik naszej aplikacji. Do stworzenia widoku potrzebujemy dodatkowego frameworka. Ponieważ nie znam jeszcze ReactJS (będzie w kolejnych częściach), użyłam tutaj domyślnego w WebStormie frameworka Express. Używa on REST API.

Połączenie Node+ Express poznałam wcześniej na zajęciach na uczelni, więc tym bardziej ucieszyłam się, że WS domyślnie tworzy pakiety z jego użyciem. Językiem szablonów, który wybrałam przy konfiguracji projektu jest EJS – wygląda jak HTML z lekkim rozszerzeniem. Składnią przypomina język szablonów Django.

Zaszalałam z CSS – doinstalowałam do niego preprocesor LESS, dzięki któremu mogę szybciej pisać arkusze stylów i unikam zbędnego powtarzania kodu.

Całość konfiguracji – włącznie z instalowaniem LESS – zajęła mi 5 minut.

Podstawowa struktura projektu

Zadałam mojemu IDE tworzenie nowego projektu w Node. Pasek ładowania ruszył, procesor przyspieszył, aby na końcu wypluć coś takiego:

projektTak wygląda podstawowy projekt w Node. Dużo, prawda? Tylko się wydaje. W rzeczywistości:

  • bin/www – to plik JavaScriptu, zawierający podstawowe funkcje pozwalające uruchomić serwer. Można go uruchomić w konsoli poleceniem  node bin/www. Z niego także możemy odczytać, na którym porcie powinniśmy nasłuchiwać, jeśli chcemy otrzymać dane (wyświetlić stronę). Dla Node domyślnie jest to port 3000.
  • node_modules/ – katalog z modułami zainstalowanymi przez npm, w tym wspomnianymi wcześniej Express, EJS, LESS.
  • public/ – pliki statyczne naszej strony: arkusze styli, skrypty, media.
    • public/stylesheets/style.less – to plik LESS. W WebStormie używam watchera, który automatycznie skompiluje go do CSS, w konsoli można to zrobić poleceniem  less.
  • routes/ – to pliki Expressa. Służą do generowania widoków. Przykładowa treść pliku index.js jest następująca:
    var express = require('express');
    var router = express.Router();
    
    /* GET home page. */
    router.get('/', function(req, res, next) {
      res.render('index', { title: 'Express' });
    });
    
    module.exports = router;

    Tworzymy moduł router i mówimy naszej aplikacji, że chcemy wyrenderować szablon o nazwie index, przekazując do niego zmienną title.

  • views/ – szablony EJS. To ich żądamy w plikach routera. Oto treść index.ejs:
    <!DOCTYPE html>
    <html>
      <head>
        <title><%= title %></title>
        <link rel='stylesheet' href='/stylesheets/style.css' />
      </head>
      <body>
        <h1><%= title %></h1>
        <p>Welcome to <%= title %></p>
      </body>
    </html>
    

    Prawie-że-HTML, prawda?

  • .gitignore – plik Gita. Służy do zaznaczenia, których plików nie chcemy dodawać do kontroli wersji. Zazwyczaj są to różnego rodzaju pliki konfiguracyjne. U mnie jest to na razie katalog konfiguracyjny projektu .idea.
  • app.js – to rdzeń całej aplikacji. Służy do konfiguracji pakietów i ścieżek do poszczególnych modułów.
  • package.json – plik z zależnościami. Zawiera wszystkie moduły i ich wersje.

Co zamierzam?

Mam już podstawowy projekt. Mogę go podejrzeć wpisując w przeglądarkę  127.0.0.1:3000

Zamierzam przez najbliższy tydzień stworzyć prosty system logowania z użyciem tokenu oraz zalążki panelu administracyjnego dla aplikacji. Nie jest to mój pierwszy projekt w Node, więc przyznaję, sprawę mam ułatwioną.

Za tydzień sprawozdanie z Node, a tymczasem śledźcie mojego Githuba.

Pozdrawiam i do następnego!

Ola Bielak

Linki:

 

  • Nie aż tak podobnie 😉
    Ignorowałabym jeszcze folder “node_modules”. Jest/będzie spory, a wystarczy npm install i każdy będzie mógł zaciągnąć sobie potrzebne paczki lokalnie 🙂
    Taka ciekawostka, że zaczęłyśmy z dwóch różnych punktów 😀 Ja od Frontendu, Ty od Backendu 😀 Nie to, żebym uważała, że któryś z tych “endów” jest lepszy na start 🙂 Mnie po prostu wciągnął React JS 😀

    • Dzięki, dorzucę do ignora 😀 Bo faktycznie nawet na ten moment mam sporo.

      Łatwiej mi było zacząć od Node, bo do niego będę sobie “dopinać” różne technologie. Następne będzie Mongo, potem React… To znaczy, znając życie będę się bawiła Reactem wcześniej, niż to tu opiszę 😀
      Więc przygotuj się na masę pytań ode mnie gdy zacznę Reacta 😉 Chyba, że polecasz fajny kurs/książkę. Trochę materiałów mam, ale nie wiem, od której strony ugryźć.

      • Polecę, polecę. I to chyba do końca tygodnia 😉 Zaczęłam pisać wpis i wygląda na to, że spokojnie materiałów mi starczy na pierwszą część 😀
        A React jest naprawdę dosyć przyjemny. Za to Redux… Tutaj to dopiero ciężko ugryźć 🙁 A niestety u mnie nie dam rady się bez niego obejść.