Ember Contact Manager

00-motivation.md

Motivation

The motivation behind the contact book is that it aims to have a universally understandable domain that is pretty complex in where it can be expanded. The idea is that this is a launching off point for further tutorials and even guides for addons.

While for the initial tutorial the problem set is simple CRUD for plain fields, a contact book can expand to a much more complex problem and can include:

• Nested Arrays of Data `phoneNumbers: [{countryCode: '1', areaCode: '555', phone: '5555555'}]
• HasOne/HasMany Relations: messages
• Many to many relationships: addresses
• etc

Ideally, building on the ideas of @dgeb's Emberconf talk, this baseline of knowledge can be used as a comparison tool and a way to teach the growing tools in the toolbelt as you add or refactor features in the app.

For instance, in the official guides we could have steps for Ember Data and Nested Routes as separate modules. Ember Redux could implement the features incrementally replacing using Redux. Ember Animated could make a tutorial to animate transitions or other images.

We could even use this base line as a way to invite and compare implementation or features in other frameworks (though this falls far out of the scope of our first steps).

01-server.md

The Server

The server for this application is a small express app.

The code is hosted here: https://github.com/rtablada/contact-book-server

The idea of this server is that it's using cookies to actually store all the data. This not only means we don't have to run an ever growing PG instance and deal with infra storage etc (hey @siva!), but this also means that users don't share any info (saving some potential code of conduct or other mishaps).

The benefit of this is that since it's really just a bunch of state reducers and a single collection... This entire server could be ported to service worker so that offline users can still join in the fun (with just an addon). SInce it's express we also have the benefit of being able to merge it in the user's server directory (either via addon or instruction).

There is a running instance of the server on heroku now: https://ember-contact-book-api.herokuapp.com/people

You can reset the stuff for your collection by going to: https://ember-contact-book-api.herokuapp.com/people/reset

02-client.md

The Client

The idea of this app is to do minimal "Magic" or advanced topics. The goal is to use as much of Ember best practices while being friendly to someone who is just starting JS or who is familiar with web standards. So... With that here's some things that will stand out compared to usual Ember guides.

• Use window.fetch for all network requests
  • No Ember Data (Complex and a barrier to entry)
  • No Ember.$ (for those who have heard jQuery is bad [plus added benefit, the app should work sans jQuery!])
  • No Ember Ajax (See reason above)
• Use flat routing instead of nested routes
  • Nested routes add a layer of complexity and add questions about things like background loading or caching
  • Nested routes also introduce file structure questions and more
• Two way binding using {{input}} component
  • Powerful
  • Understandable
• No custom components

Code: https://github.com/rtablada/ember-contact-book Running app: https://ember-contact-book.surge.sh