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]