내가 JavaScript를 버리고 HTMX, Go & Postgres로 Saas 스택을 만들었는데
소개
최근에 나는 웹 스택을 사용하여 앱을 구축하기 시작했습니다.
이 스택을 사용하여 두 개의 앱을 구축했습니다. banterbus.games 브라우저 기반 파티 게임 (현재 깨진). 웹 소켓을 사용하므로 가장 일반적인 웹 응용 프로그램이 아닙니다. 웹 소켓이 몇 개 있기 때문에.
밴터 버스 코드 : https://gitlab.com/hmajid2301/banterbus
저는 현재 Voxicle (사용자 피드백을 수집하고 행동하기위한 SaaS 플랫폼)이라는보다 일반적인 CRUD 앱을 구축하고 있습니다. 처음으로, 처음으로, 다른 사람들에게 청구 할 무언가를 구축하려고 노력하고 있습니다 (따라서 코드는 아직 오픈 소스가 아님).
이 기사에서는 왜이 기술 스택을 좋아하는지 살펴보십시오. 주로 가능한 한 간단하게 유지하고 싶기 때문입니다. 주목할만한 또 다른 점은 백엔드 개발자이며 프론트 엔드 코드를 LA JavaScript (JS) 작성하는 것을 좋아하지 않습니다. 따라서이 스택은 가능한 한 많은 JS를 쓰지 않도록 설계되었습니다. 다른 개발자들은 물론 글쓰기를 좋아합니다. 따라서이 렌즈를 통해이 기사를 읽으십시오. 이 스택은 당신에게 의미가 없습니다.
프론트 엔드
부업 프로젝트에서 찾은 문제 중 하나는 프론트 엔드 코드를 작성해야 할 때 항상 동기 부여를 잃을 것이라는 점입니다. 몇 가지 이유로, 나는 React 또는 Svelte와 같은 프레임 워크에 대한 충분한 경험이 없었습니다. 그러므로 그들은 빨리 엉망이 될 것입니다.
또 다른 문제는 백엔드와 프론트 엔드 사이에 일관된 상태를 유지하는 것입니다. 백엔드에서 모든 것을 운전하면 대부분의 주를 유지할 수 있습니다. 우리가 구축하는 간단한 CRUD 앱에 잘 작동하는 것은 무엇입니까? UI는 매우 미쳤거나 영리한 일을 할 필요가 없습니다.
테일 윈드 스
스타일링을 위해, 나는 몇 년 동안 Tailwindcss를 고수했으며, 어떤 사람들은 그것을 싫어합니다. 나는 그것을 신경 쓰지 않았다. 클래스가 부풀어 오르고 HTML을 더 복잡하게 보이게합니다. 그러나 나는 CSS를 구성하는 방법을 결코 해결하지 못했습니다. 그래서 꼬리 바람은 항상 나에게 더 간단하다고 느꼈습니다.
나는 아마도 복제 된 스타일을 가지고 있으며 CSS 전문가 나 프론트 엔드 전문가가 아니기 때문에 내가 가진 것을 단순화 할 수 있습니다. 그러나 우리는 프론트 엔드가로드하는 데 느리게 느껴지면 우리는 그것을 볼 수 있습니다.
Daisyui
Tailwindcss 위에이 구성 요소 라이브러리를 사용하고 있습니다.이 구성 요소는 상자에서 사용할 수있는 다양한 구성 요소와 테마를 제공합니다. 스타일과 조정/변화에 직접적으로. 다시 한 번 좋아합니다. 백엔드 개발자는 프론트 엔드를 수행하므로 더 복잡한 앱을 위해 자신의 디자인 시스템을 원하고 자신의 구성 요소를 만드는 것이 좋습니다. 그러나 다시, 나는 그것이 프론트 엔드 개발이 얼마나 쉬운 지 정말로 좋아합니다.
HTMX
프론트 엔드는 HTMX를 사용하여 단순한 라이브러리로 구축되며 대부분의 주를 백엔드에서 운전합니다. 서버는 HTML (vs JSON)을 반환 한 다음 교체 할 위치를 알려줍니다. 이 HTMX 요청을보십시오. 양식이 제출되면 후 요청을 보냅니다. /feedback 엔드 포인트 본체는 입력 필드 JSON입니다. (json-enc 확장자는 우리를 위해 그것을 JSON으로 변환합니다). 그런 다음 대상은 HTML이 외부 HTML을 대체한다는 것을 의미합니다. feedback_list
AlpineJS
I combined HTMX with AlpineJS, as some actions you don’t always want to go to the server. Like opening a modal, or accordion. I don’t use it a lot and maybe could refactor my site without it. But for now, it does help make things a bit simpler. Especially with Dynamic HTMX queries, which cannot be statically generated on the backend when we render the HTML template. See an example here:
Backend
Go
I moved from Python to Go about 3 years ago and honestly haven’t looked back. I really liked statically typed languages. Again, each to their own, but I think having typed data just makes your life so much easier. I also really like the smaller, better devex around Go. Fast to compile. Compiles to single static binary. Easier to put into a scratch Docker image. Simple dependency management, go mod. CLI 도구에는 테스트 러너가 있습니다 (go test).
나는 GO의 단순성을 정말로 좋아합니다. 코드는 읽기가 매우 쉽고 무슨 일이 일어나고 있는지 확인합니다. 나는 진 또는 고릴라와 같은 프레임 워크를 사용하지 않으려 고 노력했습니다. 결국, 나는 fuego를 사용했기 때문에 열린 API 사양을 생성 할 수있었습니다.
나는 RAW SQL을 쓰기 시작했습니다 sqlc그래서 나는 쿼리가 무엇을 할 것인지 정확히 ORM으로 추측 할 것입니다. 나는 파이썬에서 Flask 또는 Fastapi와 같은 Orms 및 프레임 워크를 사용하는 것을 좋아했지만 GO에서 내 의견을 완전히 취소했습니다.
-- name: AddUser :one
insert into users (email) values ($1) returning *;
-- name: AddOrganization :one
insert into organizations (display_name, slug) values ($1, $2) returning *;
그런 다음 실행하여 SQL 코드를 생성 할 수 있습니다 sqlc generate GO 코드를 생성합니다. 우리는 사용할 것입니다 pgx 기본 운전자로서.
공통 3 레이어 구조, 컨트롤러 (return html) -> 서비스 계층 (비즈니스 로직) -> 스토어 레이어 (DB)를 사용하고 있습니다.
포스트 그레스
나는 MongoDB와 같은 다른 기술을 실험하는 것을 정말로 좋아했던 것을 기억합니다. 그러나 요즘 지루한 것은 나에게 섹시합니다. 이 전체 스택과 마찬가지로 간단하고 바보를 유지하십시오. 좋은 이유가 없다면 Postgres를 사용하십시오. 그것은 주변에 많은 툴링이 있습니다. JSON을 저장하고 JSON을 쿼리하는 경우에는 MongoDB보다 성능이 우수합니다.
DeVex
DeVex 부분의 몇 가지 점, 나는 Gitlab Ci를 정말 좋아합니다. 따라서 속도/몇 분만 실행하는 것은 문제가되지 않습니다. 나는 그것에 매우 익숙합니다. 나는 그것을 함께 사용합니다 go-task (TaskFiles).
마지막으로, 당신이 나를 알고 있다면, 나는 항상 Nix를 언급하는 것을 좋아합니다. 프로젝트는 모든 비 GO 의존성에 Nix Dev 쉘을 사용하도록 설정되었으며, 우리는 정말 유사한 Dev Env 및 Ci Env를 가지고 있습니다. 자세한 내용 : https://www.youtube.com/watch?v=bdgfn_ihho
그것에 관한 것입니다! 그것은 SaaS를 구축하기위한이 기술 스택을 사용한 저의 높은 경험과 이유입니다. 인증에 도움을 주기로 선택한 플랫폼과 권한을 부여하려는 방법에 대한 자세한 내용을 자세히 살펴볼 수 있지만 지금은 좋은 출발점입니다.
Post Comment