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}
?
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?
75 symbols to write (special 2-{
, 2-}
)
96 symbols to write (special 8-{
, 8-}
, 4-@
)
<FooBar @firstName={firstName} @lastName={lastName} @age={age} @birthDay={birthDay} />
88 symbols to write (special 4-{
, 4-}
, 4-@
)
<FooBar @firstName @lastName @age @birthDay />
46 symbols to write (special 4-@
)
But.. what if we will mark component attributes using @
and no mark for component arguments?
<FooBar firstName lastName age birthDay />
44 symbols to write
Why we need to write more templates code if we can apply simple convention?