馃帹 uxowy.dev #8
6 min czytania

馃帹 uxowy.dev #8

Szykuje si臋 d艂ugi weekendzik z super pogod膮... 馃槏 聽

A 偶eby jeszcze lepiej wej艣膰 w ten weekend, przygotowali艣my dla Ciebie kolejne wydanie newslettera uxowy.dev 馃挜 Dzisiaj b臋dzie torszk臋 SaaS'owo:

  1. Nowoczesny stack technologiczny dla platformy SaaS je艣li jeste艣 one-man-army
  2. Zagadka 馃
  3. Rapid ReDesigns - 艂yknij wiedz臋 UI/UX w przyspieszonym tempie
  4. Kogo warto obserwowa膰 馃憖
  5. Top UI/UX Design Inspiration - ekrany i interakcje do oblukania

Zobacz 馃憞馃憞馃憞


Nowoczesny stack technologiczny dla platformy SaaS je艣li jeste艣 one-man-army

Development | 藕r贸d艂o

Za艂o偶enia:

  • nie korzystamy z narz臋dzi no-code
  • chcemy postawi膰聽MVP aplikacji SaaS - nie robimy od razu wielkiej platformy na rok developmentu "po godzinach". Robimy MVP. Zastan贸w si臋聽dobrze, jakie ficzery maj膮 by膰 w MVP. Rzu膰 okiem na wpis "Jak sprawdzi膰, czy projekt wypali?" z聽drugiego wydania newslettera uxowy
  • w jak najszybszym tempie - je艣li dzia艂asz sam, masz mega ograniczony czas. To zupe艂nie inny development, ni偶 przy pe艂noprawnym zespole i du偶ym bud偶ecie
  • jeste艣my sami - one-man-army 馃憡
  • robimy to "nowocze艣nie" - korzystamy z serverless, aby nie przejmowa膰 si臋 serwerami i ich konfiguracj膮

Aha, jeszcze jedna bardzo wa偶na rzecz: nie robimy "projektu do szuflady", w聽kt贸rym chcemy pozna膰 nowy framework. Robimy MVP dostarczaj膮c warto艣膰 biznesow膮, z聽mo偶liwo艣ci膮 monetyzacji.

(stack przygotowany na bazie do艣wiadcze艅 z tworzenia przez R茅mi聽Weng aplikacji webowej PostMage)

Ok, do rzeczy:

TypeScript tu i tu

Je艣li jeste艣 front-end developerem, na 90% znasz ju偶 TypeScript (je艣li jeszcze nie, to sprawd藕 go dzisiaj, pls). Wybranie tego samego j臋zyka r贸wnie偶 dla backendu zaoszcz臋dza nam du偶o czasu na nauk臋 innych j臋zyk贸w.

B臋dzie to te偶 艂atwiejsze w聽utrzymaniu. Ktokolwiek przejmie projekt lub do niego do艂膮czy, wystarczy znajomo艣膰 jednego j臋zyka programowania, 偶eby utrzyma膰 projekt. Szybciej i taniej, o to chodzi w聽MVP 馃檪

Je艣li jeste艣 backendowcem - wyb贸r nale偶y do Ciebie, wybierz t臋 technologi臋, w聽kt贸rej czujesz si臋 dobry i wiesz, 偶e jeste艣 w stanie dostarczy膰 rozwi膮zanie w聽kr贸tkim czasie.

Framework frontowy

Wybierz ten, w kt贸rym zrobisz front najszybciej. Mo偶e to by膰 Next.js z聽Tailwind CSS, ale nie musi. R贸wnie dobrze mo偶e to by膰 Angular czy Vue, wszystkie te frameworki wspieraj膮 ju偶 TypeScript.

Aby zrobi膰 to szybko i dobrze, musi to by膰 framework, w kt贸rym czujesz si臋 pewnie. Nie wybieraj nieznanego Ci frameworka, kt贸rego b臋dziesz musia艂 si臋 uczy膰 i聽wertowa膰 dokumentacj臋 wzd艂u偶 i w szerz.

Dobrze, jak wybrany przez Ciebie framework b臋dzie wspiera艂 Server Side Rendering, aby聽Twoje strony by艂y ju偶 serwowane do przegl膮darki "na gotowo" (SEO).

Static hosting

Dobrym miejscem dla naszych plik贸w frontowych jest hosting statycznych plik贸w. Mo偶e to by膰 Cloudflare Pages, mo偶e to by膰 Netlify, Vercel czy Firebase Hosting.

Cloudflare Pages ma darmowy plan bez limit贸w miesi臋cznych na bandwidth. Mo偶esz te偶 zabezpieczy膰 stron臋 has艂em ju偶 w darmowej wersji, co dost臋pne jest w聽Netlify i Vercel dopiero w p艂atnych pakietach.

Serverless REST API

Dzi臋ki serverless masz:

  • szybkie i proste deploye
  • 艂atw膮 konfiguracj臋 i utrzymanie
  • du偶膮 skalowalno艣膰

Nie musisz mie膰 wiedzy DevOpsowej. Nie musisz ogarnia膰 SSH, instalowa膰 update'贸w, dba膰 o bezpiecze艅stwo serwera, konfigurowa膰 proxy / nginx'贸w / load balancer贸w / firewalli itd. Uff, troch臋 tego jest, co?

Jako providera us艂ug mo偶esz wybra膰 AWS Lambda, mo偶esz te偶 wybra膰 Google Cloud Functions. Id藕 tam, gdzie Ci wygodniej :)

Uwierzytelnianie

Dobrze byby艂o jako zabezpieczy膰 nasze API 馃槈 聽Wybierz us艂ug臋 uwierzytelniania dostarczan膮 od wybranego wcze艣niej us艂ugodawcy serverless API.

Dla AWS to b臋dzie AWS Cognito, dla Google b臋dzie to Firebase Authentication. Do聽po艂膮czenia AWS Cognito z frontem u偶yj AWS Amplify.

Warto doda膰 opcj臋 autoryzacji za pomoc膮 provider贸w, takich jak Facebook, Google czy Apple. Dzi臋ki AWS Cognito czy Firebase Authentication mo偶esz to聽zrobi膰 bardzo szybko.

Baza danych

W architekturze serverless dobrze sprawdzaj膮 si臋 bazy danych NoSQL, ale wyb贸r mocno zale偶y od rodzaju projektu.

Major and well-known databases like PostgreSQL and MySQL don鈥檛 fit very well in Serverless architecture. Due to the nature of serverless, it can create a lot of connections to the database and exhaust the database connection limit.
- R茅mi Weng

Dla AWS b臋dzie to DynamoDB, dla Google - Firestore Database lub Realtime Database.

Deployment

Nowoczesne hostingi, taki jak Cloudflare Pages, Vercel i Netlify dostarczaj膮 narz臋dzia do automatycznego deployu podczas wrzucania nowej wersji kodu na聽repo. Dla backendu mo偶emy u偶y膰 Seed.run, kt贸ry zrobi dok艂adnie to samo na聽backendzie.

DNS, CDN

Je艣li chodzi o DNS i CND to klasycznie - Cloudflare. Zyskujemy dodatkowo podstawow膮 ochron臋 w postaci anty DDoS, mo偶emy w艂膮czy膰 firewall i wiele wi臋cej.

Wykrywanie b艂臋d贸w

呕eby wiedzie膰 o wszystkich b艂臋dach, kt贸re u偶ytkownik napotka艂 na froncie podepnijmy Sentry. Logowanie b艂臋d贸w backendowych powinno by膰 w艂膮czone z聽automatu po stronie dostawcy serverless API.

P艂atno艣ci, subskrypcje

Wielu poleca Stripe, to rozwi膮zanie sprawd藕 w pierwszej kolejno艣ci.

Stripe jest co raz bardziej popularne w Polsce.
Polskie us艂ugi u偶ywaj膮ce Stripe to, m.in.: EasyCart, MailingR.

UWAGA: mamy cynk, 偶e faktury automatycznie generowane przez Stripe nie s膮 zgodne z polskim prawem podatkowym. Lepiej wy艂膮czy膰 t臋 funkcj臋 i skorzysta膰 z聽integracji, aby generowa膰 i wysy艂a膰 faktury do klient贸w.

Podsumowanie

To wszystko z listy nowoczesnego tech-stacku platformy saas dla one-man-army 馃榾

Remi Weng straci艂 jakie艣 5 miesi臋cy, zanim znalaz艂 w艂a艣ciwy stack do jego aplikacji. Dzi臋ki powy偶szej li艣cie, Ty ju偶 nie musisz 馃檪 聽Je艣li chcesz sprawdzi膰 jak dok艂adnie wygl膮da艂 jego proces, kliknij tutaj.


Chwila na zagadk臋 馃

Dzisiaj b臋dzie mega 艂atwo.
Co tutaj jest nie tak?

Buttony i ich stany...

Odpowied藕 znajdziesz na ko艅cu maila.


Rapid ReDesigns - 艂yknij wiedz臋 UI/UX w聽przyspieszonym tempie

UX | 藕r贸d艂o

Zestaw film贸w od Garego z DesignCourse (ok. 850 tys. subskrybcji 馃憖).

Gary bierze na lad臋 interfejs ze s艂abym UX i w przyspieszonym tempie robi redesign, aby poprawi膰 UX.

Widzimy, jak wygl膮da ten proces i jakie nanosi zmiany w Figmie. No聽i聽mamy od razu wyja艣nienie dlaczego tak robi.

Obejrzyj filmiki i zacznij ReDesign ekran贸w swoich aplikacji.
Aby mia艂y lepszy UI/UX 馃檪


Kogo warto obserwowa膰?

YouTube Cover

AJ&Smart

To studio Designerskie z Berlina z ponad 200 tys. subskrypcji na YT. Na swoim kanale maj膮 mega warto艣ciowe filmy z tematyki UI, UX, Design Thinking, Design Sprint贸w i wiele wi臋cej. Co wa偶ne, wiedza ta przekazywana jest w baaardzo zrozumia艂y spos贸b.

YouTube: AJ&Smart
Instagram: ajsmartdesign
LinkedIn: aj&smart

Mo偶esz zacz膮膰 od filmu: "Zacznij projektowa膰 w Figmie w 24 minuty":


Top UI/UX Design Inspiration - ekrany i聽interakcje do oblukania

UI, UX | 藕r贸d艂o

Musisz zobaczy膰 t臋 list臋, aby by膰 na bierz膮co w trendach UI/UX. Zajmie Ci to chwilk臋, a... "co si臋 zobaczy艂o to si臋 nie od-zobaczy" 馃榾

Mo偶e kt贸ry艣 z ekran贸w Ci臋 zainspiruje do stworzenia jakiej艣 appki? 馃

Zobacz:
UX Planet - Top UI/UX Design Works for Inspiration 鈫


Zagadka - odpowied藕 馃憞

Co tutaj jest nie tak?

Z艂y UX 馃憜

Dobry UX 馃憜 殴r贸d艂o

To wszystko na dzi艣 馃檪
No to mamy d艂ugi weekendzik 聽馃帀 聽
YEAH!

殴r贸d艂o

PS. Je艣li ten mail by艂 dla Ciebie przydatny i znasz kogo艣, komu te偶 m贸g艂by pom贸c 鈥 prze艣lij mu tego maila 鈥 na pewno b臋dzie Ci za to wdzi臋czny 馃槏

Pozdrawiam i mi艂ego dnia!

Je艣li jeszcze nie ma Ci臋 na li艣cie 馃

Wysy艂amy jeden email tygodniowo, w ka偶dy pi膮tek, o godz. 12:00.
Warto艣ciowa wiedza o UI/UX dla developera mo偶e wyl膮dowa膰 do Twojej skrzynki.