How do I Even Web App

HOW
DO
I
EVEN
WEB
APP
?@lydiaguarino

Hi! Lydia
I’m
@lydiaguarino
lydiaguarino
lguarino
lydia@frontside.io

Architect
Tech Sales Person
Corporate Trainer
Operations Manager
Web Developer
+
+
+
=
+ MakerSquare
+ UT Austin + 2009
Building Crash
2013

The hardest part
about learning
something new is
not the learning.

It’s ﬁguring out
what you need to
learn and in what
order.

I need to collect
information from a
user.

The information I want
to show a user may
change over time or
depends on them
interacting with the
web site.

I want to show the
user information
that other users or
services have
provided.

I need to display
the same
information in
several different
formats.

WHAT
USERS
SEE
STATIC Web pages are about:

WHAT
USERS
DO
DYNAMIC Web applications are about:

?
CRUD
MVC
HTTP
DNS
C
OOP Fra
Conﬁgur
Co
Learn Py
L
Learn N
Respons
Deploym
Sublime
Package
Algorith
Object A
CI
Magnets
Version
Version
Construc

?
CRUD
MVC
HTTP
DNS
CLI
OOP Framework
Back En
Compiler
ConConﬁguration
Concern
Learn Python!
Learn Rub
Learn Node!
AJ
Responsive Grid
Phan
G
RES
Deployment Auth
Sublime Emacs Te
Package Manage
Algorithm
Object Array Sas
Router
CI
Magnets, How do
Version ControlPr
Version Control Br
Constructor Class

?
CRUD
MVC
HTTP
DNS
CLI
OOP Framework
Front End
Back End
Compiler
ConventionConﬁguration
Concern
Learn Python!
Learn Ruby!
Learn Node!
AJAX
Async
JSON
Responsive Grid
Phantom
Git
REST
DRY
Deployment
UI UX
Authentication
Worker
API
VIM
Sublime Emacs Terminal
Package Manager Pattern
Algorithm
Object Array Sass SaaS
Router Code Base
CI
Magnets, How do they work?
Version ControlPrototype
Meth
Fun
Pro
Con
DB
He
UR
YM
Version Control Browser Dire
Constructor Class ES6 Rende

CRUD
MVC
HTTP
DNS
CLI
OOP Framework
Front End
Back End
Compiler
ConventionConﬁguration
Concern
Learn Python!
Learn Ruby!
Learn Node!
AJAX
Async
JSON
Responsive Grid
Phantom
Git
REST
DRY
Deployment
UI UX
Authentication
Worker
API
VIM
Sublime Emacs Terminal
Package Manager Pattern
Algorithm
Object Array Sass SaaS
Router Code Base
CI
Magnets, How do they work?
Version ControlPrototype
Meth
Fun
Pro
Con
DB
He
UR
YM
Version Control Browser Dire
Constructor Class ES6 Rende
AHHHHHHH!

I WILL LEARN
ALL THE THINGS!
JS
jQuery
Git?Ruby
Sass
Wordpress
Bootstrap Command
Line
Binary?!

Wait.
I STILL Don’t know how to build a web app!
JS
jQuery
Git?Ruby
Sass
Wordpress
Bootstrap Command
Line
Binary?!
?

“Programming is awesome if
you like feeling dumb and then
eventually feeling less dumb
but then feeling dumb about
something else pretty soon.”
- @bpoetz

You don’t set out to climb a
mountain by building a
helicopter.
You put one foot in front of
the other and you follow
the trail.

You also don’t climb a
mountain by memorizing
the guide book.
You consult the book along
the way.

Don’t wait to start
building your app for
fear of not knowing
enough.

MOST OF
THE APPS
ON THE
INTERNET
Crap. I don’t
actually know
how computers
work.

C
R
U
D
reate
ead
pdate
estroy

What’s on your mind?
PostCancel
To: Friends
Update Status
Create - Add a New Record

Lydia Guarino
Read - Review a Record
3hrs . Austin, TX
LOOK AT THIS PICTURE OF MY ADORABLE CAT!!!!

Update - Edit a Record
LOOK AT THIS PICTURE
OF MY ADORABLE CAT
TERRIFYING POSSUM
UpdateCancel
To: Friends
Update Status

Destroy - Delete a Record
LOOK AT THIS PICTURE
OF MY ADORABLE CAT
TERRIFYING POSSUM
UpdateCancel
To: Friends
Update Status

Deployed CRUD
Web Application
HTML
CSS
Object Oriented
Programming
JavaScript
MVC Pattern
CRUD Application
Our mountain is three dimensional.
There are many paths to the top.
This is one well-traveled path.
Frameworks
Persistence and Deployment

Kit
of
SupportingParts
Structure
&

IT’S JUST SOME CODE IN A FILE STRUCTURE

This ﬁle structure
makes things MUCH
easier.

Everything in your
application has a
designated place, so it is
easy to ﬁnd what you are
looking for.

The framework code
relies on this ﬁle
structure to do a bunch
of work on
your behalf.

•Package Managers: To manage dependencies
•Directory Structure: To define a place to put your application code
•File Naming Conventions: To help match up related code that works together
•Build System: To compile your application into something the browser can
understand
•JS Linter (jsHint): To help you find and fix syntax and typo errors
•Live reload: To automatically refresh your browser as you edit your code
•Module system: To allow you to only import what you need for the immediate
task and help make your code testable
•ES6 Transpilation: To help future proof your code to work with next
generation syntax
•Generators: To minimize writing repetitive boilerplate for common
components
•Test Framework: To help you make sure your application is working they way
you expect it to and that it continues to work as you edit and refactor it.
•Addon System: To allow you to share or import code that other people have
already built.
“Embering on the Shoulders of Giants” - Jeffrey Biles

Frameworks
skip the
Samework
- Me

And let you focus on the
parts that are unique to
your application

And frameworks use
CONVENTIONS

CONVENTIONS are KEY,
when you are ﬁrst getting
started.

They’re like guard rails.
If you follow the
conventions, you won’t get
lost or stray too far from
the trail.

It also means you can
LOOK UP how to do
something correctly…
Because the “right
way” is deﬁned and
documented.

And when LOTS of
people use these
conventions,
there are LOTS of
people that can help you
ﬁnd your way.

OOP
OBJECT
Oriented
Programming

A programming paradigm based on
the concept of "objects", which are
data structures that contain data, in the
form of ﬁelds, often known as
attributes; and code, in the form of
procedures, often known as methods.
OO programs are comprised of objects
that interact with one another.
Thanks Wikipedia.

Id Size Color Fabric
1 6 Green Cotton
2 8 Yellow Polyester
3 12 Purple Satin
4 4 Red Tweed
Dresses

Dress Class
Dress Instance Dress Instance
Dress Instance Dress Instance

class Dress {
size: 8,
fabric: ‘cotton’,
color: ‘white’,
embellishments: [],
isWashable: computed(‘fabric’),
isDirty: false,
wear: function(){},
clean: function(){},
fold: function(){},
hang: function(){}
}
new Dress({
size: 6,
color: ‘green’,
embellishments: [‘collar’]
})
new Dress({
fabric: ‘polyester’,
color: ‘yellow’,
embellishments: [‘buttons’]
})
new Dress({
size: 12,
fabric: ‘satin’,
color: ‘purple’,
embellishments: [‘stars’]
})
new Dress({
size: 4,
fabric: ‘tweed’,
color: ‘red’,
embellishments: [‘rufﬂes’]
})

Object Oriented
Programming helps us
reason about our application
as though it was composed
of physical parts.

MVC
Model
View
ControllerController

A software
architecture pattern
for building dynamic
user interfaces.

MVC divides your
user-facing application
code into three
interconnected parts:

Models
Views
Controllers
Data
Display
Logistics
Handlers
=

MVC allows us to
separate internal representations
of information from the way that
information is presented to or
accepted from a user.

View
AKA “Template” or “Layout”

The styled HTML
web page the user interacts with
+
placeholders for the
dynamic content
View

MADLIBS Views
person and person went down to the local place to
buy a adjective, adjective thing.
Adverb, they found number adjective things in their
place.
Dynamic placeholder Static context

What do we ﬁll
the dynamic
placeholders
with?

{
id: 1,
size: 6,
fabric: ‘cotton’,
color: ‘green’,
embellishments: [‘collar’],
isWashable: true,
isDirty: false,
wear: function(){},
clean: function(){},
fold: function(){},
hang: function(){}
}
A model is an object or a collection of objects.
*We are in Javascript Framework Land now. Other types of frameworks implement this concept differently.

{
id: 1,
madLibber: “Jeremy”,
personOne: “Ryan Gosling”,
personTwo: “Oprah”,
place: “bedroom”,
adjectiveOne: “ﬂat”,
adjectiveTwo: “orange”,
thing: “thing”,
adverb: “readily”,
number: 4,
adjectiveThree: “boxed”,
things: “slices”
}
*We are in Javascript Framework Land now. Other Frameworks may implement this concept differently.

JEREMY’S MADLIB Views
Ryan Gosling and Oprah went down to the local
bedroom to buy a ﬂat, orange thing.
Readily, they found 4 boxed slices in their place.

Controller
The communication and
translation layer between the
model and the view is called the

View
Save
Cancel
Model
Controller

Save
ROUTE: colors / new
View
Cancel
HEXCODE
COLOR NAME
Back to Palette
CREATE

ROUTE: colors / index
View Add a Color
READ

teasdsdfsdf
#FF3333
Update
ROUTE: colors / 3
View
Cancel
Bright Red
Delete Color
Back to Palette
UPDATE

Save
ROUTE: colors / new
View
Cancel
HEXCODE
COLOR NAME
Back to Palette
CREATE
Inputs
Buttons
Preview
Link

{{#link-to ‘colors.index’}}
Back to Palette
{{/link-to}}
{{input type=‘text’ value=hexcode placeholder=“HEXCODE”}}
Back to Palette
<button {{action ‘create’}}>Save</button>
HEXCODE
Save
<div class=“preview” style=“background-color: {{hexcode}}”>
</div>

{
hexcode: null,
name: null
}
Model

{
hexcode: null,
name: null
}
Model
We haven’t created a new color yet,
so we don’t have a model.
This view is used to CREATE models.

Controller actions: {
create: function(){
//make a new color
},
cancel: function(){
//clear the form
},
}
{
hexcode: null,
name: null,
actions: {}
}

ROUTE: colors / index
View Add a Color
READ
A list of all the colors
with previews
Link
Link to
individual
color

{{#link-to ‘colors.new’}}Add a Color{{/link-to}}
{{#each model as |color|}}
{{#link-to ‘colors.edit’ color}}
<div class=“color” style={{magic}}></div>
{{/link-to}}
{{/each}}
Add a Color

[{color}, {color}, {color}, {color}]
Model

{
id: 3,
hexcode: #FF333,
name: “Bright Red”
}
Model

Controller
actions: {
update: function(){},
cancel: function(){},
destroy: function(){}
}

Templating and Markup:
Styling:
Primary Language:
Framework:
Data Adapter Library:
Data Persistence Addon:
Package Managers:
Version Control:
Deployment:
Our Toolkit
HTML5 + HTMLbars
CSS3
Javascript
Ember JS + Ember CLI
Ember Data
Ember Fire + Firebase
NPM + Bower
Git
PageFrontHQ

Lydia, what is the
WIFI Password?!

If you get stuck,
ask a neighbor
what they tried or
work together.

I’ve done this
MANY times
and I still get stuck
or need to look
stuff up.

I might even get
stuck trying to
help you get
UN-stuck.

You are NOT
expected to know
how ANY this
works yet.

You might not
even have the
right words to ask
a question.

We will all work
together to ﬁnd
the right words.

But ﬁrst, some Yak
Shaving.
*Yak Shaving: All the work we
have to do before we can
actually start working. Yes, this IS
a Ren and Stimpy reference.

We need to install
a few things:
1. npm package manager
2. ember command line interface
3. bower package manager

Open your terminal
and type:
npm
Press Enter
Making sure you have node installed
Step 1 of 6

If you get something
like:
command not found: npm
You need to download and install a
recent version of Node from nodejs.org
Step 1 of 6

nodejs.org
If you got something
that starts with this:
Usage: npm <command>
Congrats! You’re ready to install
Ember CLI.
Step 1 of 6

ember-cli.com
Type this in your terminal to
globally install Ember CLI:
Installing Ember CLI
Step 2 of 6
npm install -g ember-cli
Grab a drink or high ﬁve a friend.
This may take a moment.

bower.io
Type this in your terminal to
globally install Bower:
Installing the Bower Package Manager
Step 3 of 6
npm install -g bower
Half Yak

Just a little more
shaving and this
Yak will be looking
pretty dapper.

Let’s set up our
application!
4. Create a new Ember CLI Project
5. Install and configure EmberFire
6. Install Ember Inspector

We’re going to put our
ember app directory
(folder) in Desktop for now.
Let’s go there now:
cd ~/Desktop
ember-cli.com/user-guideCreating a new App
Step 4 of 6

We’re ready to use Ember
CLI to create our
Color Palette app:
ember new color-palette
Step 4 of 6

installing app
create .bowerrc
create .editorconfig
create .ember-cli
create .jshintrc
create .travis.yml
create .watchmanconfig
create README.md
create app/app.js
create app/components/.gitkeep
create app/controllers/.gitkeep
create app/helpers/.gitkeep
create app/index.html
create app/models/.gitkeep
create app/router.js
create app/routes/.gitkeep
create app/styles/app.css
create app/templates/
create app/templates/components/
create bower.json
create config/environment.js
create ember-cli-build.js
create .gitignore
create package.json
create public/crossdomain.xml
create public/robots.txt
create testem.json
create tests/.jshintrc
create tests/helpers/resolver.js
create tests/helpers/start-app.js
create tests/index.html
create tests/test-helper.js
create tests/unit/.gitkeep
create vendor/.gitkeep
Installed packages for tooling via npm.
Installed browser packages via Bower.
Successfully initialized git.
THIS is why we use frameworks.
Step 4 of 6
Creating a new App ember new color-palette

create app/router.js
create app/routes/
create app/models/
create app/templates/
create app/controllers/
create app/styles/
And Look! Some familiar faces!
Step 4 of 6
Creating a new App ember new color-palette

Now we need to hop from
Desktop into our new project:
cd color-palette
Step 4 of 6

Our app needs a place to
SAVE or PERSIST the data
RECORDS we create.
We are going to use a
Platform for this called
Firebase.
https://www.ﬁrebase.com/docs/

We are using Firebase
INSTEAD of building a
customized backend API.

We’re all going to be
using the SAME database
that I previously set up.

For your next project, you
will need to set up your
own Firebase account or
try your hand at writing
some back end code.

Step 5 of 6
Setting up Ember Fire
To set up Firebase, make sure
you are in your color-palette
directory and then run:
ember install emberfire
https://github.com/ﬁrebase/emberﬁre

We will need to edit the
following file:
color-palette/config/environment.js
Open this file in a text editor.
Step 5 of 6
Setting up Ember Fire https://github.com/firebase/emberfire

Change line 8 from this:
firebase: 'https://YOUR-FIREBASE-NAME.firebaseio.com/',
to this:
Step 5 of 6
Setting up Ember Fire https://github.com/firebase/emberfire
firebase: 'https://color-palette.firebaseio.com/',
Save and Close the file.

In Chrome,Google:
Ember Inspector Chrome
Installing Chrome Ember
Inspector Plugin:
Step 6 of 6
Last Yak

Let’s ﬁre this baby up!
ember server
Open Chrome and go to:
localhost:4200

EVERYONE
CELEBRATE!
Welcome to Ember
localhost:4200

THIS YAK HAS BEEN
SHAVED IN 6 STEPS!
Time for a break.

We need some routes:
ember generate route ‘colors’
ember g route ‘colors/index’
ember g route ‘colors/new’
ember g route ‘colors/edit’
We will automatically get templates when we
generate our routes

We need to deﬁne what a color
model looks like:
ember g model ‘color’

We will need controllers for each of
our routes:
ember g controller ‘colors/index’
ember g controller ‘colors/new’
ember g controller ‘colors/edit’

Our application
code lives in the
directory called
‘app’.
Now that we have
generated all of the
entities we need for
our application, our
directory tree should
look like this:
Controllers
Model
Routes
CSS
Views

We’re ready to write
some code!
Open the ‘app’ directory
in your text editor.

Let’s start by adding some CSS to style the views we’ll be
working with:
We’ll copy/paste the css from:
https://github.com/
lydiaguarino/color-palette/
commits/master

How do I Even Web App

More Related Content

Viewers also liked (16)

Similar to How do I Even Web App (20)

Recently uploaded (20)

How do I Even Web App