Ember Reusable Components and Widgets

EMBER REUSABLE COMPONENTS

&WIDGETS

EmberFest, Germany, 2013

brought by Sergey N. Bolshchikov

ME

❖ Front-end engineer @ New ProImage, IsraelAllgauer Zeitung – Kempten

Rheinische Post – Dusseldorf

Druckzentrum Rhein Main – Russelsheim

Bold Printing – Sweden

News International - England

The Wall Street Journal - USA

❖ Co-organizer of Ember-IL meetup, Tel-Aviv

YOU

Heard of Web Components?

Used Ember Components?

OUTLINE1. History Future

1.1. Web components

1.2. Ember before rc6

1.3. Ember after rc6

2. Building 2.1. Requirements

2.2. Defining components

2.3. Usage

2.4. Customization

WIDGETS?

WIDGETS?

jQuery plugins

Bootstrap

WIDGETS?

It’s all about to change

with

WEB COMPONENTS

WEB COMPONENTS :: WHY?

Global namespace collisions

No modules encapsulation

No code reuse




No code reuseSOLVED fo

r JavaScript




No code reuse

What about HTML, CSS?

WEB COMPONENTS

Web Components is a

● set of specs which let web developers

● leverage their HTML, CSS and JavaScript

knowledge

● to build widgets

● that can be reused easily and reliably.*

*source: http://www.chromium.org/blink/web-components

WEB COMPONENTS in a nutshell<element name="tick-tock-clock">

<template>

<span id="hh"></span>

<span id="sep">:</span>

<span id="mm"></span>

</template>

<script>

({

tick: function () {

…

}

});

</script>

</element>

WEB COMPONENTS<element name="tick-tock-clock">

<template>

<span id="hh"></span>

<span id="sep">:</span>

<span id="mm"></span>

</template>

<script>

({

tick: function () {

…

}

});

</script>

</element>

WEB COMPONENTS

<html> <body> <tick-tock-clock></tick-tock-clock> </body></html>

Usage:

ember BEFORE rc6

CONTROLLER

VIEW TEMPLATE

ember AFTER rc6

EMBER COMPONENT

VIEW CONTROLLER

EMBER COMPONENTS

● Web Component ember mock● Real re-usable components ● By encapsulating html and javascript● And use

<script type=”text/x-handlebars”>

{{component-name}}

</script>

EMBER COMPONENTS FOR NERDS

Ember.Component = Ember.View.extend({ init: function() { this._super(); set(this, 'context', this); set(this, 'controller', this); }});

http://jsbin.com/odUZEri/2/

CODE



TASK

Create a progress bar widget

23 / 100

1. DEFINE A TEMPLATE

<script type=”text/x-handlebars” id=”components/progress-bar”>

<div class=”bar”><div class=”progress”></div>

</div></script>

HTML




</div></script>

HTML

a name of a template should starts with components/ and should be dashed

HTML


a name of a template should starts with components/ and should be dashed

progress bar consists of outer div as a bar with fixed width, and inside div with various width in % as a progress



</div></script>

2. USAGE

<script type=”text/x-handlebars” id=”application”>{{progress-bar}}

</script>HTML

3. PASSING PARAMETERS

App = Ember.Application.create({ events: 23});

JS

<script type=”text/x-handlebars” id=”application”>{{progress-bar progress=App.events}}

</script>HTML

4. CUSTOMIZING COMPONENT

App.ProgressBarComponent = Ember.Components.extend({ // you code goes here});

JS

For component customization, we inherit from the Ember.Component and name it according to the convention: classified name of the component with the reserved word `Component` at the end.

4. CUSTOMIZING COMPONENT

App.ProgressBarComponent = Ember.Components.extend({ style: function () { return 'width: ' + this.get('progress') + '%'; }.property('App.events'),}); JS

<script type="text/x-handlebars" id="components/progress-bar"> <div class="bar"> <div class="progress" {{bind-attr style=style}}></div> </div></script> HTML

5. ADD CONTENT

<script type="text/x-handlebars" id="components/progress-bar"> <div class="bar"> <div class="progress" {{bind-attr style=style}}></div> <span>{{yield}}</span> </div></script> HTML

<script type="text/x-handlebars" id=”application”> {{#progress-bar progress=App.events}} {{view.progress}} / 100 {{/progress-bar}}</script> HTML

6. ADD ACTION

App.ProgressBarComponent = Ember.Components.extend({ style: function () { return 'width: ' + this.get('progress') + '%'; }.property('App.events'), hello: function () { console.log('hello component action'); }}); JS

<script type="text/x-handlebars" id="components/progress-bar"> <div class="bar" {{action 'hello'}}> <div class="progress" {{bind-attr style=style}}></div> <span>{{yield}}</span> </div></script> HTML

7. SEND ACTION

<script type="text/x-handlebars" id="components/progress-bar"> <div class="bar" {{action 'proxy'}}> <div class="progress" {{bind-attr style=style}}></div> <span>{{yield}}</span> </div></script> HTML

7. SEND ACTION

App.ApplicationController = Ember.Controller.extend({ hello: function () { console.log('hello EmberFest'); }});

App.ProgressBarComponent = Ember.Component.extend({ style: function () { return 'width: ' + this.get('progress') + '%'; }.property('App.events'), proxy: function () { console.log('passing on'); this.sendAction(); }, action: 'hello'});

JS

Hosting controller that has hello method

7. SEND ACTION



JS


Specify action name to be invoked in hosting controller

7. SEND ACTION



JS


Specify action name to be invoked in hosting controller

Invoke the specified action

TAKEAWAYS

● define template: ‘components/my-comp’

● use: {{my-comp}}

● parameterize: {{my-comp param=newPar}}

● customize: App.MyCompComponent

● be careful with {{yield}}

● sendAction method (not in guides/API)

● specify ‘action’ property in

MyCompComponent

THANKS!

Ember Reusable Components and Widgets

Technology

Transcript of Ember Reusable Components and Widgets