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.

wycats's gist: 2728699

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. Flame on! A beginner's guide to Ember.js. Sophisticated JavaScript applications can be found all over the place these days.

Flame on! A beginner's guide to Ember.js

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. Web App Code Lab. Attention!

Web App Code Lab

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: 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.

Useful Ember.js Functions - holy moly

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. 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.

Ember and D3: Building responsive 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.

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.

Make the Most of Your Routes - CodeBrief

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. Playing with Ember.js. Today I played around with Ember.js.

Playing 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. 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.

Ember.js Live Collections « Thomas Reynolds

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.) Naming Conventions. Another common point of confusion for Ember newcomers is naming.

Naming Conventions

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. Understanding Ember.Object. Almost every object in Ember.js is derived from a common object: Ember.Object.

Understanding 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. Unit Testing Ember.js, How I Learned to Stop Worrying and Love the Runloop. 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. SproutCore Guides. Warming up to Ember.js. 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. 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()