Download - Ember Reusable Components and Widgets
![Page 1: Ember Reusable Components and Widgets](https://reader036.vdocument.in/reader036/viewer/2022081400/540558108d7f729e768b4bfa/html5/thumbnails/1.jpg)
EMBER REUSABLE COMPONENTS
&WIDGETS
EmberFest, Germany, 2013
brought by Sergey N. Bolshchikov
![Page 2: Ember Reusable Components and Widgets](https://reader036.vdocument.in/reader036/viewer/2022081400/540558108d7f729e768b4bfa/html5/thumbnails/2.jpg)
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
![Page 3: Ember Reusable Components and Widgets](https://reader036.vdocument.in/reader036/viewer/2022081400/540558108d7f729e768b4bfa/html5/thumbnails/3.jpg)
YOU
Heard of Web Components?
Used Ember Components?
![Page 4: Ember Reusable Components and Widgets](https://reader036.vdocument.in/reader036/viewer/2022081400/540558108d7f729e768b4bfa/html5/thumbnails/4.jpg)
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
![Page 5: Ember Reusable Components and Widgets](https://reader036.vdocument.in/reader036/viewer/2022081400/540558108d7f729e768b4bfa/html5/thumbnails/5.jpg)
WIDGETS?
![Page 6: Ember Reusable Components and Widgets](https://reader036.vdocument.in/reader036/viewer/2022081400/540558108d7f729e768b4bfa/html5/thumbnails/6.jpg)
WIDGETS?
jQuery plugins
Bootstrap
![Page 7: Ember Reusable Components and Widgets](https://reader036.vdocument.in/reader036/viewer/2022081400/540558108d7f729e768b4bfa/html5/thumbnails/7.jpg)
WIDGETS?
It’s all about to change
with
WEB COMPONENTS
![Page 8: Ember Reusable Components and Widgets](https://reader036.vdocument.in/reader036/viewer/2022081400/540558108d7f729e768b4bfa/html5/thumbnails/8.jpg)
WEB COMPONENTS :: WHY?
Global namespace collisions
No modules encapsulation
No code reuse
![Page 9: Ember Reusable Components and Widgets](https://reader036.vdocument.in/reader036/viewer/2022081400/540558108d7f729e768b4bfa/html5/thumbnails/9.jpg)
WEB COMPONENTS :: WHY?
Global namespace collisions
No modules encapsulation
No code reuseSOLVED fo
r JavaScript
![Page 10: Ember Reusable Components and Widgets](https://reader036.vdocument.in/reader036/viewer/2022081400/540558108d7f729e768b4bfa/html5/thumbnails/10.jpg)
WEB COMPONENTS :: WHY?
Global namespace collisions
No modules encapsulation
No code reuse
What about HTML, CSS?
![Page 11: Ember Reusable Components and Widgets](https://reader036.vdocument.in/reader036/viewer/2022081400/540558108d7f729e768b4bfa/html5/thumbnails/11.jpg)
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
![Page 12: Ember Reusable Components and Widgets](https://reader036.vdocument.in/reader036/viewer/2022081400/540558108d7f729e768b4bfa/html5/thumbnails/12.jpg)
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>
![Page 13: Ember Reusable Components and Widgets](https://reader036.vdocument.in/reader036/viewer/2022081400/540558108d7f729e768b4bfa/html5/thumbnails/13.jpg)
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>
![Page 14: Ember Reusable Components and Widgets](https://reader036.vdocument.in/reader036/viewer/2022081400/540558108d7f729e768b4bfa/html5/thumbnails/14.jpg)
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>
![Page 15: Ember Reusable Components and Widgets](https://reader036.vdocument.in/reader036/viewer/2022081400/540558108d7f729e768b4bfa/html5/thumbnails/15.jpg)
WEB COMPONENTS
<html> <body> <tick-tock-clock></tick-tock-clock> </body></html>
Usage:
![Page 16: Ember Reusable Components and Widgets](https://reader036.vdocument.in/reader036/viewer/2022081400/540558108d7f729e768b4bfa/html5/thumbnails/16.jpg)
ember BEFORE rc6
CONTROLLER
VIEW TEMPLATE
![Page 17: Ember Reusable Components and Widgets](https://reader036.vdocument.in/reader036/viewer/2022081400/540558108d7f729e768b4bfa/html5/thumbnails/17.jpg)
ember AFTER rc6
EMBER COMPONENT
VIEW CONTROLLER
![Page 18: Ember Reusable Components and Widgets](https://reader036.vdocument.in/reader036/viewer/2022081400/540558108d7f729e768b4bfa/html5/thumbnails/18.jpg)
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>
![Page 19: Ember Reusable Components and Widgets](https://reader036.vdocument.in/reader036/viewer/2022081400/540558108d7f729e768b4bfa/html5/thumbnails/19.jpg)
EMBER COMPONENTS FOR NERDS
Ember.Component = Ember.View.extend({ init: function() { this._super(); set(this, 'context', this); set(this, 'controller', this); }});
![Page 21: Ember Reusable Components and Widgets](https://reader036.vdocument.in/reader036/viewer/2022081400/540558108d7f729e768b4bfa/html5/thumbnails/21.jpg)
TASK
Create a progress bar widget
23 / 100
![Page 22: Ember Reusable Components and Widgets](https://reader036.vdocument.in/reader036/viewer/2022081400/540558108d7f729e768b4bfa/html5/thumbnails/22.jpg)
1. DEFINE A TEMPLATE
<script type=”text/x-handlebars” id=”components/progress-bar”>
<div class=”bar”><div class=”progress”></div>
</div></script>
HTML
![Page 23: Ember Reusable Components and Widgets](https://reader036.vdocument.in/reader036/viewer/2022081400/540558108d7f729e768b4bfa/html5/thumbnails/23.jpg)
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
![Page 24: Ember Reusable Components and Widgets](https://reader036.vdocument.in/reader036/viewer/2022081400/540558108d7f729e768b4bfa/html5/thumbnails/24.jpg)
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>
![Page 25: Ember Reusable Components and Widgets](https://reader036.vdocument.in/reader036/viewer/2022081400/540558108d7f729e768b4bfa/html5/thumbnails/25.jpg)
2. USAGE
<script type=”text/x-handlebars” id=”application”>{{progress-bar}}
</script>HTML
![Page 26: Ember Reusable Components and Widgets](https://reader036.vdocument.in/reader036/viewer/2022081400/540558108d7f729e768b4bfa/html5/thumbnails/26.jpg)
3. PASSING PARAMETERS
App = Ember.Application.create({ events: 23});
JS
<script type=”text/x-handlebars” id=”application”>{{progress-bar progress=App.events}}
</script>HTML
![Page 27: Ember Reusable Components and Widgets](https://reader036.vdocument.in/reader036/viewer/2022081400/540558108d7f729e768b4bfa/html5/thumbnails/27.jpg)
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.
![Page 28: Ember Reusable Components and Widgets](https://reader036.vdocument.in/reader036/viewer/2022081400/540558108d7f729e768b4bfa/html5/thumbnails/28.jpg)
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
![Page 29: Ember Reusable Components and Widgets](https://reader036.vdocument.in/reader036/viewer/2022081400/540558108d7f729e768b4bfa/html5/thumbnails/29.jpg)
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
![Page 30: Ember Reusable Components and Widgets](https://reader036.vdocument.in/reader036/viewer/2022081400/540558108d7f729e768b4bfa/html5/thumbnails/30.jpg)
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
![Page 31: Ember Reusable Components and Widgets](https://reader036.vdocument.in/reader036/viewer/2022081400/540558108d7f729e768b4bfa/html5/thumbnails/31.jpg)
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
![Page 32: Ember Reusable Components and Widgets](https://reader036.vdocument.in/reader036/viewer/2022081400/540558108d7f729e768b4bfa/html5/thumbnails/32.jpg)
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
![Page 33: Ember Reusable Components and Widgets](https://reader036.vdocument.in/reader036/viewer/2022081400/540558108d7f729e768b4bfa/html5/thumbnails/33.jpg)
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
![Page 34: Ember Reusable Components and Widgets](https://reader036.vdocument.in/reader036/viewer/2022081400/540558108d7f729e768b4bfa/html5/thumbnails/34.jpg)
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
![Page 35: Ember Reusable Components and Widgets](https://reader036.vdocument.in/reader036/viewer/2022081400/540558108d7f729e768b4bfa/html5/thumbnails/35.jpg)
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
![Page 36: Ember Reusable Components and Widgets](https://reader036.vdocument.in/reader036/viewer/2022081400/540558108d7f729e768b4bfa/html5/thumbnails/36.jpg)
THANKS!