Ember.js

Transcript

1. EMBER.JS
2. WHAT IS EMBER? • “A Framework for Creating Ambitious Web Applications” • An All-Inclusive JavaScript MVC Framework • 9,000 Lines of Code • 9,200 Lines of Inline Documentation • 2,133 Unit Tests • Currently Release 1.3.1
3. WHY EMBER? • Small choices are made for you, just like Rails • Lets you solve more interesting problems • Manages the complexity of a large application • Stuff you didn't know you needed is already there • Built by people scratching their own itch
4. CODE SAMPLES $('.slide-container').css({ 'background-color': 'rgba(0,50,100,0.25)' }); $('.slide h1').css({ color: 'darkBlue' }); $('.slide li a').css({ 'border-bottom-style': 'double', 'border-bottom-width': '4px', 'border-bottom-color': '#1975E9' });
5. ARRAY COMPREHENSIONS • Automatically polyfilled to older browsers • Available on the Native Array Object • map DOCS reduce DOCS filter DOCS
6. ARRAY COMPREHENSIONS var data; data = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; log('Starting Data', data); log('Multiplied by two', data.map(function(i) { return i * 2; })); log(data.reduce(function(sum, i) { return sum += i; }, 0)); log('Even Values', data.filter(function(i) { return i % 2 === 0; }));
7. ARRAY COMPREHENSIONS 1> "Starting Data", [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 2> "Multiplied by two", [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20] 3> 55 4> "Even Values", [0, 2, 4, 6, 8, 10]
8. ARRAY OF OBJECTS METHODS • Methods for finding objects in an array of objects • findProperty • mapProperty • everyProperty • someProperty • filterProperty
9. ARRAY OF OBJECTS METHODS var data; data = [ { title: 'Derping with the Wind', releaseYear: 1939 }, { title: 'Death of a Derpman', releaseYear: 1951 }, { title: 'Forrest Derp', releaseYear: 1994 }, { title: 'The Derpshank Redemption', releaseYear: 1994 } ]; log(data.findProperty('releaseYear', 1994)); log(data.mapProperty('title')); log(data.everyProperty('releaseYear', 1994)); log(data.someProperty('releaseYear', 1994)); log(data.filterProperty('releaseYear', 1994));
10. ARRAY OF OBJECTS METHODS 1> {title: Forrest Derp, releaseYear: 1994} 2> ["Derping with the Wind", "Death of a Derpman", "Forrest Derp", "The Derpshank Redemption"] 3> false 4> true 5> [{title: Forrest Derp, releaseYear: 1994}, {title: The Derpshank Redemption, releaseYear: 1994}]
11. DATA BINDING • Fancy-speak for Automatically Updating Template • Try it Out, Change the Squid squidView.set('name', 'Dynamic Squid'); squidView.set('phylum', 'Magicalitus'); squidView.set('x', 10); squidView.set('backgroundColor', 'salmon'); squidView.imageSize(80);
12. COMPUTED PROPERTIES • Transform One Variable to Another • Cached Automatically • Chainable
13. COMPUTED PROPERTIES var computedSquid; computedSquid= Ember.Object.create({ name: 'Derpy Squid', tentacleCount: 1, tentacleText: (function() { if (this.get('tentacleCount') === 1) { return 'tentacle'; } else { return 'tentacles'; } }).property('tentacleCount'), description: (function() { var name, tentacleCount; name = this.get('name'); tentacleCount= this.get('tentacleCount'); return "" + name + " with " + tentacleCount+ " " + (this.get('tentacleText')); }).property('name', 'tentacleCount') }); log(computedSquid.get('description')); computedSquid.set('tentacleCount', 8); log(computedSquid.get('description'));
14. COMPUTED PROPERTIES • 1> "Derpy Squid with 1 tentacle" • 2> "Derpy Squid with 8 tentacles"
15. SANE CLASS SYNTAX - EMBER.OBJECT.EXTEND var Squid, blackSquid; Squid = Ember.Object.extend(); Squid.reopenClass({ squidBuilder: function(color, wants) { return this.create({ color: color, wants: wants }); } }); blackSquid = Squid.squidBuilder('green', 'to derp less'); log(blackSquid.get('color')); Log Messages: 1> "green"
16. SANE CLASS SYNTAX - EMBER.OBJECT.CREATE var blackSquid; blackSquid = Ember.Object.create({ color: 'black', wants: 'to be a potato' }); log(blackSquid.get('color')); Log messages: 1> "black"
17. CLASS BINDING • Almost No Code • Works Great with Computed Properties • See Ember.View's API Documentation for more
18. CLASS BINDING var ChildView, firstChildView, secondChildView; ChildView = Ember.View.extend({ classNames: 'example-child-view', classNameBindings: 'isHidden:hidden colorClass'.w(), template: Handlebars.compile('Child View'), isHidden: false, color: 'red', colorClass: (function() { return "color-" + (this.get('color')); }).property('color') }); firstChildView = ChildView.create(); secondChildView = ChildView.create(); containerView.get('childViews').pushObject(firstChildView); containerView.get('childViews').pushObject(secondChildView); CSS: .example-child-view.color-red { color: red; } .example-child-view.color-green { color: green; } .example-child-view.color-blue { color: blue; } .example-child-view.hidden { display: none; }
19. ATTRIBUTE BINDING • Bind Any Attribute to a Variable • Simple Syntax var childView; childView = Ember.View.create({ template: Ember.Handlebars.compile('<img {{bindAttr src="view.src"}}/>'), src: 'img/squid.svg' }); containerView.get('childViews').pushObject(childView);
20. SUPER - VANILLA JAVASCRIPT Let's flex our Google. //class parent function parent(param_1){ console.log("parent " + param_1); this.param = param_1; } parent.prototype.getObjWithParam = function(val) { console.log("value in parent class "+val); console.log("Constructor parameter : "+this.param); }; //class child function child(param_1){ console.log("child " + param_1); this.constructor(param_1); } child.prototype = new parent(); child.prototype.getObjWithParam = function(val) { console.log("value in child class "+val); val = Number(val)+1; parent.prototype.getObjWithParam.call(this, [val]); } //class grandChild function grandChild(param_1){ console.log("grandChild " + param_1); this.constructor(param_1); } grandChild.prototype = new child();
21. SUPER - EMBER var OceanAnimals, Squid; OceanAnimals = Ember.Object.extend({ phylums: [ { animal: 'squid', scientificName: 'Cephalopoda' }, { animal: 'shark', scientificName: 'Chondrichthyes' }, { animal: 'clam', scientificName: 'Bivalvia' } ], phylum: function() { var phylum; phylum = this.phylums.findProperty('animal', this.get('animal')); return "Phylum is " + phylum.scientificName + " "; } }); Squid = OceanAnimals.extend({ animal: 'squid', name: 'Bob', phylum: function() { return "" + (this.get('name')) + " the " + (this.get('animal')) + "'s " + (this._super()); } }); log(Squid.create().phylum());
22. Thanks!!!!!