handlebars → hbx → ?
[
]
JSX-like hbx syntaxis approach
Ember bring me ability to write less javaScript code. But templates syntaxis is pretty huge.
For example, why we do {{if (or (and a b) (eq d e) ) m n}}
instead of {if {or {and a b} {eq d e} } m n}?
How we can pas “true” to glimmer component? <MyComponent isEnabled={{true}} />?
Do we really need positional params?
{{some-component positionA positionB}}
Instead of it, we can apply convention to get param with same name from current context.
It can help us to reduce code from <FooBar @name={{name}} /> to <FooBar @name />
We can specify special symbol for positional params - like #.
Or we can use this simbol for get param with same name from current context approach.
<FooBar #name />
Why we need attributes in components? How often we use it?
Why not to use html built-in "data" attributes for this case?
[
]
<FooBar
@firstName
#lastName
/>
<FooBaz
@firstName={myFirstName}
@onChange={action onNameChange}
#lastName="NoName"
/>
{#each item as |items|}
{if {and foo baz} 'bar' 'baz'}
<HelloItem @firstName={model.name} />
{t 'some.international.text'}
{/each}
Points:
-
{{→{ -
}}→} -
@foo={{bar}}→@foo={bar} -
{{if a b c}}→{if a b c} -
{{if (and a b c) d e}}→{if {and a b c} d e}
Why?
Ember template:
{{foo-bar firstName=firstName lastName=lastName age=age birthDay=birthday}}
75 symbols to write (special 2-{, 2-})
Glimmer template:
<FooBar @firstName={{firstName}} @lastName={{lastName}} @age={{age}} @birthDay={{birthDay}} />
96 symbols to write (special 8-{, 8-}, 4-@)
HBX template:
<FooBar @firstName={firstName} @lastName={lastName} @age={age} @birthDay={birthDay} />
88 symbols to write (special 4-{, 4-}, 4-@)
HBX template (same names in context):
<FooBar @firstName @lastName @age @birthDay />
46 symbols to write (special 4-@)
40% less code to write
But… what if we will mark component attributes using @ and no mark for component arguments?
HBX template
<FooBar firstName lastName age birthDay />
44 symbols to write
Ember is always convention over configuration.
Why we need to write more templates code if we can apply simple convention?
