Luke Melia

I delivered this talk at the Ember.js NYC Meetup on Thursday, May 24th, 2013.

The team at Yapp has been busy building toward Yapp’s vision: to make mobile app creation accessible to anyone and everyone. The early versions of our product have received rave reviews from our users and press including the Wall Street Journal, Good Morning America, the BBC, and many others. We’re just getting started, though — we have a very ambitious vision for where we want to take Yapp.

The other thing we’ve been busy doing is helping to build Ember. As you may know, our team at Yapp has some serious Ember chops. We enjoy contributing our skills and knowledge to the Ember community in the form of code contributions to Ember core, mentoring newer Ember developers, running the successful Ember.js NYC Meetup group, and more.

To date, we’ve done this all in our “spare time,” while building Yapp. Ambitious visions require resources, of course, and when it came time to think about funding the next stage of Yapp’s growth, we decided to explore an alternative to traditional venture funding and be true to our vision and what we love to do – making apps accessible to everyone, ordinary folks and developers alike. Out of this exploration, Yapp Labs was born.

The goal of Yapp Labs is to enrich the Ember community by helping companies to develop internal Ember expertise, resolve tough bugs and performance issues, fill in missing functionality of Ember core, and ultimately ship great apps that make us all proud to be associated with Ember.

To that end, we have begun offering the following services:

Sponsored OSS development

As awesome as Ember already is, there is a very long list of improvements to make the development experience and production experiences as good as they can be.

If shortcomings in a particular aspect of Ember or the Ember ecosystem are a frustration for you, you have three options: you can roll up your sleeves and fix it, wait for someone else to fix it, or engage with professionals like us to get it fixed. Much of Ember’s progress has come from companies generously funding talented developers to devote some full-time focus to particular areas of Ember.

Ember.js training

We have been cultivating Ember talent and building a community of professional Ember developers in New York and Seattle through the meetups in each of those cities. Through Hacker Hours, our liberal co-working invitations, and online venues, our team has now personally mentored hundreds of Ember developers.

We can develop and deliver a customized curriculum to help your team get started or level up their Ember skills. Courses can be customized to half-day, full-day, or multi-day lengths.

Support contracts

When deciding to adopt an open source project, it can help to know that you have a vendor to call if you get stuck. Our support contracts let you know that you’ll have an expert available to you if you get stuck. Support contracts include several hours per month of assistance and troubleshooting from an experienced Ember developer.

Ember app development (mobile, tablet & desktop)

Through our work on Yapp, we have rare expertise in Ember on mobile, where performance is critical, and in implementing cutting-edge user experiences in a wide variety of form factors. Our team members bring strong Ruby on Rails skills to build the performant and easy-to-maintain back-ends that are necessary for an Ember app that works and feels great.

Our favorite way to work is to augment an existing team, so that when it’s time for us to move on, we’ve leveled-up a few more Ember experts in the world and know that your app will be in good hands.

We’re excited about this new offering. If you’re interested in working with us, get in touch: luke _at_ yapp.us.

I delivered this talk at the Ember.js NYC Meetup on Thursday, March 28th, 2013.

This talk was delivered to the Ember.js NYC Meetup on Tuesday, September 18th.

This talk was delivered to the Ember.js NYC Meetup on Wednesday, August 22nd. There is also video is posted at Cloudee.

I’m working on getting a CI server setup for Yapp with Jenkins and the Jenkins github plugin. I ran into a puzzling roadblock that I will now blog for future me’s and you’s running into the issue.

The issue was that I was never seeing the github web hook request hitting my Jenkins server. I verified that I had setup the plugin correctly and disabled authentication for the web hook URL. After a bunch of experimentation and dead ends, my brother-in-law Micah suggested that perhaps Github is aborting when it sees the self-signed SSL certificate that I was using on the CI server. Sure enough, once I replaced the self-signed cert with a commercial cert from a recognized CA, everything started working perfectly.

Delivered today at GORUCO 2012…

Slides are available here.

My colleague Yael Sahar and I had a great time on Tuesday night sharing some of what we’ve learned about designing and building mobile user experiences with web technologies. We had some fun tag-teaming the presentation. Yael offered a designer’s perspective while I offered the developer’s point of view.

A few people have asked for the slide deck, so here it is. Thanks to Mint Digital for letting us present this install of their Pocket Mints series!

Note: This post is a refresh of Yehuda Katz’s post of June 11, 2011, Using SproutCore 2.0 with jQuery UI. Thanks to Yehuda for his review.

Another note: Updated on 8/24/2012 to bring up to date to ember-1.0.pre from 8/3/2012.

No rest for the weary: Updated on 4/14/2013 to bring up to date to ember-1.0.0-rc.2 from 3/29/2013.

One of the goals of Ember.js is to make it trivial to integrate the tools you’re already using.

One way that we do that is to provide hooks to interact with the DOM the way that you have learned to with jQuery.

Quick Refresh: Handlebars Templates

You can take any piece of HTML and attach it to an Ember view. You would typically do this in order to attach event handlers to the view or to define a function that computes how a particular value should be displayed. For instance, let’s say we have some HTML that shows a business card for a person:

<div class="card">
  <p class="name">{{salutation}} {{fullName}}</p>
  <p class="address">{{number}} {{street}}</p>
  <p class="region">{{city}}, {{state}} {{zip}}</p>
</div>

We can wrap this chunk of HTML in an Ember view, which will define the sources of each of the properties used in {{ }}.

<script type="text/x-handlebars">
{{#view App.BusinessCardView}}
  <div class="card">
    <p class="name">{{salutation}} {{fullName}}</p>
    <p class="address">{{streetNumber}} {{street}}</p>
    <p class="region">{{city}}, {{state}} {{zip}}</p>
  </div>
{{/view}}
</script>

Wrapping the HTML snippet in a <script> tag tells Ember to render it using its template engine. Let’s look at the view and controller implementation :

App.BusinessCardView = Ember.View.extend({
  // view will render with it's corresponding controller as the context
});

App.BusinessCardController = Ember.Controller.extend({
  firstName: "Yehuda",
  lastName: "Katz",
  salutation: "Mr.",
  streetNumber: 300,
  street: "Brannan",
  city: "San Francisco",
  state: "CA",
  zip: "94107",
  fullName: function() {
    return this.get('firstName') + ' ' + this.get('lastName');
  }.property('firstName', 'lastName')
});

If we reload the page, we will see a static business card with Yehuda’s information in it. If we were to use the console to update the content by executing App.__container__.lookup('controller:business_card').set(key, value), Ember will automatically update the HTML for you. If you update any property, including firstName or lastName, which are used only as dependencies of fullName, Ember will automatically handle updating the HTML for you.

didInsertElement

You can also define some code to run every time an element is rendered. You can use this hook to wire up any JavaScript library to the element that Ember has created. For instance, let’s say we want to zebra stripe the three lines in our business card once it has been created (note: you probably would not use JS to zebra stripe in real life).

Let’s extend our view:

App.BusinessCardView = Ember.View.extend({  
  didInsertElement: function() {
    this.$("p:even").addClass("even");
  }
});

All Ember views have a $ function, which is the normal jQuery function, scoped to the current element. You can also call this.$() to get back a jQuery object wrapping the element itself.

You can use this hook to do anything you want, allowing you to hook in any library you want. You would use this hook a lot like you’d use a jQuery(document).ready hook, but scoped to the view being created.

Ember also provides a willDestroyElement hook, which you can use to tear things down that you set up when the element was inserted. This is relatively rare, and is mostly used when interfacing with another toolkit that requires a teardown, or to tear down custom Ember observers.

jQuery UI

We can use these hooks to build some basic integration with jQuery UI. Yehuda and Tom Dale wrote a demo (which I’ve adapted for current Ember.js) that shows how to connect Ember bindings to jQuery options at http://lukemelia.github.com/jquery-ui-ember. You can also check out the annotated source code and the GitHub repo.

The most important thing to look at is the JQ.Widget mixin, which can be mixed into view classes to attach jQuery UI options and events to Ember’s binding and event system.

You can get started with Ember.js over at emberjs.com.

Until next time!

I tried to come up with the geekiest sign I could think of for today’s anti-SOPA/PIPA protest in NYC.