Building mobile applications with Ember

Ember CLI is the new kid on the block. This powerful command line tool makes it easy to build ambitious web applications. In this talk, I will show how we can use Ember CLI to build our own iOS application with Cordova.

Transcript

1. Building mobile applications with Ember @arnaudbenard
3. “I agree with myself” - Me Created by Cards Against Humanity from the Noun Project
4. Working with people is hard
5. “  If we have data, let’s look at data. If all we have are opinions, let’s go with mine. — Jim Barksdale, former Netscape CEO
6. Group decisions can lead to bike shed discussions Naming conventions Coding style Design patterns
7. Focus on building
8. https://twitter.com/kangax/status/495941326509445121
9. Assets compilation Deployment process Manage environments Testing } ember-cli
10. Convention over configuration
11. Convention over configuration $ ember g route posts $ ember g route posts/favorites $ ember g route post $ ember g controller posts $ ember g controller posts/favorites $ ember g controller post
12. The best conventions are the ones you don’t have to learn
13. In Ember 2.0, Ember CLI and ES6 modules will become first-class parts of the Ember experience. […] You should begin moving your app to Ember CLI as soon as possible. “   https://github.com/emberjs/rfcs/pull/15
14. What is a mobile application made of? • Navigation bar • Tab bar • Animations • Loading states • Error handling
15. Navigation bar {{nav-bar title="Messenger"}} <div class="bar bar-header bar-light"> <h1 class="title">{{title}}</h1> </div>
16. Navigation bar {{#nav-bar title="Messenger"}} {{btn-compose action="composeMessage"}} {{/nav-bar}} <div class="bar bar-header bar-light"> <h1 class="title">{{title}}</h1> {{yield}} </div>
17. Tab bar <div class="tabs tabs-icon-top"> {{#link-to 'index' class="tab-item"}} <i class="icon ion-ios7-clock"></i> Recent {{/link-to}} {{#link-to 'groups' class="tab-item"}} <i class="icon ion-ios7-people"></i> Groups {{/link-to}} {{#link-to 'people' class="tab-item"}} <i class="icon ion-ios7-folder"></i> People {{/link-to}} {{#link-to 'settings' class="tab-item"}} <i class="icon ion-ios7-gear-outline"></i> Settings {{/link-to}} </div>
18. Tab bar {{#link-to 'settings' class="tab-item" currentWhen="settings"}} <i class="icon ion-ios7-gear-outline"></i> Settings {{/link-to}}
19. Plan your animations ahead!
20. Loading states -Routes -Actions - Buttons with loading states (component) loading foo.bar.loading foo.loading
21. Error handling -Routes -Actions - Notifications (service) error foo.bar.error foo.error
22. Demo time! https://github.com/arnaudbenard/facebook-messenger
23. Thank you!