Advertisement
Ember Reusable Components and Widgets
Sep. 4, 2013•0 likes•10,660 views
6 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Technology
Design
How to use Ember.Components for building really reusable components and widgets with examples
Sergey BolshchikovFollow
VP R&D at Approved.comAdvertisement
Ember Reusable Components and Widgets
- 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 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?
- 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
- 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 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); } });
- 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
- 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!
Advertisement