1
00:00:00,690 --> 00:00:01,470
I'm Nick Petit.

2
00:00:01,470 --> 00:00:02,300
>> I'm Jason Seifer.

3
00:00:02,300 --> 00:00:04,040
>> And you're watching the Treehouse Show.

4
00:00:04,040 --> 00:00:05,790
Your weekly dose of internets where we
talk

5
00:00:05,790 --> 00:00:08,960
about all things web design, web
development and more.

6
00:00:08,960 --> 00:00:13,850
>> For a free month of Treehouse, head on
over to teamtreehouse.com/show.

7
00:00:13,850 --> 00:00:18,600
In this episode we'll be talking about
App.js to make mobile web apps.

8
00:00:18,600 --> 00:00:23,380
We'll be talking about LoopBack, a new web
app framework, SVGs, and more.

9
00:00:23,380 --> 00:00:24,651
>> Let's check it out.

10
00:00:24,651 --> 00:00:29,879
[MUSIC]

11
00:00:29,879 --> 00:00:32,684
>> First up, we have a project called
App.js.

12
00:00:32,684 --> 00:00:36,620
App.js is a templating system and

13
00:00:36,620 --> 00:00:40,260
a lightweight JavaScript UI library for
creating

14
00:00:40,260 --> 00:00:42,260
mobile web apps that behave like

15
00:00:42,260 --> 00:00:46,750
native apps, sacrificing neither
performance nor polish.

16
00:00:46,750 --> 00:00:49,610
I know that because it says it on the web
page.

17
00:00:49,610 --> 00:00:54,050
They have themes for both IOS and Android
and it provides a lot

18
00:00:54,050 --> 00:00:59,150
of common UI elements that you would
expect to see in a framework.

19
00:00:59,150 --> 00:01:02,310
So, we can change the top bar color there.

20
00:01:02,310 --> 00:01:04,210
It provides just a whole bunch of

21
00:01:04,210 --> 00:01:07,490
different options for lists, items,
buttons, all

22
00:01:07,490 --> 00:01:10,020
sorts of inputs, and pretty much
everything

23
00:01:10,020 --> 00:01:13,190
that you would expect from framework like
this.

24
00:01:13,190 --> 00:01:16,550
The demo works for both iOS and Android if
you wanna get

25
00:01:16,550 --> 00:01:20,500
a little bit more native with how your app
is going to look.

26
00:01:20,500 --> 00:01:23,512
Now, there is some very thorough
documentation

27
00:01:23,512 --> 00:01:26,940
that goes over all of the different
components.

28
00:01:26,940 --> 00:01:28,750
Now this is broken down into two

29
00:01:28,750 --> 00:01:33,490
things where pages have controllers and
navigation stacks.

30
00:01:33,490 --> 00:01:39,530
A controller allows you access to, in this
example, they have the Home controller,

31
00:01:39,530 --> 00:01:44,740
which will be the main stack inside of the
application.

32
00:01:44,740 --> 00:01:47,790
You can define certain functions to run
whenever the

33
00:01:47,790 --> 00:01:52,780
page is loaded, and also define different
functionality inside there.

34
00:01:52,780 --> 00:01:56,560
Now there are a ton of different
components inside here.

35
00:01:56,560 --> 00:01:59,580
You can see it looks very much like a
native application.

36
00:01:59,580 --> 00:02:02,690
The speed is also pretty good.

37
00:02:02,690 --> 00:02:06,210
I did not notice any lag when I was going
through this site.

38
00:02:06,210 --> 00:02:08,510
Everything is available up on GitHub like

39
00:02:08,510 --> 00:02:11,240
pretty much everything we talked about and
you

40
00:02:11,240 --> 00:02:12,950
can go through and check out the

41
00:02:12,950 --> 00:02:16,060
documentation and maybe create a project
with it.

42
00:02:16,060 --> 00:02:17,020
I don't know.

43
00:02:17,020 --> 00:02:17,370
If you wanna.

44
00:02:17,370 --> 00:02:19,310
It's pretty nice.

45
00:02:19,310 --> 00:02:20,070
>> You don't have to.

46
00:02:20,070 --> 00:02:20,220
>> Yeah.

47
00:02:20,220 --> 00:02:20,950
>> It's, it's optional.

48
00:02:20,950 --> 00:02:22,160
We just throw that out there for you.

49
00:02:22,160 --> 00:02:23,500
It's up to you whatever you do with it.

50
00:02:23,500 --> 00:02:24,550
>> It's up to you.

51
00:02:24,550 --> 00:02:27,470
Next up, is SVGO GUI.

52
00:02:27,470 --> 00:02:32,230
It is a node webkit based GUI for SVGO.

53
00:02:32,230 --> 00:02:32,455
>> Oh!

54
00:02:32,455 --> 00:02:34,659
>> [CROSSTALK] What does that mean?

55
00:02:34,659 --> 00:02:36,209
>> GVS.

56
00:02:36,209 --> 00:02:36,789
>> [INAUDIBLE].

57
00:02:36,789 --> 00:02:40,420
>> That's SVGO backwards.

58
00:02:40,420 --> 00:02:43,600
>> So GUI graphical user interva,
interface.

59
00:02:43,600 --> 00:02:47,520
SVGO, Scalable Vector Graphic Optimizer.

60
00:02:47,520 --> 00:02:49,030
Wait, what the heck is that?

61
00:02:49,030 --> 00:02:51,990
I've heard of SVGs, but what is SVGO?

62
00:02:51,990 --> 00:02:58,920
Well, it is this library that allows you
to optimize SVG graphics.

63
00:02:58,920 --> 00:03:02,820
And scroll down the page here, you can see
that

64
00:03:02,820 --> 00:03:07,700
it removes all sorts of bits of Metadata
that you

65
00:03:07,700 --> 00:03:11,030
can safely remove and you don't really
need in an

66
00:03:11,030 --> 00:03:16,220
SVG when it's outputted from a program
like Illustrator for example.

67
00:03:16,220 --> 00:03:23,290
So, you can remove all of that stuff and
get a much smaller file size for your SVG.

68
00:03:23,290 --> 00:03:30,020
What this project is, SVGO GUI is, it's a
desktop based app, where

69
00:03:30,020 --> 00:03:35,120
you can just drag and drop your SVG files
and then immediately see the results.

70
00:03:35,120 --> 00:03:38,490
And I like that they have this little
column here that says Profit.

71
00:03:38,490 --> 00:03:43,440
That's basically the percentage that
you've decreased the file size.

72
00:03:43,440 --> 00:03:44,470
So it's pretty cool.

73
00:03:44,470 --> 00:03:48,640
You can download it for OS X, Windows and
it's still

74
00:03:48,640 --> 00:03:53,820
not available for Linux, but definitely be
sure to check that out.

75
00:03:53,820 --> 00:03:54,680
>> Very, very cool.

76
00:03:54,680 --> 00:03:55,525
Nice, nice project.

77
00:03:55,525 --> 00:03:56,400
>> Mm-hm.

78
00:03:56,400 --> 00:03:59,250
>> Next up we have a project called
LoopBack.

79
00:03:59,250 --> 00:04:05,110
This is a very interesting EPiServer that
is powered by node.js.

80
00:04:05,110 --> 00:04:07,750
Now, this is a pretty huge project and
framework, so

81
00:04:07,750 --> 00:04:10,487
we're not gonna get into everything about
it, just kind of

82
00:04:10,487 --> 00:04:12,430
wanted to put it on your radar if you're
interested

83
00:04:12,430 --> 00:04:16,050
in doing any kind of back end development
with no JS.

84
00:04:16,050 --> 00:04:20,370
It's very, very easy to install, you just
install it with NPM like you're normally

85
00:04:20,370 --> 00:04:26,270
used to and then create and generate your
project and you are good to go.

86
00:04:26,270 --> 00:04:32,400
Create your models and then boom, you get
a brand new project with a rest API.

87
00:04:32,400 --> 00:04:37,990
Now it also has client SDKs that make it
very easy to use this

88
00:04:37,990 --> 00:04:43,370
back end server for Android, iOS, and
there is even an Angular plug-in.

89
00:04:43,370 --> 00:04:47,310
It works with most data bases and it's,
it's really cool.

90
00:04:47,310 --> 00:04:49,630
If we scroll down here it gives you an API

91
00:04:49,630 --> 00:04:54,000
explorer very, very easily like it's just
built right in.

92
00:04:54,000 --> 00:04:57,500
You can explore the API along with
documentation for

93
00:04:57,500 --> 00:04:59,640
what all the different parts of the API
do.

94
00:04:59,640 --> 00:05:04,200
It also supports push notifications and
file attributes.

95
00:05:04,200 --> 00:05:06,610
You can write to the file system pretty
easily.

96
00:05:06,610 --> 00:05:08,830
Anyway, like I said, it is too big of

97
00:05:08,830 --> 00:05:10,950
a project to go through everything on the
show.

98
00:05:10,950 --> 00:05:11,980
Wanted to put it on your radar.

99
00:05:11,980 --> 00:05:13,360
You can find more information in the

100
00:05:13,360 --> 00:05:16,720
show notes at youtube.com/gotreehouse and
also don't

101
00:05:16,720 --> 00:05:22,770
forget to sign up for a 30 day free trial
of Treehouse at teamtreehouse.com/show.

102
00:05:22,770 --> 00:05:26,740
>> Next up are some single element CSS
spinners.

103
00:05:26,740 --> 00:05:27,510
Well what is that?

104
00:05:27,510 --> 00:05:30,780
Basically if you have something that you
need to load into

105
00:05:30,780 --> 00:05:35,150
the page, you might wanna show some sort
of spinner or

106
00:05:35,150 --> 00:05:39,520
animated image to indicate that the page
is indeed loading, something

107
00:05:39,520 --> 00:05:43,850
is happening, and you're about to see the
data that you requested.

108
00:05:43,850 --> 00:05:49,730
Well, sometimes you can load in an
animated GIF for this sort of thing, but

109
00:05:49,730 --> 00:05:52,830
these just use a single element, which in

110
00:05:52,830 --> 00:05:56,280
some instances might be a little bit
better.

111
00:05:56,280 --> 00:05:57,980
So, how are they doing this?

112
00:05:57,980 --> 00:06:02,390
This is just using a single HTML element
for each one of these.

113
00:06:02,390 --> 00:06:07,910
How could we possibly create circles like
this and let alone animate them?

114
00:06:07,910 --> 00:06:13,660
Well, if we view the source on this, you
can see that there's a bunch of

115
00:06:13,660 --> 00:06:16,650
animation key frames here and what they're
doing

116
00:06:16,650 --> 00:06:20,950
in each key frame is creating several box
shadows.

117
00:06:20,950 --> 00:06:22,432
I thought this was pretty clever.

118
00:06:22,432 --> 00:06:28,430
So they're taking a single HTML element
and then they are displacing

119
00:06:28,430 --> 00:06:33,980
several box shadows and just offsetting
them from the element in the center.

120
00:06:33,980 --> 00:06:37,410
And then over time, they animate that same
box

121
00:06:37,410 --> 00:06:43,100
shadow property and that's how you get the
spinning animation.

122
00:06:43,100 --> 00:06:44,780
All of these work in a pretty similar

123
00:06:44,780 --> 00:06:47,910
fashion, but even if you're not interested
in these

124
00:06:47,910 --> 00:06:51,240
CSS spinners themselves, it's still pretty
cool to check

125
00:06:51,240 --> 00:06:53,330
out just to see how this is actually
built.

126
00:06:53,330 --> 00:06:54,980
>> Yeah, very, very nice.

127
00:06:54,980 --> 00:06:57,090
Next up we have a post over on

128
00:06:57,090 --> 00:07:03,240
the Chrome dev tools documentation on
JavaScript memory profiling.

129
00:07:03,240 --> 00:07:07,650
Memory profiling is very important as we
have larger single page

130
00:07:07,650 --> 00:07:11,570
applications that are going to be long
running inside of a browser

131
00:07:11,570 --> 00:07:15,850
tab and when you have memory leaks that
can be pretty devastating

132
00:07:15,850 --> 00:07:21,270
on smaller devices with limited memory,
such as phones and certain tablets.

133
00:07:21,270 --> 00:07:25,530
So, this documentation in the Chrome dev
tools goes through

134
00:07:25,530 --> 00:07:30,510
and helps you diagnose how to find these
memory leaks.

135
00:07:30,510 --> 00:07:35,750
What happens throughout the entire stack
and even how to do snapshots and

136
00:07:35,750 --> 00:07:38,990
determine where the memory leaks are
coming from and how to fix them.

137
00:07:38,990 --> 00:07:42,340
There is a ton of information in this
post.

138
00:07:42,340 --> 00:07:44,290
We're not gonna be able to go through it
all, but

139
00:07:44,290 --> 00:07:48,633
it does have some really really
interesting things that it touches on.

140
00:07:48,633 --> 00:07:51,247
I'm gonna say go down towards the bottom
here.

141
00:07:51,247 --> 00:07:54,730
It shows you garbage collection is
something that you need to

142
00:07:54,730 --> 00:07:58,850
be aware of also when you are dealing with
memory leaks.

143
00:07:58,850 --> 00:08:04,370
Because the garbage can be collected at
different points in the cleanup process.

144
00:08:04,370 --> 00:08:06,170
What exactly does that mean?

145
00:08:06,170 --> 00:08:08,170
So, let's use this example right here.

146
00:08:08,170 --> 00:08:13,020
You have a body tag with a few divs
underneath it, this div

147
00:08:13,020 --> 00:08:17,580
with the ID of tree has a couple of
unordered lists inside it.

148
00:08:17,580 --> 00:08:22,160
Let's say we are going through and we want
to remove this div with the

149
00:08:22,160 --> 00:08:28,280
ID of tree and also do something with this
anchor with an ID of leaf.

150
00:08:28,280 --> 00:08:31,850
Well depending on where and when we remove
this

151
00:08:31,850 --> 00:08:35,190
items from the dom, the garbage collector
may not go

152
00:08:35,190 --> 00:08:38,770
back through and remove it from memory, if
it still

153
00:08:38,770 --> 00:08:42,160
has a reference to it that hasn't been
picked up.

154
00:08:42,160 --> 00:08:44,650
So, this post shows you how to use the dev

155
00:08:44,650 --> 00:08:47,990
tools to actually go through and diagnose
those sort of things.

156
00:08:47,990 --> 00:08:51,670
Like I said, very, very in-depth, cannot
read it all on here,

157
00:08:51,670 --> 00:08:56,040
but definitely check it out, especially if
you're building single page applications.

158
00:08:56,040 --> 00:08:58,620
Next up is Skippr, which is a lite

159
00:08:58,620 --> 00:09:05,230
wig a lightweight faster slide show plugin
for Jquery.

160
00:09:05,230 --> 00:09:08,906
So if you look here I can click these
arrows,

161
00:09:08,906 --> 00:09:12,150
and I can go to different images in a
slide show.

162
00:09:12,150 --> 00:09:12,710
>> Wow.

163
00:09:12,710 --> 00:09:14,510
>> Just like you would expect so,.

164
00:09:14,510 --> 00:09:17,670
>> You were navigating us through that
slide show like a good skipper.

165
00:09:18,690 --> 00:09:22,650
>> So nothing terribly special here, but
it is pretty

166
00:09:22,650 --> 00:09:26,420
lightweight and it's very fast, and it's
just really well done.

167
00:09:26,420 --> 00:09:28,929
>> If you skip one of the images, would
you say

168
00:09:28,929 --> 00:09:32,575
you were, you were a skipper of images
[CROSSTALK] slide show?

169
00:09:32,575 --> 00:09:34,352
>> You could say that Jason.

170
00:09:34,352 --> 00:09:35,319
>> I did say it.

171
00:09:35,319 --> 00:09:36,979
[BLANK_AUDIO]

172
00:09:36,979 --> 00:09:40,088
>> So if you include the skippr CSS at the
top

173
00:09:40,088 --> 00:09:44,937
of your page, and then you include the
skippr JavaScript at the

174
00:09:44,937 --> 00:09:50,062
bottom of your page, just after you
include jQuery, then you're

175
00:09:50,062 --> 00:09:55,210
all set up and you're ready to include the
HTML that you'll need.

176
00:09:55,210 --> 00:10:00,560
So, you just create this container and
then you create a target

177
00:10:00,560 --> 00:10:05,440
and then inside of that you create these
divs with a background image.

178
00:10:05,440 --> 00:10:11,670
And then you can initiate it with a little
bit of jQuery just like that and

179
00:10:11,670 --> 00:10:15,390
of course if you want to set some of the
different options here, you can do that.

180
00:10:15,390 --> 00:10:17,030
You can adjust the speed.

181
00:10:17,030 --> 00:10:19,140
Say for example you didn't want to have
the

182
00:10:19,140 --> 00:10:22,640
arrows, you could set that to False and so
on.

183
00:10:22,640 --> 00:10:24,040
So there's a bunch of different options

184
00:10:24,040 --> 00:10:27,360
there, very customizable, just really well
done.

185
00:10:27,360 --> 00:10:29,900
Definitely be sure to check that out.

186
00:10:29,900 --> 00:10:30,295
>> Very nice.

187
00:10:30,295 --> 00:10:31,050
>> Mm-hm.

188
00:10:31,050 --> 00:10:33,310
>> Well, that's about all we have time for
on the show today.

189
00:10:33,310 --> 00:10:35,200
I am @jseifer on Twitter.

190
00:10:35,200 --> 00:10:36,880
For more information on anything we talked

191
00:10:36,880 --> 00:10:40,240
about, check out our show notes at
youtube.com/gotreehouse.

192
00:10:40,240 --> 00:10:42,898
You can also search for us on iTunes, we
are The Treehouse Show.

193
00:10:42,898 --> 00:10:45,340
>> And I'm @NickRP on Twitter.

194
00:10:45,340 --> 00:10:47,680
For more videos like this one about

195
00:10:47,680 --> 00:10:50,910
web design, web development, mobile
business, and so

196
00:10:50,910 --> 00:10:53,020
much more, be sure to check us out

197
00:10:53,020 --> 00:10:58,060
at TeamTreeHouse.com/show for a 30 day
free trial.

198
00:10:58,060 --> 00:11:01,443
Thank you so much for watching and we will
see you next week.

199
00:11:01,443 --> 00:11:08,199
[MUSIC]