Hoodie 簡介:面向前端開發人員的全棧開發

已發表: 2022-03-11

如果你還沒有聽說過 Hoodie,你應該去看看。

Hoodie 是前端開發人員進行全棧開發的絕佳工具。

Hoodie 是一個面向前端開發人員的漸進式新庫,它採用了一些非凡的新理念,這些理念可能會改變應用程序開發和用戶體驗。 Hoodie 將全棧、前端應用程序開發的控制權完全掌握在前端開發人員和用戶體驗大師手中,使他們擺脫了後端同行有時難以理解的技術反對意見。 此外,Hoodie 應用程序將用戶從不間斷連接的束縛中解放出來,讓他們可以在旅途中、空中或海底使用您的應用程序,而無需擔心。

雖然該平台仍處於起步階段,但它已經提供了一些強大的新工具,值得任何想要領先於遊戲的前端開發人員嘗試。 Hoodie 背後的團隊擁有久經考驗的背景,曾參與過其他非常成功的項目,例如 CouchDB、Async、Mustache.js 等等。

在了解了 Hoodie 全棧開發庫的工作內容並對該項目感到非常興奮之後,我決定親自嘗試一下。 讓我告訴你更多關於 Hoodie 的信息,並向你展示它在開發出色應用方面的一些潛力。

什麼是連帽衫?

首先,什麼是Hoodie? 它有什麼了不起的? Hoodie 是一個開源的、完全 JavaScript 的平台和 API,它在一個完整的堆棧開發包中結合了幾個強大的新範例,這對構建 Hoodie 應用程序的開發人員和與之交互的最終用戶都有好處。 這些概念中最主要的是“noBackend”和“Offline First”運動,以及用於構建 API 的強大的社區驅動流程,稱為“Dreamcode”。

noBackend

Hoodie 認為,出色的前端應用程序開發的關鍵在於用戶體驗專家和開發人員,他們知道如何使應用程序看起來很棒並且使用起來很愉快,但他們經常受到後端技術的限制他們無法控制。 永遠存在的基本服務器交互,例如用戶註冊/登錄、數據存儲或電子郵件發送,仍然需要為每個新應用程序進行耗時的自定義實現,從而迫使前端開發人員學習並為新的後端編寫代碼。每次都結束怪癖。

noBackend 意味著您不需要後端開發人員!

Hoodie 通過完全抽像出後端,將控制權交還給前端設計師和開發人員。 使用 Hoodie 前端應用程序開發,您無需擔心服務器端,只需擔心 Hoodie 內置的簡單、易於學習和實施的前端 API。 例如,想註冊一個新用戶? 這可以在一行代碼中完成:

 hoodie.account.signUp(username, password);

這就是 Hoodie 全力支持的 noBackend 計劃背後的理念。 noBackend 意味著您不需要後端開發人員! 只需將 Hoodie 後端部署到您的服務器,然後忘記它

Hoodie 完全用 JavaScript 編寫。 它的獨立後端使用帶有 Apache CouchDB 作為其數據庫的 Node.JS。 在撰寫本文時,Hoodie 已經實現的核心功能包括用戶註冊和管理、數據加載、存儲和電子郵件。 這些核心功能可以通過添加額外的 Node.js 插件輕鬆擴展。

夢碼

Hoodie 首先是一個 API——這就是 noBackend 成為可能的原因。 Hoodie 的實現可能會隨著時間的推移而改變和改進,但提供給開發人員的接口將保持不變,因此您永遠不必擔心它。

連帽衫仍在快速增長,並且一直在添加新功能。 Hoodie 與其他 noBackend 項目一樣,使用社區驅動的方法來設計稱為 Dreamcode 的 API。 從本質上講,您構想了您編寫的代碼,如果它得到社區的足夠支持,Hoodie 就會實現。

這種以 API 為先的眾包方法來設計 Hoodie API 意味著 Hoodie 代碼易於編寫和閱讀。 這是你夢想的密碼!

離線優先

Hoodie 以其 noBackend、Dreamcode 驅動的 API 為前端應用程序開發人員解決了很多問題。 但 Hoodie 的主要目標之一也是為用戶解決一個主要問題——他們經常嚴重依賴連接性。

隨著向帶有移動應用程序的移動設備的轉變,舊的基於桌面的持續連接假設保持不變。 一直以來,人們一直承諾,無論你走到哪裡,互聯網都會在那裡。 直到今天,失去連接仍被視為異常現象,在用戶重新上線之前,他們無法完成任何工作。 但眾所周知,電信網絡未能兌現這一承諾。 在飛機、地鐵、鄉村道路和無數其他情況下,連接性消失了。 那是在世界發達地區! 在地球上的廣大地區,穩定的互聯網接入是罕見的例外。

離線優先運動尋求與這個簡單的生活事實的優雅協調。 使用 Offline First,非連接只是應用程序的另一種正常狀態。 實際上這是默認狀態! 連帽衫熱情地採用了這一理念。 API 背後是臨時本地存儲的完整前端實現,以及在連接可用時自動、優雅地同步。

使用 Hoodie 進行前端應用程序開發意味著離線優先模式,用戶不必依賴連接。

使用 Hoodie,您可以發表評論、發送電子郵件、編輯帳戶以及進行大多數其他日常活動,而無需擔心建立連接。 整個存儲和同步系統可以隨時中斷,不用擔心丟失數據。

當然,這個模型有自己獨特的設計挑戰和方法,但 Hoodie 的團隊正在開創解決這些挑戰的技術。

Offline First 是應用程序開發的一個令人興奮的新嘗試,處於採用的早期階段。 開發所需的技術還有很多工作要做。 看看這裡,看看 Hoodie 是如何做到的。

一個使用 Hoodie 的簡單應用程序

為了演示 Hoodie 作為前端開發工具的使用,我決定編寫一個簡單的應用程序,讓我們的社區成員可以創建自己的事件並將其發布給其他工程師瀏覽並添加到他們的日程中。 請記住,這裡的目標是展示 Hoodie,而不是提供可用於生產的應用程序。 你可以在我的 GitHub 頁面上找到代碼。

在幕後 Hoodie 本質上是 NodeJS 中內置的服務器端和客戶端 JavaScript 庫的組合。 除了簡單的安裝和部署過程之外,開發應用程序的開發人員將只處理客戶端代碼。 內置庫可以與服務器端對話,而開發人員不知道它是如何工作的。

如果我們的應用程序要求我們在服務器上做一些自定義的事情怎麼辦? 我們總是可以創建 Hoodie 插件。 這是有關插件的更多信息。

啟動您的連帽衫應用程序

對任何 Hoodie 應用程序進行全棧開發的第一步是使用 Hoodie 命令行工具讓我們起步:

 hoodie new toptalCommunity

這將創建一個已初始化的 Hoodie 應用程序,其中已經有一些代碼,我們已經可以運行我們的應用程序了! 如果我們輸入

cd toptalCommunity hoodie start

瀏覽器將打開一個來自 Hoodie 團隊的示例應用程序:

這是 Hoodie 提供的示例前端應用程序。

在這一點上,我做了一點家務。 Hoodie 應用程序目前帶有 Bootstrap 和 Prism,但我刪除了提供的版本。 我不需要 Prism,而是想使用我自己的 Bootstrap 版本,這樣我就可以使用我想使用的字體和 JS。 在構建應用程序時,我還對 main.css 進行了一些更改,以賦予它自己的風格並允許我使用簡單的引導模板。 我只將 jQuery 用於 DOM 操作和事件。 連帽衫負責其他一切。

連帽衫和 Dreamcode

當我致力於創建這個示例應用程序時,我很快意識到使用 Hoodie 的所有好處。 開始項目時需要回答的許多常規問題都不存在。 Hoodie 讓我只需編寫代碼並查看應用程序的運行情況。

我們應該使用什麼策略來管理用戶帳戶? Hoodie 帳戶插件就是答案。 我們應該如何將數據存儲在後端? Hoodie 死氣沉沉的簡單存儲 API 為我們處理了這些問題,免費為我們提供了離線優先功能! 無需任何努力即可使這款 Hoodie 應用程序離線工作,它就可以正常工作。

讓我們更深入地了解一些實現:

用戶賬戶管理

Hoodie 有一個名為hoodie-plugin-users為我們負責帳戶管理。 API 再簡單不過了。

我們如何添加新用戶?

 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'); }); }

我們如何登錄用戶?

 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'); }); }

我們有用戶登錄嗎?

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

這真的再簡單不過了。 哦,等等,我們的 UI 將如何對所有這些做出反應? 連帽衫為您準備了活動

在用戶登錄時做出反應:

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

數據存儲

我們的示例應用程序將允許用戶創建自己的活動(私人數據)並在需要時發布(公開數據),以便其他用戶可以加入活動。

Hoodie 允許我們在不登錄的情況下向其本地存儲添加數據,那麼它如何知道這些數據屬於哪個用戶呢? 好吧,它保持在本地,並且在該用戶登錄之前不會同步到服務器。Hoodie 還將確保只有該用戶能夠訪問該數據。

所以這是它的工作原理:

 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

就是這麼簡單! 好的,這將有助於我們創建一個事件,我們將如何與其他人分享它? 這是global share plugin將幫助我們的地方。 我們必須安裝它,因為它不是默認插件:

 hoodie install global-share

現在我們有了插件,讓我們使用它! 我們必須將已經添加到用戶存儲中的數據發佈到全局存儲。

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

這會將為此用戶保存的所有事件標記為公共事件,以便當我們查詢全局存儲時,我們將獲得該數據作為結果。

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

在我的活動頁面上,用戶可以創建直接發佈到全局商店的活動。

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

Hoodie 的前端開發工具可生成乾淨的“創建事件”配置。

每個人都可以看到已發布的事件,因此現在任何用戶都可以看到在“事件”頁面上創建的事件。

Hoodie 為 Toptal 活動日曆創建了一個乾淨、高效的全棧開發流程。

那麼不應該公開的數據呢? 我們存儲用戶已申請的事件並將其顯示在事件頁面上。 當用戶單擊應用按鈕時,執行以下操作:

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

下面的兩個屏幕截圖顯示了同時運行的兩個瀏覽器窗口。 在第一個瀏覽器中,用戶以 a@aa用戶身份登錄,該用戶已申請A Event 。 在第二個中,用戶b@bb已登錄並已申請B Event

這張來自我的 Hoodie 應用程序的屏幕截圖顯示一個用戶已登錄。

此屏幕截圖顯示了另一個示例用戶登錄到我的示例應用程序。

長輪詢

通過訂閱 Hoodie 提供的一些事件,我們可以透明地使用長輪詢等技術,這為我們的應用程序提供了一個有趣的功能,因為不同的用戶正在使用和協作它。

這真的很容易做到。 在我們的示例應用程序中,一行代碼就完成了:

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

這條簡單的行將負責長時間輪詢服務器以檢查可能已由其他用戶添加的新事件並將它們添加到“我的事件”頁面。

一些擔憂

在構建了這個示例應用程序以使用 Hoodie 及其前端應用程序開發功能後,我對它所提供的功能感到非常興奮。 然而,一些明確的問題對我來說很突出。

Hoodie 使開發人員與服務器通信變得如此容易,任何開發人員都可以通過使用控制台向我們的數據庫添加內容,這顯然具有重大的安全性和數據完整性影響。

該庫還缺少許多您在任何生產應用程序中都需要的基本東西,例如數據驗證、可鏈接 URL、測試框架和數據的私有共享(儘管他們已經在最後一個方面取得了良好的進展)。 現在要在生產中使用 Hoodie,我們必須將其與其他解決方案(如 AngularJS、Ember 或任何其他解決方案)配對,以幫助我們確保我們的前端項目具有正確結構化和可維護的 JavaScript 代碼。 由於如今這些框架本身正在接近後端技術的複雜性,因此這種解決方案將在很大程度上違背 Hoodie 的目的。

連帽衫的未來

連帽衫仍在大力發展以解決所有這些問題。 團隊正在努力實現新功能並改進現有功能,以使平台為大眾消費做好準備,當然,這個過程需要時間。 如果您現在正在計劃一個新的全面應用程序,那麼您可能希望在這個時候找到一個不同的平台來構建它。

然而,與此同時,開始使用 Hoodie 進行前端應用程序開發當然還為時不早,我希望我剛才已經演示過。 Hoodie 中已經包含了許多強大的新想法,我認為這些想法很可能會變得非常流行。 在這些事情上領先一步可能不是一個壞主意。

如果 Hoodie 的團隊繼續努力工作,API 應該會立即為黃金時段做好準備。 如果您想跟踪 Hoodie 團隊的進度,只需查看他們的里程碑跟踪器即可。

Hoodie 承諾讓為推動者和震動者開發出色的應用程序變得輕而易舉。 如果 Hoodie 體現的想法流行起來,我們可能會看到每個新項目都需要一個後端開發團隊成為過去。 有了這樣的項目,很容易想像在不久的將來前端開發人員的黃金時代。 同樣,Offline First 理想為用戶提供的好處是可訪問性邁出的一大步,將我們的移動互聯生活方式的範圍擴展到互聯網本身無法進入的地方。

前往 Hoodie 了解 Hoodie 的進步,並成為它準備迎接的激動人心的新變化的一部分。


特別感謝Hoodie 團隊。 Hoodie 徽標經 Hoodie 開源項目許可使用