Your SlideShare is downloading. ×
0
EMBER REUSABLE
COMPONENTS
&
WIDGETS
EmberFest, Germany, 2013
brought by
Sergey N. Bolshchikov
ME
❖ Front-end engineer @ New ProImage, Israel
Allgauer Zeitung – Kempten
Rheinische Post – Dusseldorf
Druckzentrum Rhein ...
YOU
Heard of Web Components?
Used Ember Components?
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...
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 reuse
SOLVED
for 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
knowl...
WEB COMPONENTS in a nutshell
<element name="tick-tock-clock">
<template>
<span id="hh"></span>
<span id="sep">:</span>
<sp...
WEB COMPONENTS
<element name="tick-tock-clock">
<template>
<span id="hh"></span>
<span id="sep">:</span>
<span id="mm"></s...
WEB COMPONENTS
<element name="tick-tock-clock">
<template>
<span id="hh"></span>
<span id="sep">:</span>
<span id="mm"></s...
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
<...
EMBER COMPONENTS FOR NERDS
Ember.Component = Ember.View.extend({
init: function() {
this._super();
set(this, 'context', th...
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=”progres...
1. DEFINE A TEMPLATE
<script type=”text/x-handlebars” id=”components/progress-bar”
>
<div class=”bar”>
<div class=”progres...
HTML
1. DEFINE A TEMPLATE
a name of a template should starts with
components/ and should be dashed
progress bar
consists o...
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”...
4. CUSTOMIZING COMPONENT
App.ProgressBarComponent = Ember.Components.extend({
// you code goes here
});
JS
For component c...
4. CUSTOMIZING COMPONENT
App.ProgressBarComponent = Ember.Components.extend({
style: function () {
return 'width: ' + this...
5. ADD CONTENT
<script type="text/x-handlebars" id="components/progress-bar"
>
<div class="bar">
<div class="progress" {{b...
6. ADD ACTION
App.ProgressBarComponent = Ember.Components.extend({
style: function () {
return 'width: ' + this.get('progr...
7. SEND ACTION
<script type="text/x-handlebars" id="components/progress-bar"
>
<div class="bar" {{action 'proxy'}}>
<div c...
7. SEND ACTION
App.ApplicationController = Ember.Controller.extend({
hello: function () {
console.log('hello EmberFest');
...
7. SEND ACTION
App.ApplicationController = Ember.Controller.extend({
hello: function () {
console.log('hello EmberFest');
...
7. SEND ACTION
App.ApplicationController = Ember.Controller.extend({
hello: function () {
console.log('hello EmberFest');
...
TAKEAWAYS
● define template: ‘components/my-comp’
● use: {{my-comp}}
● parameterize: {{my-comp param=newPar}}
● customize:...
THANKS!
Upcoming SlideShare
Loading in...5
×

Ember Reusable Components and Widgets

8,635

Published on

How to use Ember.Components for building really reusable components and widgets with examples

Published in: Technology, Design
1 Comment
6 Likes
Statistics
Notes
  • Do you realize that you are binding your GENERIC style property to a SPECIFIC App.events data source that IS ALREADY DEFINED in your widget helper??? Do you realize that you really have to prevent yourself to post such things on the Internet because you pollutes it? Fix this or remove your slides.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
8,635
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
40
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "Ember Reusable Components and Widgets"

  1. 1. EMBER REUSABLE COMPONENTS & WIDGETS EmberFest, Germany, 2013 brought by Sergey N. Bolshchikov
  2. 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
  3. 3. YOU Heard of Web Components? Used Ember Components?
  4. 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
  5. 5. WIDGETS?
  6. 6. WIDGETS? jQuery plugins Bootstrap
  7. 7. WIDGETS? It’s all about to change with WEB COMPONENTS
  8. 8. WEB COMPONENTS :: WHY? Global namespace collisions No modules encapsulation No code reuse
  9. 9. WEB COMPONENTS :: WHY? Global namespace collisions No modules encapsulation No code reuse SOLVED for JavaScript
  10. 10. WEB COMPONENTS :: WHY? Global namespace collisions No modules encapsulation No code reuse What about HTML, CSS?
  11. 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. 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>
  13. 13. 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>
  14. 14. 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>
  15. 15. WEB COMPONENTS <html> <body> <tick-tock-clock></tick-tock-clock> </body> </html> Usage:
  16. 16. ember BEFORE rc6 CONTROLLER VIEW TEMPLATE
  17. 17. ember AFTER rc6 EMBER COMPONENT VIEW CONTROLLER
  18. 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. 19. EMBER COMPONENTS FOR NERDS Ember.Component = Ember.View.extend({ init: function() { this._super(); set(this, 'context', this); set(this, 'controller', this); } });
  20. 20. http://jsbin.com/odUZEri/2/ CODE
  21. 21. TASK Create a progress bar widget 23 / 100
  22. 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. 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. 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>
  25. 25. 2. USAGE <script type=”text/x-handlebars” id=”application”> {{progress-bar}} </script> HTML
  26. 26. 3. PASSING PARAMETERS App = Ember.Application.create({ events: 23 }); JS <script type=”text/x-handlebars” id=”application”> {{progress-bar progress=App.events}} </script> HTML
  27. 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.
  28. 28. 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
  29. 29. 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
  30. 30. 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
  31. 31. 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
  32. 32. 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
  33. 33. 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
  34. 34. 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
  35. 35. 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
  36. 36. THANKS!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×