Ember-Philly April Ember & Firebase 2.0

Links below description: Moai is a full featured Slack/Hip Chat clone to show how to integrate Ember.js and Firebase with EmberFire to create an entire app without a dedicated server. It uses Torii and Torii-fire (social logins), Ember-paper (Material Design), Firebase Hosting (CDN) and Filepicker.io (Image hosting). It is working but has some bugs and is very much a work in progress. Tests and PRs are very much appreciated.

Youtube: https://www.youtube.com/watch?v=msS-3zqKKUI

Github: https://github.com/brendanoh/moai

Live App: https://moai.im/

Transcript

1. Ember.js, Firebase + Firebase Hosting 1
2. Ember.js, Firebase + Filepicker.io 2
4. Ember.js, Firebase + Firebase Hosting 4
5. Ember.js, Firebase + Firebase Hosting 5
6. How I learned to stop worrying and love the client
7. Brendan OHara Please note: This is not actually me.
8. a software guy
9. a Start-up guy
10. a business guy
11. a married guy
12. a dog guy
13. from Philadelphia
14. Live in New York City
15. Berlin, Germany
16. Sofia, Bulgaria
17. Waterford, Ireland
18. London, England
19. Port au Prince, Haiti
20. TL;DR
21. Enough about me
22. 30 Minutes
23. 100 Slides
25. We will likely finish early
26. Time for Questions Hip Hop Hurray?
27. Let’s get started
28. But before we start..
29. I need some form of tacit consent regarding the basic premise of this presentation
31. Roommate Agreement (of a sort)
32. Here are some things that we all need to agree to:
33. You are a front end developer
34. You are a Ember.js developer
35. You are a product manager
36. Or you are a UX designer
37. You like building applications that people can use and get real tangible value from
38. You are NOT building the next Facebook
39. You are NOT building the next Twitter
40. You are NOT building the next Instagram
41. Almost no one is…
42. There is a quote from John Locke
43. We have to get off this island John Locke
44. All wealth is the product of labor John Locke
45. What you develop and how you develop it is your labour. Your wealth (material, emotional, spiritual) is a product of that.
46. I will take your stunned silence to mean tacit approval
47. Roommate Agreement complete
49. So what am I here to talk to you about?
50. Ember.js & Firebase 50
51. Innovation & Commoditization 51
52. Now is not nap time.
53. Hear me out. I need to put my MBA to use somehow during this talk
55. Commoditization: the process where today’s Innovation becomes tomorrows Cost of doing business
56. Let’s see that in a cool diagram
57. New Idea Custom Built Products Service COMMODITIZATION Utility INNOVATION
58. Ideas start out ‘bleeding edge’, then ‘custom built’ versions. As adoption increases they become ‘products’ and eventually ‘services’ or even ‘utilities’
59. New Idea Custom Built Products Service COMMODITIZATION Utility INNOVATION
60. Let’s map this to something we know a little better.
61. Real Time Web & Mobile SPA’s Server Side Applications Server APIs COMMODITIZATION Database File Storage INNOVATION
62. Real Time Web & Mobile SPA’s Server Side Applications Server APIs COMMODITIZATION Database File Storage INNOVATION
63. Firebase & Hosting allows Ember.js devs to focus only on where they can provide the most Innovation
64. Innovation & Commoditization 64
65. Ember.js & Firebase 65
66. We are setting a new site: • Style with Material Design w/ Ember-Paper • Login and User management w/Firebase Hosting • Full feature chat rooms w/Firebase • Custom Avatars w/Filepicker.io • Social Logins with Torii and Torii-Fire 66
68. But first we need to signup for and configure Firebase, Filepicker, Twitter, Facebook, Github & Google 68
69. Manage your Site
70. NoSQL Style Data Drill downs
71. Editing data is easy
72. You can configure security rules
73. You can configure validations
74. You can manage presence
75. You can mock requests against Firebase
76. Some basic analytics
77. @/pw or third party auth
78. Manage deployments and revert
79. Easy as Pie
80. Let’s get ready to Ember • $ npm install -g ember-cli • $ ember install:addon emberfire • $ ember install:addon ember-paper • $ npm install --save-dev broccoli-sass • bower install filepicker
82. Add our Firebase instance and file picker key to our config env file
83. Setup our content security policy
84. Set the filepicker key in our app.js
85. Set up a default FB adapter Pointing to our instance
86. Setup a default FB serializer
87. Set up the routes we need
88. Setup our Message Room Model
89. Setup our Message Model
90. Setup our User Model
91. Setup our Side Nav
92. Setup our Chat UI
93. Deployment is super easy
95. Live DEMO https://moai.im
100. https://github.com/moai-im/moai https://www.firebase.com/hosting.html https://github.com/miguelcobain/ember-paper Help with Moai: Tests and PR’s are wanted
101. Sincere thanks to • Russell Jones • Tim Stirrat • Max Minkoff • And whoever made these gifs
102. One more thought…
104. It’s a trick question.
105. Be Zoidberg.
106. Always be Zoidberg
107. That’s all folks Available for all your Ember.js and Firebase Consulting Needs brendan@OHaras.org Twitter: @BrendanOHara GitHub: @BrendanOH