thanks for coming. _ My name is Patrick Holloway, and I am here to give you a brief introduction to the Ember js framework. And we’re going to start by talking briefly about HTML, _ and in doing so _ framing Ember with a little bit of context.
to build a website for my photography business. This a good example of the kind of stuff HTML was originally designed to do. Present some text, and media, with links to navigate to different content with a bit of interactivity. This isn’t too far off from something you would have done with hypercard back in the day. The capabilities of a static document falls miles away from the type of applications we are seeing today.
Why do we need tools like Ember? What problems does it solve for us? There have been huge changes to internet technology and infrastructure in the last decade or so. So let’s really quickly review a few of these.
got waaay faster. (This is what I got when I did a google image search for “way faster”) Not only did it get faster, but we really got some great tools and common practices to leverage. As a community developers are really starting to embrace javascript. And we’d like to make it a first class citizen. So this enables us to do more on the clien tside.
can share, store, and retrieve our files virtually everywhere we go, get content everywhere. Users want to have interfaces with this layer of the web in their browsers. Imagine things like google docs. There is a demand and ability to have these sorts of tools on the web.
5, 13 This happened too! The proliferation of web enabled web devices has transformed our landscape. Suddenly we need to consider slower connections, smaller screens, and make quality mobile user experiences. ->>> But what concerns us here is mostly that, users are getting accustomed to the speed and slickness of native apps that are able leverage the web, and there is no reason we shouldn’t have the same experience in the browser.
Calendar: iCal - Google Calendar • Games: Diablo3 - Banana Bread • Video player: DVD player - Netflix • Mail client: Outlook - Gmail • Office suite: Microsoft Office - Google Drive Wednesday, June 5, 13 So there is has been an obvious shift where applications we found on the desktop _ are suddenly migrating to the web. Having these apps available in the browser broadens the audience _ and allows for sharing and connectivity.
stateful apps Wednesday, June 5, 13 So finally, Ember. _ Ember is a client-side MVC application framework. It was built to create _ long-runnning __ rich__ stateful apps. We’ll get into what this means, _ but a good example of something that might lend itself to being built with ember _ might be a single-page app like Gmail or a social networking site. ----------->Let’s take a quick look at the history of Ember.
Cocoa/iOS development architecture • Ruby on Rails Wednesday, June 5, 13 So when we look at the DNA of Ember, we see that it reaches into other frameworks and borrows liberally. Apple built the MobileMe platform using Sproutcore, which later became ember. Sproutcore member Yehuda Katz is a major contributor to jQuery and Ruby on Rails, which has heavily influenced the concepts we see in Ember. Yehuda Katz - Tom Dale - Charles Jolley were all sproutcore members and worked on apple MobileMe
OO design pattern that is helpful for separating concerns in your code base. The models layer encapsulate business logic and persistence, the view handles what the user is presented with, and controllers mediate transactions between the two. Here is a good concrete example of where this might be helpful. If your app had a event stream and stream events in your model layer, and you wanted to change the algorithm that decided the ranking of the stream events. If you practice MVC properly, you could modify code in the controller without changing the models or presentation of them in the view layer. BREAK FOR CODE DEMO BREAK FOR CODE DEMO BREAK FOR CODE DEMO BREAK FOR CODE DEMO
console.log(“Yum!”); } }); Wednesday, June 5, 13 Within the ember namespace objects typically are not raw javascript objects. We use Ember.Object. This Ember.Object.extend is the typical pattern for handling inheritance. Ember Data is in major flux, unreliable, unstable. The first official release was 2 days ago and there has been a major effort lately to stabilize it.
:email, :password, :email_confirmation, :password_confirmation, :username has_many :friends has_one :bio # VALIDATIONS validates_presence_of :zip, on: :create validates :zip, numericality: true, length: {maximum: 5, minimum: 5} validates :username, :presence => true, :uniqueness => true, :length => {:within => 6..20}, :format => { :with => /\A[A-Za-z0-9]+\z/, :message => "Letters and numbers only." }, on: :create validates :agreed_terms validates :email, :presence => true, :uniqueness => true, :email => true validates :password, :presence => true, :length => {:within => 6..30}, :format => { :with => /^(?=.*[a-zA-Z])(?=.*[0-9]).{6,}$/ }, on: :create Wednesday, June 5, 13 With rails we are able to abstract persistence of our relational data (whether it be SQL or NoSQL) and map it to Object Oriented style models using Ruby’s ORM ActiveRecord. Here we can see the we can have a User model with a few properties and relationships to other models, and some basic validations.
email: DS.attr(‘string’), bio: DS.belongsTo(‘App.Bio’), friends: DS.hasMany(‘App.Friends’) }); Ruby on Rails class User < ActiveRecord::Base include SoundcloudAccount include TimezoneConcerns include Messaging attr_accessible :full_address, :avatar, :reset_token, :agreed_terms, :zip, :email, :password, :email_confirmation, :password_confirmation, :username has_many :friends has_one :bio end Wednesday, June 5, 13 With ember-data we have the same type of ORM(object relational mapping) capabilities on the client side. Ember Data makes Object Oriented programming more robust on the client AND with conventions and imperative code. We know from Ruby on Rails that this makes for better code & coder happiness.
a controller so that it represents a particular model. • Change the template on screen, or place a new template into an existing outlet. When the current URL changes, the newly active route handlers may do one or more of the following: (Straight from ember guides) Wednesday, June 5, 13 fetch your data from the backend, whatever it might be In Ember URLs maintain state, specify what models and templates are being displayed, and what get’s thrown out of memory.
class="article"> <h1>{{title}}</h1> <h2>{{lead}}</h2> <p>{{author}}</p> <p>{{body}}</p> </div> <div class="article"> {{#each comment}} {{comment}} {{/each}} </div> <div> Wednesday, June 5, 13 Handlebars is a powerful templating language that when paired with ember, provides us with a rich tool for generating dynamic data in reusable components of markup.
= Ember.View.extend({ click: function(evt) { this.get('controller').send( 'turnItUp', 11); } }); Wednesday, June 5, 13 Handlebars/Emblem are so powerful, you will rarely need to use a view. When you need sophisticated handling of user events & When you want to create a re-usable component. Can have a wrapper template/layout and a main template. A view is represented by a single DOM element on the page BREAK OUT LIVE DEMO
collections ★ Underscore.js for manipulating your objects and collections ★ Light-weight, smaller footprint, versatile ★ Doesn’t re-invent the javascript or HTML Wednesday, June 5, 13 template agnostic • “AJAX-ified views”- json/no need to reload browser/desktop app feel Utilize URLs using the Backbone.Router • how is this router different than ember? • Add functionality to an existing server-side view • pick and choose bits of existing pages to improve with complex evented ajax with view and templates <-- good for brownfield apps
1. <!doctype html> 2. <html ng-app> 3. <head> 4. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/ angular.min.js"></script> 5. </head> 6. <body> 7. <div> 8. <label>Name:</label> 9. <input type="text" ng-model="yourName" placeholder="Enter a name here"> 10. <hr> 11. <h1>Hello {{yourName}}!</h1> 12. </div> 13. </body> 14.</html> Wednesday, June 5, 13 Angular adds behavior to HTML, in a way directly extending the capabilities of HTML. It shares some similar concepts and capabilities with Ember, like data binding and event handling. ??? I really am not familiar enough to give a fair comparison.
patrickjholloway
marcy731
konifar
sullis
nekowen
takehilo
bkuhlmann
ryukobayashi
pyama86
mackey0225
quiver
izumin5210
rmw
addyosmani
lynnandtonic
moore
tmm1
keathley
cassininazir
philhawksworth
edds
searls
jponch
