Dlaczego Mason i Front-End jako usługa będą przełomem w rozwoju produktu?

Opublikowany: 2022-03-10
Krótkie podsumowanie ↬ Ogólnie rzecz biorąc, tworzenie i konserwacja oprogramowania było czasochłonnym i żmudnym procesem dla programistów i inżynierów, którzy ponoszą ciężar pracy. Jednak wraz z wprowadzeniem front-end-as-a-service i pionierskiej firmy takiej jak Mason, wszystko to może się zmienić. Oto, co musisz wiedzieć o FEaaS.

(To jest artykuł sponsorowany). Rozejrzyj się po aplikacjach i oprogramowaniu, z którymi regularnie korzystasz. Każdy ma swój niepowtarzalny design, prawda? A jednak w każdym z nich jest coś podobnego. Paski nawigacyjne, formularze kontaktowe, pola funkcji, wezwania do działania — niektóre elementy są zwykle obecne bez względu na to, gdzie jesteś.

Dzieje się tak, ponieważ te elementy odgrywają kluczową rolę w interakcji użytkowników z utworzonymi przez Ciebie produktami. Od strony użytkowników to dobra rzecz. Uwzględniając te rozpoznawalne i przewidywalne elementy w strukturze frontendu aplikacji, użytkownik skupia się na treści przed nimi; nie próbując rozwiązać zagadki interfejsu użytkownika.

Jednak ze strony twórców oprogramowania jest to uciążliwe. Wiesz, jakie elementy muszą być zawarte w produkcie. Jednak do tej pory trzeba było od czasu do czasu budować je od podstaw. Co gorsza, za każdym razem, gdy coś musi zostać zaktualizowane, musisz wdrożyć aktualizację i przesłać ją do działającej witryny — a nieczęsto masz przepustowość, aby wprowadzić te zmiany od razu.

Dlatego to, co Mason robi z usługą front-end-as-a-service (FEaaS) , jest tak interesujące. W tym artykule zamierzam przyjrzeć się bliżej FEaaS, dla kogo jest przeznaczona i dlaczego wzmacnianie dzięki niej zespołów produktowych i marketingowych to wielka sprawa.

Co to jest FEaaS?

Wiesz, czym jest oprogramowanie jako usługa (SaaS). Ale czy słyszałeś o komponentach oprogramowania jako usłudze (SCaaS)?

Kilka lat temu wokół SCaaS pojawiły się lekkie narzekania. Podstawową ideą było to, że możesz tworzyć i łatwo utrzymywać komponenty interfejsu użytkownika i widżety wielokrotnego użytku dla swojego oprogramowania. Jednak nigdy tak naprawdę się nie przyjęło — i to prawdopodobnie dlatego, że było zbyt restrykcyjne w tym, co umożliwiało programistom.

Jednak dzięki FEaaS masz znacznie bardziej wartościowe i potężne rozwiązanie. Zasadniczo rozwiązanie typu „front-end-as-a-service” firmy Mason umożliwia szybkie i efektywne tworzenie wizualnych aspektów i funkcjonalności oprogramowania.

Oznacza to, że tworzysz złożone funkcje i zmuszasz je do komunikowania się z interfejsami API. Przykład różnych zaprojektowanych, złożonych formularzy połączonych z Airtable jako źródłem danych można znaleźć tutaj.

Co więcej, każda funkcja, którą tworzysz za pomocą Mason, znajduje się w tej samej bazie kodu, co reszta Twojego produktu. Rzućmy okiem na konfigurowalnego Chatbota zasilanego przez Apixu, który został stworzony z Masonem:

Prezentacja listy rzeczy do zrobienia Mason Airtable
Przykład rodzajów treści dynamicznych, które można tworzyć za pomocą FEaaS. (Źródło: Mason) (Duży podgląd)

A oto baner bohatera, który stworzyłem do rozdawania ebooków przy użyciu szablonu Mason:

Szablon bohatera Mason
Przykład szablonu obrazu bohatera, dostosowanego i opublikowanego w firmie Mason. (Źródło: Mason) (Duży podgląd)

Nie popełnij błędu: to nie jest kreator stron internetowych. Mason umożliwia Tobie i Twojemu zespołowi budowanie indywidualnych komponentów i w pełni funkcjonalnych funkcji; nie całe zarządzane witryny lub produkty hostingowe. W ten sposób nie jesteś już ograniczony możliwościami swojego rozwiązania do tworzenia witryn.

Możesz zbudować swoją witrynę internetową, aplikację lub inne oprogramowanie w wybranym przez siebie narzędziu. Następnie zaprojektuj i wyeksportuj naprawdę złożone funkcje z Mason, aby zintegrować je z bazą kodu. Ważne jest, aby podkreślić, że w przeciwieństwie do platformy, która blokuje dane Ciebie i Twoich klientów, Mason pozwala zespołom produktowym na rozszerzenie ich obecnych produktów i posiadanie wszystkiego (nie jak niektórzy twórcy witryn, którzy są właścicielami całej witryny i firmy).

Dla kogo jest Mason?

Dzięki Masonowi powinieneś już mieć w pełni rozwinięte oprogramowanie lub przynajmniej rozwiązanie do jego zbudowania. Mason to narzędzie, którego będziesz używać do tworzenia i projektowania funkcji (i ich funkcjonalności) dla Twojego produktu — i to z łatwością (tj. bez kodowania).

Te funkcje będą wtedy samodzielne i wrzucone do produktu, gdy będą gotowe.

Jeśli chodzi o rzeczywistych ludzi, dla których Mason został stworzony, Tom McLaughlin, dyrektor generalny Masona, wyjaśnia:

„Dzisiaj cały produkt żyje w bazie kodu, więc staje się de facto domeną wyłącznie zespołu inżynierów, mimo że tak wiele funkcji składających się na produkt można znaleźć w każdej innej bazie kodu na świecie — są one po prostu nie tak wyjątkowy. Mason umożliwia zespołowi produktowemu szybsze tworzenie tych wspólnych funkcji, ale, co ważniejsze, pozwala każdemu w organizacji — technicznej lub nie — zarządzać nimi, nawet gdy są już w fazie produkcyjnej”.

Twój zespół produktowy — programiści i projektanci — to ci, którzy będą używać Masona do tworzenia oprogramowania. Jednak Twoje zespoły ds. marketingu i treści zyskają możliwość aktualizacji funkcji, które zbudowałeś w Mason po ich wdrożeniu, bez konieczności czekania na inżynierię, aby wdrożyć każdą nową edycję lub poprawkę.

Oznacza to, że utrzymanie funkcji front-endu nie zależy już wyłącznie od Ciebie, programisty. Każdy członek Twojego zespołu — projektanci, marketerzy, twórcy treści itp. — może używać platformy FEaaS firmy Mason do tworzenia i aktualizowania funkcji oprogramowania.

Dzięki temu nie tylko możesz wydajniej tworzyć zaawansowane funkcje dla swoich produktów, ale Twój zespół może wdrażać aktualizacje w czasie rzeczywistym, zamiast pozwalać im gromadzić się na liście otwartych zgłoszeń.

Dlaczego MES ma znaczenie

Czy Twój harmonogram opracowywania, wdrażania lub aktualizacji oprogramowania cierpiał w przeszłości z powodu (choć całkowicie zrozumiałych) wąskich gardeł programistów? Jeśli tak, to FEaaS powinno brzmieć dla Ciebie jak marzenie.

Do tej pory inżynierowie oprogramowania nie mieli innej opcji. Jeśli chciałeś zbudować produkt do sieci, wszystko musiało zostać zbudowane od podstaw i wymagało to dużej ilości czasu z Twojej strony, zwłaszcza jeśli Twoje cele były bardziej złożone z natury. Cały czas reszta twojej drużyny czekała na skrzydłach, aż wykonasz swoją część.

Ponieważ Mason jest liderem ze swoim rozwiązaniem FEaaS, chciałbym przyjrzeć się, jak jego możliwości zrewolucjonizują przepływ pracy nad rozwojem produktu.

Zaprojektuj komponenty interfejsu użytkownika wizualnie

FEaaS przenosi inżynierów i programistów z bazy kodu produktu do wizualnego interfejsu kompilacji. Dzięki temu widzisz dokładnie, co tworzysz, bez konieczności przełączania się między kodem i wizualnym podglądem tego, jak będzie wyglądał po wdrożeniu.

Dzięki wizualnemu kreatorowi Mason możesz projektować złożone, ale niezbędne komponenty interfejsu użytkownika, korzystając z systemu kontenerów, kolumn, warstw i wstępnie skonfigurowanych elementów, takich jak tekst, pola formularzy, przyciski i inne.

Mason budowniczy wizualny
Zajrzyj do wizualnego narzędzia do budowania Masona. (Źródło: Mason) (Duży podgląd)

Podobnie jak w przypadku innych nowoczesnych narzędzi do budowania, dostępnych jest wiele opcji, które pomogą Ci zrobić więcej bez konieczności pisania wiersza kodu. A dzięki wygodnemu przełączaniu między widokami na komputery, urządzenia mobilne i tablety responsywne projektowanie również nie stanowi problemu.

Ponadto Mason jest dostarczany z w pełni funkcjonalnym zestawem interfejsu użytkownika, który zawiera różnorodne szablony dla najpopularniejszych komponentów interfejsu użytkownika. Lub możesz ręcznie wybrać te, których potrzebujesz:

Szablony Mason
Wstępnie zbudowana biblioteka szablonów komponentów interfejsu użytkownika firmy Mason. (Źródło: Mason) (Duży podgląd)

Karty funkcji. Ekrany logowania. Bloki treści bloga. Obrazy bohaterów. Przyciski wezwania do działania. Wszystkie podstawowe elementy, których potrzebujesz, aby zachęcić odwiedzających do zaangażowania się w Twój produkt i podjęcia działań, zostały już stworzone dla Ciebie.

Jeśli jesteś zmęczony tworzeniem ich od podstaw w każdym tworzonym produkcie, te szablony będą ogromną pomocą. Jak możesz sobie wyobrazić, możliwość projektowania i dostosowywania komponentów produktu w ten sposób byłaby wielkim dobrodziejstwem dla produktywności Twojego zespołu.

Szybciej buduj komponenty i funkcjonalność

Teraz możliwość wizualnego stylizowania komponentów to tylko jedna z zalet korzystania z platformy FEaaS, takiej jak Mason. Jak można się było spodziewać, takie narzędzie zostało stworzone z myślą o szybkości.

Jeśli chodzi o faktyczne korzystanie z Mason, jest to narzędzie, które ładuje się szalenie szybko – co czyniłoby to bardzo cennym dla każdego, kto w przeszłości stracił czas na czekanie na uruchomienie swoich narzędzi, zapisanie zmian lub przejście z jednego widoku do drugiego.

Jeśli chodzi o to, jak wpływa to na Twój przepływ pracy, spodziewaj się, że również tam przyspieszysz .

Dzięki kreatorowi Mason możesz:

  • Dodawaj nowe kontenery, kolumny, wiersze, bloki treści lub niestandardowe elementy za pomocą prostego przeciągania i upuszczania:
Mason Design wybory
Kompleksowy zestaw układów projektowych, komponentów i opcji kodowania firmy Mason. (Źródło: Mason) (Duży podgląd)
  • Przeglądaj, edytuj, duplikuj, przenoś lub usuwaj warstwy swojego komponentu, korzystając z tej wizualizowanej hierarchii elementów:
Warstwy murarskie
Łatwe w zarządzaniu kontrolki warstw Mason. (Źródło: Mason) (Duży podgląd)
  • Nie tylko projekt interfejsu użytkownika jest uproszczony. Możesz również z łatwością łączyć swoje komponenty z innymi źródłami za pomocą interfejsów API.
źródła danych mason
Podłączanie źródeł danych do funkcji Mason w celu przygotowania do mapowania. (Źródło: Mason) (Duży podgląd)
Mapowanie Mason API
Łączenie interfejsów API z komponentami Mason poprzez mapowanie. (Źródło: Mason) (Duży podgląd)

Zakładka Mason „Konfiguruj” umożliwia szybką integrację z innymi aplikacjami, takimi jak:

  • Authy
  • Facebook
  • Punkt centralny
  • Naszywka
  • Twilio
  • I więcej.

Załóżmy więc, że chcesz sprzedać e-booka promowanego w banerze bohatera, zamiast po prostu zbierać za jego pomocą potencjalnych klientów. Pierwszą rzeczą, którą musisz zrobić, to skonfigurować integrację Stripe.

Wszystko, czego potrzebujesz, to klucze do publikacji i tajne z pulpitu programisty Stripe:

Klucze API Stripe
Pobierz klucze API z pulpitu programisty Stripe. (Źródło: Stripe) (Duży podgląd)

Następnie wprowadź każdy z kluczy w odpowiednie pole w Mason:

Integracje Mason z innymi firmami
Zintegruj inne aplikacje z komponentami Mason jako źródłami danych, tak jak w tym przykładzie Stripe. (Źródło: Mason) (Duży podgląd)

Wróć do zakładki „Projekt” i przeciągnij element formularza karty kredytowej do komponentu.

Element formularza karty kredytowej Mason
Użyj elementu formularza karty kredytowej w Mason, aby akceptować płatności za pośrednictwem komponentów. (Źródło: Mason) (Duży podgląd)

Po dodaniu formularza do strony należy wykonać jeszcze jeden krok, aby skonfigurować tę integrację.

Wróć do zakładki Konfiguruj. Zobaczysz teraz nową opcję na pasku bocznym o nazwie „Formularze”:

Integracja Mason ze Stripe
Skonfiguruj formularz płatności Stripe w zaledwie kilku krokach z Mason. (Źródło: Mason) (Duży podgląd)

Możesz zobaczyć, że wszystkie istotne szczegóły zostały już tutaj dodane, a połączenie z formularzem zostało już nawiązane.

Ponownie, Mason wykonuje łatwą pracę nad czymś, co zwykle zajęłoby inżynierom oprogramowania trochę czasu, gdyby mieli zbudować komponent od podstaw. Zamiast tego masz teraz wszystkie narzędzia potrzebne do szybkiego projektowania i programowania nowych funkcji produktu.

Łatwe wdrażanie nowych funkcji

Oczywiście, umiejętność szybkiego projektowania nowych funkcji jest ważna dla zespołów produktowych. Jednak to nadal nie rozwiązuje problemu wdrażania.

Wąskie gardła mogą wystąpić na różnych etapach rozwoju produktu. A kiedy tworzysz oprogramowanie, które jest tak złożone, że tylko inżynier może je łatwo uruchomić lub wdrożyć aktualizacje, możesz spodziewać się tylko dalszych opóźnień w potoku.

Mason opracował na to rozwiązanie. Na początek opublikowanie komponentu w bibliotece Masona to pestka. Po prostu kliknij przycisk „Opublikuj” w prawym górnym rogu kreatora, a Mason zajmie się resztą.

Aby jednak umieścić komponent w produkcie lub aplikacji, programista musi się zaangażować — ale tylko ten jeden raz i nie powinno to zająć więcej niż pięć minut.

Aby to zrobić, użyj przycisku „< > Wdróż” w prawym górnym rogu kreatora. Następnie wyświetli monit o wykonanie następujących czynności:

Proces wdrażania Mason
Wdrożenie komponentu Mason zajmuje tylko pięć minut i cztery kroki. (Źródło: Mason) (Duży podgląd)

Zasadniczo bierzesz unikalny identyfikator, który Mason stworzył dla funkcji, którą zbudowałeś, i dodajesz go do swojej bazy kodu. Po prawidłowym skonfigurowaniu produkt będzie wywoływał interfejs Mason API w celu renderowania komponentu po stronie aplikacji. A ci na początku strony nie będą mądrzejsi.

Wypchnięcie nowego komponentu wraz z całą jego funkcjonalnością jest tak proste.

Daj wszystkim możliwość wprowadzania zmian i aktualizacji push

Wszystkie uwagi, które tu poruszyłem na temat korzyści płynących z FEaaS, dotyczyły tej ostatecznej — i ogromnej — korzyści, którą jest to:

FEaaS umożliwia wszystkim wprowadzanie zmian w funkcjach i przesyłanie ich do działającej aplikacji.

Pomyśl o tym przez chwilę.

Ile czasu Twój zespół spędził czekając, aż inżynier wdroży potrzebne zmiany? I co to spowodowało, jeśli chodzi o zahamowanie zdolności aplikacji do angażowania i konwersji użytkowników? Bez imponująco wyglądającego interfejsu użytkownika, bez prawidłowo działających funkcji, bez wszystkich krytycznych elementów potrzebnych do zmuszenia odwiedzających do podjęcia działania.

Przetrzymując oprogramowanie jako zakładnika, ostatecznie kosztujesz pieniądze firmy. Do tej pory jest to coś, na co zespoły oprogramowania nie mogły pomóc. Taki był właśnie charakter ich pracy. Ale dzięki FEaaS firmy Mason to się wreszcie zmienia.

Po (1) opublikowaniu składnika i (2) wdrożeniu go w aplikacji, funkcja pojawi się w produkcie. Ale powiedzmy, że potrzebne są do tego zmiany. Na przykład:

  • Twój projektant chce zmienić styl formularza, aby odzwierciedlić zmodernizowany projekt strony docelowej.
  • Twój menedżer ds. marketingu ma nowy obraz marki, który musi zastąpić obraz bohatera strony głównej.
  • Twój wydawca zdecydował się ulepszyć sformułowania w najnowszej ofercie generowania leadów i chce zaktualizować CTA.

Nie ma znaczenia, kto wejdzie do konstruktora Mason, aby zmienić komponent. Za drugim razem wyblakły przycisk „Zapisano” w prawym górnym rogu kreatora zmienia się w zielony przycisk „Przejdź do publikacji”.

Aktualizacje komponentów oprogramowania Mason
Aktualizację komponentów Mason może wykonać każdy. (Źródło: Mason) (Duży podgląd)

I zgadnij co? Do kliknięcia nie jest potrzebne żadne doświadczenie techniczne.

Mason upraszcza publikację
Mason dba o publikowanie Twoich komponentów i ich aktualizacji w swojej bibliotece. (Źródło: Mason) (Duży podgląd)

Mason zajmuje się publikowaniem i wdrażaniem zmian, więc dopóki połączenie między Twoją aplikacją a Masonem zostało już nawiązane, te aktualizacje powinny natychmiast zostać udostępnione odwiedzającym.

Jeśli ty i twój zespół produktowy ugrzęzliście w natłoku zgłoszeń, prosząc o zbudowanie nowych komponentów lub ulepszenie istniejących, to skutecznie położy temu kres.

Zawijanie

Jedną ze wspaniałych rzeczy związanych z tworzeniem produktów internetowych jest to, że ktoś zawsze opracowuje nowy sposób, aby pomóc nam osiągnąć więcej, jednocześnie robiąc mniej.

Ogólnie rzecz biorąc, w przypadku aplikacji oprogramowania minęło dużo czasu. Na szczęście FEaaS jest tutaj i wygląda na to, że Mason opracował niezwykle cenne narzędzie do przyspieszenia rozwoju oprogramowania, poprawy wydajności, a także umożliwienia większej liczbie członków zespołu.