 Whatever so I want to just talk about some stuff. I've been doing for the last three months or so With a new project. I freelance my name is Sebastian And that's my github Because seabass is cool This is the project that I've been working on lately. It's a it's a it's a local startup called mig me There are social network. They make some chat applications. They used to be really huge in countries like like Nepal and stuff Some of you here have worked there So I've been kind of building a new website a web app for them a front-end app As well as doing some API stuff, which I will not talk about anymore It's called surfboard that's a sort of a codename This is the npm page and I wanted to just talk about some of the stack which I sort of divide into three different sections The infrastructure the tooling and sort of the app itself, right? I'm gonna talk about mostly the infrastructure right now because I was preparing sort of the content for this talk And I realized that there's too much to talk about all these other things as well So maybe I'll do that another another time or I'll put it on my blog or something Okay so I Was writing out a bunch of content and then I magically deleted it just as I was sitting there I Sorry for that But it's okay because it's mostly just showing all showing how I've been doing stuff. It's all like live stuff. Anyway so, I mean if I'll go through like really quickly like I'm just hoping that this thing this this information sort of helps people making decisions when when you're deciding to what to use when you're doing a Modern sort of front-end app. So SEM you might you know, obviously choose github. There's other solutions out there, but there's really only one right choice So, okay, so my project I'll show you some of the stuff that I like to set up This is like really awkward. Can I sit on this side? I'll join you guys and girls Okay So So one and one one one one one tip that I would give everyone is make this pretty Especially if it's open source, but even if it's not if it's like an internal project. So I got one of the Lovely designers to do a lovely design Put everything in here all these all these badges put that all in there link to everything that you use So we've got multiple CIs. We got code coverage all different kind of SAS tools the versioning You know, even how we as a team discuss this stuff even though this is just two people right now I think it's really important that you document this Okay The reason why github is awesome is because it has you know a really good collaboration stuff So you use github issues pool pool requests For clients I like to use Basically the github web app, which is really awesome I use the github desktop app for Windows and for Mac and if it gets a little more tricky You start going to Source Street because I really like the UI and the command line client So I mean shit, I kind of forgot the content. I'm sorry So for suits okay, so for CI I'll show you a couple of different things that I've been playing with One is called code chip and the other one is Travis CI You might have seen Travis CI because it's used by a lot of open source projects Good thing about it is it's free for open source It is however pretty slow I find so you can see like all your builds here This this basically runs off a YAML file where you configure all the steps that it needs to What environment you want to run this on so you can define like what kind of? Node versions you want to run it on or IOJS What kind of dependencies need to install and then what what you run for your tests But by default it just runs like npm test, which is like pretty good practice So Travis CI really nice because it's got like this whole open source community Supports a lot of things like extensions for deployments, but I also like to use code chip because They're they're much much faster in my experience So the builds from code chip typically run in like half the time that it takes a Travis to run But functionally it's more or less the same I say that code chip is a little bit easier to set up You don't have like I have like a YAML file and it still runs all the same stuff It also has a little advantage if you're in front end it supports Is it chromium and firefox? So you can run your tests if you're using something like karma or protractor or something like that You can run your tests in a real browser Inside code chip whereas in Travis CI you have to use something like sauce labs sauce labs is This service where it's basically selenium in the cloud So it uses this thing called web driver JS to do it locally and then it connects to Through its own little service like a little back-end service, but it's you can all abstract it away with like grant or gulp whatever you're using so Going back to Okay deployment for deployment. This is basically a web app that runs. That's just a So, you know I document everything here So you can just use it with a CDN like raw git which basically means that it just comes from my github releases So github releases another cool feature that github offers I don't know if you're familiar with it yet, but okay I've only got a few here. I probably should show another project But basically like whenever I do whenever I do it whenever I tag a release on master branch Travis automatically picks up on that and pushes a couple of assets that I've defined to To github releases and you can download them there as zips and whatever and they get like archived And you can put release notes in there, which I haven't configured yet But it's all it's basically to put any markdown in there to document like your changelog or something I Put my like sort of my executables there, so I don't have to keep them in my code repository It's really quite easy to set up You I'll have to change the secure keys, I guess I Actually, I don't think I yeah, it's fine All right, so so so yeah, this is basically encrypted with a I don't know what yeah No, that's that that's thing. It's fine. It's fine. It's fine. I'm just because you say that I'll have to do that now So you can record my secret key But it's an open source project so you already have it anyway So that's the whole point of it. You can put this this stuff into open source Projects and it's still secure. So the the the nice thing about it is actually it deploys very easily to like github releases I just go like anything in my disc folder, which only exists because I've run my build So before my deploy I run like browser file to generate a bunch of files and split them with the source map And that's sort of the thing that I want to put in the you know the browser But rather than hosting it myself. I just stick it into github releases and then serve that with a CDN So for CDNs, there's there's really like a couple of options. What I what I just showed was a raw git Which is basically, you know, you're all familiar with Here we go here we go So if you if you look at like any JavaScript file, right or any filing get hub you've got raw so You can the problem that it has is this is a JavaScript file, but it's actually being served with a mime type of text plane I think it's like this or there's basically you take the URL you go to a raw git calm You paste and it gives you like a URL for testing. So this is like there's no Caching on this basically and this one you can actually serve it in production. So it's like a nice little hack So you can serve all your files that way and it's it's CDN around well for free But there's actually really a nicer one, which is there's the liver Haven't Used it for very long But it's it's cool because there's like this it's basically built by this one guy in the Ukraine from what I can tell and he's got like a Whole bunch of CDNs all around the world Like sort of doing this sponsoring this for free and it's sort of a CDNF CDN because he's using this thing called Sedexis, which I don't know how it works, but it's sort of load balances between all the CDNs And it also one of the only ones who does China So if you think Chinese people are important in China then it's really hard to host content for them Actually, so you need like a license and you can't have your own domain otherwise and so if you put stuff onto his CDN he has the license and You can serve it through that like from within Chinese servers and it's it's like better than Akamai basically for free Yeah, which is really nice. So I recommend using that All right, so versioning, you know, like like you probably saw I just follow semantic versioning Which which you know, which is basically standard for Anything with npm, right? So if you're using npm, you've seen semantic versioning You can do the little funny syntax with the tilde and all that stuff. Nobody knows what it means But basically you've got major minor patch You use npm There's a command called npm version and then you type either major minor or or patch from right from the mistaken And it just bumps up The version that you have in your package JSON also does a tag on your on your master branch and then you just push that to to your to github and you know, it's automatically it'll go alive and it'll get deployed on On github releases on you know through code chip and Travis to get tested It goes on to your CDN. It's all like sort of one little line that you have to type I do Wish that I could sort of automate that a little bit more I don't like to type those commands anymore But I haven't found a nice way to do that yet if anyone has any suggestions feel free to contribute So yeah a team collaboration, I really like using Gitter I'm sure a lot of you have already seen this we're using it for like the Singapore GS channel, so it's It's basically like slack, but supports full like, you know github flavored markdown So you can put code in there and it actually looks like nice And it basically gives you a chat channel for each like Github repository So if you're you know, if you're using this already If you know a lot of projects like a lot of open source project used to use like IRC I find that this is way nicer to use. It's also just runs in the browser, which I'm a big fan of And IRC is just a horrible disgusting protocol This this is this is you know, it's not entirely open source, but this close And it's you know, it's free to use for everyone right now. I don't know if that changes we can all migrate away, but It's it's just a really nice tool and if you're not already in in this group Like you should be because this is like we're awesome people like Tim and Suarez Answer my silly questions This is like so I'm we're using this for our our projects again So, you know, right now this is just two of us working on this Eddie here and myself So we're constantly just like posting stuff there or You know asking each other to to accept each other pull requests and review things like that So it's really It's really replaced slack for us. It's replaced You know skype or whatever else that we've been using the past hipchat It's super convenient because it integrates with all your you know stuff like travis and co-chip here And github issues, of course Yeah, it's quite cool We try to we try to bring more people in the company on so you know slowly and slowly It's got a really interesting onboarding process You invite somebody once they get an invitation, but they sort of stay as lurkers in the room So they kind of get notifications and it keeps pulling them back in it's quite effective. I don't know how Did you just join? Oh, okay, cool. Thanks Hey Okay And then licensing that's one issue that I like to raise is if you're building front-end apps there You're shipping the code to your users. You might as well put a license on it Um And not pretend that it's all private and closed source because you minify it. It really makes no difference And please ship the source maps with that along because it's just polite, you know, that's how like that's that's to me I've always been really big on the philosophy of open source so That's why I feel like it's it's it's sort of like a moral obligation also to Make it easy for other people to understand our code It's how I got into source and into code. It's the reason why i'm a web developer front-end developer at least Because it was always just, you know, you view the source Nowadays we've kind of made it a little bit tricky for performance reasons To actually do that anymore So, you know, if you if you publish yourself make it easy for yourself But also for other people to contribute and to to help you out Uh in the long run also help us grow this community So, oh, yeah, use isc not mit license. It's easier No, don't use mit use isc. It's like So it's basic isc license is like mit license Which but it's a little bit simpler. It's just it's just the tiniest little thing Yeah You can I mean it's a really fascinating read, you know Not really Yeah, but I don't know if is this the default now for node stuff or yeah, okay, cool. Yeah Oh for iogs, you mean Oh, okay, okay, right, right Cool, yeah um That's that's like most of these stuff for infrastructure. What am I doing on time? Oh, um, no, I mean I it's like not enough and too much I mean I I've got like a bunch more stuff that I wanted to talk about but it's it's going to take too much time And I didn't really prepare much for it yet. I was thinking of turning this into like a series of blog posts Um, I really wanted to talk about like more es6 babble stuff browser fire web pack All these funny tools Sorry Okay, uh web pack gave me a huge headache. So I just immediately switched away and moved to browser fire Um, I just I oh my god I really don't like the syntax that they have with the the query string if you're doing a require So basically Well, nothing works without doing that though But so some okay. So from what I from what I saw is the loaders pick up on Uh, which files they need to process by looking at the extensions um And that's sort of where I got like really frustrated with um different options Like to pass to the to the to the I'm sorry to the to the loaders Yeah, I so to be very frank. I didn't spend too much time on web pack. I spent a lot more time actually initially with jspm which um So jspm if you guys haven't seen that yet. It's um, right. It's this really neat project Uh, I think it's got a lot of potential. It's just extremely like Unstable like very alpha pre-release. That's what it feels like right now So it's it's it's got it's basically like npm, but it works transparently with es6 amd as well as the traditional common js modules that you have on npm And You basically instead of like npm install something you just do jspm install something It puts it into your package json But it also creates like a config.js file which ends up being just a huge thing Where all the sub dependencies are listed as well So that there's there's a little bit of like ugliness and you and I didn't like that too much My main issue was that just like um, like any other Like one of these ecosystems like gulp or or or or grunt or something everyone creates like Plugins for the same things again. So you have like a thousand plugins You have you you seem to have the same thing happening here with jspm where there's like plugins for for every for every You know utility under the sun And a lot of them are just obviously not very mature yet because it's a small community um I switched to browser file because it just makes it a little bit easier to deal with um, you know It's just it's a very popular thing which is which a lot of people have been have used and polished out a lot of bugs like like How do you say that? So the way the way I use that um For example on on karma, um, let me see if I can just show you quick Okay, so All right, can you do that here? Oh, but all right, never mind. So this is a project that has um ES6 through browser file. I'm wrapping the code in um Istanbul, but it's using this thing called isparta to transpile from ES6 ES5 Um, did it open? Oh, oh, right. Sorry. It's on this side Yeah, so that's what it opened um, and then You can actually see what's going on by clicking here just I think it's off-screen or something Oh, no, it's open already Oh, right. Okay, cool. All right. So basically it's just testing this little component here. This is a web component Um, I'm using stylus for css. It's using the shadow shadow root and all that stuff So I'm I'll probably prepare to talk about that at some point. I just wanted to show basically the um The the tools that I'm using to manage the whole project and to collaborate with people Um, yeah, does that make sense? Okay, thank you