Przedstawiamy bluzę z kapturem: pełny rozwój stosów dla programistów front-end

Jeśli jeszcze nie słyszałeś o Bluzach z kapturem, powinieneś to sprawdzić.

Hoodie to progresywna nowa biblioteka dla programistów front-end, która przyjmuje kilka niezwykłych nowych filozofii, które prawdopodobnie zmienią zarówno tworzenie aplikacji, jak i wrażenia użytkownika. Hoodie oddaje kontrolę nad pełnym stosem, tworzeniem aplikacji front-endowych całkowicie w ręce programistów front-endowych i guru doświadczenia użytkownika, uwalniając ich od czasami nieodgadnionych technicznych zastrzeżeń ich back-endowych odpowiedników. Ponadto aplikacje z kapturem uwalniają użytkowników z kajdan nieprzerwanej łączności, umożliwiając im korzystanie z aplikacji w podróży, w powietrzu lub pod wodą, bez obaw.

Chociaż platforma jest wciąż w powijakach, oferuje już kilka potężnych nowych narzędzi, które warto wypróbować dla każdego programisty front-end, który chce wyprzedzić grę. Zespół odpowiedzialny za Hoodie ma sprawdzone doświadczenie, pracował przy innych bardzo udanych projektach, takich jak CouchDB, Async, Mustache.js i wielu innych.

Po tym, jak dowiedziałem się, nad czym pracuje biblioteka rozwojowa z pełnym stosem Hoodie i byłem bardzo podekscytowany projektem, postanowiłem wypróbować go dla siebie. Pozwól, że opowiem ci trochę więcej o bluzie z kapturem i pokażę jej potencjał do tworzenia świetnych aplikacji.

Co to jest bluza z kapturem?

Przede wszystkim, czym jest bluza z kapturem? Co jest w tym takiego wspaniałego? Hoodie to w pełni oparta na języku JavaScript platforma i interfejs API typu open source, która łączy kilka potężnych nowych paradygmatów w jednym pakiecie programistycznym z pełnym stosem, z korzyścią zarówno dla programistów, którzy tworzą aplikacje Hoodie, jak i użytkowników końcowych, którzy z nimi korzystają. Najważniejszymi z tych koncepcji są ruchy „noBackend” i „Najpierw offline”, wraz z silnym procesem społecznościowym znanym jako „Dreamcode” do tworzenia interfejsu API.

no Backend

Hoodie wierzy, że klucz do doskonałego tworzenia aplikacji front-endowych leży w rękach ekspertów zajmujących się doświadczeniem użytkownika i programistów, którzy wiedzą, jak sprawić, by aplikacja wyglądała świetnie i była przyjemna w użyciu, ale którzy zbyt często są ograniczeni technicznymi elementami back-endu nad którymi nie mają kontroli. Podstawowe interakcje z serwerem, które istnieją od zawsze, takie jak rejestracja/logowanie użytkownika, przechowywanie danych lub wysyłanie wiadomości e-mail, nadal wymagają czasochłonnych niestandardowych implementacji dla każdej nowej aplikacji, zmuszając programistę front-end do uczenia się i programowania dla nowego zaplecza. kończą dziwactwa za każdym razem.

Bluza z kapturem oddaje kontrolę w ręce projektanta i programisty front-endu, całkowicie odchodząc od back-endu. Dzięki tworzeniu aplikacji front-endowych dla Hoodie, zamiast martwić się o stronę serwera, musisz się martwić tylko o prosty, łatwy do nauczenia i implementacji interfejs API wbudowany w Hoodie. Na przykład chcesz zarejestrować nowego użytkownika? Można to zrobić w jednym wierszu kodu:

 hoodie.account.signUp(username, password);

Taka jest idea inicjatywy noBackend, w którą Hoodie jest w pełni oddana. noBackend oznacza, że ​​nie potrzebujesz programisty zaplecza! Po prostu zainstaluj serwer z kapturem na swoim serwerze i zapomnij o tym .

Bluza z kapturem jest w całości napisana w JavaScript. Jego samodzielny back-end używa Node.JS z Apache CouchDB jako bazą danych. W chwili pisania tego tekstu główne funkcje, które wdrożył już Hoodie, obejmują rejestrację użytkowników i administrację, ładowanie danych, przechowywanie i e-maile. Tę podstawową funkcję można łatwo rozszerzyć, dodając dodatkowe wtyczki Node.js.

Kod snu

Bluza z kapturem to przede wszystkim API - to właśnie sprawia, że ​​noBackend jest możliwy. Implementacja bluzy z kapturem może się zmieniać i ulepszać z biegiem czasu, ale interfejs udostępniony programistom pozostanie taki sam, dzięki czemu nigdy nie będziesz musiał się o to martwić.

Bluza z kapturem wciąż szybko się rozwija i cały czas dodawane są nowe funkcje. Hoodie, podobnie jak inne projekty noBackend, wykorzystuje podejście społecznościowe do projektowania API o nazwie Dreamcode. Zasadniczo wymyślasz kod, który chciałbyś napisać, a jeśli otrzyma wystarczające wsparcie od społeczności, bluza z kapturem to urzeczywistni.

To oparte na interfejsie API, crowdsourcingowe podejście do projektowania interfejsu API bluzy z kapturem oznacza, że ​​kod bluzy z kapturem jest dziecinnie prosty w pisaniu i łatwy w odczytywaniu. To kod Twoich marzeń!

Najpierw offline

Bluza z kapturem rozwiązuje wiele problemów programistów aplikacji front-endowych dzięki interfejsowi API opartemu na noBackend, opartemu na Dreamcode. Jednak jednym z głównych celów Hoodie jest rozwiązanie również głównego problemu dla użytkowników – ich często wyniszczającej zależności od łączności.

Wraz z postępem przechodzenia na urządzenia mobilne z aplikacjami mobilnymi, stare założenie ciągłej łączności oparte na komputerach stacjonarnych pozostało niezmienione. Przez cały ten czas obiecywano, że gdziekolwiek pójdziesz, będzie tam internet. Do dnia dzisiejszego utratę łączności traktuje się jako anomalię, która uniemożliwia użytkownikom wykonywanie jakichkolwiek czynności, dopóki nie będą ponownie online. Ale jak wszyscy wiemy, sieć telekomunikacyjna nie spełniła tej obietnicy. Łączność wychodzi przez okno w samolotach, w metrze, na wiejskich drogach iw niezliczonych innych sytuacjach. I to w rozwiniętych częściach świata! Na ogromnych obszarach planety stabilny dostęp do internetu jest rzadkim wyjątkiem od reguły.

Ruch Offline First poszukuje pełnej wdzięku harmonizacji z tym prostym faktem życia. W przypadku trybu Offline First brak łączności to po prostu kolejny normalny stan aplikacji. W rzeczywistości jest to stan domyślny! Bluza z kapturem entuzjastycznie przyjmuje tę filozofię. Za interfejsem API kryje się pełna front-endowa implementacja tymczasowego magazynu lokalnego oraz automatyczna, pełna wdzięku synchronizacja, gdy tylko połączenie stanie się dostępne.

Dzięki bluzie z kapturem możesz publikować komentarze, wysyłać e-maile, edytować konta i wykonywać większość innych codziennych czynności, nie martwiąc się o połączenie. Cały system przechowywania i synchronizacji można w każdej chwili przerwać, bez obawy o utratę danych.

Oczywiście ten model ma swój własny zestaw unikalnych wyzwań i podejść projektowych, ale zespół Hoodie jest pionierem w zakresie technik rozwiązywania tych problemów.

Offline First to nowe, ekscytujące podejście do tworzenia aplikacji na wczesnych etapach wdrażania. Jest jeszcze wiele do zrobienia, aby opracować wymagane techniki. Zajrzyj tutaj, aby zobaczyć, jak robi to bluza z kapturem.

Prosta aplikacja z kapturem

Aby zademonstrować wykorzystanie Hoodie jako front-endowego narzędzia programistycznego, postanowiłem napisać prostą aplikację, która umożliwi członkom naszej społeczności tworzenie własnych wydarzeń i publikowanie ich, aby inni inżynierowie mogli je przeglądać i dodawać do swoich harmonogramów. Pamiętaj, że celem jest zademonstrowanie bluzy z kapturem, a nie udostępnienie aplikacji gotowej do produkcji. Możesz znaleźć kod na mojej stronie GitHub.

Pod okładkami Hoodie to zasadniczo połączenie serwera wbudowanego w NodeJS i biblioteki JavaScript po stronie klienta. Poza prostym procesem instalacji i wdrażania, programista pracujący nad aplikacją będzie działał tylko na kodzie po stronie klienta. Wbudowana biblioteka może komunikować się po stronie serwera bez wiedzy programisty o tym, jak to działa.

Co jeśli nasza aplikacja wymaga od nas zrobienia czegoś niestandardowego na serwerze? Zawsze możemy stworzyć wtyczki Hoodie. Oto więcej informacji na temat wtyczek.

Uruchamianie aplikacji z kapturem

Pierwszym krokiem do stworzenia pełnego stosu dowolnej aplikacji dla bluzy z kapturem jest użycie narzędzia wiersza poleceń dla bluzy z kapturem, aby oderwać się od ziemi:

 hoodie new toptalCommunity

Spowoduje to utworzenie zainicjalizowanej aplikacji Hoodie, która ma już jakiś kod i możemy już uruchomić naszą aplikację! Jeśli napiszemy

 cd toptalCommunity hoodie start

przeglądarka otworzy się z przykładową aplikacją zespołu Hoodie:

W tym momencie zrobiłem trochę sprzątania. Aplikacje z kapturem są obecnie dostarczane z Bootstrap i Prism, ale wyjąłem dostarczone wersje. Nie potrzebowałem Prism i chciałem użyć własnej wersji Bootstrap, aby móc używać czcionek i JS, których chciałem użyć. Wprowadziłem również pewne zmiany w main.css podczas tworzenia aplikacji, aby nadać jej własny styl i umożliwić mój prosty szablon bootstrap. Używałem jQuery tylko do manipulacji DOM i zdarzeń. Bluza zadba o wszystko inne.

Bluza z kapturem i kod snów

Kiedy pracowałem nad stworzeniem tej przykładowej aplikacji, szybko zdałem sobie sprawę ze wszystkich korzyści płynących z pracy z kapturem. Tak wielu zwykłych pytań, na które trzeba odpowiedzieć podczas rozpoczynania projektu, po prostu tam nie było. Bluza z kapturem pozwoliła mi po prostu napisać kod i zobaczyć aplikację na żywo i działać.

Jaką strategię powinniśmy zastosować do zarządzania kontem użytkownika? Odpowiedzią jest wtyczka do konta Hoodie. Jak powinniśmy przechowywać nasze dane na backendzie? Niezwykle prosty interfejs API do przechowywania w bluzie z kapturem obsługuje to za nas, dając nam funkcję Offline First za darmo! Nie trzeba było żadnego wysiłku, aby ta aplikacja z kapturem działała w trybie offline, po prostu działa.

Zanurzmy się nieco głębiej w niektórych implementacjach:.

Zarządzanie kontem użytkownika

Hoodie posiada wtyczkę, która zajmuje się dla nas zarządzaniem kontem o nazwie hoodie-plugin-users . API nie mogłoby być prostsze.

Jak dodajemy nowego użytkownika?

 function signUp() { var email = $('#txtEmail').val(); var password = $('#txtPassword').val(); hoodie.account.signUp(email, password) .fail(function(err){ console.log('Log error...let the user know it failed'); }); }

Jak logujemy użytkownika?

 function signIn() { var email = $('#txtEmail').val(); var password = $('#txtPassword').val(); hoodie.account.signIn(email, password) .fail(function(err){ console.log('Log error...let the user know it failed'); }); }

Czy mamy zalogowanego użytkownika?

 if(hoodie.account.username) { // modify the page accordingly setUsername(); $('#lnkSignUp').hide(); $('#lnkSignIn').hide(); }

To naprawdę nie mogło być prostsze. Och, czekaj i jak nasz interfejs zareaguje na to wszystko? Bluza z kapturem ma dla Ciebie w zanadrzu wydarzenia

Reaguj po zalogowaniu się użytkownika:

 hoodie.account.on('signin', function (user) { showMyEvents(); setUsername(); $('#lnkSignUp').hide(); $('#lnkSignIn').hide(); });

Przechowywanie danych

Nasza przykładowa aplikacja pozwoli użytkownikom tworzyć własne wydarzenia (dane prywatne) i publikować je, jeśli chcą (upubliczniając dane), aby inni użytkownicy mogli dołączyć do wydarzenia.

Bluza z kapturem pozwala nam dodawać dane do swojego lokalnego sklepu bez logowania, więc skąd ma wiedzieć, do którego użytkownika należą te dane? Cóż, utrzymuje je lokalnie i nie synchronizuje się z serwerem, dopóki użytkownik się nie zaloguje. Bluza z kapturem zapewni również, że tylko ten użytkownik będzie mógł uzyskać dostęp do tych danych.

Oto jak to działa:

 hoodie.account.signIn(email, password); //Let's sign in hoodie.store.add('myevent',event); //Store the data, hoodie takes care of using the session to make sure this data belongs to our user

To takie proste! Ok, żeby pomogło nam to stworzyć wydarzenie, jak podzielimy się nim z innymi? W tym miejscu pomoże nam global share plugin . Musimy go zainstalować, ponieważ nie jest to domyślna wtyczka:

 hoodie install global-share

Teraz mamy wtyczkę, używajmy jej! Musimy opublikować dane, które już dodaliśmy do naszego sklepu użytkownika, do sklepu globalnego.

 hoodie.store.findAll('event').publish();

Spowoduje to oznaczenie wszystkich zdarzeń zapisanych dla tego użytkownika jako publicznych, dzięki czemu w wyniku zapytania do sklepu globalnego otrzymamy te dane.

 hoodie.global.findAll('event'); //This is read-only

Na stronie Moje wydarzenia użytkownik może tworzyć wydarzenia, które są publikowane bezpośrednio w sklepie globalnym.

 var event = {}; event.name = $('#txtName').val(); event.date = $('#txtDate').val(); event.time = $('#txtTime').val(); hoodie.store.add('event',event).publish(); 

Opublikowane wydarzenia są widoczne dla wszystkich, więc teraz każdy użytkownik może zobaczyć wydarzenia utworzone na stronie Wydarzenia.

A co z danymi, które nie powinny być publiczne? Przechowujemy wydarzenia, do których aplikował nasz użytkownik i pokazujemy je na stronie Wydarzenia. Gdy użytkownik kliknie przycisk Zastosuj, jest to wykonywane:

 var id = $(this).parent().parent().data('id'); hoodie.global.find('event',id) .done(function(event){ hoodie.store.add('myevent',event); });

Dwa zrzuty ekranu poniżej pokazują dwa okna przeglądarki działające jednocześnie. W pierwszej przeglądarce użytkownik jest zalogowany jako użytkownik a@aa , który zgłosił się do zdarzenia A . W drugim użytkownik b@bb jest zalogowany i zastosował się do B Event .

Długie odpytywanie

Subskrybując niektóre wydarzenia dostarczane przez Hoodie, możemy w przejrzysty sposób korzystać z technik, takich jak długie ankiety, które nadają naszej aplikacji interesującą funkcję, ponieważ używają jej i współpracują nad nią różni użytkownicy.

To naprawdę proste. W naszej przykładowej aplikacji wystarczy jedna linia:

 hoodie.global.on('add:event', loadEvent);

Ta prosta linia zajmie się długim odpytywaniem serwera w celu sprawdzenia nowych wydarzeń, które mogły zostać dodane przez innych użytkowników i dodania ich do strony Moje wydarzenia.

Niektóre obawy

Po zbudowaniu tej przykładowej aplikacji do zabawy z kapturem i jej funkcjami tworzenia aplikacji front-endowych, jestem bardzo podekscytowany tym, co ma do zaoferowania. Jednak zwróciło mi uwagę kilka jasnych kwestii.

Bluza z kapturem sprawia, że ​​programista tak łatwo komunikuje się z serwerem, że każdy programista może dodawać rzeczy do naszej bazy danych za pomocą samej konsoli, co oczywiście ma poważne konsekwencje dla bezpieczeństwa i integralności danych.

W bibliotece nadal brakuje również wielu podstawowych rzeczy, których potrzebujesz w dowolnej aplikacji produkcyjnej, takich jak sprawdzanie poprawności danych, adresy URL, które można połączyć, platforma testowa i prywatne udostępnianie danych (chociaż robią już spore postępy w tej ostatniej). Aby teraz używać Hoodie w produkcji, musielibyśmy połączyć go z innym rozwiązaniem, takim jak AngularJS, Ember lub dowolnym z wielu innych rozwiązań, które pomogą nam upewnić się, że mamy odpowiednio ustrukturyzowany i łatwy w utrzymaniu kod JavaScript dla naszych projektów Front-End. Ponieważ te frameworki same zbliżają się do złożoności technologii back-end w dzisiejszych czasach, to rozwiązanie w dużej mierze pokonałoby cel Hoodie.

Przyszłość bluzy

Bluza z kapturem wciąż jest intensywnie rozwijana, aby rozwiązać wszystkie te problemy. Zespół ciężko pracuje nad wdrożeniem nowych funkcji i ulepszeniem istniejących, aby platforma była gotowa do masowej konsumpcji i oczywiście ten proces wymaga czasu. Jeśli planujesz teraz nową aplikację na pełną skalę, możesz chcieć znaleźć inną platformę, na której można ją zbudować tym razem.

W międzyczasie jednak z pewnością nie jest za wcześnie, aby zacząć majstrować przy tworzeniu aplikacji front-endowych przy użyciu Hoodie, co mam nadzieję, że właśnie zademonstrowałem. W bluzę z kapturem jest już wiele potężnych nowych pomysłów, które, jak sądzę, prawdopodobnie staną się bardzo popularne. Wychodzenie do przodu z tymi rzeczami prawdopodobnie nie jest złym pomysłem.

Jeśli zespół Hooda będzie kontynuował ciężką pracę, interfejs API powinien być gotowy na prime time w mgnieniu oka. Jeśli chcesz śledzić postępy zespołu z kapturem, spójrz na ich narzędzie do śledzenia kamieni milowych.

Bluza z kapturem obiecuje, że tworzenie wspaniałych aplikacji dla osób poruszających się i shakerów będzie dziecinnie proste. Jeśli pomysły, które ucieleśnia bluza z kapturem, się przyjmą, możemy zauważyć, że potrzeba zespołu programistów back-endowych dla każdego nowego projektu odejdzie w przeszłość. Przy takich projektach łatwo wyobrazić sobie złoty wiek dla programistów front-end w niezbyt odległej przyszłości. Podobnie korzyści dla użytkowników oferowane przez ideał Offline First są ogromnym krokiem w kierunku dostępności, rozszerzając zasięg naszego mobilnego, połączonego stylu życia na te miejsca, do których sam internet nie dociera.

Udaj się do bluzy z kapturem, aby śledzić jej postępy i stać się częścią ekscytujących nowych zmian, które przygotowuje do wprowadzenia.

Specjalne podziękowania dla zespołu Hoodie. Logo bluzy z kapturem używane za zgodą projektu Hoodie Open Source