background preloader

Tutorials/Guides/Articles/Etc | Ember.js

Facebook Twitter

Ember.js Meetup (21/2/12): Tom Dale. Trek by trek. Ember.js Lunch Talk at Carbon Five. Wycats's gist: 2728699. Recently, we've been working on extracting Ember conventions from applications we're working on into the framework. Our goal is to make it clearer how the parts of an Ember application work together, and how to organize and bootstrap your objects. Routing is an important part of web applications. It allows your users to share the URL they see in their browser, and have the same things appear when their friends click on the link.

The Ember.js ecosystem has several great solutions for routing. But, since it is such an important part of most web applications, we've decided to build it right into the framework. If you have already modeled your application state using Ember.StateManager, there are a few changes you'll need to make to enable routing. In order to make state managers more robust, we are now enforcing some new rules about how they are architected. Here are the new rules: You tell Ember.js what to put in the URL by adding a route property to your states. Dynamic Segments Nested Views. Flame on! A beginner's guide to Ember.js. Sophisticated JavaScript applications can be found all over the place these days. As these applications become more and more complex, it's no longer acceptable to have a long chain of jQuery callback statements, or even distinct functions called at various points through your application. This has led to JavaScript developers learning what traditional software programmers have known for decades: organization and efficiency are important and can make the difference between an application that performs great and one that doesn't.

One of the most commonly used architecture patterns to achieve this organization and efficiency is known as Model View Controller (or MVC). This pattern encourages developers to separate distinct parts of their application into pieces that are more manageable. In this tutorial you'll become more familiar with the basics of Ember.js as you build a working Twitter timeline viewer. Ember has only one dependency—jQuery. Application Models Views Handlebars Controllers <! Web App Code Lab. Attention! Be sure to check the errata documention for important updates and a list of currently broken features. Introduction This codelab covers the techniques and design fundamentals required to create modern, 'lick-able' web applications. The exercises look at the fundamentals of building web applications: Using an MVC frameworkMaking cross-domain requests and handling JSON dataCreating user interfaces & experiences that are action oriented and app-likeEnabling offline experiences Prerequisites Before you begin, make sure you've downloaded the required codelab files from that you have a working development environment, and a working web server.

How To Proceed Each exercise has it's own folder (for example /exercise1/). Exercise 1 - Boiler plate For our application, we've chosen to use HTML5Boilerplate as our starting point. Exercise 2 - Setup Model, Controller, and View Step 1: Creating the Ember object Exercise 2.1 (js/app.js) Let's try it out. Useful Ember.js Functions - holy moly. While developing stuff with Ember.js I stumbled upon some very nice and handy functions which are built in. This post lists some of them and describes in a short what they are used for. Hey! This article references a pre-release version of Ember.js. Now that Ember.js has reached a 1.0 API the code samples below are no longer correct and the expressed opinions may no longer be accurate.

Ember The following functions are defined in packages/ember-runtime/lib/core.js and packages/ember-metal/lib/utils.js respectively. none Returns true if argument is null or undefined. empty This utility function constrains the rules on Ember.none by returning false for empty string and empty arrays. isArray Use this to check if a value is an array. MakeArray If you need a given object to be an array you can use this function.

TypeOf Get the type of the passed argument. compare This function compares two objects of possibly different types. IsEqual Checks if the passed two arguments are logically equal. Copy inspect w() Ember and D3: Building responsive analytics. April 04, 2012 A few months back, as we sat down to think about how Square was going to transform the over-the-counter experience with Register 1.0, we also realized that we wanted to augment our users' understanding of their own businesses with more analytics. We wanted our merchants to have even more visibility into their Square transactions, and be able to surface actionable metrics on the performance of their businesses through serendipitous discovery and interaction.

In other words, we were determined to build the best user experience for our merchants, with a responsive and intuitive interface, on top of giant piles of payments data. In a web browser. Here's how we did it. Focus on Real User Questions Asking users is a really good way of invalidating preexisting perceptions, and we started off by translating what we thought our users wanted into what they showed us they needed. "When should I be open? "" Ember.js and D3.js - D3mber? Turbo-charged Performance you can put a face to.

Writing an Ember.js App From Scratch

An Extremely Gentle Introduction to Ember.js. Getting Started With EmberJS. Learn Ember.js. Beginnining Ember.js on Rails. The architecture of Ember.js apps. Anatomy of a Complex Ember.js App. Make the Most of Your Routes - CodeBrief. At the core of any web application is a mapping between urls and application logic; a mapping between what is in the browser's address bar and what should be displayed on the screen. Rails has routes.rb, Django has URLconf, Backbone.js has controllersBackbone.Router, and Sammy.js has Sammy.js. We also aren't talking about arbitrary URLs here. Modern well-designed applications use clean, semantic, and probably RESTful urls. These are urls which are human-readable, have a natural hierarchy to them, and intuitively reflect the underlying data to which they relate. So, what's the problem? Problem: Routers Are Designed for Stateless Servers Historically, url routing systems are designed for web servers which maintain little to no state about the client which is making the request1.

A url is requested. By not maintaining state, the server is able to drastically reduce its memory-footprint. Here there are four different actions: index, show, edit, and comments, with corresponding url patterns. Playing with Ember.js. Today I played around with Ember.js. I wanted to make my own Pomodoro timer, and I figured it would be a good way to try it out. One of the reasons I'm really excited about Ember is that its goal is to cut down on boilerplate code especially in regards to keeping views up to date.

I'd like to mention that I have no idea whether or not I really did this right. Ember's docs are in a state of flux as the framework has yet to hit 1.0 and so much is changing. First up, Ember's HTML <script type="text/x-handlebars" data-template-name='timer'><div class='timeleft'>{{timeLeft}}</div><a href="#" class='btn btn-large btn-primary' {{action "pomodoro"}} >Pomodoro</a><a href="#" class='btn btn-large' {{action "shortBreak"}} >Short Break</a><a href="#" class='btn btn-large' {{action "longBreak"}} >Long Break</a><a href="#" class='btn btn-large btn-danger' {{action "stop"}} >Stop</a></script><h1>Pomodoro</h1><div id='timer'></div> All in all, there is not a lot of boilerplate code here, so nice job guys!

Ember.js Live Collections « Thomas Reynolds. Ember.js Live Collections If you're writing a client-side application, there are two common tasks you can expect to perform. First, modern web applications are expected to show updated information as quickly as possible without a full page reload. (Think about Twitter or Facebook: as you're reading the updates, newer updates continue to arrive at the top of the page.) Second, you'll be sending the current user's updates to everyone else's streams. You can probably imagine how often you'll need to implement these patterns: mail clients, chat rooms; anything that updates, really.

Over the weekend, my friends at Bocoup posted an article called Backbone.js Live Collections which discussed how to use Backbone.js1 to poll Twitter for new tweets and update a list of those tweets on the page. Back? Assuming that Bocoup simply chose Backbone.js for familiarity's sake, I glibly summed up the article as "In other words, use Ember.js :-p" and ruffled more feathers than I intended.

App Template View. Naming Conventions | The Emberist. Another common point of confusion for Ember newcomers is naming. Not only does proper naming help keep your application code cleaner, it also has an effect on your application's operation. Once you get the hang of it, it's quite simple so read on to learn more. When to Capitalize The Ember rules for capitalization are pretty straight-forward. If it's a class or a namespace, it's uppercase; if it's an instance, it's lowercase. Namespaces are the only objects that should be declared as globals, i.e. classes and instances should always be declared on a namespace.

The first reason for this naming convention is that it makes it quite simple to figure out what kind of object you're dealing with. Secondly, and more important, because of this convention, Ember can make some assumptions about your code and behave more intelligently as a result. Capitalization in Bindings Lets work with the following code: So what do we do if we actually want to get the local property? ConstBinding: 'this.Constant' Understanding Ember.Object :: Cerebris. Almost every object in Ember.js is derived from a common object: Ember.Object. This object is used as the basis for views, controllers, models, and even the application itself. This simple architectural decision is responsible for much of the consistency across Ember. Because every object has been derived from the same core object, they all share some core capabilities. Every Ember object can observe the properties of other objects, bind their properties to the properties of other objects, specify and update computed properties, and much more.

As you'll see in this post, it's easy to get started with Ember.Object, but also easy to overlook some of its capabilities. Creating objects It's almost as simple to create a new Ember.Object as a plain Javascript object: The object literal that is optionally passed to Ember.Object.create() defines properties directly on the instantiated object, not unlike the vanilla object. Extending classes Now, let's instantiate a person with create(): Unit Testing Ember.js, How I Learned to Stop Worrying and Love the Runloop | The Software Simpleton.

I am currently using Ember.js for a side project and I have ran into some interesting and unexpected behaviour while driving the development of the front end code test first. I am using the excellent javascript bdd library Jasmine as my test runner and I must also issue a warning that the code examples listed below are in coffeescript. I have also been using the excellent guard-jasmine gem to automatically run my tests when any files are modified which really is a great experience.

I had vaguely heard of the Ember runloop in a few of the articles that I had read but I had not had to deal with it directly until I started getting more and more unexpected behaviour in my tests. This is best illustrated with some code. Below is a simple Ember controller/object that creates a view in its constructor: The above code creates an Ember model object in the constructor of the controller on line 5 which is then bound to the view on line 9.

Below is my original failing test that I wrote: Conclusion. SproutCore Guides. Warming up to Ember.js :: Cerebris. Posted by Dan Gebhardt on Jan 20, 2012 As client-side frameworks go, Ember.js already has quite a history. It originated within the Sproutcore project as a lean and modern successor to Sproutcore 1.x, the heavyweight and component-laden framework that Apple used to build MobileMe and then iCloud. When it became apparent that Sproutcore 2 would never be a complete replacement for Sproutcore 1.x, it was renamed Amber.js as a clean break for the two projects. Shortly thereafter it was renamed again to Ember.js to avoid confusion with the Amber Smalltalk project. I’m just glad this round of musical names didn’t end on SproutcoreCore.js. We’re not here for a history lesson… Ok, ok.

Objects can observe and update each other. In other words, Ember keeps the components of your application in sync. Does this lead to slow performance? There’s no doubt that Ember’s synchronization code has a performance cost. Sounds good, but is it Production Ready TM ? What about features X, Y and Z? Eight Ember.js Gotchas With Workarounds - CodeBrief. Having used Ember.js for a few months now, I have compiled a list of gotchas that I have encountered. Many of these will change/be fixed as Ember matures, but until then I hope these will serve as pre-emptive time savers for other developers. 1. Computed Properties and .cacheable() This one has actually been fixed in the lastest build of Ember, but I'm putting it here since it is still present in the latest 0.9.5 release. Consider the following object: It turns out that if you try and bind to the tags property of the above object, you will encounter an infinite run loop.

Even though the infinite loop issue has been fixed, making computed properties cacheable is generally a good idea and will be more the rule than the exception. 2. firstObject and lastObject These properties of enumerables are not bindable. 3. It will often be the case that you want an element inside a handlebars template to have both a static css class name as well as class name that is the result of binding to a property.