Episode 95: App js, LoopBack, SVGO

I'm Nick Petit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching the Treehouse Show. 0:02 Your weekly dose of internets where we talk 0:04 about all things web design, web development and more. 0:05 >> For a free month of Treehouse, head on over to teamtreehouse.com/show. 0:08 In this episode we'll be talking about App.js to make mobile web apps. 0:13 We'll be talking about LoopBack, a new web app framework, SVGs, and more. 0:18 >> Let's check it out. 0:23 [MUSIC] 0:24 >> First up, we have a project called App.js. 0:29 App.js is a templating system and 0:32 a lightweight JavaScript UI library for creating 0:36 mobile web apps that behave like 0:40 native apps, sacrificing neither performance nor polish. 0:42 I know that because it says it on the web page. 0:46 They have themes for both IOS and Android and it provides a lot 0:49 of common UI elements that you would expect to see in a framework. 0:54 So, we can change the top bar color there. 0:59 It provides just a whole bunch of 1:02 different options for lists, items, buttons, all 1:04 sorts of inputs, and pretty much everything 1:07 that you would expect from framework like this. 1:10 The demo works for both iOS and Android if you wanna get 1:13 a little bit more native with how your app is going to look. 1:16 Now, there is some very thorough documentation 1:20 that goes over all of the different components. 1:23 Now this is broken down into two 1:26 things where pages have controllers and navigation stacks. 1:28 A controller allows you access to, in this example, they have the Home controller, 1:33 which will be the main stack inside of the application. 1:39 You can define certain functions to run whenever the 1:44 page is loaded, and also define different functionality inside there. 1:47 Now there are a ton of different components inside here. 1:52 You can see it looks very much like a native application. 1:56 The speed is also pretty good. 1:59 I did not notice any lag when I was going through this site. 2:02 Everything is available up on GitHub like 2:06 pretty much everything we talked about and you 2:08 can go through and check out the 2:11 documentation and maybe create a project with it. 2:12 I don't know. 2:16 If you wanna. 2:17 It's pretty nice. 2:17 >> You don't have to. 2:19 >> Yeah. 2:20 >> It's, it's optional. 2:20 We just throw that out there for you. 2:20 It's up to you whatever you do with it. 2:22 >> It's up to you. 2:23 Next up, is SVGO GUI. 2:24 It is a node webkit based GUI for SVGO. 2:27 >> Oh! 2:32 >> [CROSSTALK] What does that mean? 2:32 >> GVS. 2:34 >> [INAUDIBLE]. 2:36 >> That's SVGO backwards. 2:36 >> So GUI graphical user interva, interface. 2:40 SVGO, Scalable Vector Graphic Optimizer. 2:43 Wait, what the heck is that? 2:47 I've heard of SVGs, but what is SVGO? 2:49 Well, it is this library that allows you to optimize SVG graphics. 2:51 And scroll down the page here, you can see that 2:58 it removes all sorts of bits of Metadata that you 3:02 can safely remove and you don't really need in an 3:07 SVG when it's outputted from a program like Illustrator for example. 3:11 So, you can remove all of that stuff and get a much smaller file size for your SVG. 3:16 What this project is, SVGO GUI is, it's a desktop based app, where 3:23 you can just drag and drop your SVG files and then immediately see the results. 3:30 And I like that they have this little column here that says Profit. 3:35 That's basically the percentage that you've decreased the file size. 3:38 So it's pretty cool. 3:43 You can download it for OS X, Windows and it's still 3:44 not available for Linux, but definitely be sure to check that out. 3:48 >> Very, very cool. 3:53 Nice, nice project. 3:54 >> Mm-hm. 3:55 >> Next up we have a project called LoopBack. 3:56 This is a very interesting EPiServer that is powered by node.js. 3:59 Now, this is a pretty huge project and framework, so 4:05 we're not gonna get into everything about it, just kind of 4:07 wanted to put it on your radar if you're interested 4:10 in doing any kind of back end development with no JS. 4:12 It's very, very easy to install, you just install it with NPM like you're normally 4:16 used to and then create and generate your project and you are good to go. 4:20 Create your models and then boom, you get a brand new project with a rest API. 4:26 Now it also has client SDKs that make it very easy to use this 4:32 back end server for Android, iOS, and there is even an Angular plug-in. 4:37 It works with most data bases and it's, it's really cool. 4:43 If we scroll down here it gives you an API 4:47 explorer very, very easily like it's just built right in. 4:49 You can explore the API along with documentation for 4:54 what all the different parts of the API do. 4:57 It also supports push notifications and file attributes. 4:59 You can write to the file system pretty easily. 5:04 Anyway, like I said, it is too big of 5:06 a project to go through everything on the show. 5:08 Wanted to put it on your radar. 5:10 You can find more information in the 5:11 show notes at youtube.com/gotreehouse and also don't 5:13 forget to sign up for a 30 day free trial of Treehouse at teamtreehouse.com/show. 5:16 >> Next up are some single element CSS spinners. 5:22 Well what is that? 5:26 Basically if you have something that you need to load into 5:27 the page, you might wanna show some sort of spinner or 5:30 animated image to indicate that the page is indeed loading, something 5:35 is happening, and you're about to see the data that you requested. 5:39 Well, sometimes you can load in an animated GIF for this sort of thing, but 5:43 these just use a single element, which in 5:49 some instances might be a little bit better. 5:52 So, how are they doing this? 5:56 This is just using a single HTML element for each one of these. 5:57 How could we possibly create circles like this and let alone animate them? 6:02 Well, if we view the source on this, you can see that there's a bunch of 6:07 animation key frames here and what they're doing 6:13 in each key frame is creating several box shadows. 6:16 I thought this was pretty clever. 6:20 So they're taking a single HTML element and then they are displacing 6:22 several box shadows and just offsetting them from the element in the center. 6:28 And then over time, they animate that same box 6:33 shadow property and that's how you get the spinning animation. 6:37 All of these work in a pretty similar 6:43 fashion, but even if you're not interested in these 6:44 CSS spinners themselves, it's still pretty cool to check 6:47 out just to see how this is actually built. 6:51 >> Yeah, very, very nice. 6:53 Next up we have a post over on 6:54 the Chrome dev tools documentation on JavaScript memory profiling. 6:57 Memory profiling is very important as we have larger single page 7:03 applications that are going to be long running inside of a browser 7:07 tab and when you have memory leaks that can be pretty devastating 7:11 on smaller devices with limited memory, such as phones and certain tablets. 7:15 So, this documentation in the Chrome dev tools goes through 7:21 and helps you diagnose how to find these memory leaks. 7:25 What happens throughout the entire stack and even how to do snapshots and 7:30 determine where the memory leaks are coming from and how to fix them. 7:35 There is a ton of information in this post. 7:38 We're not gonna be able to go through it all, but 7:42 it does have some really really interesting things that it touches on. 7:44 I'm gonna say go down towards the bottom here. 7:48 It shows you garbage collection is something that you need to 7:51 be aware of also when you are dealing with memory leaks. 7:54 Because the garbage can be collected at different points in the cleanup process. 7:58 What exactly does that mean? 8:04 So, let's use this example right here. 8:06 You have a body tag with a few divs underneath it, this div 8:08 with the ID of tree has a couple of unordered lists inside it. 8:13 Let's say we are going through and we want to remove this div with the 8:17 ID of tree and also do something with this anchor with an ID of leaf. 8:22 Well depending on where and when we remove this 8:28 items from the dom, the garbage collector may not go 8:31 back through and remove it from memory, if it still 8:35 has a reference to it that hasn't been picked up. 8:38 So, this post shows you how to use the dev 8:42 tools to actually go through and diagnose those sort of things. 8:44 Like I said, very, very in-depth, cannot read it all on here, 8:47 but definitely check it out, especially if you're building single page applications. 8:51 Next up is Skippr, which is a lite 8:56 wig a lightweight faster slide show plugin for Jquery. 8:58 So if you look here I can click these arrows, 9:05 and I can go to different images in a slide show. 9:08 >> Wow. 9:12 >> Just like you would expect so,. 9:12 >> You were navigating us through that slide show like a good skipper. 9:14 >> So nothing terribly special here, but it is pretty 9:18 lightweight and it's very fast, and it's just really well done. 9:22 >> If you skip one of the images, would you say 9:26 you were, you were a skipper of images [CROSSTALK] slide show? 9:28 >> You could say that Jason. 9:32 >> I did say it. 9:34 [BLANK_AUDIO] 9:35 >> So if you include the skippr CSS at the top 9:36 of your page, and then you include the skippr JavaScript at the 9:40 bottom of your page, just after you include jQuery, then you're 9:44 all set up and you're ready to include the HTML that you'll need. 9:50 So, you just create this container and then you create a target 9:55 and then inside of that you create these divs with a background image. 10:00 And then you can initiate it with a little bit of jQuery just like that and 10:05 of course if you want to set some of the different options here, you can do that. 10:11 You can adjust the speed. 10:15 Say for example you didn't want to have the 10:17 arrows, you could set that to False and so on. 10:19 So there's a bunch of different options 10:22 there, very customizable, just really well done. 10:24 Definitely be sure to check that out. 10:27 >> Very nice. 10:29 >> Mm-hm. 10:30 >> Well, that's about all we have time for on the show today. 10:31 I am @jseifer on Twitter. 10:33 For more information on anything we talked 10:35 about, check out our show notes at youtube.com/gotreehouse. 10:36 You can also search for us on iTunes, we are The Treehouse Show. 10:40 >> And I'm @NickRP on Twitter. 10:42 For more videos like this one about 10:45 web design, web development, mobile business, and so 10:47 much more, be sure to check us out 10:50 at TeamTreeHouse.com/show for a 30 day free trial. 10:53 Thank you so much for watching and we will see you next week. 10:58 [MUSIC] 11:01

You need to sign up for Treehouse in order to set up Workspace

Sign up