■ An Ember app IS a jQuery app! ■ To be specific, this talk is about moving code written in jQuery plugin-style to Ember 3 Hold it right there... Friday, May 24, 13
■ Started with a Rails app that had traditional jQuery event handlers and plugin use ■ Ended with a clean Ember app 4 Recent Experience Friday, May 24, 13
“ Refactoring is a disciplined technique for restructuring an existing body of code, altering its internal structure without changing its external behavior. 8 What is this “refactoring” you speak of? Friday, May 24, 13
“ Its heart is a series of small behavior preserving transformations. Each transformation (called a 'refactoring') does little, but a sequence of transformations can produce a significant restructuring. Since each refactoring is small, it's less likely to go wrong. 9 What is this “refactoring” you speak of? Friday, May 24, 13
“ The system is also kept fully working after each small refactoring, reducing the chances that a system can get seriously broken during the restructuring. 10 What is this “refactoring” you speak of? -Martin Fowler Friday, May 24, 13
App.CropView
=
Em.View.extend({
templateName:
"crop",
didInsertElement:
function(){
this.$("#crop").jcrop({...});
} }); Step 3: Call the jQuery plugin from didInsertElement 14 And remove the original call from your document Friday, May 24, 13
App.CropView
=
Em.View.extend({
templateName:
"crop",
didInsertElement:
function(){
this.$("#crop").jcrop({...});
} }); Step 3: Call the jQuery plugin from didInsertElement 14 And remove the original call from your document
elementId:
"crop",
Friday, May 24, 13
App.CropView
=
Em.View.extend({
templateName:
"crop",
didInsertElement:
function(){
this.$("#crop").jcrop({...});
} }); Step 3: Call the jQuery plugin from didInsertElement 14 And remove the original call from your document
elementId:
"crop",
this.$().jcrop({...});
Friday, May 24, 13
App.CropView
=
Em.View.extend({
templateName:
"crop",
didInsertElement:
function(){
this.$("#crop").jcrop({...});
} }); Step 3: Call the jQuery plugin from didInsertElement 14 And remove the original call from your document
elementId:
"crop",
this.$().jcrop({...});
and the outermost div from your template Friday, May 24, 13
Sidebar: What’s a “closure”? 18 function(){
var
a
=
{};
function
b(){
...
}; }(); a
//=>
undefined b
//=>
undefined What I mean more precisely is an IIFE: Immediately-Invoked Function Expression Most build tools you’ll use with Ember enclose each file in an IIFE Friday, May 24, 13
Step 9: Move non-DOM properties and methods to the controller 24 App.CropView
=
Em.View.extend({
funkyResize:
function(w)
{
var
newWidth
=
w
+
this.get("controller.baseWidth");
this.$().width(newWidth);
} }); Friday, May 24, 13
1. Create an Ember View 2. Add HTML to the template 3. Call the jQuery plugin from didInsertElement 4. Convert jQuery event handlers to view event handlers or action helpers 5. Move library functions into the view file’s closure 6. Refactor library functions to methods on the view and extract instance variables 7. Replace global $() calls with this.$() calls 8. Extract properties 9. Move non-DOM properties and methods to the controller 25 Recap: 9 Rewarding Steps Friday, May 24, 13
Q & A Follow me @lukemelia Some examples appear courtesy of my company. Yapp Labs offers Ember.js consulting and training. Creative Commons photo credits: http://www.flickr.com/photos/headovmetal/3338989094, http://www.flickr.com/photos/hatm/5704687902 27 Friday, May 24, 13