The team

A challenge

Contacts to NGA

How?

Learn by doing

Lean development

Lean cycle

Build a prototype

How to measure?

Raptor & Marionette

How to navigate?

ContentWrapper vs Selfcontained

How to split in views?

Review the Contacts App code

Tech. debt

Remove dependencies and improve the code!

Contacts namespace issue

Namespace is a problem. Every part of the code is tied to contacts.js

<script type='text/javascript'>
// This code is a snippet from contacts.js
var setCurrent = function c_setCurrent(contact) {
  currentContact = contact;
  if ('mozNfc' in navigator && contacts.NFC) {
    contacts.NFC.startListening(contact);
  }

  if (contacts.Details) {
    contacts.Details.setContact(contact);
  }
};
</script>

Facebook code is everywhere

It's in JS and DOM :S

<script type='text/javascript'>
if (fb.isFbContact(contact)) {
  if (!fb.isFbLinked(contact)) {
    var fbContact = new fb.Contact(contact);
    //...
  }
  // ...
  var getPhones = function getPhones(contact) {
    var selector = '#view-contact-form form div.phone-template:not(.facebook)';
    var phones = dom.querySelectorAll(selector);
    // ...
  };
}

// And is in the HTML as well! :S
</script>

Proposal:

Separate by activities

First cycle:

Separate #new and #open activities.

Second cycle:

Integrate #new and #open within the app

Next steps:

Do the same with #update and #import

How are we working?

2 weeks sprint

[META] Bug 1168886

https://wiki.mozilla.org/Gaia/New-Architecture-Program/Contacts

Everything must be an URL

"Pin the web" will work for free! :)

Pin the web