Merged
Conversation
I am too lazy to split the changes of this scale. This commit introduces htpy and data-star to rewrite Jinja templates and htmx attributes, respectively. *Jinja* -> *htpy* htpy is a library for writing HTML using plain Python syntax. Given elements like `div` and `li`, we can specify attributes in function calls `(attr=value)`, and child elements in `[]` syntax. htpy achieves this by overriding `__call__` and `__getitem__` dunder methods. This effectively builds an intermediate representation for HTML using Python lists and dictionaries. Then, this object can be converted to HTML while also escaping Python strings via MarkupSafe library which Jinja also uses internally. Although the syntax is quite different, the underlying philosophy aligns with that of JSX, which treats HTML as code rather than data. The reason I switched from Jinja templates is that htpy integrates well with the Python language. Whereas Jinja templates are defined in files, htpy can use a function to define a component. We can even use a variable or class for defining HTML components. The ability to treat HTML fragments as code is similar to JSX, and feel like this is more maintainable in the long run. One down side of htpy is that it is relatively slow compared to Jinja. This is because Jinja uses its own compiler to cache template loading and reduce the cost of rendering. But since htpy already has the intermediate representation, I think a writing a compiler would be doable and benefit more from the context-sensitive optimization of HTML fragments, which Jinja cannot benefit from due to the design constraint that the Jinja templates can be language-agnostic. *htmx* -> *data-star* data-star provides htmx + Alpine.js experience, but in a more cohesive way. It manages state and reactivity through HTML attributes while at the same time allowing backends to modify DOM and the state by sending events. htmx often suffers from attribute explosion (e.g. specifying hx-post, hx-trigger, hx-target, hx-swap on the single element). In data-star however, all those target and swap logic is dictated by the server-side. Also, the package size of data-star is smaller than that of htmx :) *Other changes* There are many small insignificant and important changes (like, Broadcaster class in `app/bc.py` to manage notification events) made here and there.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
動的HTML生成するJinjaテンプレートをhtpyへ変更
理由: Jinjaはファイル単位で記述するため、再利用性や構成容易性に難があった
__call__と__getitem__のオーバーロードで実現しているJSXのように、HTMLをデータとしてではなくコードとして管理できる
サーバへのリクエストロジックの記述をhtmxからdata-starへ変更
理由: htmxは複雑なリアクティビティを実現しようとすると属性値が多くなり、メンテナンスコストが上がるため
サーバ側の裁量で複数のコンポーネントを任意のタイミングで置き換えられる
htpyとdata-starを採用することで、HTMLをコンポーネント単位で記述することが容易にできるようになった。このおかげで、ページ数が増えてもスケールしやすいコードベースになったはず。