Start Me Up - Building an MVP with EmberJS, Firebase and Material Design

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?
• Deﬁnition 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 ﬁt your MVP needs into FirePaper
• How much MVP: When is enough enough?

Time for Questions
if GEM does that sort of thing…

I want to establish
the the basic premise
of this presentation

We are talking about
building an MVP

a version of a new product
which allows a team to
collect the maximum
amount of validated
learning about customers
with the least effort.

Some people will say a
Landing Page is an MVP

Less isn’t inherently better

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

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

I told you who I am
I have deﬁned an MVP

I am making some
assumptions about who
you are.

Or maybe you are an
entrepreneur

The key is that we all
want the same thing

To build applications
that people can use
and get real tangible
value from

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

… or risk spending all
your time on features…

that you wont
need for years…

There is a quote
from John Locke

We have to get off this island
John 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 think we know more
than the average user.

That we can only get from
REAL users

Of what matters to

REAL users

Agile

having a quick, resourceful

and adaptable character

I Release Early

and 
I Release Often

That is ﬁne for a
development process

Best case scenario

The ﬁrst release is your 
MVP

You cannot adapt if no
one uses it.

If it isn’t viable then no
one will actually use it

So from my POV

That is an MVP

Perhaps you knew all that and
if you did hurray!!

See we are 100 slides in
and we haven’t even
started on code yet…

There is so much to
decide before you write
the ﬁrst line of code

114
Convention over conﬁguration
Routes & Ember Data
Mental Models or Community

115
But this is the
GLOBAL EMBER MEETUP
You already know that

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’

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

Firebase acts as
your API / Database

Firebase Hosting
Serves your ﬁles

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 Stirrat
Firebase guy in charge of Emberﬁre

Will I regret not having
my own server?!?

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

148
If I have seen further,

it is by standing on the
shoulders of giants.

150
They have put together a
best of breed collection of
UX and UI design elements

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 Monteiro
https://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 CSS
HTML / CSS with Javascript

Ember-Materialize
Ember implementation/wrapper of Materialize CSS

Ember-CLI-Materialize
https://github.com/mike-north/ember-cli-materialize

Material Design Lite
HTML / CSS with Javascript

Ember-Material-Lite
Ember implementation/wrapper of Material Design Lite

Ember-Material-Lite
https://github.com/mike-north/ember-material-lite

Mike North
He is responsible for Ember versions of Materialize
and Material Lite along with many other contributors

Angular Material
This is however not Ember

Ember-Paper
Ember implementation of Angular Material

Ember-Paper
https://github.com/miguelcobain/ember-paper

Miguel Andrade
He 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?!?

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

See we are 180 slides in
and we haven’t even
started on code yet…

npm install -g ember-cli
ember new ﬁrepaper

Install ember ﬁre
ember install ember-paper

I am using some
other add-ons…

ember install ember-cli-document-title
ember install ember-cli-ﬁle-picker
ember install ember-cli-star-rating
ember install ember-google-charts
ember install ember-i18n

ember install ember-cli-preloader
ember install ember-leaﬂet
ember install ember-moment
ember install ember-pikaday
ember install ember-pluralize

ember install liquid-ﬁre
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/ﬁrepaper.git

ﬁrebase.com
Click Sign Up with Google

Firebase Dashboard
List your active projects / sites —- Add new on Left

App Name and URL
firepaper and firepaper.firebaseIO.com are what I chose

Takes you to App Dashboard
Normally the Data section will be empty

Firebase Init
You need to do it before you go on

Ember Build Prod
Even with an empty project

Firebase Deploy
Your site is usually live within 30-60 seconds

Click on the hosting tab
You can review and revert deployments and add your
custom domain name on this page

Use your own domain
Included with all paid plans - even 5$ Spark

Enter your custom domain
Click DONE :-)

Add DNS Record
This is 101domains.com

Verify Ownership
By adding some TXT ﬁles

They give you DNS Settings
A 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 section
That allows reloading of nested routes

A few more
ﬁrebase.com

features

NoSQL Style Data Drill downs
More about this in PART 2

Editing data is easy

You can conﬁgure security rules

You can conﬁgure validations

You can manage presence

You can mock requests against Firebase

Some basic analytics

Create Google
App for Social
Authentication

Conﬁgure Google Authentication
add URL here

Your new App
Now we need to create OAuth ID

Grab your data
We are on the move people

Paste in the Client ID
And Client Secret

DEMO

https://ﬁre-paper.com

We have only gotten so
far but we are doing
something signiﬁcant

https://ﬁre-paper.com

https://github.com/brendanoh/ﬁrepaper

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

Chat Client
Example from CV Resume

Localization First

Person Form with Autosave

Animated Transitions with LiquidFire

Avatars and Personalization

Cards, Tags and Chips

Progress Bars

Google Charts in a way you expect

Google Charts in a way you don’t expect

Online
youtube and my blog
258

Signup at
https://viacapita.com/blog
Email with all updates
259

Sincere thanks to
• Tim Stirrat
• Miguel Andrade
• Mike North
• And whoever made these gifs

Thanks!
Available for Consulting visit https://viacapita.com
brendan@OHaras.org Twitter: @BrendanOHara GitHub: @BrendanOH

Start Me Up - Building an MVP with EmberJS, Firebase and Material Design

More Related Content

Start Me Up - Building an MVP with EmberJS, Firebase and Material Design