May 29, 2014

Brief Introduction to Backbone.js

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface. 


Transcript -
0:04
rx oh and as an introduction to
0:07
backbone.js and I just wanted to ask
0:11
the people in the audience here how many are
0:14
which use air proficient at .javascript
0:17
okay and whatever a
0:20
how many people have built something even if it's just a toy project with
0:23
backbone.js
0:24
okay so people are too kind I know what's going on
0:28
I'm gonna start off with some slides and that'll be about 15 maybe 20 minutes to
0:33
or some other basics and then we're going to get into according session
0:37
um I'm gonna do live Cody and
0:40
if you're interested in coming along all up the get up URL
0:44
it's the first one here of its last and got here that's me
0:48
and then try to backbone.js is the presentation and the coat
0:51
is in one of the subfolders net projects you on it
0:54
there are many server dependencies or anything it's just HTML JavaScript CSS
0:59
you know for a server in this open up when we get there
1:02
I'll om show you how to work with that and for the people on the
1:07
hang out and watch the recording i guess i watch the recording if you're doing
1:11
the hang out you can ask a question by am using your cell
1:13
um but you will be yelling at everybody in the room
1:17
so just don't die I'll be too obnoxious
1:20
I am okay I
1:25
so whom I am well into you have backbone about a year ago
1:29
I caught third recipes that battle with Chris strong which is a fun show
1:33
intermediate to advanced design patterns upper back JS
1:36
and it's pretty cool book I am and we also have
1:40
0 yeah so we have a coupon that I totally get add
1:44
to the slideshow you
1:47
I am shelter here
1:50
Irish
2:00
so Baltimore innovation week 2012 I'm if you use this coupon you can get the book
2:06
for 10 bucks off
2:07
I'm so leave that up there for a couple seconds
2:10
the I W 2012 are
2:14
estimates chess in okay so sorry about some backbone basics
2:19
personal backbone is a library it's not a
2:23
framework and what that means is that it's very small
2:26
and its follow these utility classes that you're going to use
2:30
in your application and its injectable
2:34
what I mean by that is that you can just kinda drop back on and anywhere and it
2:38
won't do anything or messed up
2:39
Asian anyway like I'll I G or you can just dropped a Korean
2:43
and if you choose not to use it it's not going to affect the age anyway
2:47
untried wouldn't sell not like that on it because the library
2:52
another framework it means that you call the shots is that a ember
2:55
calling the shots %uh as an example so amber is a framework
2:59
much larger does a lot more for you but that also means that
3:03
a embers in control and it's going to call your as opposed backbone.js for
3:07
your control
3:08
you call back box Co um
3:12
n for people in the audience if you have any questions
3:16
stop me and I'm also gonna ask and and proper questions a certain point so
3:20
have any questions so or just razor and asked okay so
3:29
I kinda like to work when a programming language learning something from the
3:33
outside in
3:33
so is set up coming from the bottom up with backbone
3:37
I wanna start all the way on the outside how back on gets running trigger on
3:40
H and that starts with the router so the way back bonds rather works
3:45
is that will bind to differ routes on your page whether that's with
3:48
a cash bank route or with the State Route I when those routes
3:53
show up backbones router will say oh I know that route I'm going to
3:58
runs in Co so I'll if you've got a respite recognizes it then triggers your
4:03
code and then you can do whatever you want set starts on the outside
4:07
and a router will look something like this:
4:10
so here's my router and you create a router
4:13
by extending backbones default router
4:17
so says it's a library use these classes and you inherit from them
4:20
I'll but in javascript we don't have the best I didn't care
4:24
so they have this special extend so you've given an object to extend the
4:28
router with
4:29
in our case this router we've got his press
4:32
on the left that's what matches in the URL bar and on the right
4:36
is the action it'll take so this is kind of a simple restful router
4:40
and the Mt strain was just smashed through the page so the domain
4:45
and that'll run the index action and maybe that just welcomes the user and
4:49
chosen some information if you go or
4:53
appease I'll give you the puppies which is restful
4:56
index so we can then go to describe these actions and list them
5:00
and then here's our rest show action up to get
5:03
an individual a pic so this is our router will listen and watch
5:08
using html5 which day defense or
5:12
just planning on ask James location changes to
5:15
looking around and then trigger and action I'll
5:18
any questions on the router right now
5:22
okay
5:26
so the next step down once you trigger I love those actions with the router
5:30
usually want to take some action on the page display something
5:34
are performs factions when you want to display something
5:37
you go to one backbones use the views job is to take some data
5:42
or no data it can be a static you and turn that ish
5:45
into some HTML and keeps a reference to a DOM elements when you stand she to
5:49
view it will make its
5:51
owned on element %uh that's not test
5:54
to the da it's just a note as its route
5:58
and then it can populate that route some HTML and then it's usually the collars
6:02
job
6:03
to take back you and stick it somewhere on the top so for example
6:07
we go to our index page with a router we might instantiate a welcome to you
6:11
and then attached to the group age to show something use
6:16
I and abuse job also is to listen to events
6:19
jQuery style to up deal with the interaction
6:24
with with these so user clicks on something within a few
6:28
listen the cliques within its ensure your actions
6:32
so as an example here here's our individual you
6:36
and as a much properties we can use first of all the tagname
6:39
will tell back on what kinda element to instantiate
6:43
as this use route on a the class name is going to be.
6:47
CSS class that will be attached that a lot this is making ally with clasp
6:53
the events ours this object cash for the left side
6:56
is passed jQuery so this will listen on a click
7:00
or something that matches the dot at selector
7:03
so this is be like jQuery wrapped around dot
7:06
at da on click and then
7:09
what is the Heather so
7:13
if you look at our render method this is what's gonna take
7:16
um this is what the view is going to used to populate its element
7:22
so we called this top dollar L as jQuery scrapped
7:26
element that'll be our ally a really is the HTML
7:29
the jQuery to say Phyllis /li with
7:33
the name about this UPI
7:36
and then this span with the class at that says
7:39
at specific I know something we can click on like action
7:42
you click on it and when that triggers runs this work
7:46
action down here which doesn't alert I
7:49
name in this case is a function that returns the
7:53
you smile name so used in back a lot of different kinds of data
7:57
I you can pass if your model and the people were on Armada you can also pass
8:02
a few
8:02
a collection so it might be a view that represents all this to Publix
8:07
um and you can also not passive you model or collection just passes
8:11
arbitrary data makes archery options you can come to use it however you'd like
8:15
in this case this is a model you which just means that I'm calling this pattern
8:19
of
8:20
asking a model in and rendering the model
8:23
and then maybe in this world out to take an action tomorrow
8:27
what you don't see this transparently happening is when you instantiate
8:30
are these views you can pass the model in to the constructor
8:34
and it will automatically send it back on takes care setting or
8:37
and I will see that further we get to the left good
8:41
any questions on the views and I'm kinda throwing this all that you said you
8:45
haven't seen back on this is going to be a lot
8:47
and yet always do victory
8:51
yes Outback owns dependencies are
8:55
underscore I believe that's only hard dependency
8:58
if you're working with some if you're going to do some work but the dow
9:02
as to even doing that's kinda optional you then want to include jQuery
9:06
so you could use these events and he used to take my helpers but we don't
9:10
include jQuery just don't get some
9:11
sets I she could use another
9:14
UI framework if you want I and then the other one that is recommended is the
9:19
Jason to
9:20
library for Jason arsenide checks quests and then you know whatever else you
9:24
later
9:25
%ah she can use I think Sep 20 is compatible with us
9:29
I'll your questions on the view
9:33
or a it works the fabric also
9:37
thanks here very well okay go
9:40
I believe there's an underscore like master replacement for underscores well
9:45
cult-like no dash I'll that works with that
9:49
Russian
9:53
so the next step down now that argues that we've got our router setup it's
9:57
triggering its
9:58
it's showing this be object we've got this model
10:01
you the mall has a couple jobs I'll
10:04
for one it syncs with sir backbone assumes
10:08
a restful server and point so
10:11
if you have a rest server you can just give it a euro
10:14
route and it will know all the ways call grassland up the rest or methods for
10:19
updating to beating
10:20
creating I'll fetching that
10:24
data doing that kind of show points Jason
10:27
and then its main job is to hold
10:30
i won objects data so one
10:33
p1 widget one whatever and then also triggers a lot of the best
10:38
and actually the router triggers offense to in the future occurs
10:41
events a I don't think he is chair and spider or
10:45
any but you can trigger you're a the main thing that use models
10:49
or is those others a bent triggering so
10:53
let's see special on the server you give it to have you
10:56
if you renders itself then maybe you check tomorrow
11:00
if you can listen to the models change event and automatically update itself
11:04
so the event system is very or tobacco and it's used
11:08
thread all throughout the different up objects and also your own objects
11:12
to tie all their actions to get
11:16
so models are usually pretty simple
11:19
this up the model just has a URL route for apiece
11:22
and so automatically add ID when it does venture update
11:26
I'll if you make a new model and save it all to a close to
11:29
route to creation heading to Italy to the I'll
11:32
I route for the sure it automatically packet
11:36
populate this special attributes object
11:39
on which has getters and setters so in this case
11:43
I've created this accessor name that just gets name
11:46
from actually it's other reason has centers
11:50
is so that they can broadcast defense set something otherwise
11:53
issues the objects accessors JavaScript the deal the fire
11:57
those said um the best on a Sat
12:00
and then I guess are are your way up pulling it back out spots that are
12:04
practicing
12:06
I like to wrap I'll my
12:09
attributes accessors like this because of that way when you change
12:13
the data Tom from the server
12:17
it a lot of views interact with that one model you can change it up
12:20
place so you do that star it also lets you do things like I am
12:24
littler it in some way I'm kinda spoiled by Ruby because and Ruby
12:29
attributes can be replaced by methods without change
12:32
syntax to a method call and so I kinda wanna have that same power here such
12:37
spectrum of
12:37
function calls so the way you didn't use this interview
12:42
is on initializer takes an option zach has not shown here
12:47
you can initialize a a bit you it's a model Colin
12:50
some Appiah its and then I'll you've got this model you can say
12:54
mile unchanged the star render optimists said Expo
12:59
so that means that age and the model changes that you can automatically
13:01
render itself
13:02
if it chooses to do so says something you're going to see a lot in backbone
13:06
that you would see in other UI frameworks that if the wire this your
13:10
cell
13:11
I'll which on first look is kind of lame and annoying
13:14
when you're doing the same you and model pattern over and over can you like man
13:18
why do I have to
13:19
automatically by not change is something that i won
13:22
well you always want to do it is catch and you know I always working with
13:27
well sometimes you work with elections maybe you want to be rendered change
13:31
BYU's underscores
13:33
throttle that to throttled the number renders you can do in a given set
13:37
so maybe you want to max out at one rear ender this you no matter what events are
13:41
coming through
13:42
one ready for sex you can kind of do a trial like that from
13:46
lot of other things I'll and maybe you don't actually care about remembering
13:50
not change
13:52
you want to wait until some much more for an event like the user click
13:55
refresh menu and show I'm watching so
13:58
om it kinda won't do these defaults for you
14:02
and you have to wire things up yourself and that's what really differentiates
14:06
back on lot other remarks is that you have to do a lot of acquiring your cell
14:10
but it gives you that extra layer actual
14:14
any questions on models so far
14:17
okay is he from ignoring all much people in chat
14:20
no it look at yeah but you look at school
14:27
so collections are glorify to raise
14:31
that will hold a bunch models and meetings with collections that you can
14:34
also
14:35
sink with you can point them at that senora route
14:38
and you can call create on them or call fetch to get all the elements
14:42
on that %ah index call
14:45
so would you get to slash apiece and get rakeback from the server
14:49
all lobbyists this little automatically instantiate whatever model
14:53
you set up for to use so we can get a whole bunch them
14:56
and holes as models and then the mix in
15:00
and inject all underscores a new Merkel's onto the collection
15:03
she can do like collection each that underscore after
15:07
she can do maps and Jackson all that stuff
15:10
and then collections have events to season have a you
15:14
for collection so about that you know to do list application
15:17
you don't love you the whole list and that you would matter a collection of
15:21
tests
15:22
and then to reach individual tasks you have a model and another few
15:26
that while she gonna break down like that national patterns that's in the
15:29
book it's called the collection you better
15:31
I believe is also one of the chapters we have as a whole
15:34
um as an excerpt on our website
15:38
it's a really really common pattern do pretty much all the time because you
15:42
always have
15:42
group things is collections and you need me collection you
15:48
so collections also look pretty simple because they just match this URL
15:53
as their route and and they have a model which can be a class
15:58
analysts and she and then you can do things like say
16:01
appease dot batch which is the whole reason I used apiece
16:04
as an example so I could press buttons um
16:07
and now best since it uses jQuery under the hood it actually returns jaipur is
16:12
deplorable objects you can change the
16:14
awesome awesome jQuery deferred things like that
16:18
to execute this code on a call back
16:21
the patch um such a great deford's are great
16:24
you don't know what they are checking out I use them all the time backbone
16:27
because it's great to be able to
16:29
have your a synchronous om actions return deford's
16:33
and then sometimes populated you you actually do multiple
16:37
such as loans and things and you can use jQuery went land a whole bunch of the
16:41
first together
16:42
and then take action when they balk the
16:46
um questions on the collection
16:51
cool I know kinda like doing that whirlwind of this and hopefully have
16:55
I've kinda laid the first coat of paint about how back what works
16:58
how it ties together we're going to really break it down when Mia
17:02
you 0 lifecodes
17:06
last thing I want notice on Tempa I backbone did not
17:11
bringing their own templating language because a lot of really good ones that
17:15
already exists
17:16
a lot of people just use handlebars his handlebars really or
17:20
one my favorite things about handlebars is that if you ask it to populate
17:24
attempt with it
17:25
area with an accident like name
17:29
it will look at it name is a function it will automatically
17:32
call it with no arguments so you can use accessor functions as attributes
17:36
handlebars templates which meat makes it really easy to pass a you in as a
17:39
context you get back out
17:41
%uh like a i mean I'm cipro respects as a Rails the
17:45
appeal to those use but working with controllers and as spats
17:49
and over as it is really cool if you don't wanna at baggage
17:52
underscore which is a dependency backbone comes with
17:56
AIM template I like underscored a
17:59
template but the underscore team the document guys
18:02
actually really hate the fact ship to underscore the template language and
18:06
they wish they hadn't
18:07
so I don't know how the sport is gonna be on that but it's a nice light
18:10
solution
18:11
%uh and honestly it's so my projects accused string concatenation
18:16
because sometimes you just don't need a lot of things to I'll just
18:19
cat which streams at not use a template which
18:22
are but I usually use handlebars as it's pretty awesome
18:28
so for example the way he might use handlebars templates
18:32
is always the handlebars stockpile I'll this template
18:35
is my name and that is a call and this at thing
18:38
and now my puppy you I'll just have this template key on the
18:42
on the class that sparked so under my render
18:45
instead I can say this top dollar outpaced him also populate my element
18:49
with each email
18:51
that comes back from running this template with myself
18:54
as the objects so when it asks for name
18:57
what you actually get is that name since this method on the view
19:01
and it will automatically call that function wished just delegates to the
19:05
model's name
19:06
so it's really clean I really liked this one line
19:09
and this is something I try to use a lot of my renders is just
19:13
return %eh team up bike I'm a template
19:16
and then all my you access met that's right Europe it
19:19
as is his bets keeps a really clean setup last lead on this renders return
19:24
this that lets you change
19:25
on the if you object speak
19:28
so you work with templates before however you want to do your templates
19:31
you can just do my cutie I have strengths or will do the last coating is
19:35
what actually have script acts that represent the template
19:38
or grab the html I'll accept the subscripts
19:42
Rs that's a good question
19:47
um you can definitely pass your model
19:50
into the view and that works very simple models
19:54
um the trick is that models usually have server day
19:59
and server data is usually machine-readable
20:02
but not nicely presented so I'm using the you as that we'll
20:06
presentation layer in this case since its release revealed
20:09
it's just an 80 and name is something that is
20:13
almost always gonna be human readable on the server side
20:17
but if we had something like the creation date:
20:21
on the model the creation date: we wanna leave that as a nice
20:25
machine-readable time step but I love you we won format
20:29
and so a lot of times you do get
20:32
this had to happen half model where half the data is machine-readable
20:36
ask that is our I human-readable
20:39
and I like to have you in which we need to either just straight delegates
20:43
like in this case I'll or I
20:46
or do some sort of computation do a nice pretty printer that
20:49
dates or so ice yet much up
20:53
while was all
20:59
small yeah using like
21:03
another handlebar template there like that handlebar
21:06
you helpers you to wrap around yeah so
21:09
them I'm so the question is when would you use a handlebar
21:14
for a bit there ultimately car arsenals um
21:18
to to wrap around a model and make it presentable
21:22
purses using you methods %uh yes to that is that I like to write my coat
21:27
in by code by which so I wanna grab my javascript
21:31
in my job is to class and i wanna write HTML my html
21:35
flats so I don't wanna have a whole bunch JavaScript logic
21:39
inside handle bar brackets to format natcher you
21:43
I wanna just have my handlebar templates the all HTML
21:47
then just really short little snippets like this just the iteration
21:51
I'll for nesting into something and for doing it accessors
21:55
and isn't this function here in JavaScript that i'm gonna wanna do
21:59
something like an STR 8i
22:01
plus maybe some I'll extra cord around the side that said like
22:06
say dat and then a nice St right time right
22:09
but i wanna leave all my html into in the enforced
22:12
that's the last thing I want to do is mess-up my html templates
22:16
with a whole bunch a javascript site races arm
22:20
is that gets really crush best yet are
22:23
way saying be
22:28
I'll on see on are look
22:31
some you on so
22:35
the question is about doing a method missing or a easy delegation
22:39
um I think what I would deal with that is on
22:42
probably created nixon so that I could call methods on the mic said
22:46
and just say W dot delegate name
22:49
you yup I'll
22:52
no we can run after up it's only stains like
22:56
I write a lot of these little vixens a while at this IOC
23:00
ownership its okay
23:03
are ball yeah you have a whole bunch these one-liner accessors
23:06
but like this one lie it's repetitive
23:10
but it's so incredibly clear that sometimes I'd rather just
23:14
write this one line that says names function return this file name:
23:17
satellite radio mix and that adding the nixon and and then lunch and tea but
23:21
having to chase down
23:22
makes in bed ok perhaps in some third party library where I
23:26
funnel that where the offender and libraries here just L
23:29
so in this case like this is trivial and there's that part of our
23:33
programmer trainee it just like like some fire
23:37
it's as dry dry dry dry right we have to be factored these things
23:41
sometimes a lot later just wrapped wire like this
23:44
I remember if you're a cop expect this is name-calling
23:47
a row this model may are no sorry at
23:50
motley so customers at the Olive like
23:54
well characters I I do tend to write a lot of the stuff in car script to save
23:59
on a lot punctuation as backbone as what this punctuation
24:04
object declarations a clear up his car to so like this
24:07
namely bank I am it was his comeback at
24:11
Oct this wouldn't that be something like me
24:18
there almost s but they said 96
24:22
points
24:27
that you aged
24:30
yeah otherwise I'll out it's not a call it a function to back
24:35
really this would be your is fixed and
24:38
up that short enough I don't need a factor that looks good to me
24:43
you know like is just so short just put it
24:46
yeah he your here I'll
24:50
you have an app between jobs to outstrip and it usually depends
24:53
on the team or the planet working poor because I don't believe in delivering
24:57
oh that they carry so if they're a javascript
25:00
class I will write and deliver JavaScript and it's not that people
25:04
but ready of the script and compiling it giving it 30 eating like look it's
25:08
JavaScript is then rules thing in the world
25:11
is that JavaScript the upskirt rights is
25:14
I mean it's pretty good for a language is compiling but it's not very fair
25:18
to the client I specially if I'm gonna pass something and then it's gone over
25:22
right there changes some JS
25:24
and you can rate clear JavaScript and Cookies about puts pressure
25:28
special by using underscores I'll but when I write for myself
25:32
iraq Oct I'll is this is this is a lot shorter
25:36
then I'll and this line
25:42
go a more questions on what's up
25:45
I want to thank you people you can chat something here too
25:48
for the hangup people type something in over here and
25:51
I'll check here every now and then if you don't want to be destructive your
26:00
okay so like johnson said I did this when I was in MM
26:03
and Ireland they have these things called breakfast rolls and
26:06
when I was putting the presentation together I thought this is what effect
26:09
this role
26:10
like but I actually got real one and
26:14
it doesn't look like this this it's really nice breakfast roll looks like
26:17
this insane
26:18
monstrosity Abraxis to it's this giant some role that as like sausage
26:23
they can aids cheeeeese and then your choice so
26:27
like red sauce which is catch-up
26:30
or brown sauce which I have yet to identify I'll
26:34
and so I was like hey I'm into something Irish tonight maybe something
26:38
totally cliche iris I want to have our live coding demo
26:43
just be building a recipe database for breakfast rolls I am
26:46
and all we're really gonna do is have a rest these have a main ingredient lists
26:51
minute she and just make both strings anyways so it's going to be super duper
26:55
simple
26:56
not too much in terms of but going to learn the whole domain apprentice role
27:01
technologies I'll so we pretty straightforward
27:05
so I wanna do by the end of the coding session is
27:09
prompt the user can come to this H they've got this empty database let's
27:13
and they can go take in a recipe and click at and it shows up unless
27:17
and that they don't like a rescue dog we at Lee
27:21
West so pretty simple credit page I'm we're not even gonna do
27:25
are headed up day just create and destroy
27:29
and less than show so were also used to look back on local storage extension
27:35
which maps all the rest elections to elect storage object so we don't have to
27:39
mess with server
27:40
but I'll all you have to say local storage thing of
27:43
but you're a route and it could workouts are step
27:48
source code this demo link is going to
27:52
take you to this page um
27:55
this is the HERA URL again and this is the case you are again so if you are
28:00
fall into law
28:03
you can clone of a biscuit repository
28:06
um if you're following along I might be moving a little bit too quick for you to
28:12
type everything in with that I'll probably stop to talk about her answer
28:15
questions and you can catch up
28:17
if you don't feel super comfortable with backbone I'm gonna be coding
28:21
and everybody here could be my up for ever remember
28:25
so have a giant like 20 person ur only
28:28
into after forty 35 ever around session
28:32
you can yell out what you want it I if you want to do that
28:36
I'll so what I have right now
28:40
I'm starting us off an already sorta
28:43
kinda implemented stay and I want to cover what I've implemented so far
28:47
because I wanted to get a bunch
28:48
the boring stuff at the beginning out of the way and then
28:51
and go over what I've written and so what you'll see is
28:55
if you are on there %uh sorry there's app demo index
28:58
and then there's the SOL wanna salt and here you can see we've got a
29:02
warmly say I'll will make this
29:05
to see about the ad
29:10
the make it the best practice for all and it's gonna have
29:16
read it she's eighty click had
29:19
to the bottom and then if you'd like to delete delete
29:22
it's all instantaneous we're actually using a router
29:25
here I'll and a
29:29
it's just under the Local Search
29:32
so if we go back to our himself heard
29:37
about code here check on iChat people's
29:40
okay
29:44
so use the index page I'm gonna go through this skipping over some of the
29:47
ACL stuff
29:48
ghari shot by a car set tight all we've got some
29:53
mobile sup description of their appalling and
29:56
um tourist trap and also a little bit at my own breakfast all that CSS
30:01
I 9 ship
30:05
iridescent Twitter Bootstrap we have our heritage that as
30:08
information links and then down here this is
30:12
the entry point for a cage we have to do
30:15
with the ID practice balls and if we look down at the booth here
30:20
this is our application who we're doing a jeffrey I'm ready
30:25
breakfast row I'm calling practice rolled up to and I'm passing in the
30:28
element
30:30
Minister Ritz is kinda like you know booting up your JavaScript library just
30:34
lost a limb
30:35
age is ready who my code here's the DOM element i watch Star
30:39
I'll I really like to have back. on code always
30:43
using relative jQuery selectors
30:46
and a find a I'll
30:50
relatively so this is gonna be a route objects
30:53
in my ass and also a root out by never gonna call
30:57
naked like dollar like this to find elements
31:00
is that means that you can take your library as very poor
31:03
and you can even drop multiple same ap inside the same age
31:07
just a good practice makes more testable to
31:10
om so that despite the strong
31:14
and then here's my templates so this is a
31:17
and a four-step I gave it the ID index but
31:20
and this is the there are how many recipes sets this week
31:24
there orestes some a CNN count
31:28
so well let's take a look at I'll some other code here
31:37
JS purposeful
31:40
cya I've got some stuff they are in about about our
31:43
sixty lines let's start at the bottom with boot
31:48
so we call of duty: pass in our room container I rapid jQuery
31:52
just in case you nice for library Atlanta when I'm gonna
31:55
who my pages to instantiate a router ass in the container down to the router so
32:00
that it cannot instantiate
32:01
use a Mac and I'm gonna go back on the history got star
32:06
that makes back on star reading the page or else
32:10
so backbone is gonna look and
32:14
every my rap which in this case is this right here
32:18
I'm not using HTML our state which means that this is equivalent to a empty
32:23
hatchback
32:24
like a true request I'm back on what mister
32:28
find that so what happens is my router
32:31
and said she didn't want these guys it's right here
32:35
and giving it an element that's my container
32:38
so that I can use it and attached to it when things have been rather
32:41
so I'm listening I hear that okay your honor the page
32:46
mitterrand index action surrendering my whole
32:49
restful age so all the routers gonna do is instantiated breakfast roll index you
32:55
and it's going to empty out its element
32:58
and then it's gonna had my use render
33:02
elements to other route
33:05
so all this is doing is we've got this river H it's gonna clear it out
33:09
remember we had a-arm
33:14
that have worked
33:18
I forget my hockey is back alright
33:22
om so it's going to take this deal with the breakfast show and take this
33:27
loading and empty it out and when it renders this
33:30
index 8 its gonna better and that to the root
33:35
after rendering does make sense so far
33:39
I am so if you're calling a long as nothing to take it
33:43
so moving up the page the more here's our index you
33:49
it's got that template index and his helper method that goes it
33:52
holes out next template as the ID
33:55
from and the worst about such to also for me craft template
33:58
I'll when we instantiate
34:02
I'm doing something here I I told you you can't ask
34:05
elections into a few there's also this other technique that I've been using
34:11
on top-level use here which is i'm having a
34:14
I called and a self-contained if you that means that the you can be
34:17
instantiated
34:18
without really having to give it any information and it will go and fetch the
34:22
relevant objects that meets
34:24
this case its gonna store recipes
34:28
on om on is in stable
34:33
and Afghanistan she want these rescues collections and on
34:36
any event on the recipes collection we're going to be rather so you notes
34:39
changes it possibly Addison leader whatever
34:43
we're going to this data and the first thing we're going to do is
34:46
special recipes so when the you instantiates goes and gets all the
34:50
recipes
34:51
eats when the recipes are best that's gonna
34:54
fire reset their which trigger
34:57
when we render we're just populating the template and then all we have is this
35:01
one count
35:03
that returns the rest is like so we've got this next count
35:07
here amassed lacked is another on reason that you might want to use
35:12
I'll instead of doing it delegator like a pass recipes n
35:16
but then is p length there are links recipes
35:20
kinda makes sense but I think count as a better name so kinda gives you the
35:23
opportunity to rename something to be better
35:25
you as opposed to its actual tisch
35:29
I'll so that other you
35:32
ends up rendering itself so the only question here is
35:36
how do we get this cow how these recipes get batch
35:40
I well this is pretty simple actually we have this empty rest the model that
35:44
really doesn't have anything on it right now and breezy when using that an armed
35:48
clash
35:48
are using to fall back recipes and this one trip here
35:52
I'll this is kinda taking the place a
35:56
yes because that's what you do you're using a server
36:00
URLs he's actually actually get do an ajax call
36:04
except for you overusing back on local storage
36:08
which means that I'll you just do this new store recipes and it goes it builds
36:12
use
36:12
or like to dress like she's on is that the aura
36:17
that's about it the only thing we have the top here we've gotten a space
36:20
I we're exporting our namespace up to the lol so it's bill
36:24
all and then nom a guy template method
36:27
which is just a little help for that handlebars piles whatever you
36:30
fine with bashed but on its HD so that justice
36:34
think a plaid shirt shooting
36:39
so that's all be boilerplate that I kind of setup
36:42
to get this back on after who and lists the number
36:46
a items a question so far
36:56
yeah said
36:59
ice stop all that
37:04
I girl so the euro's gonna be absolute
37:08
also this would be URL
37:12
like let's say this without admin
37:15
restful things
37:19
rests you know where it's going to be so that's why I just had slashed recipes
37:24
you know may dislike APIs its
37:28
om if you want to build something and make it sorta
37:32
like me the whole thing in a space the just but I L
37:36
a variable here you know the be like
37:40
are are reached
37:43
it yeah I any you something later State Route plus
37:46
overseas this
37:52
it's kinda funny is like back on doesn't give you a lot of these things for free
37:55
but when you actually go to implement them a little liar to
37:59
so I don't really mind doing that especially cuz it gets beat or show
38:02
I wanna make this functions through
38:07
and then you something weird in here you know
38:11
and concatenated maybe call some other method but excellence
38:19
so does this I counsel than
38:28
okay so the first thing that I wanted to do
38:31
and I wet myself notes in here things to do
38:35
I we want to make up for so that we can make an arrest
38:39
and we also want the index page at a sub you for
38:43
each recipe so there's one key features espy's
38:47
and that he should render sp and
38:51
sleep button that will remove breast so
38:54
like I said I like two things outside in so the first way that we can actually
38:57
see something
38:58
change on our H somehow is better form in place
39:02
when we create something it should at another count
39:06
number so the couch just go up even though we can't see it
39:09
home so I make that form person I'm gonna have to attach the form in
39:13
somewhere
39:14
so I really like to do things outside and so I'm gonna do this when you render
39:17
the index
39:19
I'm going to
39:22
do my template but then also gonna for an entry point in my temple rec
39:26
attacks so here at my something like say I'll see
39:29
is I'll class
39:33
the horse these will be recipes
39:38
and that's just an AT&T and what that means is
39:41
after i render the template what I can do is say
39:44
yes I dollar and that's a sharp at do a check for selection within mile
39:50
find me recipes and I want to append to it
39:54
some new
39:58
breakfast roll tide day stop
40:01
or
40:04
I I guess I gotta render that too so it's a far want
40:13
or brendor other
40:17
some comfort ending like this exists and I liked instantiated
40:21
and appended after a into
40:24
that rescues contain I that will render
40:28
so if I run its
40:31
its gonna far have and tell me that there's no suspects for the next for
40:35
such a good plan
40:45
so see all the time down here
40:48
but this role index up what
40:55
saloon somehow we're here and this is another one of those you can do it every
40:58
Los Angeles
41:00
rush to just bring this you as an actor you
41:04
on the previous year I liked do this when the use only gonna be used
41:08
inside that you because then it doesn't put it on the global object
41:13
and it's not something to use it somewhere else by accident
41:17
because maybe I have a whole bunch forms as a better show and explore
41:21
maybe there's a practice all I'll
41:24
like ingredient farm and then some other form
41:28
and that way I can name it something simple like or instead of calling it
41:31
up reckless role I'll create
41:36
recipe for which is more descriptive
41:39
a conference lesley Anne space so that is
41:43
you fire Ellis
41:46
worse the cuz junior
41:51
so what's the next thing that has to do with this form to make
41:56
anything on the age at all change
42:01
I can hear good all
42:06
of I am rendering yeah
42:09
%ah backbone has a default like no operator and I'll
42:12
at so yet against him
42:16
all um I don't have to read any html
42:19
my office yet
42:24
her there are some backbone experts in the room I'll
42:29
on Nadia are new to
42:32
think the bare minimum is lazy is possible
42:36
see anybody in the hangouts watch show up the attendees
42:40
best i cud all stop this
42:43
to model there's no motto it's just or
42:47
are listen for an event I which
42:51
which
42:54
ready um
42:57
no is being called here we're calling render on it right here only remedy
43:01
index this is all happening already
43:03
yep tactic
43:06
okay so that would do ok well I'll
43:12
okay was already we've already got back
43:16
tear do I Yahoo tagname
43:19
or in so now
43:23
ice is still out there but we should have
43:34
is my recipes as energy for okay so there's there's something
43:37
there there's about 20 X is a pattern now
43:41
a call that's that's pretty much snow yeah
43:45
%uh so what if I wanna to
43:49
button content into the store like I just wanna say
43:53
the
43:59
im between
44:06
yet but I don't even need a template it's just stress so
44:10
I'm gonna just all you have to do to make the you start changing in doing it
44:14
something
44:15
override render
44:20
and many here I just have to do something to my helmet
44:23
as a member I have this style and this %uh dollar out which is like a clearer
44:28
so I can to text is
44:34
we all knew temple and this is really just a texture
44:39
I'll be oh yes to start writing stuff we gotta start working rather
44:43
so now okay
44:46
so I broke it because I'm changing
44:52
okay food there's a or sweet
44:58
so now we actually want the form to look not terrible
45:02
I and maybe a few things so at this point
45:06
yeah now you right up so
45:09
in my index.html but to do here as well because the jQuery I surgically
45:14
the bootstrap forms are kinda complicated and I don't wanna
45:17
like right you guys all through the dots so I just she didn't gave my cell
45:21
form code right here my for
45:25
I'll so I'm gonna do is Minister tag
45:29
and here only St I'll
45:33
index form template
45:36
and here is my
45:41
shit now
45:49
and then I also want my submit button
45:59
and then the last thing that i won do is but a classname
46:05
police just or bootstrap
46:09
and I would call so now I wanna say
46:13
issue about this stuff and lead yes
46:17
I'm gonna by template
46:20
or index all
46:27
okay fielded
46:31
inputs so that was my template
46:35
here we go the control group for Fiat's I want to ease
46:40
I wanna its
46:44
or name name
46:49
input I D E it
46:52
and then year out the new
46:56
we Jens
47:01
and then dite gradients
47:06
and so the summit I want this to be
47:09
I let's make it at speak
47:15
okay an eye out for name ingredients
47:19
address call
47:22
so if I do stuff here
47:28
it actually reload the page because the form action
47:31
will by default close to the car page somewhat
47:35
now we gotta you sum up the Jaipur events that are provided to us
47:39
on iPhone case
47:42
so miss my form the tag is a form
47:45
and I wanna listen to the forms submit a
47:48
so I can do that simply by saying events just like that
47:52
option are objects and I wanna listen to
47:57
submits and I wanna run
48:01
submit arch so I got to rate this
48:11
I'm gonna do the good ol event better alt
48:16
and network also la
48:20
a rash he thinks
48:27
so now if I go here and I say a
48:30
you now we're actually getting all traces and we're not reloading the page
48:35
so we've prevented that
48:37
form action we stop so this point actually what some other data
48:42
so if we look at this I tell
48:51
we've got a a handle on our for says really nice we don't have to do
48:55
like jQuery listeners based on the whole ages selector scope and
48:59
traverse it down I was things everything's corrupt so the former can
49:03
just look
49:04
on itself first different its
49:08
so since we've got
49:11
add and put with ID name and it's both i key ingredients
49:16
we can you do is
49:19
right here you can look at a this top dollar
49:24
in but name about
49:28
and this stuff dollar so it
49:31
really it's about
49:36
such a spoiled brat up for and we don't do anything or post letters like same
49:40
for talk so here's my
49:44
I'll St featuring
49:49
stir so texture
49:53
circling %uh so now we actually
49:57
wanna to do thanks
50:01
one actually take some have action with this
50:04
so when I'm kinda
50:07
at this point where I'm asking myself why where Weststar
50:11
creating I always take the point where I'm at right now in the code
50:14
right how about what so what I really like to do here
50:18
something like I'll this stuff recipe stock
50:22
yea I name
50:29
name and any Reince
50:36
greets are ignoring the fact that I don't have that
50:39
recipes object I'll I want to do this
50:43
I wanna say take the recipes that this form a supposed to be working with
50:47
and Dom create a new one
50:50
course our promise
50:54
its gonna say no there is no such this RS that doesn't exist
50:57
ako Kay so he is
51:01
and how we're going to get this we gotta get through art instructor
51:10
and actually since the constructor will automatically set
51:13
the stock collection to the options stock election
51:18
instead of doing something like
51:22
I yes the same desire s these actions are espy's whatever
51:25
suspect on automatically brings the collection and go and say let's just
51:30
make this the stopwatch
51:32
as the automatic back on way of doing things and oil for us so
51:37
eighty in my or recipes collection
51:40
so you go up a level when I'm making my
51:44
you any past that it so here's my foster structure
51:49
election om
51:53
what I got this address its cool
51:56
I she that does it of
52:00
all yes so I just had a key working my way up until I find something
52:06
as I with with backbone and I'll just as a general
52:09
design pattern in across as per AICTE it helps to be able to pass these objects
52:14
down through the tree as they become rail so
52:18
here this is the index which has all the recipes that
52:21
and its play and Scott this or messed it cited it
52:25
that they can past rescue stepped so now ass the collection the star espy's over
52:29
the
52:29
for and the form this automatically get said and I can call
52:33
create so
52:37
at this point how many people when asked two questions
52:42
do you think it's gonna work how many people are think it's not gonna work at
52:45
all
52:46
so how many people think it's actually don't work
52:51
while and people don't think this is gonna work at all
52:56
3 only people same and
52:59
okay awesome a sleep state what about a about an attack here
53:02
we got any work stuff works
53:10
their actions people here I was a little people here
53:13
one another's me wanna stop okay
53:17
Alba a threat
53:21
I'll but all this
53:24
are it's either school and will
53:27
puts way trouble
53:30
oil a
53:33
book works so why does this work
53:37
because we didn't actually wire any of this up yet
53:41
we got it to create on the collection but we didn't really
53:44
okay the reason for that is we already have this
53:49
om all so on the st.
53:54
we call create that adds to the collection
53:57
actually fires on at events
54:01
wish triggers surrender the index
54:05
in expanders remainders tablet every renders a new form which
54:10
and we'll be set for us and then
54:13
when it does that template how is now different as the rest is like this
54:16
changed
54:17
just really um doing that one wiring on all the events
54:22
helped us out when we went to go and creates a so kinda did that
54:25
I'll are for us and so disconnected
54:29
so to illustrate this iris a estar espy's
54:33
on all function
54:39
event on breast feeds on
54:45
silence knocking on wall
54:48
what's X
54:52
and maybe or they're just hammering something
54:55
gotta are religions
54:58
instruction okay good alright that's right
55:02
so anytime we fire any event here we can just say okay what happened
55:07
so let's look at what happens just
55:10
so then arrest these we got reset event and I
55:14
here's the collection impasse then again
55:17
I use an extra day I as well it on
55:20
so at the very start is reset is coming from our
55:23
batch we load up with bash so there we say our
55:27
is a gross for store at booker said
55:31
when we create this one we get a bet on risky at
55:35
and as a model that was added and there's another one there's a change on
55:39
the idea tomorrow
55:40
because are restful object when it creates it's a call back
55:44
that gives it an ID sir and this case is just as good
55:48
from local search is also a change a model because the ID changed is the
55:53
specific
55:54
event and a general and there's also
55:58
sink on the model I'll
56:01
I believe it's a local search specific but all these events actually fired all
56:06
at once and actually render
56:07
four-time so we want to optimize this we might train down which eventually
56:11
really wanna listen to the right now we're just the safe and he's
56:15
so we got all the stress those events come through so
56:20
the next step here is to actually show
56:25
rests so
56:30
all start out by asking a question again hum
56:35
where do we want to star
56:38
adding our recipe use in what we currently at
56:42
like what what point in the cove less at that level
56:45
is a good player on router we could put it on index you
56:49
or we around or
56:52
yet despite all the recipes that are in the day its
56:58
been
57:02
I'll put in action in the template to to render the issuer
57:06
yet so that's like that's the style that you would do
57:10
if you're doing like pH here else
57:13
where you're gonna say okay right here in this spot I want you to channel West
57:17
Morris you know
57:19
but the problem is that in backbone we don't want to just
57:22
dumb bitch to because we want to actually have JavaScript
57:26
and down knows that I have this wonderful findings
57:29
so what I'm gonna do is
57:32
copy this hair here enigma
57:36
form and what I really wanted to hear say like
57:39
4 a.m. look for I'm gonna and
57:45
all my rest beats
57:48
or something I'm
57:51
that way all state all the rest is up to the rest he's
57:55
day and then I'll the four-minute so
57:59
what do I do here om
58:03
Sarah I K
58:06
spotted special new you exactly right
58:10
so what I wanna do is I need some new
58:13
you what is some gonna save Rs its
58:17
you is a new practice role
58:21
that index St its
58:25
and I'm gonna give it breastfeeds
58:32
and then it here I can say
58:35
received you that render a
58:40
so that view on the index is kind of like the whole page the
58:44
header and a cab down in the formal esta but this
58:47
he was just gonna be for the the list risks yes
58:53
I'll the LL so I'll get his country BBY
58:57
view when you render it returns itself
59:00
so this is kind of like saying I could much
59:03
I or simply saying you know render and then say
59:08
and issues I'll that's kinda what
59:11
an element comes from backbone it's the element the dont know that is
59:15
automatically allocated
59:16
from you when it's created I'll
59:19
you can pass it on in if you want fine-tuning existing on
59:22
but in our case you're just going to I have a great
59:27
so this recipe view is now something we have to
59:31
you so I word around this is gonna complain and say that
59:35
is no such thing as the SPCA
59:38
so you make this
59:42
and operate that way acquittal of other forms and
59:46
or Italy's
59:52
and we can just do nothing I had a false
59:55
and now to pass and local fine
59:59
is on right here between
60:03
in the rescue state now has a tentative thats rst you that hasn't got anything
60:07
going to be a
60:09
so yeah we can do that who check we say render
60:12
function which are this
60:17
say this that RL that text
60:21
HST is go here
60:26
okay a risk he's got great so now I'm gonna do
60:30
is the collection view patter um from book
60:33
and the idea is that this use job
60:37
is to just render more substance
60:40
I'll so all that it's gonna do
60:44
it's not actually gonna have a template I'm just gonna say
60:48
is stock election that each
60:52
that's going to be an individual st
60:56
and that this is the end Bynes the sofa the generator to
61:00
recipes you instead of being down to the rest itself
61:06
them oh yes oh if I do
61:09
this
61:14
up
61:17
or fostered be a factor
61:22
yeah right so I like this and sell
61:25
om I'm gonna get we know
61:28
for this and child as cell right
61:31
but if I put a this here
61:35
I'm gonna get out so that I don't have to a bar so
61:40
so now I can't make a subview will say
61:44
I'll you walls a stroll
61:49
a index and lots of that
61:54
iraqi security model SRST to
61:57
so that you this issue is going to be responsible one st
62:01
and then assayed this stop I dollar I'll
62:05
Datta and you that render
62:08
to so what I'm doing as I'm looking over all the models
62:12
making a you for that model Anna
62:15
pending that rendered you to myself
62:18
so it's like I mean imagine this as applied to you l to watch
62:22
allies this is like my you ll object
62:25
and for each element I'm pending this new a lot
62:28
I we could actually do it as a you l'analyse I want you know that
62:34
make this the URL
62:37
and and I this is gonna crash because we don't have to rest
62:41
so we got you there let's do that real quick
62:45
with just simply text and and then we'll go from there
62:57
so we've got you we gotta render
63:03
overturned this on it and then
63:06
this dollar held up text I am recipe
63:13
and will make this act name
63:16
%uh
63:20
well
63:29
a British some stupid
63:50
thanks
64:07
cent
64:18
well I really good substrate now
64:30
night in well as the
64:33
continuing errors from that one it there okay
64:36
so now we've got his well an ally
64:39
so Eon Bulo is represented by the collection if meli
64:44
are the individual mile use so
64:48
for each is beyond see their sexism we get we're going to sell either just
64:52
don't up the sex
64:53
so now it's I'm wire up the actual model information
64:56
to be so if you want to
65:00
this could be really simple it is safe to text is
65:03
this stuff while back get day
65:10
that gives us our names um but that would be nice to actually abstract this
65:15
properly
65:16
and use nice and or something like that so
65:20
Personal Law let's use this site name all the time
65:24
at as the model
65:31
name and this is going to blow up because
65:35
ER model doesn't actually have any
65:41
so
65:44
that is yep this model sewer collection
65:49
you that my
65:54
then your weekend name turned this site get
66:13
cool we've got these showing up
66:16
and we also like to show the reads
66:19
so its time I
66:24
think to use a temp let's say the recipe
66:31
I'll let's take up these tax or not using US and allied
66:35
let's do a template for the recipe
66:49
save dollar election
66:50
its well this stuff were
66:53
of this in the problem is we don't have that type
66:58
but index
67:10
best as and years
67:13
to h2
67:17
name and that will be
67:21
he really it's
67:25
estabrook
67:51
only here night I pulled out my helper
67:56
or the
68:02
echoes something weird with refreshing and the
68:05
that the fucking as I have it set up natural for but so now we've got
68:10
our h2 but the ingredients are showing up
68:14
I'll such because it's looking for Brians
68:17
but we're actually having Reince on sky
68:20
L
68:26
while those
68:30
hundreds a now I'll
68:37
its no
68:55
top would cuz if handlebar season I'll
69:00
it alternates and abstract yeah it kinda let stand 5 stuff
69:04
I'll so I and absorbed more us
69:08
I'll but now it's gone so we've totally chief goal one here
69:13
and anything is I am because you're just using
69:17
use we have the event up found already
69:20
Creek make inexpensive breakfast roll
69:23
ingredients yes I'll here for skincare
69:27
all if we add this nah just Australia
69:30
because it's the right thing every time everything still wire so it's cool one
69:36
and the last thing we're going to do here I'll
69:39
and I think it's been about hour so or so as AM report back on this planet that
69:43
we're just at a little delete button and assign me as pretty as the sole person
69:48
that I show but that's mostly
69:49
it spent time on HTML CSS so we can you hear
69:54
is a button you some other
70:01
mixture facets weeks shot nicely on this one yeah it's about
70:09
it doesn't do anything I'm so
70:12
what I mean do just go over to my
70:16
individual risky you
70:19
and Ashley thats so events
70:22
but button
70:28
Lee so not only do you want to make that like class
70:31
on the button or something not taking any kind of but on the entire template
70:35
leaves the thing
70:35
but in our case all at once or you know you deal with it
70:39
and now you can make this leap function this
70:44
deadly this up I'll up wheelset
70:47
or so
70:54
I'm I think will happen now its own way
70:58
as we're still planning to all destroyed as far as a model
71:02
models the shorter than propagates up to the collection
71:05
the collection fires that will your move goes to the collection P
71:09
election because I wanted to be rather myself Ben does
71:12
empties itself out runners at you each element and I
71:16
and one that really doesn't show up so
71:20
recall so on
71:24
that's it or the be live coding
71:29
del um I think some other things that I want to point out here that we've been
71:33
showing is that
71:34
I'm doing ok this wiring myself I kinda do have to settle I was that you have to
71:39
get
71:39
used some other things the backbone provides as and one of the hardest
71:43
things that I found
71:44
coming up with patterns that I liked in a in a framework that doesn't really
71:48
have any opinions
71:49
and that's terrifying which is why when I first started working with backbone
71:53
pretty much we broke the entire Apple four times but I was writing it
71:57
is that stories of our are often really all that
72:01
all the fruits of that labor is not when it you cook arm
72:04
so check I'll
72:09
any questions on really anything we've done here so far new check over here
72:13
Jets just
72:18
yeah questions and Dom if use the mic as be helpful
72:22
but this is pretty much it we're pretty much done so I A
72:26
im anything you wanna ask now's the time I'll be available afterwards if you want
72:29
to check out something
72:30
a or up
72:35
i won
72:38
up
72:42
me he wants
72:49
whose
72:55
saw sold
72:59
child along
73:06
all its
73:14
once
73:23
so the question is asking my in on some other frameworks or a
73:26
extra libraries and sit on top a backbone give it more
73:29
are actually don't know a lot of the ones better
73:32
that are out there right now I tenser right a lot of nixon's myself kinda
73:37
carrying
73:37
along Rights Project or use I write them brach
73:41
or given project based on what's necessary
73:44
um I think any
73:47
anything that layers on top back on that provides more classes
73:51
more nixon's for you too mix and as you choose our heritage you choose
73:54
is and doing things that way and if they're frameworks that are our
73:59
up turning back on into a framework kinda bootstrapping setting up around
74:04
you just wanna make sure you know what you're getting into with those because
74:07
you want to make sure that the way
74:08
they like to think this is the way that you like to do things so
74:12
personally I like to write nixon's that do something simple
74:16
for example a great mix and would be to take this collection you
74:20
and be really nice it this like yes set
74:24
breakfast roll index ice-t's
74:27
it will spur stroll
74:30
up watch being x10
74:36
and then we could just do something like subview
74:41
practice role but let's ice
74:44
because rest this is actually very Jan
74:47
so we could do I simply
74:51
people in our mix by saying
74:54
scrap here
75:01
this can be a back on
75:05
its you and what I want to do is say
75:10
render actually not mister take
75:22
now the trick here is a is I'm airing on my collections and these are now to see
75:27
if you can actually
75:27
balls by you instead a
75:31
calling it outright I'm gonna say this top sabi
75:36
model is going to be the model and at
75:39
up and then just make sure that this is actually working
75:43
you say this stuff dollar outta at
75:47
home built by meant
75:55
well
75:59
so he called the cops
76:00
which its its that's up to you
76:28
okay must make well
76:34
a declaration that after this which it's just
76:38
order yeah so these are built by Amex
76:42
all these so I just wrote my selection
76:46
you as this makes a and it's only
76:50
art lost this collection
76:56
you I kinda so batter I made it
77:00
generalized to work with this sub you and I just extended
77:04
my %ah my object and just added in the sub you to call
77:08
so now I can do a whole bunch collection use as long as I all this general
77:12
pattern
77:12
and that means I can also extend here it's a and it may be this long
77:16
you all and it's not a last name a
77:20
recipe add some more stuff in there arm
77:23
in wanna see you all want this
77:27
ally tonight us
77:36
on and their allies you know it kinda book
77:39
you know you up but they do have a um last night on
77:43
and the rest that stuff just at Erics its past so
77:47
I find that the nice thing about backbone is that
77:51
on a project by project basis you can write your own extensions
77:55
in the domain language ok project and sometimes the mix and spiky little bit
78:00
more specific
78:00
the locks near is kinda what I we were talking about earlier where
78:04
yes you can generalize the idea of having a delegate access search
78:07
model but if you just be a little bit more specific and right out
78:11
sometimes this week later it that way so GE's nixon's this one super Janak
78:16
and you could just includes any back on project or put it on your
78:19
own special nixon so get bring our how
78:23
I did
78:26
acting chair yes good
78:30
um I don't like it will somebody else's namespace
78:34
but I'm a call to use I'll like I
78:38
you make my own mix think of her gray
78:43
you know and I have brought my own thing I heard a great thanks on the shot
78:47
I would make stops um the last breath
78:50
so %uh Seattle's
78:53
if you wanna abstract out the ones that are completely agnostic to your
78:57
project an excess yeah and then carry with get on with you
79:00
priced right I'm examples that alright cash
79:03
models only those from it'll have a new method I'll
79:07
though it fetches hasn't special for what does
79:10
etiquette sorry in touch so it's like a one-time motor on Al mix that is my
79:15
models that I don't wanna that's what
79:17
times sets an example one stop
79:20
edging I
79:23
dick while the idea that instead of calling fetch I call
79:26
load load call special as H nice setup Lina
79:30
so I like to write them so it's extra things
79:34
possibly yeah om you
79:38
yes I'll
79:41
I actually don't unit test by Josh
79:44
much at all I almost entirely acceptance tests
79:48
arm the main reason for that is that
79:51
I kapara onerous I the main reason for that is that
79:55
honestly Estill charmelot my javascript
79:59
and I find it doing unit testing I'm I just a player is
80:02
I'll and churning a lot as well I feel like I waz lot
80:06
I'm there but really is important is that the age
80:09
works so use a slight selenium or a WebKit driver
80:13
acceptance testing and but of um
80:16
the other thing is that a lot of this overload
80:20
is I feel like it's kinda whether
80:24
I it's kinda simple like I guess I could contest my collection you and make sure
80:29
that
80:29
I like to look at the element see what models
80:33
past 10 but this isn't incredibly complicated
80:36
and like I'm sure as hell not gonna actually
80:40
test my accessors of all you know
80:43
unless I really needed that personal test but they defied a complicated STR
80:47
I'm with a bunch of conditionals I would you test that you know
80:51
are I have used as in a bit but I'll
80:54
we are mostly just accept this I'll and if there are any questions from
80:59
the hangouts I'll a and a is too much
81:02
neighborhood
81:08
horse walls guys yes
81:11
of Ryan large fry
81:14
its so your said
81:19
yes eighty work yeah we
81:22
we do talk about his face in in the book are and I just do that
81:26
general joblessness it's Mike s all my cum
81:29
first-line here and then often you'll see
81:32
like a where strolled up models
81:36
is an object and your QBs like used as well
81:41
I or sometimes you want to do it a sonic
81:44
on texts a late breakfast role dot admin
81:49
and that this is guy it's all models
81:52
you know and can a space like that up so that helps a lot
81:56
um the main thing for life working on teams and and that sort of thing is
82:01
is splitting up into multiple files so here I just have my whole practice
82:04
strolling in a closure
82:06
um but you wouldn't want to actually do this on a real project makes a lot of
82:09
sense to take
82:10
he's individual items but them in our own files
82:13
and I used RJs or use something like sprockets
82:17
as are ails us i fine bill that together
82:20
now helps a lot om
82:24
as far as research is like this Facebook I'll
82:27
I there's another book by I'm ideas money it's a
82:31
a free open source book that is so working on it's way more about beginner
82:35
level
82:36
book gives you a awesome comprehensive introduction to
82:39
a book that you wrote is more like intermediate bass it's kinda like
82:42
if you want to learn C plus plus by find the game before design patterns book
82:46
you know you kinda like diving headfirst right into that stuff
82:50
um and it's like doing that you know or I if you want more
82:54
guided tour than up ideas monies book is good as well
82:58
I think he's actually doing it so rightly you can get a ada through them
83:01
but it's also
83:02
realign and I'll
83:06
a up I was working out a back on Rails but that seems that's all
83:10
I don't know the are versus number you can buy
83:13
I'll yeah you find yourself back here
83:18
it actors yours embassy
83:22
right you perhaps Assad's
83:25
yeah he's an ass a compilation I plan to bring my template set
83:29
which will really ends up making a javascript file temples
83:32
a stand to any that's out there for you
83:36
vs rockets will do asset appellation with I'm
83:39
handlebar samples for you I believe require JS can't you
83:42
but I am NOT only all
83:46
yeah that you are everything all
83:51
when she all a.m. senior all
83:54
you you
83:58
up maybe like a while ago I don't member whose
84:02
okay and I i I don't know Rana yeah I know that I did model some of my nixon
84:07
styles
84:08
after the way that they do that nixon's like the way they do these
84:11
mix extensions all they are they had a freeware doing that
84:17
hmm a more questions
84:22
she yeah do you know use model
84:26
chichi sons us you rather than
84:29
in ass I feel like that's even more
84:33
up and naked and direct way that passes model and you
84:37
I like having was layers to manipulate things that each
84:40
of layer on the way down like you can then decide how to manipulate the models
84:45
day tomorrow can decide how to
84:47
are it stated actual attributes I'm sometimes the day you getting servers
84:52
pretty chunky and you gotta clean up before the model even presents the day
84:56
so I like to avoid is also have a lot here
84:59
om in the view you want to talk to you
85:02
the mall and only the ball not a model that fits
85:06
in the model you want to talk to you're actually it's
85:09
so ask the attributes as a model TJ some all with you
85:13
to the you is like a triple I
85:16
reference like three you're going to 3ds the use access and Model Act
85:19
models attributes so that's an even deeper
85:22
by additional so yeah like
85:25
with those layers he get along with than I
85:29
typing our successors but there is a pool and your editor
85:32
upbeat ace find a replacement
85:37
yet
85:41
from home use says
85:45
San armies sir
85:48
s slice Anne
85:53
its that nonsense it
85:56
so do you just I am for your own something I'm great you Julia
85:59
like fine replaced on characters or something RSS
86:03
on and a farce it's a it's a mustache extension say
86:06
its usually CA such
86:10
and peace in he's not I'll
86:13
ons its yet rafts
86:17
yet speed you know that's kinda nice thing about
86:20
akron is a if you want to do something a certain way because you think it's
86:24
awesome
86:24
just do at a if it works for you it doesn't hurt
86:29
Joe Hart right if it starts to hurt anyone all its amenities
86:32
ace knits buying
86:35
sets says on he ups and downs
86:40
sedans I'm strong
86:44
starts yes sir if that's an easy way for you to organize it to put them on one
86:49
it's not a four thousand like a while it sucks stroll through that not been
86:52
and that works yet he's
86:56
or I use handlebars just because it on
86:59
mostly because it calls functions for because it does this
87:03
I'll name which is a function
87:06
I don't have to write yes so instead of calling it I can just write
87:11
name and made it actually AL
87:16
on cheap here name and will call functions
87:19
finds the menu templates the JavaScript implementation I did cleaner
87:23
also use these templates are a little bit more cortical other languages
87:27
because they don't have jobs in Taksim I like
87:30
so I like being able to keep the JavaScript outta my temples and nation I
87:34
got
87:37
he
87:41
this
87:45
what's its I
87:52
as or
87:57
its yeah yet yes %uh the comment was that
88:01
I'll underscores happening by default looks a lot like
88:04
ERP with the less than two percent equals for a
88:07
bring a and I think we're underscoring with and of course teaches your own
88:11
blunders
88:11
watch it upsets be yeah
88:15
saw is is yeah
88:18
alls jobs I'm
88:22
aus its I use
88:25
right yet in CoffeeScript as it looks like r-spec so keeps the languages
88:29
nicely together and I really like that but every now and then it gets me
88:32
because I start reading ruby in my chest
88:34
files cents as I get updates yet
88:37
its creator he's
88:41
sauce
88:44
ski for I I'll
88:48
Las he's yeah it's it slow to stop
88:51
you know is no. like a
88:55
this guy for example would be up record
88:58
role but next stop us actually
89:01
in buses up but then
89:05
yeah this in this
89:08
ashes in office he is about that
89:12
I'm yeah but collection you for example this I would be way easier
89:16
it's a it's tough election so
89:20
collection each I'll
89:24
Awdal I'll
89:27
you horse this stuff
89:31
so you I'll model
89:34
an autocue values to and that RL
89:38
and you
89:42
so that's that's nicer it's easy to read get just getting real
89:45
I'll punctuation even though seems trivial help with the rebuilding a lot
89:49
see I agree
89:52
we or all heads
89:55
back those are you can also do
89:58
I'll
90:03
but yeah shining star
90:09
yeah you can do out the cops course I'll classes dance
90:12
family and there's a test in the back on my way to make sure that that that stays
90:16
works %uh so yeah using the class stands
90:19
and then render oh this is a test to make sure that class
90:24
extend that extending back on you classes works like
90:27
extend is actually doesn't under those they have to pass a little bit we're
90:31
upset so it goes away and render becomes
90:35
a narrow I'll and this last
90:38
s so yeah it is a lot is likely yes you like I could
90:46
or me it one more a few here a long time
90:54
i mean but against you go
90:57
he's I'll all
91:01
a out I'll all
91:05
I'll sir on
91:09
if not see you want to know how this works here the template and speak
91:14
well %eh
91:17
SK ok all
91:20
on 0 reso
91:24
the script which has the and of course I as an IT I
91:28
call index recipes so if I might also
91:32
and I asked or
91:36
and I S recipes well
91:40
om RSP
91:44
I guess faster as HTML I get
91:47
that stuff so I can say handlebars
91:52
I'll I'll
91:57
that stress be up
92:01
issue now
92:04
so that as i say like bar T
92:08
and he is this handlebar Tampa like out he looks like a name
92:12
louanne ingredients far
92:19
and that his mediastinal to a bar extent so that's how the handlebars and what's
92:22
worse
92:23
and my job to step out the very top I have his helper method I'll
92:28
it really does exactly what I show and a bar stockpile
92:31
dollar and that binds I V it Nate frere passer
92:34
up message satire a little help for that like
92:38
Yanks I'll you can just keep calling
92:41
I'll so I did template I'll
92:46
in next SP and although
92:49
name you know to the streets
92:52
yeah I could be like that and keep using them that way
92:59
alright okay for yeah I think we're good so thanks a lot
93:03
and I'm gonna post the link to this video if you want to spend all that time
93:07
all over again
93:08
asleep the same thing up I feel free to come up and ask you some questions
93:13
right I'm gonna stick around and I think sumner
93:16
XK
93:19
them

About the Author

Iwebslog Labs

Author & Editor

Has laoreet percipitur ad. Vide interesset in mei, no his legimus verterem. Et nostrum imperdiet appellantur usu, mnesarchum referrentur id vim.

Post a Comment

 
Iwebslog Blog © 2015 - Designed by Templateism.com