Creating Ember.js Libraries – Building a Better Ember.js Ecosystem

View Github Repository Open presentation in a new window

ghempton

See all presentation from ghempton

Creating Ember.js Libraries – Building a Better Ember.js Ecosystem

0 0

ember-libs-preso

On Github ghempton / ember-libs-preso

Creating Ember.js Libraries

Building a Better Ember.js Ecosystem

Created by Gordon L. Hempton / @ghempton

We will encourage you to develop the three great virtues of a programmer: laziness, impatience, and hubris.

Larry Wall, creator of Perl

<3 Libraries

Libraries enable laziness.

What is the first thing you do when implementing a general feature in a RoR app? Google for a gem. The Ember.js ecosystem is not quite there yet. Google search results in jquery plugins.

Existing Ember.js Libraries

Not Good Enough

  • Unconventional
  • Antiquated
  • Not enough
  • No one's fault
Ember.js is maturing. Many are old and antiquated. Library API's not quite solidified. Views instead of components etc. Extends beyong libraries into tutorials etc.

Almost There

Any day now developing apps for the browser is going to feel like big boy programming.

— Trek Glowacki (@trek) February 25, 2014

Example: Components

Prime candidates for libraries.

CODE: (tag: 1-componentize) Open existing project with contact form input. Demonstrate componentizing label + input.

Librarification

How do you give components to other people?

CODE (tag: 2-librarification) Put code into file in header. Test different methods of packaging * in Ember Namespace * in custom namespace * manually put into app's namespace in app.js

The Container

  • Dependency injection
  • Layer of indirection (IoC)

Container Resolution

Ember App Kit

CODE: (tag: 3-containerization) Use initializer with container.register().

Overriding

Container resolution allows for easy customization.

CODE: (tag: 4-customization) Customize the input in the application

Aside: Technique used by Ember-Data and EPF:

App.PostSerializer = DS.RESTSerializer.extend({});

DRY Things Up

Use a helper instead of component.

CODE: (tag: 5-helperization) move `input-for` component to a helper

Think Outside the Box

Get crazy, use a custom type.

CODE: (tag: 6-typification) Create new input container type. Create validators.

Summary

  • Use the container
  • Rely on initializers
  • Use custom types (sparingly)
  • Assume no prototype extensions
  • Libraries need more first-class support

Anti-patterns

  • Views instead of components
  • Not using the container
  • Globals

The (Hopefully Not-Distant) Future

  • Custom Namespaces
  • ES6 Modules Everywhere

THE END

BY Gordon L. Hempton / codebrief.com

PS: We are hiring!

jobs@getoutreach.com