Post on 01-Sep-2014
description
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
WEB COMPONENTS :: WHY?
Global namespace collisions
No modules encapsulation
No code reuseSOLVED fo
r JavaScript
WEB COMPONENTS :: WHY?
Global namespace collisions
No modules encapsulation
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<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); }});
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
1. DEFINE A TEMPLATE
<script type=”text/x-handlebars” id=”components/progress-bar”>
<div class=”bar”><div class=”progress”></div>
</div></script>
HTML
a name of a template should starts with components/ and should be dashed
HTML
1. DEFINE A TEMPLATE
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
<script type=”text/x-handlebars” id=”components/progress-bar”>
<div class=”bar”><div class=”progress”></div>
</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
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
Specify action name to be invoked in hosting controller
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
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!