EmberCamp 2016 – I Can Write My App With No Handlebars: Declarative Templating in Ember

EMBERCAMP 2016 I CAN WRITE MY APP WITH NO HANDLEBARS
I CAN WRITE MY APP WITH NO HANDLEBARS Declarative Templating in Ember.js

I CAN WRITE MY APP WITH NO HANDLEBARS EMBERCAMP 2016
LAUREN TAN SUGARPIRATE_ POTETO

ZELDA

LOOK MA, NO HANDS!

https://www.youtube.com/watch?v=_ahvzDzKdB0

LARGE small

“A language design can no longer be a thing. It must be a pattern – a pattern for growth – a pattern for growing the pattern for deﬁning the patterns that programmers can use for their real work and their main goal.” –Guy Steele

wat

{{#shopping-cart items=items as |cart|}} <ul> {{#each cart.items as |item|}} <li>{{item.name}} - {{item.quantity}} x {{item.price}}</li> {{/each}} </ul> <hr> {{cart.total}} <div class="button-group"> {{cart.checkout}} {{cart.empty}} </div> {{/shopping-cart}}

I. Templates are Data II. Your UI as a Language III.Helper Best Practices

LOGICLESS TEMPLATES?

no logic extreme logic some logic

let Plates = require('plates'); let html = '<div id="test">Old Value</div>'; let data = { test: 'New Value }; let output = Plates.bind(html, data);

let age = 18; hbs`{{if (gt age 21) Adult Kid}}`;

return <ul> {this.props.posts.map((post) => { return <Item key={post.objectId} post={post}/> })} </ul>;

IT DEPENDS™

SEPARATION OF CONCERNS

export function gt([a, b]) { return a > b; } export default helper(gt);

AVOID PROGRAMMING IN THE TEMPLATE

{{#unless (or (and (gte value 0) (lt value 0.0001)) (and (lt value 0) (not allowNegativeResults)))}} ... {{/unless}}

export default Component.extend({ filteredItems: computed('[email protected]', function() { // ... complicated logic }) });

<ul> {{#each (filter-by 'price' priceRange items) as |items|}} <li>{{item}}</li> {{/each}} </ul> https://github.com/DockYard/ember-composable-helpers#ﬁlter-by

RULE OF LEAST POWER

“The "Rule of Least Power" suggests choosing the least powerful language suitable for a given purpose.”

least powerful most powerful

no logic extreme logic

<ul> {{#each items as |item|}} <li>{{item}}</li> {{/each}} </ul>

<ul> {this.props.items.map((item) => { <li>{item}</li> })} </ul>;

<h1>Greetings!</h1> <p>Hello {{name}}, and welcome.</p>

<h1>Greetings!</h1> <p>"Hello " "Jim Bob" ", and welcome."</p>

el.childNodes; // ["Hello ", "Jim Bob", ", and welcome."]

KEYWORD VS HELPER

action component concat debugger each each-in get hash if input link-to loc log mut outlet partial query-params render textarea unbound unless with

export function foo([model, value], { async }) { // .. } export default helper(foo); {{foo model "abc" async=true}}

–Harold Abelson “Programs are meant to be read by humans and only incidentally for computers to execute.”

–Unknown “Every line of code is a liability. The code that's easiest to maintain is code that was never written.”

<html> <head> <title>Hello World</title> </head> <body> Hello, Example. Today's date and time is {{now}}. </body> </html>

page = Page(); head = new Head(); title = new Title(); title.setText("Hello World") head.add(title); page.add(head); body = new Body(); preamble = new StringBuffer(); preamble.append("Hello, Example. Today's date and time is "); preamble.append(Time.now().toString()); preamble.append("."); body.add(preamble.toString()); page.add(body);

DECLARATIVE TEMPLATING

{{#each filteredEmployees as |employee|}} ... {{/each}}

export default Component.extend({ employeeFilter: 'active', filteredEmployees: filter('employees', function() { let filter = get(this, 'employeeFilter'); return get(this, 'employees').filterBy('type', filter); }) });

{{#each-in groupedEmployees as |group employees|}} ... {{/each-in}}

export default Component.extend({ employeeGroupBy: 'role', filteredEmployees: /* ... */, groupedEmployees: computed('employeeGroupBy', 'filteredEmployees', function() { // ... complicated logic }) });

https://github.com/DockYard/ember-composable-helpers {{#with (filter-by "type" employeeFilter employees) as |filteredEmployees|}} {{#each-in (group-by employeeGroupBy filteredEmployees) as |group employees|}} ... {{/each-in}} {{/with}}

https://github.com/DockYard/ember-composable-helpers {{#each-in (group-by employeeGroupBy (filter-by "type" employeeFilter employees)) as |group employees|}} ... {{/each-in}}

IT DEPENDS™

{{#form-for person as |f|}} {{f.text-field "firstName"}} {{f.text-field "lastName"}} {{f.date-field "birthDate"}} {{f.submit "Save"}} {{/form-for}} https://github.com/martndemus/ember-form-for

–Jiro Ono “In order to make delicious food, you must eat delicious food. […] Without good taste, you can’t make good food.”

GOOD TASTE, GOOD CODE

EMBERGER HELPERS

HELPER PURITY

export function add([a, b]) { return a + b; } export default helper(add);

let x = 0; export function add([a]) { return x += a; } export default helper(add);

Numbers: {{numbers}}  Sorted: {{sort "ascending" numbers}}  Numbers: {{numbers}}  https://ember-twiddle.com/717d4c5f774d0b2822e853d67ef7c3a9?openFiles=templates.application.hbs%2C

EMBER-CHANGESET https://github.com/DockYard/ember-changeset

export function changeset(obj, validateFn, validationMap) { return EmberObject.extend({ // changeset implementation }); } export default class Changeset { constructor() { return changeset(...arguments).create(); } }

export function changeset([model, validationMap]) { if (isObject(validationMap)) { return new Changeset(model, lookupValidator(validationMap), validationMap); } return new Changeset(model, validationMap); } export default helper(changeset);

{{dummy-form changeset=(changeset user EmployeeValidations) submit=(action "submit") rollback=(action "rollback") }} https://bit.ly/ember-changeset-demo

RETURN VALUES

STRINGS, NUMBERS, BOOLEANS

export function join([separator, ...words]) { return words.join(separator); } export default helper(join); export function sum([...values]) { return values.reduce((acc, curr) => { return acc + curr; }, 0); } export default helper(join); export function gt([a, b]) { return a > b; } export default helper(gt); {{join "-" "hello" "world"}}  {{sum 1 2 3}}  {{gt 1 2}}

ARRAYS

export function repeat([length, value]) { if (typeOf(length) !== 'number') { return [value]; } return Array.apply(null, { length }).map(() => value); } export default helper(repeat); https://github.com/DockYard/ember-composable-helpers#repeat

{{#each (repeat 3 "Developers") as |text|}} {{text}} {{/each}}

OBJECTS

{{#with (changeset user userValidations) as |changeset|}} {{input value=changeset.firstName}} <button type="submit" {{action "save" changeset}}>Save</button> {{/with}}

{{#with (hash bar=(component "hello-world")) as |foo|}} {{foo.bar name="Jim Bob"}} {{/with}}

{{complex-component ui=(hash map=(component "user-map") sidebar=(component "user-sidebar") form=(component "user-form")) }}

export function registerDummyComponent(context, name = 'dummy-component', opts = {}) { let owner = getOwner(context); let options = assign({ tagName: 'dummy' }, opts); let DummyComponent = Component.extend(options); unregisterDummyComponent(context, name); owner.register(`component:${name}`, DummyComponent); } export function unregisterDummyComponent(context, name = 'dummy-component') { let owner = getOwner(context); if (owner.resolveRegistration(`component:${name}`)) { owner.unregister(`component:${name}`); } }

test('it does something', function(assert) { registerDummyComponent(this); this.set('user', { firstName: 'Jim', lat: 51.5074, lng: 0.1278 }); this.on('submit', K); this.render(hbs` {{complex-component ui=(hash map=(component "dummy-component") sidebar=(component "dummy-component") form=(component "dummy-component")) }} `); assert.ok(...); });

FUNCTIONS

export function toggle([obj, prop]) { return function() { set(obj, prop, !get(obj, prop)); }; } https://github.com/DockYard/ember-composable-helpers#toggle

<button {{action (toggle "isExpanded" this)}}> {{if isExpanded "I am expanded" "I am not"}} </button>

<button {{action (pipe addToCart purchase redirectToThankYouPage) item}}> 1-Click Buy </button> https://github.com/DockYard/ember-composable-helpers#pipe

export function pipe(actions = []) { return function(...args) { return actions.reduce((acc, curr, idx) => { if (idx === 0) { return curr(...args); } return invokeFunction(acc, curr); }, undefined); }; } export default helper(pipe);

CLASS BASED HELPER

export default Helper.extend({ localesService: inject.service('locales'), currentLocale: readOnly('localesService.currentLocale'), compute([key]) { let currentLocale = get(this, 'currentLocale'); return get(this, 'localesService').lookup(currentLocale, key); }, localeDidChange: observer('currentLocale', function() { this.recompute(); }) });

COMPUTED VS HELPER

COMPUTEDS

export default Component.extend({ @computed('payment', 'rate', 'periods') annuity(payment, rate, periods) { let factor = ((1 - Math.pow(1 + rate, -periods)) / rate); return payment * factor; } });

HELPERS

{{#each (repeat 3) as |nil index|}} <div data-thing={{concat "foo-" index}}> {{!some HTML block}} </div> {{/each}} https://github.com/DockYard/ember-composable-helpers#repeat

{{#unless (or (and (gte value 0) (lt value 0.0001)) (and (lt value 0) (not allowNegativeResults)))}} ... {{/unless}}

TL;DR

LAUREN TAN SUGARPIRATE_ POTETO

LAUREN TAN SUGARPIRATE_ POTETO Thanks {{name}}!

EmberCamp 2016 – I Can Write My App With No Han...

EmberCamp 2016 – I Can Write My App With No Handlebars: Declarative Templating in Ember

More Decks by Lauren Tan

Other Decks in Programming

Featured

Transcript