start me up - building an mvp with emberjs, firebase and material design
TRANSCRIPT
START ME UP
1
Building an MVP with Ember, Firebase and Material Design
3
This is a 2 Part Presentation
4
PART 1 Laying the groundwork
5
• Who am I? • Definition of an MVP • Who I think you might be • MVP to me: What it is and what it isn't • Why Ember.js: Run faster on solid ground • Why Firebase: Commoditization & Innovation
• Why Material Design: Best of Breed GIANT • Setting up the Project: AddOn and On • Setting up Firebase: Hosting and Database • Setting up Authorization: Can we talk? • Run FirePaper test App and Login • Where do we go from here?
PART 2 Putting it all together
8
• Review where we are at • Managing the Forge: The Happy Vulcan • Seeding Firebase: BYO Data • Person Model - Form’s and Autosave • Animations with LiquidFire
• Dilemma: What problems are we solving? • Build out a basic Chat Client • Sidebar’s and Ember Wormhole • How to fit your MVP needs into FirePaper • How much MVP: When is enough enough?
Brendan OHara
Consultant @ViaCapita
MBA
15 years Dev / 3 years Ember
Involved in many Start-ups
Dog lover
from Philadelphia
Live in New York
Berlin, Germany
Sofia, Bulgaria
Waterford, Ireland
London, England
Port au Prince, Haiti
TL;DR
Enough about me
40 Minutes
260 Slides
Don’t worry…
1 Slide / 6.5 Seconds
Time for Questionsif GEM does that sort of thing…
Here we go…
I want to establish the the basic premise of this presentation
We are talking about building an MVP
What’s an MVP?
Minimum Viable Product
Let’s define that
a version of a new product which allows a team to collect the maximum amount of validated
learning about customers with the least effort.
Minimum Viable
Product
Some people will say a Landing Page is an MVP
Less isn’t inherently better
Minimum Viable
Product
Some people will try to build everything in an MVP
But then you are just building a product.
You wont get any feedback before you
build each feature
Minimum VIABLE
Product
It has to have enough but not too much
Enough value that early adopters will use it
Enough value that early adopters will pay for it
Goldilocks Zone
Goldilocks Zone for Software
So where are we so far
I told you who I am I have defined an MVP
I am making some assumptions about who
you are.
You are a front end developer
You are a Ember.js developer
You are a product manager
You are a UX designer
Or maybe you are an entrepreneur
Those are all good answers
The key is that we all want the same thing
To build applications that people can use and get real tangible
value from
That is a good starting point
But let’s not get ahead of ourselves
We are NOT building the next Facebook
We are NOT building the next Twitter
We are NOT building the next Instagram
Almost no one is…
But even if you ARE…
Or think you are…
You need to start somewhere
You need to start small
… or risk spending all your time on features…
that you wont need for years…
if EVER
There is a quote from John Locke
We have to get off this islandJohn Locke
No man's knowledge …can go beyond his experience.
John Locke
When you are building a business
When you are building an MVP
We have knowledge and we have experience
And hopefully we have a strong vision
But we all believe we are the average user.
We never are.
Ever.
Or even worse…
We think we know more than the average user.
Even if that is true…
So we need to gain experience
That we can only get from REAL users
To increase our knowledge
Of what matters to REAL users
That is what an MVP is for
What about Agile?
Agile
having a quick, resourceful and adaptable character
I Release Earlyand
I Release Often
That is fine for a development process
Best case scenarioThe first release is your
MVP
Agile
having a quick, resourceful and adaptable character
You cannot adapt if no one uses it.
If it isn’t viable then no one will actually use it
So from my POVThat is an MVP
Perhaps you knew all that and if you did hurray!!
Give yourself a cookie
See we are 100 slides in and we haven’t even started on code yet…
But that’s good
There is so much to decide before you write
the first line of code
We will get there
Eventually
Why EMBERJS
114
Convention over configuration
Routes & Ember Data
Mental Models or Community
115
But this is the
GLOBAL EMBER MEETUP
You already know that
That is the why of EMBERJS
Why Ember.js?
Why Firebase?
Commoditization
Innovation
Commoditization: the process where today’s Innovation
becomes tomorrows Cost of doing business
Let’s see that in a cool diagram
New Idea
Custom Built
Products
Service
COMMODITIZATION
Utility
INNOVATION
Ideas start out ‘bleeding edge’, then ‘custom built’ versions. As adoption
increases they become ‘products’ and eventually ‘services’ or even ‘utilities’
New Idea
Custom Built
Products
Service
COMMODITIZATION
Utility
INNOVATION
Let’s map this to something we know a
little better.
Real Time
Web & Mobile SPA’s
Server Side Applications
Server APIs
COMMODITIZATION
Database File Storage
INNOVATION
Real Time
Web & Mobile SPA’s
Server Side Applications
Server APIs
COMMODITIZATION
Database File Storage
INNOVATION
Firebase acts as your API / Database
Firebase Hosting Serves your files
Firebase Hosting Manages Authentication
All this without having to run your
own server
That allows Ember.js devs to focus only on where they can provide the most
Innovation
Tim StirratFirebase guy in charge of Emberfire
Will I regret not having my own server?!?
And neither should you
139
Not an architectural limitation.
It just gives you a starting point.
You can still do anything.
140
Add API services like FileStack or Mailchimp
Add a Node.js Server to run Elastic Search or
whatever you want or need
You still have your imagination
That is the why of FIREBASE
Why Firebase?
Why Material Design?
Sir Isaac Newton
148
If I have seen further, it is by standing on the
shoulders of giants.
Google === Giant
149
150
They have put together a best of breed collection of UX and UI design elements
Material Design
153
Material is the metaphor…yada yada yada
155
MD has gotten the most press on Android but it
looks beautiful on laptops and desktops too
Rico Monteirohttps://www.behance.net/ricomonteiro
https://dribbble.com/Rico_Monteiro
159
You may say:
They look great but I use Foundation or Bootstrap
160
If that is true…
I am so sorry for you.
161
Twitter Bootstrap does have a Material Design library
162
But instead of that I suggest looking at the options in the
next few slides…
163
There must be a 12 step program for users of
Twitter Bootstrap
164
There are many implementations of
Material Design as a framework
Materialize CSSHTML / CSS with Javascript
Ember-MaterializeEmber implementation/wrapper of Materialize CSS
Ember-CLI-Materializehttps://github.com/mike-north/ember-cli-materialize
Material Design LiteHTML / CSS with Javascript
Ember-Material-LiteEmber implementation/wrapper of Material Design Lite
Ember-Material-Litehttps://github.com/mike-north/ember-material-lite
Mike NorthHe is responsible for Ember versions of Materialize and Material Lite along with many other contributors
Angular MaterialThis is however not Ember
Ember-PaperEmber implementation of Angular Material
Miguel AndradeHe is responsible for Ember-Paper
along with many, many other contributors
176
They all have a similar but not identical array of controls.
Your choice may depend on the
project you are working on.
I have used all 3 and now use Ember-Paper for most projects
177
Why?
Because it doesn’t wrap an external library.
More Ember friendly.
Will I regret not writing all the CSS myself?!?
Never regret not writing CSS
180
This does not limit your design
It just gives you a baseline.
High ground to stand on so you can see and DO more
That is the why of MATERIAL DESIGN
Why Material Design?
See we are 180 slides in and we haven’t even started on code yet…
That ends now
Mostly
Project Setup- firepaper -
npm install -g ember-cli
ember new firepaper
Terminal Install
Install ember fireember install ember-paper
I am using some other add-ons…
We won’t need them but…
ember install ember-cli-document-title
ember install ember-cli-file-picker
ember install ember-cli-star-rating
ember install ember-google-charts
ember install ember-i18n
ember install ember-cli-preloader
ember install ember-leaflet
ember install ember-moment
ember install ember-pikaday
ember install ember-pluralize
ember install liquid-fire
ember install ember-sortable
ember install ember-trix-editor
ember install ember-truth-helpers
ember install moment-timezone
I am going to release some shorter videos on youtube
talking about add ons
You should have an empty project with all the
add ons I am using.
Actually just clone my project
git clone https://github.com/brendanoh/firepaper.git
Firebase CLI Tools
Signup & ConfigureFirebase
Firebase DashboardList your active projects / sites —- Add new on Left
App Name and URLfirepaper and firepaper.firebaseIO.com are what I chose
Takes you to App DashboardNormally the Data section will be empty
Hosting with Firebase
Taxi back to the Terminal
Firebase InitYou need to do it before you go on
Ember Build ProdEven with an empty project
Firebase DeployYour site is usually live within 30-60 seconds
Click on the hosting tabYou can review and revert deployments and add your
custom domain name on this page
Use your own domainIncluded with all paid plans - even 5$ Spark
Enter your custom domainClick DONE :-)
Add TXT filePretty easy
Verify OwnershipBy adding some TXT files
They give you DNS SettingsA Records and C Name for setup on your registrar / host
24 Hours later ~You have your app on your custom domain.
One last thing about Firebase setup
Add rewrites sectionThat allows reloading of nested routes
Pudding is sacrosanct…
NoSQL Style Data Drill downsMore about this in PART 2
Editing data is easyMore about this in PART 2
You can configure security rulesMore about this in PART 2
You can configure validationsMore about this in PART 2
You can manage presenceMore about this in PART 2
You can mock requests against Firebase
More about this in PART 2
Some basic analyticsMore about this in PART 2
Create Google App for Social Authentication
Configure Google Authenticationadd URL here
Google Developers Console
New Project
Your new AppNow we need to create OAuth ID
OAuth Consent Info
Create OAuth ID
Grab your dataWe are on the move people
Paste in the Client IDAnd Client Secret
We have only gotten so far but we are doing something significant
Building an MVP with Ember, Firebase and Material Design
245
PART 2 in 3 or 6 weeks
AND BEYOND
246
• Review where we are at • Managing the Forge: The Happy Vulcan • Seeding Firebase: BYO Data • i18n Localization First • Person Model - Form’s and Autosave • Animations with LiquidFire
• Dilemma: What problems are we solving? • Build out a basic Chat Client • Sidebar’s and Ember Wormhole • How to fit your MVP needs into FirePaper • How much MVP: When is enough enough?
Chat ClientExample from CV Resume
Localization FirstExample from CV Resume
Person Form with AutosaveExample from CV Resume
Animated Transitions with LiquidFireExample from CV Resume
Avatars and PersonalizationExample from CV Resume
Cards, Tags and ChipsExample from CV Resume
Progress BarsExample from CV Resume
Google Charts in a way you expectExample from CV Resume
Google Charts in a way you don’t expectExample from CV Resume
Online youtube and my blog
258
Sincere thanks to • Tim Stirrat • Miguel Andrade • Mike North • And whoever made these gifs
Thanks!
Available for Consulting visit https://[email protected] Twitter: @BrendanOHara GitHub: @BrendanOH