Ember HBX syntaxis example

my-component.md

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?

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?