Teleport 2.0 – oparty na współpracy kreator interfejsów użytkownika low-code

Po miesiącach iteracji i zbierania opinii od użytkowników z ogromną radością udostępniamy najnowszą wersję naszej platformy!

Ta nowa wersja wprowadza wiele ulepszeń, w tym zupełnie nowy mechanizm współpracy, który pozwala zespołom tworzyć interfejsy użytkownika z niespotykaną dotąd wydajnością. To także ważny krok w kierunku tworzenia w pełni funkcjonalnych aplikacji frontendowych.

W tym wpisie na blogu krótko opiszemy niektóre dodane funkcje i przedstawimy inne, które znalazły się na naszej mapie drogowej.

Nowy mechanizm współpracy w czasie rzeczywistym#

Nowy mechanizm umożliwia prowadzenie sesji współpracy z udziałem dziesiątek użytkowników. Pozwala też naszemu zespołowi inżynierów wdrażać nowe funkcje szybciej niż kiedykolwiek wcześniej!

Za tym mechanizmem stoi rok pracy nad rozwiązaniami działającymi w tle. Zamiast po prostu zaktualizować istniejący mechanizm, postanowiliśmy pójść na całość i przepisać całą platformę. Była to strategiczna decyzja, w której priorytetem były inwestycje przynoszące długoterminowe korzyści.

Omówimy tę decyzję, związane z nią wyzwania i jej konsekwencje bardziej szczegółowo w osobnym wpisie na blogu.

Funkcja przeciągania i upuszczania zyskuje nowe możliwości!#

Umieszczaj elementy w wybranym miejscu, zmieniaj ich położenie, automatycznie grupuj wiele elementów lub ustawiaj je swobodnie. Funkcja przeciągania i upuszczania na platformie jest teraz znacznie bardziej zaawansowana, intuicyjna i łatwa w obsłudze.

Jesteś projektantem i chcesz umieścić elementy we właściwym miejscu? Mamy to, czego potrzebujesz!

Jesteś programistą i chcesz działać szybko, nie zastanawiając się, którą właściwość flex ustawić? Czy będzie to justify-content czy align-items? Po prostu umieść elementy tam, gdzie chcesz. Zaktualizujemy ustawienia za Ciebie.

Umieszczaj elementy w kontenerze

Zmieniaj położenie i grupuj elementy

Lepsza obsługa właściwości komponentów#

Praca z komponentami i ich właściwościami staje się prostsza. Od teraz właściwości tekstów, linków i obrazów są automatycznie wykrywane i tworzone.

W kolejnej wersji dodamy nadpisywanie stylów i warianty komponentów.

Automatyczne wiązanie właściwości komponentu

Znacznie bardziej intuicyjny inspektor wizualny#

Inspektor wizualny to teraz coś więcej niż tylko właściwości CSS przedstawione w interfejsie graficznym — jest przyjazny dla użytkownika.

W pierwszej wersji użytkownik musiał wiedzieć, co oznaczają ustawienia wyświetlania: elastyczny układ, blokowy, liniowy, lub brak i jakie niosą ze sobą konsekwencje. Trzeba było dobrze znać techniczne aspekty CSS, aby zrozumieć, jak działa.

Nowa wersja zapewnia bardziej intuicyjne środowisko pracy projektantom i użytkownikom bez wiedzy technicznej, a jednocześnie pozwala programistom pracować bezpośrednio z właściwościami CSS.

Te udoskonalenia są częścią naszych bieżących badań nad zapewnieniem każdemu członkowi zespołu dopasowanego i przyjaznego środowiska tworzenia, niezależnie od jego doświadczenia technicznego.

Uproszczony inspektor wizualny

Stany interfejsu#

Ta nowa wersja umożliwia łatwe ustawianie stanów po najechaniu kursorem, aktywny, wyłączony, a także innych stanów w panelu inspektora.

Łatwe ustawianie stanów interakcji

Tokeny projektowe#

Dodaliśmy również tokeny projektowe. Tokenem projektowym może być kolor, styl czcionki lub właściwość wymiaru. Dla każdego projektu możesz definiować własne zestawy tokenów.

Po utworzeniu token staje się dostępny jako zmienna w całym projekcie. Zamiast wielokrotnie i ręcznie ustawiać właściwości podobnych elementów, możesz użyć jednego z istniejących tokenów. Po zmianie wartości tokenu automatycznie zaktualizujemy wszystkie zależne elementy.

Oprócz oczywistych korzyści, takich jak szybsza praca i centralny podgląd stylów atomowych, kod jest również optymalizowany w tle. Dla każdego utworzonego i używanego tokenu projektowego generatory kodu tworzą globalny styl CSS wielokrotnego użytku, dzięki czemu pakiet kodu jest lżejszy.

Zdefiniuj paletę kolorów

Co dalej?#

Więcej informacji o naszych planach na przyszłość, nadchodzących wydaniach i propozycjach funkcji znajdziesz w naszej publicznej mapie drogowej dostępnej na Trello.

Wyróżnione pozycje obejmują:

• Sesja anonimowa
• Twórz interfejsy użytkownika bez zakładania konta. Udostępniaj projekt użytkownikom, którzy nie mają konta.
• Wtyczka do Figmy
• Importuj projekty z Figmy bezpośrednio na platformę
• Klasy CSS
• Długo wyczekiwana funkcja. Udostępniaj style różnym elementom bez tworzenia komponentów ani ręcznego kopiowania i wklejania stylów z jednego elementu do drugiego. To podstawa obsługi zewnętrznych arkuszy stylów, takich jak Tailwind CSS, Bootstrap, Chakra UI, Material UI i inne biblioteki.
• Interaktywność, obsługa zdarzeń i renderowanie warunkowe
• Dodawaj procedury obsługi zdarzeń, aby reagować na kliknięcia, wyświetlaj elementy zależnie od warunków lub działań użytkownika i korzystaj z wielu innych możliwości.
• Pobieranie i mapowanie danych
• Nadchodzi JAMstack! Zintegruj preferowany bezgłowy system CMS i połącz dane z interfejsem użytkownika — i gotowe.
• Powtarzalne elementy
• Korzystaj z tabel, list i innych elementów iterowalnych.
• Integracja z przepływem pracy dla programistów
• Zintegruj swój projekt z GitHubem lub CodeSandbox. Dodamy interfejs wiersza poleceń (CLI), który połączy projekt z istniejącą bazą kodu.

Chcielibyśmy podziękować wszystkim naszym użytkownikom za cenne opinie i czas poświęcony na rozmowy z nami. Ta wersja nie mogłaby powstać bez ich wartościowego wkładu.