2. ME
❖ Front-end engineer @ New ProImage, Israel
Allgauer 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
4. OUTLINE
1. 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
8. WEB COMPONENTS :: WHY?
Global namespace collisions
No modules encapsulation
No code reuse
9. WEB COMPONENTS :: WHY?
Global namespace collisions
No modules encapsulation
No code reuse
SOLVED
for JavaScript
10. WEB COMPONENTS :: WHY?
Global namespace collisions
No modules encapsulation
No code reuse
What about HTML, CSS?
11. 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
12. 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>
18. 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>
19. EMBER COMPONENTS FOR NERDS
Ember.Component = Ember.View.extend({
init: function() {
this._super();
set(this, 'context', this);
set(this, 'controller', this);
}
});
22. 1. DEFINE A TEMPLATE
<script type=”text/x-handlebars” id=”components/progress-bar”
>
<div class=”bar”>
<div class=”progress”></div>
</div>
</script>
HTML
23. 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
24. 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>
27. 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.