Lubię statyczne witryny. Aby być dokładniejszym, lubię je budować. Jest coś czystego siedząc przed ekranem; to tylko ty i twój edytor tekstu, piszący w zwykłym starym HTML i CSS.
Nie zrozumcie mnie źle, dynamiczne strony też są fajne. Bóg wie, że jestem fanem WordPressa i łatwości użytkowania, którą zapewnia użytkownikom. Statyczne strony przynoszą mi jednak z powrotem. Pamiętam, jak przełączałem się z oprogramowania WYSIWYG na edytor tekstu. Pamiętam usprawnianie procesu programowania za pomocą mojej pierwszej funkcji PHP: include. To były dobre czasy, ale w przeciwieństwie do wielu innych, nie wszystkie zniknęły.
Różnica polega na tym, że teraz możemy zrobić to lepiej. Pre-procesory takie jak Mniej i Sass znacznie poprawił doświadczenie pisania CSS. Mamy dowolną liczbę języków skryptowych, które można łączyć z naszym kodem HTML, jeśli tak zdecydujemy. A potem ... ludzie robili naprawdę ciekawe rzeczy.
Wspomniałem wcześniej o Młot aplikacja na Maca. Jest to aplikacja, która wprowadza własne funkcje i rozszerzenia do starego, dobrego HTML, umożliwiając dołączenie pliku jako częściowego do innego i innych dobrych rzeczy. Kompiluje wyniki do zwykłej strony statycznej, która może być hostowana w dowolnym miejscu. W rzeczywistości ma kilka dodatkowych funkcji, ale w tym artykule nie chodzi o Hammera. Czemu? Jest dostępny tylko na platformie Mac.
Wchodzić Harfa…
To nie jest aplikacja, to o wiele więcej. Zawiera preprocesory dla CSS. Obejmuje języki szablonów dla dokumentów HTML. Jest to miniserwer, który może być używany do programowania lub przekształcony w rzeczywisty serwer produkcyjny. Możesz użyć JavaScript po stronie serwera, aby przekształcić go w pełną aplikację, ponieważ działa na Node.js. Lub, jeśli nie jesteś programistą, możesz po prostu zbudować swoją statyczną stronę, a następnie skompilować ją do hostowania w innym miejscu.
Ponieważ jest oparty na Node.js, jest wieloplatformowy. To także licencja MIT, więc jest darmowa. Możesz nawet wprowadzać zmiany i redystrybuować je lub odsprzedawać, jeśli chcesz.
Teraz ludzie, którzy mieli oko na oko, zauważyli, że Harp nie jest jedynym narzędziem tego rodzaju. Wiele osób tworzy narzędzia oparte na Node do szybkiego uruchamiania projektów internetowych. Mój główny problem polega na tym, że generalnie zakładają, że chcesz użyć ich ulubionego frameworka CSS, biblioteki animacji lub szablonu HTML. Harp nie przyjmuje żadnych założeń co do kodu, który chcesz napisać. Daje ci narzędzia do pisania szybciej.
Pamiętaj, że musi być zainstalowany i uruchomiony za pomocą wiersza poleceń. Nie ma na to GUI. Ale kiedy już to zrobisz - a to wcale nie jest trudne - korzyści przeważają nad krzywą uczenia się.
W tej chwili jestem pewien, że większość naszych czytelników zna sposoby, które przemysł internetowy próbował ulepszyć na wanilii CSS. Kiedy mini-serwer dla twojego projektu jest uruchomiony, pliki LESS, SASS i Stylus są automatycznie kompilowane do CSS.
Kompilacja jest zawsze satysfakcjonująco szybka. We wszystkich moich testach zmiany wprowadzone na mojej stronie internetowej zostały skompilowane w czasie, w którym zapisuję plik, a następnie odświeżam moją przeglądarkę.
Również są włączone Jadeit i EJS. Są to zarówno języki szablonowania JavaScript, które pomagają pisać / generować bardziej zaawansowane dokumenty HTML z większą elastycznością. Zasadniczo można tworzyć szablony HTML i przechowywać rzeczywistą zawartość strony oddzielnie od tych szablonów. To trochę jak przy użyciu CMS-a, tylko że nie ma bazy danych (chyba, że taką chcesz), i musisz zapisać całą zawartość w zwykłym pliku tekstowym.
Prawdziwą zaletą jest oczywiście utrzymanie kodu, a także wszystkie fajne rzeczy, które rzeczywiste programistki mogą zrobić z rzeczywistym JavaScript po stronie serwera i klienta. Są to również języki, które pozwalają na tworzenie bardziej zaawansowanych systemów, takich jak blogi, stosunkowo łatwo (ponownie, jeśli masz programistę na liście płac).
Jaka jest różnica między tymi dwoma? Chodzi głównie o to, jak wolisz pisać swój kod.
EJS utrzymuje rzeczy proste. Jeśli znasz już HTML, to tylko kwestia dodania tagów specyficznych dla EJS, na przykład: <% include global / header%>. Co tam zrobiłem? Zasadniczo po prostu złapałem kod HTML nagłówka mojej strony z innego pliku i zaimportowałem go do użycia w moim głównym szablonie. Oczywiście możesz robić dużo bardziej skomplikowane rzeczy. Oto, co ma do powiedzenia dokumentacja Harp o EJS.
Jade stosuje zupełnie inne podejście do pisania HTML. Wygląda to tak, jak pokazano na stronie głównej projektu:
bodyh1 Jade - node template engine#container.colif youAreUsingJadep You are amazingelsep Get on it!p.Jade is pretty cool,To wszystko zostaje przetłumaczone na HTML i JavaScript. Zwróć uwagę na włączenie instrukcji if / else w samym środku tego wszystkiego oraz zależność od właściwego wcięcia.
Coffeescript należy do JavaScript, co Jade oznacza do HTML. Zasadniczo jest to uproszczony format do pisania JavaScript, który następnie jest kompilowany do zwykłych rzeczy. Podobnie jak w przypadku Jade, jest silnie zależny od wcięć i zawiera dużo składni.
Wygląda to tak (kolejny przykład bezwstydnie wypleniony ze strony głównej projektu):
math =root: Math.sqrtsquare: squarecube: (x) -> x * square xA wynik wygląda następująco:
math = {root: Math.sqrt,square: square,cube: function(x) {return x * square(x);}};Strony internetowe stworzone za pomocą Harp mogą oczywiście być hostowane w dowolnym miejscu. Warto jednak wspomnieć, że twórcy Harp stworzyli platformę hostingową specjalnie zaprojektowaną dla rzeczy zbudowanych za pomocą ich oprogramowania. Ceny nie są złe i integruje się z Dropbox w celu łatwej automatycznej aktualizacji Twojej witryny. Sprawdź to tutaj: www.harp.io
Harp, ze swoimi preprocesorami, językami szablonowymi, szybkością i dobrymi stosunkami między platformami, jest solidnym dodatkiem do zestawu narzędzi projektanta. Mówię, że warto się uczyć.