Świeże zasoby dla projektantów stron internetowych i programistów (styczeń 2018 r.)

Nowy rok 2018 jest tutaj. Jeśli spojrzymy na postęp w tworzeniu stron internetowych pięć lat temu, to jest zupełnie inny niż obecnie. Dzisiaj są nowe metody, narzędzia, a nawet zupełnie nowy paradygmat to zmienia sposób, w jaki dzisiaj budujemy strony internetowe - a VirtualDOM jest jednym z nich.

DOM (Document Object Model) to a model drzewa, który definiuje strukturę strony internetowej. Wybieranie, przemierzanie i manipulowanie DOMem może być bardzo kosztownym narzędziem utrudniać wydajność renderowania witryny.

Jednak w tym poście nie będziemy rozmawiać o tym, jak działa VirtualDOM, zamiast tego, wraz z innymi narzędziami, zajmiemy się tym biblioteki, które umożliwiają wdrożenie VirtualDOM od razu. Sprawdźmy je.

MaquetteJS

Na implementacja VirtualDOM to pozwala na budowanie płynnego interfejsu użytkownika, który aktualizuje dane wokół niego. Jest to czysty JavaScript i nieoplewiony biblioteka jest więc możliwa używaj go wraz z językiem syntetycznym, takim jak CoffeeScript, TypeScript i JSX. Świetna biblioteka alternatywna dla React.js; MaquetteJS ma znacznie mniejszy rozmiar (tylko 3kb) porównywalnie.

ReDOM

Jest to jedna z moich ulubionych bibliotek VirtualDOM, ponieważ łatwo ją podnieść, patrząc na składnię. Z zaledwie 2Kb, możesz zbudować szybko renderującą stronę internetową lub niestandardowy komponent HTML. Biblioteka składa się z dwie podstawowe funkcje el, do tworzenia lub manipulowania elementem, i uchwyt aby dodać go do wybranego elementu. Możesz załadować go w przeglądarce i po stronie serwera za pomocą NodeJS.

ReactiveJS

Templating Biblioteka interfejsu użytkownika do tworzenia wysoce interaktywnej aplikacji internetowej. Pierwotnie zbudowany dla TheGuardian, ReactiveJS jest zbudowany do pracy w przeglądarkach i urządzeniach mobilnych; więc możesz polegać na jego niezawodności. ReactiveJS również pochodzi wiele funkcji potrzebnych do nowoczesnej aplikacji internetowej natychmiast po wyjęciu z pudełka, takie jak Scoped CSS, Custom Components, SVG i animacja.

RiotJS

RitoJS jest przyjemną do pracy i znacznie łatwiejszą do nauczenia się biblioteką dla początkujących pozwala zdefiniować niestandardowy komponent z elementem HTML oraz atrybuty HTML, podczas gdy poprzednie biblioteki wymuszają użycie czystej składni JavaScript.

RiotJS jest kompatybilny ze środowiskiem Node.js lub przeglądarkami i może być świetna alternatywa dla Vue.js ze względu na podobieństwa.

HyperHTML

hyperHTML, jak sama nazwa wskazuje, zapewnia wydajność podczas renderowania i manipulowania DOM. Możesz go użyć do utworzenia elementu niestandardowego i składnika sieci Web. Działa tak łatwo jak jQuery, w którym może być używany w przeglądarce przez ładowanie skryptu z CDN i dostęp do hyperHTML. Nie ma potrzeby skomplikowania obróbka.

Mithril

Jakkolwiek fajnie to brzmi, Mithril to potężna biblioteka JavaScript. Oprócz VirutalDOM i Komponentów, Mithril jest również wyposażony w Routing i XHR, za pomocą których możesz zbudować jednostronicową aplikację internetową bez polegania na żadnej innej bibliotece. Benchmark pokazuje, że przewyższa niektóre popularne biblioteki, takie jak Vue.js, React.js i Angular.

SlimJS

SlimJS to biblioteka JavaScript do zbuduj niestandardowy komponent WWW za pomocą rodzimego interfejsu API Web Component. Ponieważ jest zbudowany wokół rodzimego komponentu przeglądarki SlimJS jest wyposażony w Polyfill która ogranicza interfejs API w przeglądarce, która go jeszcze nie obsługuje. To świetna struktura, jeśli wolisz przyjąć rodzimą drogę.

VSVG

Chociaż SVG ma podobną składnię do HTML, to kolejny rodzaj bestii z własnymi dziwactwami. Ta biblioteka, jak sama nazwa wskazuje, będzie pozwalają tworzyć i manipulować SVG w locie.

EmotionSH

EmotionSH jest Struktura CSS-in-JS, której możesz potrzebować podczas budowania strony internetowej za pomocą VirtualDOM. Pozwala to na dostarczanie tylko potrzebnych bitów CSS na swojej stronie i możesz dynamicznie aktualizuj stylizację bez przekonania o nazewnictwie i specyfice klasy, ponieważ styl jest ograniczony tylko do komponentu, do którego jest stosowany.

React Starter Kit

Jeśli śledzisz sieć w ciągu ostatnich kilku lat, znajdziesz React (prawie) wszędzie. To jest 5 krótkich filmów wprowadzających React. Jeśli chcesz być na bieżąco z branżą, może to być właściwe miejsce, aby zacząć.

Elementy

Elementy to zbiór Komponenty iOS do tworzenia prototypu aplikacji iOS w Sketch. Został zbudowany przez ludzi według Sketcha i został zaktualizowany za pomocą interfejsu iPhone X UI.

Modaal

Modaal to biblioteka JavaScript zbudowana z myślą o dostępności. To było zweryfikowany dla “Wsparcie AA dla poziomu WCAG 2.0” to (myślę) najbardziej dostępny “Modalny” biblioteka dzisiaj. Jego lekki, zgodny z jQuery i może być używany do zdjęć, filmów, a nawet Instagramu. Co więcej, ten krótki kurs Google pomoże Ci rozpocząć korzystanie z Web Accessibility i dlaczego jest to ważne.

WordPressify

Pakiet NPM, który umożliwia uzyskanie środowiska programistycznego WordPress w ciągu kilku minut. To wszystko jest skonfigurowane nowoczesne narzędzia, takie jak Gulp, LiveReload, PostCSS, Babel więc możesz skupić się na rozwijaniu swojego projektu raczej dostrojenia konfiguracji.

Lando

Lando jest także poręcznym narzędziem do szybkiego i łatwego rozwijania środowiska programistycznego WordPressify które właśnie wspomnieliśmy powyżej. Ale zamiast Node.js trwa zaleta Docker to lekka kontenerowa technologia i oferuje większą elastyczność w zakresie stosu, który chcesz wykorzystać w swoim rozwoju.

Na przykład możesz określ wersję PHP, włącz XDebug i zainstaluj Composer.

WP-Docklines

WP-Docklines to zbiór obrazów, które można wykorzystać jako linię bazową do wykonywania ciągłej integracji i dostarczania dla motywów WordPressa i usług w takich serwisach jak Bitbucket, CircleCI i Gitlab. Każdy obraz jest dołączony do zestawu narzędzia powszechnie potrzebne przy tworzeniu WordPressa takie jak kod PHP Sniffer, PHPUnit i WP-CLI.

WP-Locker

WP-Locker to konfiguracja Docker do tworzenia środowiska programistycznego WordPress w kilka minut. To jest skonfigurowany z Apache, MySQL i phpMyAdmin a ponieważ rozszerza obraz WP-Docklines, wykonuje również dodatkowe narzędzia na obrazku po wyjęciu z pudełka..

Po prostu rodzaj bin / start aby to umożliwić, skonfiguruj Lokalny Gospodarz i zainstaluj wtyczki i motywy, które skonfigurowałeś w pliku konfiguracyjnym.

Docusaurus

Kolejna inicjatywa open-source z Facebooka, Docusaurus to narzędzie do tworzenia strony internetowej z dokumentacją twojego projektu. Zbudowany z React i Markdown, możesz łatwo tworzyć dokumentację, utrzymywać ją, a nawet tworzyć bloga dla swojej strony i opublikuj go na Github Pages.

VSCode Yo

Yeoman to pakiet węzłów, który pozwala szybko uruchomić projekt wybór gotowych rusztowań, które pasują do twoich projektów. Jeśli używasz Visual Studio Code, ta wtyczka jeszcze bardziej usprawni proces uruchamiania uruchom “Siema” polecenie bezpośrednio z okna kodu Visual Studio.

BluebirdJS

Biblioteka JavaScript, która pozwala na korzystanie Obietnica, oczekiwać, asynchroniczny dziś we wszystkich przeglądarkach; powiedział, że działa nawet w Netscape. Obietnica jest jednym z najmocniejszych punktów najnowszych specyfikacji JavaScript, które by to zrobiły uczyń swój kod prostszym, czytelnym i łatwym do utrzymania.

Ładniejszy

Ładniejszy jest narzędziem do sformatuj swój kod, aby był zgodny ze standardem kodowania języka. Przepisze kod z scracth zgodnie z regułą pozwalającą Tobie i Twojemu zespołowi być bardziej produktywny zamiast debatować nad stylami pisania kodu.