為什麼 Mason 和前端即服務將成為產品開發的遊戲規則改變者

已發表: 2022-03-10
快速總結↬對於首當其衝的開發人員和工程師而言,軟件開發和維護通常是一個耗時且艱鉅的過程。 然而,隨著前端即服務的引入,以及像 Mason 這樣的公司開創了這條道路,這一切都可能改變。 以下是您需要了解的有關 FEaaS 的信息。

(這是一篇贊助文章。)查看您定期與之交互的應用程序和軟件。 每個都有自己獨特的設計,對吧? 然而,他們每個人都有相似之處。 導航欄、聯繫表格、功能框、CTA——無論你走到哪裡,都會出現某些元素。

這是因為這些元素在用戶如何與您構建的產品互動方面發揮著至關重要的作用。 從用戶的角度來看,這是一件好事。 通過在應用程序的前端結構中包含這些可識別和可預測的元素,用戶的注意力將集中在它們面前的內容上; 而不是試圖解開 UI 的奧秘。

但是,從軟件開發人員的角度來看,這是一種痛苦。 您知道產品中需要包含哪些類型的組件。 但是,直到現在,您不得不一次又一次地從頭開始構建它們。 更糟糕的是,任何時候需要更新某些東西,它都會依賴您來實施更新並將其推送到實時站點——而且您通常沒有足夠的帶寬來立即進行這些更改。

這就是 Mason 使用前端即服務 (FEaaS) 所做的事情如此有趣的原因。 在本文中,我將詳細介紹 FEaaS,它適用於誰,以及為什麼用它來授權產品和營銷團隊很重要。

什麼是 FEaaS?

您知道什麼是軟件即服務 (SaaS)。 但是您聽說過軟件組件即服務 (SCaaS) 嗎?

幾年前,圍繞 SCaaS 有一些輕微的抱怨。 基本思想是您可以為您的軟件創建和輕鬆維護可重用的 UI 組件和小部件。 然而,它從未真正流行起來——這可能是因為它對開發人員所做的事情過於嚴格。

但是,使用 FEaaS,您可以獲得更有價值和更強大的解決方案。 從本質上講,Mason 的前端即服務解決方案使您能夠快速有效地構建軟件的視覺方面功能。

這意味著您正在構建複雜的功能並使它們與 API 對話。 可以在此處找到連接到 Airtable 作為數據源的不同設計的複雜表單的示例。

更重要的是,您使用 Mason 構建的每個功能都與您的產品的其他部分存在於相同的代碼庫中。 讓我們看一下使用 Mason 製作的可定制的基於 Apixu 的聊天機器人:

Mason Airtable 待辦事項演示
您可以使用 FEaaS 構建的各種動態內容的示例。 (來源:梅森)(大預覽)

這是我使用 Mason 模板為電子書贈品創建的英雄橫幅:

梅森英雄模板
使用 Mason 定制和發布的英雄形像模板示例。 (來源:梅森)(大預覽)

別搞錯了:這不是網站建設者。 Mason 使您和您的團隊能夠構建單獨的組件和功能齊全的功能; 不是整個託管網站或產品。 這樣,您就不再受到站點構建器解決方案功能的限制。

您可以在您選擇的工具中構建您的網站、應用程序或其他軟件產品。 然後,從 Mason 設計和導出真正複雜的功能,以集成到您的代碼庫中。 需要指出的是,與將您和您的客戶數據鎖定在其中的平台不同,Mason 允許產品團隊擴充他們當前的產品並擁有一切(不像某些網站建設者擁有您的整個網站和業務)。

梅森適合誰?

使用 Mason,您應該已經擁有一個完全開發的軟件產品,或者至少擁有一個構建它的解決方案。 Mason 是您將用來為您的產品構建和設計特性(及其功能)的工具——而且這樣做很容易(即無需編碼)。

然後,這些功能將是獨立的,並在可以使用時放入產品中。

至於 Mason 的實際目標人群,Mason 的首席執行官 Tom McLaughlin 解釋說:

“今天,整個產品都存在於代碼庫中,因此它僅成為工程團隊的事實上的領域,儘管構成該產品的許多功能可以在地球上的所有其他代碼庫中找到——它們只是不是那麼獨特。 Mason 讓您的產品團隊可以更快地構建這些通用功能,但更重要的是,讓組織中的任何人——無論技術與否——都可以管理它們,即使它們已經投入生產。”

你的產品團隊——你的軟件開發人員和設計師——將使用 Mason 來構建你的軟件。 但是,您的營銷和內容團隊將能夠在部署後更新您在 Mason 中構建的功能,而無需等待工程人員部署每個新的編輯或調整。

這意味著前端功能的維護不再完全依賴於開發人員。 您團隊中的任何人(設計師、營銷人員、內容創建者等)都可以使用 Mason 的 FEaaS 平台來構建和更新您的軟件功能。

因此,您不僅可以更有效地為您的產品構建強大的功能,而且您的團隊可以實時部署更新,而不是讓它們堆積在您的開放工單列表中。

為什麼 FEaaS 很重要

您的軟件開發、部署或更新計劃過去是否因(儘管完全可以理解)軟件開發人員的瓶頸而受到影響? 如果是這樣,那麼 FEaaS 對您來說應該是一個夢想。

直到現在,軟件工程師真的沒有其他選擇。 如果您想為 Web 構建產品,那麼一切都必須從頭開始構建,並且需要您花費大量時間來完成,尤其是在您的目標本質上更複雜的情況下。 一直以來,您團隊的其他成員都在等待您儘自己的一份力量。

隨著 Mason 領導其 FEaaS 解決方案,我想看看它的功能將如何徹底改變您的產品開發工作流程。

直觀地設計 UI 組件

FEaaS 將工程師和開發人員從產品的代碼庫中帶入可視化構建界面。 因此,您可以準確地看到正在構建的內容,而無需在代碼和部署後的視覺預覽之間來回切換。

使用 Mason 的可視化構建器,您可以使用包含容器、列、層和預配置元素(如文本、表單字段、按鈕等)的系統來設計複雜但必不可少的 UI 組件。

梅森視覺生成器
看看 Mason 的可視化構建器工具。 (來源:梅森)(大預覽)

與其他現代構建器工具的工作方式類似,有大量選項可幫助您完成更多工作,而無需編寫一行代碼。 由於桌面、移動和平板視圖之間的便捷切換,響應式設計也沒有問題。

此外,Mason 附帶一個功能齊全的 UI 工具包,其中包括用於最常見 UI 組件的各種模板。 或者您可以手動選擇您需要的:

梅森模板
Mason 預構建的模板 UI 組件庫。 (來源:梅森)(大預覽)

特色卡。 登錄屏幕。 博客內容塊。 英雄形象。 號召性用語按鈕。 已經為您構建了讓訪問者與您的產品互動並採取行動所需的所有核心組件。

如果您厭倦了在您構建的每個產品中從頭開始創建它們,這些模板將是一個巨大的幫助。 正如您可以想像的那樣,能夠以這種方式設計和定制產品組件將大大提高您團隊的生產力。

更快地構建組件和功能

現在,能夠以可視方式設置組件樣式只是使用 Mason 等 FEaaS 平台的好處之一。 正如您所料,這樣的工具是為提高速度而製造的。

就實際使用 Mason 而言,它是一個加載速度非常快的工具——這對於那些在過去浪費時間等待工具啟動、保存更改或從一個視圖移動到另一個視圖的人來說非常有價值。

就它如何影響您的工作流程而言,期望在那裡也能提高速度

使用 Mason builder,您可以:

  • 通過簡單的拖放操作添加新的容器、列、行、內容塊或自定義編碼元素:
梅森設計選擇
Mason 的全套設計佈局、組件和編碼選項。 (來源:梅森)(大預覽)
  • 使用此可視化的元素層次結構查看、編輯、複製、移動或刪除組件的層:
梅森層
Mason 易於管理的圖層控件。 (來源:梅森)(大預覽)
  • 被簡化的不僅僅是 UI 設計部分。 您也可以通過 API 輕鬆地將您的組件連接到其他來源。
梅森數據源
將數據源連接到 Mason 要素以準備映射。 (來源:梅森)(大預覽)
Mason API 映射
通過映射將 API 連接到 Mason 組件。 (來源:梅森)(大預覽)

Mason 的“配置”選項卡使您能夠快速與其他應用程序集成,例如:

  • 權威
  • Facebook
  • 中心點
  • 條紋
  • 特維利奧
  • 和更多。

因此,假設您想出售在您的英雄橫幅中宣傳的電子書,而不是僅僅用它來收集潛在客戶。 您要做的第一件事是設置 Stripe 集成。

您只需要來自 Stripe 的開發者儀表板的 Publishable 和 Secret 密鑰:

條帶化 API 密鑰
從您的 Stripe 開發人員儀表板中檢索 API 密鑰。 (來源:Stripe)(大預覽)

然後,將每個鍵輸入到 Mason 的相應字段中:

Mason 第三方集成
將其他應用程序與 Mason 組件集成為數據源,例如這個 Stripe 示例。 (來源:梅森)(大預覽)

返回“設計”選項卡並將信用卡表單元素拖到組件中。

梅森信用卡表單元素
使用 Mason 中的信用卡表單元素通過組件接受付款。 (來源:梅森)(大預覽)

將表單添加到頁面後,需要採取最後一步來設置此集成。

返回配置選項卡。 您現在將在側邊欄上看到一個名為“表單”的新選項:

Mason 與 Stripe 的集成
使用 Mason 只需幾個步驟即可配置 Stripe 支付表單。 (來源:梅森)(大預覽)

您可以看到所有相關的詳細信息都已添加到此處,並且已經與您的表單建立了聯繫。

同樣,如果軟件工程師要從頭開始構建組件,通常需要一段時間才能完成的事情,Mason 做了一些輕鬆的工作。 相反,您現在擁有為您的產品快速設計和編程新功能所需的所有工具。

輕鬆部署新功能

可以肯定的是,能夠快速設計新功能對產品團隊來說很重要。 但是,這仍然不能解決部署問題。

瓶頸可能出現在產品開發的各個階段。 而且,當您構建的軟件如此復雜以至於只有工程師才能輕鬆啟動或部署更新時,您只能期待管道中的進一步延遲。

梅森為此開發了一個解決方案。 首先,將組件發佈到 Mason 的庫是輕而易舉的事。 只需單擊構建器右上角的“發布”按鈕,Mason 就會完成其餘的工作。

但是,要將組件放入您的產品或應用程序中,開發人員需要參與其中——但僅此一次,並且不應超過五分鐘。

為此,請使用構建器右上角的“< > Deploy”按鈕。 然後它將提示您執行以下操作:

梅森部署過程
部署 Mason 組件只需五分鐘和四個步驟。 (來源:梅森)(大預覽)

本質上,您所做的是獲取 Mason 為您構建的功能創建的唯一標識符並將其添加到您的代碼庫中。 正確設置後,您的產品將調用 Mason API 以在應用端呈現組件。 網站前端的那些人也不會更聰明。

推送一個新組件及其所有功能就這麼簡單。

授權每個人進行更改和推送更新

我在這裡就 FEaaS 的好處提出的所有觀點都圍繞著這個最終的——也是巨大的——好處,這就是:

FEaaS 使每個人都可以更改功能並將其推送到實時應用程序。

想一想。

您的團隊花了多少時間等待工程師實施他們需要的更改? 這在阻礙您的應用吸引和轉化訪問者的能力方面起到了什麼作用? 沒有令人印象深刻的用戶界面,沒有正常運行的功能,沒有迫使訪問者採取行動所需的所有關鍵元素。

您最終會通過將軟件作為人質來花費企業資金。 到目前為止,這是軟件產品團隊無法提供幫助的事情。 這只是他們工作的性質。 但是隨著 Mason 的 FEaaS,這最終改變了。

一旦您 (1) 發布了您的組件並 (2) 將其部署到您的應用程序,該功能將出現在您的產品中。 但是,假設需要對其進行更改。 例如:

  • 您的設計師想要更改表單的樣式以反映改進後的登錄頁面設計。
  • 您的營銷經理有一個新的品牌形象,需要替換主頁主形象。
  • 您的編輯已決定調整最新潛在客戶報價的措辭,並希望更新 CTA。

誰進入 Mason builder 來更改組件並不重要。 第二次發生時,構建器右上角的褪色“已保存”按鈕變為綠色的“轉到發布”按鈕。

Mason 軟件組件更新
任何人都可以更新 Mason 組件。 (來源:梅森)(大預覽)

你猜怎麼著? 無需技術經驗即可單擊它。

梅森簡化出版
Mason 負責將您的組件及其更新發佈到其庫中。 (來源:梅森)(大預覽)

Mason 負責發布和部署更改,因此只要您的應用程序和 Mason 之間已經建立連接,這些更新應該會立即上線供訪問者查看。

如果你和你的產品團隊被一連串的票困住,要求你構建新組件或調整現有組件,這將有效地阻止這種情況。

包起來

為網絡構建產品的美妙之處之一是,有人總是在開發一種新方法來幫助我們完成更多工作,同時減少工作量。

對於軟件應用程序,一般來說,它已經很長時間了。 值得慶幸的是,FEaaS 就在這裡,看起來 Mason 已經開發出一種非常有價值的工具來加速軟件開發,提高輸出,並讓更多的團隊成員參與進來。