Ember-NYC Firebase & Ember.js

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=dpaw4oIAEA0&feature=youtu.be&t=48m48s

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

Live App: https://moai.im/

Transcript

1. Ember.js, Firebase + Firebase Hosting 1
2. TEST SLIDE 2
3. Ember.js, Firebase + Firebase Hosting 3
5. Ember.js, Firebase + Firebase Hosting 5
6. Ember.js, Firebase + Firebase Hosting 6
7. How I learned to stop worrying and love the client
8. Brendan OHara Please note: This is not actually me.
9. a software guy
10. a product guy
11. a business guy
12. a married guy
13. a dog guy
14. from Philadelphia
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. You are NOT building the next Bustle
42. Bustle’s NOT building the next Bustle
43. There is a quote from John Locke
44. We have to get off this island John Locke
45. All wealth is the product of labor John Locke
46. What you develop and how you develop it is your labour. Your wealth (material, emotional, spiritual) is a product of that.
47. I will take your stunned silence to mean tacit approval
48. Roommate Agreement complete
50. So what am I here to talk to you about?
51. Ember.js & Firebase 51
52. Innovation & Commoditization 52
54. Hear me out. I need to put my MBA to use somehow during this talk
56. Commoditization: the process where today’s Innovation becomes tomorrows Cost of doing business
57. Let’s see that in a cool diagram
58. New Idea Custom Built Products Service COMMODITIZATION Utility INNOVATION
59. Now is not nap time.
60. Ideas start out ‘bleeding edge’, then ‘custom built’ versions. As adoption increases they become ‘products’ and eventually ‘services’ or even ‘utilities’
61. New Idea Custom Built Products Service COMMODITIZATION Utility INNOVATION
62. Let’s map this to something we know a little better.
63. Real Time Web & Mobile SPA’s Server Side Applications Server APIs COMMODITIZATION Database File Storage INNOVATION
64. Real Time Web & Mobile SPA’s Server Side Applications Server APIs COMMODITIZATION Database File Storage INNOVATION
65. Firebase & Hosting allows Ember.js devs to focus only on where they can provide the most Innovation
66. Innovation & Commoditization 66
67. Ember.js & Firebase 67
68. 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 GitHub Integration (not implemented) Google Hangout Integration (not implemented) 68
70. But first we need to configure Firebase, Firebase Hosting & Filepicker 70
71. Manage your Site
72. NoSQL Style Data Drill downs
73. Editing data is easy
74. You can configure security rules
75. You can configure validations
76. You can manage presence
77. You can mock requests against Firebase
78. Some basic analytics
79. @/pw or third party auth
80. Manage deployments and revert
81. Easy as Pie
82. 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
84. Add our Firebase instance and file picker key to our config env file
85. Setup our content security policy
86. Set the filepicker key in our app.js
87. Set up a default FB adapter Pointing to our instance
88. Setup a default FB serializer
89. Set up the routes we need
90. Setup our Message Room Model
91. Setup our Message Model
92. Setup our User Model
93. Setup our Side Nav
94. Setup our Chat UI
95. Deployment is super easy
97. Live DEMO let’s PAIR
102. https://github.com/brendanoh/pairs https://www.firebase.com/hosting.html https://github.com/miguelcobain/ember-paper Help with Pairs: Tests, Tests and PR’s are wanted
103. Sincere thanks to • Russell Jones • Tim Stirrat • Max Minkoff • And whoever made these gifs
104. One more thought…
106. It’s a trick question.
107. Be Zoidberg.
108. Always be Zoidberg
109. That’s all folks Available for all your Ember.js and Firebase Consulting Needs brendan@OHaras.org Twitter: @BrendanOHara GitHub: @BrendanOH