Glimmer Lightning Talk

A short introduction to the Glimmer component library and its main feature set.

Presented at DublinJS, April 4th 2017

Transcript

1. glimmer Pat O’Callaghan
3. Install the Ember build tool: yarn global add ember-cli/ember-cli Create a new Glimmer app: ember new my-app --blueprint @glimmer/blueprint Start the development server cd my-app && ember serve
4. my-app ├── config │ └── environment.js ├── dist/ ├── src │ ├── config │ │ ├── module-map.ts │ │ └── resolver-configuration.ts │ ├── ui │ │ ├── components │ │ │ └── my-app │ │ │ ├── component.ts │ │ │ └── template.hbs │ │ ├── styles │ │ │ └── app.css │ │ └── index.html │ ├── index.ts │ └── main.ts ├── ember-cli-build.js │ ... other files ...
7. import Component from "@glimmer/component"; export default class YourName extends Component { firstName: string; lastName: string; constructor() { super(); this.firstName = 'Yehuda'; this.lastName = 'Katz'; } get fullName() { return `${this.firstName} ${this.lastName}`; } } <h1>{{firstName}} + {{lastName}} = {{fullName}}</h1> src/ui/components/my-app/component.ts src/ui/components/my-app/template.hbs
8. Arguments vs. Properties
9. import Component from '@glimmer/component'; export default class FullName extends Component { get fullName() { return `${this.args.firstName} ${this.args.lastName}`; } }; <h1>Child Component</h1> <h2>{{@firstName}} + {{@lastName}} = {{fullName}}</h2> src/ui/components/my-app/full-name/component.ts src/ui/components/my-app/full-name/template.hbs <full-name @firstName={{firstName}} @lastName={{lastName}} /> src/ui/components/my-app/template.hbs
10. Unidirectional
11. import Component, { tracked } from "@glimmer/component"; export default class YourName extends Component { @tracked firstName: string = ‘’; @tracked lastName: string = ‘’; @tracked(‘firstName’, ‘lastName’) get fullName() { return `${this.firstName} + ${this.lastName}`; } } src/ui/components/my-app/component.ts import Component from "@glimmer/component"; export default class YourName extends Component { firstName: string = ‘’; lastName: string = ‘’; get fullName() { return `${this.firstName} + ${this.lastName}`; } } src/ui/components/my-app/component.ts src/ui/components/my-app/component.ts
12. Actions
13. import Component from "@glimmer/component"; export default class YourName extends Component { @tracked showImage: boolean = true; toggleImage() { this.showImage = !this.showImage; } } <div class="container"> {{#if showImage}} <img width=500 src=".........jpg"> {{else}} <div class="text"> Hey Dude, where's the image? </div> {{/if}} </div> <button onclick={{action toggleImage}}> Toggle Image </button> src/ui/components/toggle-image/component.ts src/ui/components/toggle-image/template.hbs
15. EmberConf opening keynote, 2017
16. Efforts in the Ember community Wicked Good Ember closing keynote, 2016
17. Thanks! Here are some links • Glimmer website - https://www.glimmerjs.com • Ember State of the Union - https://emberjs.com/blog/2017/04/05/emberconf-2017-state-of-the-union.html • Glimmer 2 Deep Dive with Yehuda Katz https://www.youtube.com/watch?v=vL8sCi1Bv6E • EmberConf 2017 opening keynote - Tom Dale & Yehuda Katz https://youtu.be/6j080toMEKk?t=46m0s • Play with Glimmer online on Glitch - https://glimmer.glitch.me/ • Ember CLI - https://ember-cli.com/ • Decorators TC39 Proposal - https://tc39.github.io/proposal-decorators/