18. ?
CRUD
MVC
HTTP
DNS
CLI
OOP Framework
Front End
Back End
Compiler
ConventionConfiguration
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
19. CRUD
MVC
HTTP
DNS
CLI
OOP Framework
Front End
Back End
Compiler
ConventionConfiguration
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!
21. I WILL LEARN
ALL THE THINGS!
JS
jQuery
Git?Ruby
Sass
Wordpress
Bootstrap Command
Line
Binary?!
22. Wait.
I STILL Don’t know how to build a web app!
JS
jQuery
Git?Ruby
Sass
Wordpress
Bootstrap Command
Line
Binary?!
?
23. “Programming is awesome if
you like feeling dumb and then
eventually feeling less dumb
but then feeling dumb about
something else pretty soon.”
- @bpoetz
37. What’s on your mind?
PostCancel
To: Friends
Update Status
Create - Add a New Record
38. Lydia Guarino
Read - Review a Record
3hrs . Austin, TX
LOOK AT THIS PICTURE OF MY ADORABLE CAT!!!!
39. Update - Edit a Record
LOOK AT THIS PICTURE
OF MY ADORABLE CAT
TERRIFYING POSSUM
UpdateCancel
To: Friends
Update Status
40. Destroy - Delete a Record
LOOK AT THIS PICTURE
OF MY ADORABLE CAT
TERRIFYING POSSUM
UpdateCancel
To: Friends
Update Status
41. 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
50. •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
55. They’re like guard rails.
If you follow the
conventions, you won’t get
lost or stray too far from
the trail.
56. It also means you can
LOOK UP how to do
something correctly…
Because the “right
way” is defined and
documented.
57. And when LOTS of
people use these
conventions,
there are LOTS of
people that can help you
find your way.
58. 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
60. 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.
61. Id Size Color Fabric
1 6 Green Cotton
2 8 Yellow Polyester
3 12 Purple Satin
4 4 Red Tweed
Dresses
69. 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
76. The styled HTML
web page the user interacts with
+
placeholders for the
dynamic content
View
77. 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
81. {
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.
82. {
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.
83. 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.
92. 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
96. Save
ROUTE: colors / new
View
Cancel
HEXCODE
COLOR NAME
Back to Palette
CREATE
Inputs
Buttons
Preview
Link
97. {{#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>
103. ROUTE: colors / index
View Add a Color
READ
A list of all the colors
with previews
Link
Link to
individual
color
104. {{#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
112. 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
120. We will all work
together to find
the right words.
121. 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.
122. We need to install
a few things:
1. npm package manager
2. ember command line interface
3. bower package manager
123. Open your terminal
and type:
npm
Press Enter
Making sure you have node installed
Step 1 of 6
124. If you get something
like:
command not found: npm
You need to download and install a
recent version of Node from nodejs.org
Making sure you have node installed
Step 1 of 6
125. nodejs.org
If you got something
that starts with this:
Usage: npm <command>
Congrats! You’re ready to install
Ember CLI.
Making sure you have node installed
Step 1 of 6
126. 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.
127. 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
128. Just a little more
shaving and this
Yak will be looking
pretty dapper.
129. Let’s set up our
application!
4. Create a new Ember CLI Project
5. Install and configure EmberFire
6. Install Ember Inspector
130. 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
131. We’re ready to use Ember
CLI to create our
Color Palette app:
ember new color-palette
Step 4 of 6
ember-cli.com/user-guideCreating a new App
132. 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
133. 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
134. Now we need to hop from
Desktop into our new project:
cd color-palette
Step 4 of 6
ember-cli.com/user-guideCreating a new App
135. 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/
136. We are using Firebase
INSTEAD of building a
customized backend API.
https://www.firebase.com/docs/
137. We’re all going to be
using the SAME database
that I previously set up.
https://www.firebase.com/docs/
138. For your next project, you
will need to set up your
own Firebase account or
try your hand at writing
some back end code.
https://www.firebase.com/docs/
139. 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/emberfire
https://www.firebase.com/docs/
140. 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
https://www.firebase.com/docs/
141. 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
https://www.firebase.com/docs/
firebase: 'https://color-palette.firebaseio.com/',
Save and Close the file.
149. 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
151. We need to define what a color
model looks like:
ember g model ‘color’
152. We will need controllers for each of
our routes:
ember g controller ‘colors/index’
ember g controller ‘colors/new’
ember g controller ‘colors/edit’
153. 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
154. We’re ready to write
some code!
Open the ‘app’ directory
in your text editor.
155. 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