Ember Reusable Components and Widgets
Upcoming SlideShare
Loading in...5
×
 

Ember Reusable Components and Widgets

on

  • 6,244 views

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

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

Statistics

Views

Total Views
6,244
Views on SlideShare
6,241
Embed Views
3

Actions

Likes
5
Downloads
26
Comments
1

2 Embeds 3

http://www.linkedin.com 2
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Ember Reusable Components and Widgets Ember Reusable Components and Widgets Presentation Transcript

  • 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!