Building Ambitious Web Apps with Ember
Upcoming SlideShare
Loading in...5

Building Ambitious Web Apps with Ember



Desert Code Camp 2014.1

Desert Code Camp 2014.1



Total Views
Slideshare-icon Views on SlideShare
Embed Views



1 Embed 24 24



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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Building Ambitious Web Apps with Ember Building Ambitious Web Apps with Ember Presentation Transcript

    • GREG BABIARS Developer atSwiftpage @gbabiars
    • WHAT IS EMBER? Aframework for creatingambitious web applications MVC framework Designed with productivityin mind Inspired byCocoaand Rails Communitydriven
    • WHY USE EMBER TO BUILD WEB APPS? Increases productivityand reduces boilerplate Conventions guide you down the rightpath As your app grows the complexitystays constant Leverages work of communityto solve common problems Embraces the URL
    • MYTHS ABOUT EMBER Documentation sucks Hard to test Notflexible
    • CORE CONCEPTS Observers/Computed Properties Actions &Events Run Loop
    • EMBER.OBJECT All"classes"in Ember inheritfrom Ember.Object. This is the buildingblock for justabouteverythingin Ember and provides: The abilityto create observers and computed properties .getand .setwhich allow us access and trigger properties through bindings.
    • EMBER.OBJECT INSTANTIATION varmyObject=Ember.Object.create({ firstName:'Greg', lastName:'Babiars' }); myObject.set('firstName','Gregory'); myObject.get('firstName');//Gregory
    • EXTENDING AN OBJECT varPerson=Ember.Object.extend({ firstName:'', lastName:'', sayName:function(){ console.log(this.get('firstName')+''+this.get('lastName'); } }); varmyPerson=Person.create({firstName:'John',lastName:'Doe'}); myPerson.sayName();//JohnDoe
    • COMPUTED PROPERTIES Methods thatcan be accessed as properties Allows us to propagate changes through our application We can specifyour dependentproperties thattrigger an update
    • COMPUTED PROPERTIES varPerson=Ember.Object.extend({ firstName:'', lastName:'', name:function(){ returnthis.get('firstName')+''+this.get('lastName'); }.property('firstName','lastName') }); varmyPerson=Person.create({firstName:'John',lastName:'Doe'}); myPerson.get('name');//JohnDoe
    • OBSERVERS Methods thatare called when adependentkeyhas changed
    • OBSERVERS varPerson=Ember.Object.extend({ firstName:'', lastName:'', nameChanged:function(){ console.log('Anamehaschanged'); }.observes('firstName','lastName') }); varmyPerson=Person.create({firstName:'John',lastName:'Doe'}); myPerson.set('firstName','Jane');//Anamehaschangedwillbelogged
    • ACTIONS Triggered in templates using{{action}} or JS using.send() Can be handled in views, controllers or routes Handlers mustbe defined in the actions hash Starts in controller, bubbles up through parentroutes until handler is found
    • EVENTS Low levelDOM events (click, scroll, etc) Handled in views mostly Does notneed to be namespaced
    • RUN LOOP Asetof queues thatbatch and order work Intelligentlyexecutes your application to maximize efficiency and effectiveness Have access to schedule
    • ARCHITECTURE Application Router Routes Controllers Views Components Templates
    • EMBER.APPLICATION Instantiate asingle instance for your application. Can optionally pass in an elementid to use as the rootof your application. Creates the namespace for your application. varApp=Ember.Application.create();
    • EMBER.ROUTER Used to define the route structure of your application. This is done{ this.resource('posts',function(){ this.route('post',{path:':post_id'});//Mapsto/posts/1 }); this.resource('about',{path:'my-about-page'}); });
    • EMBER.ROUTER Can define routes and resources. Resources can have have other routes and resources nested under them while routes cannot. Resources automaticallydefines index, loadingand error routes. Routes are terminal.
    • EMBER.ROUTER Resources willgenerate aroute, controller and template atrun time if one matchingthe namingconvention is notfound. For example, our posts resource willlookup or generate: PostsRoute PostsController posts.handlebars
    • EMBER.ROUTE Route objects give you controlover whathappens within a specific route of your application. Ithas hooks thatallows you to customize the following: Loadingthe modelfor thatroute Settingup the state of the controller Customize whatis rendered Custom logic when entering/existingthe route Handle actions thatbubble up Allows us to transition to other routes
    • EMBER.ROUTE App.PostsRoute=Ember.Route.extend({ //Loadthemodel,ifapromiseitwillnotcontinueuntilitresolves model:function(){'post'); }, //Customizethestateofthecontroller setupController:function(controller,model){ controller.set('model',model); controller.set('isEditing',false); }, //Customizewhatisrendered renderTemplate:function(controller){ this.render('post-list',{controller:controller}); } });
    • EMBER.CONTROLLER Controllers are designed to manage application state. Theyhave severalproperties: One is generated for each route Can depend on other controllers Holds transientstate and logic for aspecific template Typicallyhas amodelthatrepresents an objector array Handles actions triggered from the template
    • EMBER.OBJECTCONTROLLER Example of an objectcontroller App.PostController=Ember.ObjectController.extend({ hasComments:function(){ returnthis.get('model.comments.length')>0; }.property('model.comments.length') actions:{ cancel:function(){ this.get('model').rollback(); } } });
    • EMBER.ARRAYCONTROLLER Example of an arraycontroller App.PostsController=Ember.ArrayController.extend({ hasReadAllPosts:function(){ varunreadreadPosts=this.get('model').filterBy('isRead',false); returnunreadPosts.get('length')===0; }.property('posts.@each.isRead'), actions:{ readPost:function(post){ post.set('isRead',true'); } } });
    • EMBER.VIEW Able to specifythe tagName, css classes Handles DOM events (click, keypress, etc) Can have conditionalhtmlattributes (class, disabled, etc) Has abackingcontroller Notcommonlyused
    • EMBER.VIEW App.PostView=Ember.View.extend({ tagName:'article', classNameBindings:['selected:active'], selected:false, templateName:'post-detail', click:function(){ this.get('controller').doSomething(); } }); {{viewApp.PostViewpostBinding="post"selected="false"}}
    • EMBER.COMPONENT Subclass of Ember.View, designed for reuse Sandboxed, backingcontroller and contextis itself Allproperties mustbe passed in viatemplate Mustexplicitlybind externalactions to actions inside the component Bestplace to wrap 3rd partyplugins, i.e. jQueryplugins
    • EMBER.COMPONENT App.ButtonComponent=Ember.Component.extend({ tagName:'button', classNames:['btn'], click:function(){ this.sendAction(); } }); App.DemoController=Ember.Controller.extend({ buttonText:'ClickMe', actions:{ doSomething:function(){console.log('buttontriggeredthis');} } }); {{buttontext=buttonTextaction="doSomething"}}
    • EMBER.COMPONENT Modalexample App.ModalComponent=Ember.Component.extend({ classNames:['modal','fade'], isOpen:false, didInsertElement:function(){ this.$().modal({ show:false }); }, actions:{ submit:function(){this.sendAction();} }, toggleVisible:function() { this.$().modal(this.get("isOpen")?"show":"hide"); }.observes("isOpen") });
    • EMBER.COMPONENT Modalexample (cont.) Modalcomponenttemplate <divclass="modal-content"> {{yield}} </div> <divclass="modal-footer"> <button{{action"submit"}}>Submit</button> </div>
    • EMBER.COMPONENT Modalexample (cont.) Person controller App.PersonController=Ember.Controller.extend({ formOpen:false, actions:{ toggleForm:function(){ this.toggleProperty('formOpen'); }, save:function(){ this.get('model').save(); } } });
    • EMBER.COMPONENT Modalexample (cont.) Person Template <button{{action"toggleForm"}}>ToggleForm</button> {{#modalaction="save"isOpen=formOpen}} <label>Name:</label> {{}} {{/modal}}
    • TEMPLATES Always have abackingcontext, typicallyacontroller Handlebars -Logicless templates, logic lives in JS Automaticallyupdate properties Can trigger actions
    • TEMPLATES Simple syntax example <div> <h1>{{}}</h1> ##{{}}</h2> </div>
    • TEMPLATES Usingeach and link-to <ul> {{#eachpostinmodel}} <li> {{"post"post}} </li> {{/each}} </ul>
    • TEMPLATES Triggeringan action <button{{action"save"model}}></button>
    • WHAT ABOUT PERSISTENCE? Wellthat's awhole differenttalk!
    • PERSISTENCE LIBRARIES Ember Data Ember Model Ember Persistence Foundation (EPF) ic-ajax