Hyperflask – Framework Flask dan Htmx Full-Stack

• Framework web berpusat pada backend berbasis Flask yang menyediakan manajemen state yang cepat dan sederhana tanpa pengelolaan frontend yang rumit
• Mengadopsi arsitektur komponen yang dipadukan dengan HTMX, sehingga memungkinkan penyusunan UI interaktif berbasis server
• Mengintegrasikan stack web modern seperti routing berbasis file, pipeline aset esbuild + TailwindCSS, dan lingkungan deployment otomatis
• Menyertakan beragam fitur bawaan seperti pengiriman email (MJML), pekerjaan latar belakang, push berbasis SSE, terjemahan, autentikasi, dan lainnya
• Mendukung penyiapan yang mudah dan deployment ke cloud melalui standardisasi lingkungan pengembangan dan deployment berbasis kontainer serta integrasi VS Code

---

Ikhtisar: framework webapp berpusat pada backend berbasis Flask

• Hyperflask adalah framework web Python yang berjalan di atas Flask dan berorientasi pada desain yang digerakkan backend
• Mengurangi kompleksitas manajemen state di frontend dan menyediakan arsitektur ringkas yang berpusat pada server
• Dilengkapi secara bawaan dengan teknologi web modern seperti HTMX, TailwindCSS, dan esbuild
• Melalui integrasi HTMX, dapat mewujudkan interaksi real-time tanpa reload penuh halaman
• Dengan arsitektur komponen, komponen backend dan frontend dapat digunakan ulang
  • Dengan memperkenalkan struktur berpusat pada komponen ke lingkungan Flask, komponen frontend dan backend dapat langsung digunakan di template Jinja
  • Memungkinkan pembuatan komponen backend server-side yang dipadukan dengan HTMX, dan juga terintegrasi secara alami dengan React maupun web component
  • Meningkatkan penggunaan ulang kode dan kemudahan pemeliharaan, sehingga menyediakan struktur yang cocok untuk pengembangan aplikasi skala besar
• Mendukung routing berbasis file maupun berbasis aplikasi
  • Menggunakan format file .jpy baru yang menggabungkan kode Python dan template Jinja
  • Terinspirasi dari sistem halaman Astro, sehingga definisi route dan komposisi UI dapat dikelola di satu tempat
  • Dengan ini, pengaturan routing menjadi lebih sederhana, dan penambahan halaman baru menjadi intuitif
• Ekosistem terbuka
  • Hyperflask memiliki codebase inti yang kecil, dan dibangun dengan menggabungkan berbagai ekstensi Flask secara organik
  • Tiap ekstensi dikelola sebagai proyek independen sehingga dapat dipilih dan dikombinasikan dengan bebas
  • Semua proyek tersedia secara terbuka di organisasi Hyperflask di GitHub, dan mendorong penyusunan framework yang disesuaikan pengguna
• “Batteries Included”
  • Pengiriman email MJML, pekerjaan latar belakang dramatiq, push real-time berbasis SSE, terjemahan berbasis gettext (i18n)
  • Autentikasi dan manajemen sesi, optimasi dan streaming gambar, pembuatan konten statis, dan lain-lain
  • Menyediakan set fitur tingkat produksi yang siap digunakan tanpa konfigurasi tambahan
  • ORM berpusat pada SQL (sqlorm), dioptimalkan untuk SQLite
• Konfigurasi lingkungan dan deployment
  • Menstandarkan lingkungan pengembangan/operasi berbasis kontainer untuk meminimalkan masalah konfigurasi lingkungan
  • Integrasi yang erat dengan VS Code memudahkan pengembangan dan debugging lokal
  • Mendukung deployment yang mudah ke VPS maupun layanan cloud utama

Ringkasan

• Hyperflask adalah framework generasi berikutnya yang memperluas ekosistem Flask untuk menghadirkan pengalaman pengembangan web Python full-stack modern
• Melalui HTMX, sistem komponen, routing berbasis file, dan lingkungan pengembangan terstandar berbasis kontainer, Hyperflask mewujudkan produktivitas maksimal dengan konfigurasi minimal

[GN⁺]

Komentar Hacker News

• Sebagai pembuat hyperflask, saya senang akhirnya bisa merilis proyek yang sudah lama saya siapkan
  Pengumuman lengkapnya bisa dilihat di sini
  Saya ingin mendengar beragam masukan

  • Akan lebih bagus jika pendekatan seperti ini hadir dalam bentuk library yang tidak terikat pada backend tertentu
    Proyek Django kami sudah lebih dari sejuta baris, jadi tidak mudah diubah; saya penasaran apakah ada cara untuk menerapkannya dengan mudah ke aplikasi Django

  • Sebagai pengembang htmx, proyek ini terlihat sangat keren

  • Rekan saya pernah membuat aplikasi internal dengan kombinasi flask/htmx/sqlalchemy dan hasilnya sangat bagus, tetapi tidak mendapat persetujuan untuk open source
    Jadi saya menantikan percobaan baru dari hyperflask

  • Saya penasaran kenapa memilih sqlorm sebagai ORM
    Saya sudah lama tidak mengikuti pengembangan Python, tetapi saya kira semua orang memakai SQLAlchemy, jadi sqlorm terasa asing

  • Sangat mengesankan melihat framework baru yang benar-benar merangkul HTMX
    HTMX sedang memicu berbagai tren baru yang menjadi alternatif bagi JS dan React
    Pasti banyak juga yang menyukai kombinasi Python dan Flask, dan dalam HTMX sisi server, komponen adalah hal yang inti
    Selain itu, situsnya juga lebih nyaman dilihat dibanding FastHTML
    Jika dibandingkan dengan harcstack.org

    Language: Python vs. Raku  
    Web framework: Flask vs. Cro  
    ORM: ?? vs. Red  
    Components: keduanya punya  
    HTML: template vs. fungsional  
    CSS: DaisyUI/Tailwind/Bootstrap vs. Pico  
    

    Pilihan-pilihan seperti ini tampaknya bisa menarik basis pengguna yang jauh lebih luas
    Sebagai pembanding, HARC stack mungkin lebih menarik bagi kalangan kecil yang menyukai pendekatan HTML fungsional seperti versi server-side dari bahasa Elm, atau yang alergi terhadap denormalisasi ala Tailwind

• Saat mengembangkan web app dengan htmx, saya merasa akhirnya menemui 'jalan buntu'
  Masalah utamanya adalah state aplikasi frontend harus disimpan di URL
  Pada UI modern dengan berbagai area, widget, popup, dan lain-lain yang masing-masing membutuhkan state lokal dan navigasi, sangat sulit memasukkan semua state itu ke dalam satu URL global
  Mendesain agar state tertentu justru tidak dimasukkan ke URL juga lebih sulit lagi
  Masalah seperti ini mudah diselesaikan oleh framework seperti React atau Vue yang menyediakan penyimpanan state sendiri
  Mungkin cocok jika dibangun seperti forum phpBB, tetapi pengguna masa kini mengharapkan pengalaman yang lebih maju

  • Tidak harus menyimpan state hanya di URL
    Ada banyak cara lain seperti penyimpanan server, session, localstorage, cookie, dan sebagainya
    Misalnya, kustomisasi layout aplikasi oleh pengguna tidak perlu URL, tetapi untuk hal seperti hasil pencarian yang perlu dibagikan, kondisi pencarian memang harus ada di URL
    Yang penting adalah memikirkan apa yang sebenarnya ingin dicapai
    Dan memasukkan banyak widget, popup, dan semuanya ke satu layar/satu URL atas nama 'UI modern' justru bisa menjadi kompleksitas yang berlebihan
    Sering kali penyimpanan state yang disediakan React/Vue hanya menduplikasi hal-hal yang sebenarnya sudah bisa dikelola sepenuhnya di server

  • Pendekatan hypermedia juga cukup mampu menangani UI yang kompleks
    Tidak perlu memaksakan semuanya ke URL
    Dengan session, cookie, ID tab, dan sebagainya, state bisa dibagikan atau diisolasi per tab, lalu backend cukup mengambil state itu dari DB
    Hypermedia juga sangat kuat untuk lingkungan real-time/multiplayer
    Justru kelemahan HTMX adalah tidak menaruh lebih banyak state di backend; saya malah berharap pendekatannya dibawa lebih jauh ke arah itu

  • Menurut saya ini hanya berarti tidak cocok dengan use case saya
    Lucu juga menganggap React/Vue itu 'mudah'

  • Saya rasa React maupun Vue juga tidak benar-benar menyelesaikan semua masalah yang diharapkan pengguna

  • Kecuali tingkat kompleksitasnya sangat tinggi, dalam praktiknya saya bisa menangani sebagian besar kasus dengan cukup mulus memakai htmx (dikombinasikan dengan unpoly, alpinejs, dan localstorage)

• Saya menemukan beberapa konsep menarik di hyperflask

  • Implementasi komponen: tautan
  • Cara menggabungkan view dan controller dalam satu file: tautan
    Namun komponen itu pada dasarnya secara internal hanyalah macro biasa, jadi saya sempat berpikir apakah tidak lebih baik langsung memakai macro saja
    Saya juga penasaran kenapa memilih Flask
    Dulu saya pernah mencoba pendekatan serupa di /dev/push lalu berpindah ke kombinasi FastAPI + Jinja2 + Alpine.js + HTMX
    Saya menyadari FastAPI bukan hanya untuk API, dan saya memilihnya karena memerlukan dukungan async
    Saya juga suka Flask, tetapi pernah merasa ada batasannya

  • Cara menggabungkan view dan controller dalam satu file mengingatkan saya pada pengembangan PHP lama
    Tergantung skala proyeknya, pendekatan ini memang membuat pengembangan jauh lebih sederhana, jadi ada kelebihannya

  • Menurut saya kombinasi FastAPI + HTMX juga sangat efektif

• Dari pengalaman saya di Django, berkat fitur admin scaffolding, hampir tidak pernah perlu membuat sendiri UI untuk diagnosis dan dukungan pelanggan
  Dalam proyek berbasis framework lain, fitur seperti itu akhirnya harus dibuat sendiri, dan hasilnya sering tidak sememuaskan Django
  Ada banyak framework yang terlihat menarik seperti Hyperflask, tetapi melepaskan framework admin milik Django adalah harga yang sangat mahal
  Saya penasaran apakah ada orang yang benar-benar menemukan alternatif atau pola pengganti yang layak untuk Django admin

  • Saya juga merasakan hal yang sama
    Saat pindah ke FastAPI, hal dari Django yang paling saya rindukan adalah berbagai app yang menyusun proyek
    Belakangan saya baru sadar betapa nyamannya struktur yang mengelompokkan migration, static file, template, dan lain-lain berdasarkan fungsi

  • Saya kebanyakan memakai Supabase
    Kadang saya melatih admin menggunakan UI Supabase agar mereka bisa menangani kebutuhan mendesak
    Atau jika memungkinkan, saya juga memakai Airtable sebagai backend
    Tetapi pada akhirnya saya tetap sangat merindukan Django admin, dan kombinasi Django+HTMX selalu terasa menggoda

  • Ada Flask-Admin juga, tetapi jauh lebih sederhana dibanding Django Admin
    Saya ingin menyelesaikan masalah seperti ini ke depannya

• Setelah mencoba HTMX dengan berbagai framework, menurut saya kombinasi Go + Templ + HTMX paling berhasil menggabungkan fleksibilitas dan kesederhanaan

  • Dalam pengalaman saya, Go terlalu bertele-tele, jadi saya justru sedang mempertimbangkan pindah dari Go+Templ+HTMX ke Flask + Jinja + HTMX
    Cara Go mendefinisikan template terasa merepotkan

  • Kombinasi yang pasti ingin saya coba berikutnya adalah FastAPI + Jinja2 + HTMX
    Saat ini saya memakai stack tersebut

• hyperflask terasa tidak sejalan dengan filosofi Flask dan htmx
  Terlalu banyak lapisan abstraksi, dan titik integrasinya dengan htmx juga tidak terlalu terlihat
  Saya sebenarnya berharap sesuatu seperti FastHTML yang sudah menyematkan htmx secara bawaan

  • Saya sangat menikmati memakai FastHTML

• Setiap proyek yang menampilkan demo starfield, saya selalu berharap ada fitur pengatur kecepatan dan efek mengikuti kursor mouse
  Semoga itu ditambahkan di versi Hyperflask berikutnya
  Proyeknya sendiri luar biasa, dan saya suka Htmx, tetapi belakangan ini saya juga memperhatikan Datastar

  • Jika menjalankan kode berikut di console, Anda bisa memberi berbagai efek seperti pengaturan kecepatan

    new WarpSpeed("warpdrive", {
      "speed": 20,
      "speedAdjFactor": 0.03,
      "density": 2,
      "shape": "circle",
      "warpEffect": true,
      "warpEffectLength": 5,
      "depthFade": true,
      "starSize": 3,
      "backgroundColor": "hsl(224,15%,14%)", 
      "starColor": "#FFFFFF"
    });
    

  • Saya penasaran apakah yang dimaksud adalah fitur seperti ini

  • nova.app adalah yang terbaik yang pernah saya lihat sejauh ini

• Jika menginginkan pengalaman Fullstack Async lengkap berbasis HTMX, Litestar juga layak dilihat

• Saat pertama melihatnya, saya sulit memahami kenapa perlu struktur yang langsung menempelkan template HTML ke file controller Python
  Rasanya seperti menambah kompleksitas hanya demi menghilangkan satu fungsi render sederhana
  Saya penasaran apa poin yang saya lewatkan

  • Pendekatan ini sejalan dengan prinsip Locality of Behavior yang dianggap penting oleh htmx
    Terinspirasi dari Astro Pages di ekosistem JavaScript
    Dalam praktiknya, pengalaman pengembangnya juga bagus
    • Penjelasan tentang Locality of Behaviour
    • Panduan Astro Pages

• Banyak orang membicarakan keterbatasan Flask dan bertanya 'kenapa bukan FastAPI', tetapi secara pribadi saya merasa Litestar adalah alternatif terbaik
  Litestar menyediakan dukungan htmx secara bawaan
  Informasi lebih lanjut bisa dilihat di sini