how do i even web app

HOWDOI

EVEN

WEBAPP

? @lydiaguarino

Hi! LydiaI’m

@lydiaguarino

lydiaguarino

lguarino

[email protected]

mailto:[email protected]

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 figuring out what you need to learn and in what

order.

I need a web page!

HTMLCSS

JS

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.

WHATUSERS

SEE

STATIC Web pages are about:

WHATUSERS

DO

DYNAMIC Web applications are about:

WEB APP

How do I web app?

?

CRUD

MVCHTTP

DNS

CLIOOP Framework

ConfigurationConcern

Learn Python!Learn Ruby!

Learn Node!Responsive Grid

Deployment

SublimePackage ManagerAlgorithm

Object Array

CI

Magnets, How do they work?

Version Control

Version ControlConstructor

?

CRUD

MVCHTTP

DNS

CLIOOP Framework

Back EndCompiler

ConventionConfigurationConcern


Learn Node!

AJAX

Async

Responsive GridPhantom

Git

RESTDeployment Authentication

Sublime Emacs TerminalPackage ManagerAlgorithm

Object Array Sass

Router Code Base

CI


Version Control Prototype

Version Control BrowserConstructor Class

?CRUD

MVCHTTP

DNS

CLIOOP Framework

Front EndBack End

Compiler



Learn Node!

AJAX

Async

JSON


Git

REST

DRY

Deployment

UI UX

AuthenticationWorker

API

VIM

Sublime Emacs TerminalPackage Manager PatternAlgorithm

Object Array Sass SaaS

Router Code Base

CI


Version Control PrototypeMethod

Function

PromiseController

DB

Heroku

URL

YML

Version Control Browser DirectoryConstructor Class ES6 Rendering Engine

CRUD

MVCHTTP

DNS

CLIOOP Framework

Front EndBack End

Compiler



Learn Node!

AJAX

Async

JSON


Git

REST

DRY

Deployment

UI UX

AuthenticationWorker

API

VIM

Sublime Emacs TerminalPackage Manager PatternAlgorithm

Object Array Sass SaaS

Router Code Base

CI


Version Control PrototypeMethod

Function

PromiseController

DB

Heroku

URL

YML

Version Control Browser DirectoryConstructor Class ES6 Rendering Engine

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.

You will learn by doing.

GO BUILD

SOMETHING

MOST OF THE APPS ON THE

INTERNETCrap. I don’t actually know how computers

work.

RECORDSCRUD APPLICATIONS

CRUD

reate

CRUD

reateead

CRUD

reateeadpdate

CRUD

reateeadpdateestroy

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

HTMLCSS

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

FRAMEWORKS

Kitof

SupportingParts

Structure

&

IT’S JUST SOME CODE IN A FILE STRUCTURE

This file structure makes things MUCH

easier.

Everything in your application has a

designated place, so it is easy to find what you are

looking for.

The framework code relies on this file

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 first 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 defined and

documented.

And when LOTS of people use these

conventions,

there are LOTS of people that can help you

find your way.


HTMLCSS


JavaScript

MVC Pattern

CRUD Application



Frameworks


OOPOBJECT

OrientedProgramming

A programming paradigm based on the concept of "objects", which are

data structures that contain data, in the form of fields, 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: [‘ruffles’]

})

Object Oriented Programming helps us

reason about our application as though it was composed

of physical parts.


HTMLCSS


JavaScript

MVC Pattern

CRUD Application



Frameworks


MVCModel

ViewControllerController

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 fill the dynamic placeholders

with?

Model

Data from a

What’s a model?

{ 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: “flat”, 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 flat, 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

Model

Controller View

View

Model

Controller

Controller ViewModel

View

SaveCancel

Model

Controller

View

ROUTE

Model

Controller

ROUTER

DATA STORE


HTMLCSS


JavaScript

MVC Pattern

CRUD Application



Frameworks


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

InputsButtons

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


}

Model

We haven’t created a new color yet, so we don’t have a model.

This view is used to CREATE models.

Model Controller

Controller actions: { create: function(){

//make a new color }, cancel: function(){

//clear the form },

}

{ hexcode: null, name: null, actions: {}

}


View Add a Color

READ


View Add a Color

READA 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

Controller

actions: {}

teasdsdfsdf

#FF3333

Update

ROUTE: colors / 3

View

Cancel

Bright Red

Delete Color

Back to Palette

UPDATE

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

}

Model

Controller

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

}

The Application

INTERMISSION

WINDOWS DISCLAIMER

Templating and Markup:Styling:

Primary Language:Framework:

Data Adapter Library:Data Persistence Addon:

Package Managers:Version Control:

Deployment:

Our ToolkitHTML5 + 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.

That is TOTALLY fine.

We will all work together to find the right words.

But first, 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

http://nodejs.org

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

http://nodejs.org

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 five a friend. This may take a moment.

http://ember-cli.com

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

http://ember-cli.com/user-guide

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.firebase.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/firebase/emberfirehttps://www.firebase.com/docs/

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/emberfirehttps://www.firebase.com/docs/

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/emberfirehttps://www.firebase.com/docs/

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 6Last Yak

Let’s fire 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.


View Add a Color

READ

Save

ROUTE: colors / new

View

Cancel

HEXCODE

COLOR NAME

Back to Palette

CREATE

teasdsdfsdf

#FF3333

Update

ROUTE: colors / 3

View

Cancel

Bright Red

Delete Color

Back to Palette

UPDATE

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


}

Model

We need to define 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

https://github.com/lydiaguarino/color-palette/commits/master

how do i even web app

Technology