MEAN Stack Jump Start

Sobre este curso

[Music] good morning welcome to the mean stock MBA do you know what I mean so me and Helen we have a I’m Helen I’m Stephen I’m not Helen I’ve seen them

this is helic and we’re going to talk about the mean stack which is a really cool set of technologies that work together pretty nicely it’s all written in JavaScript meanest acronym for Mongo

Divi Express nodejs and how a little anything angular angular yes but not necessarily in that order what we’ll be doing this will be creating a Twitter clone application called chirp and what

we can do is we can create tweets or not tweets but cheap excuse me and we’ll be creating this application from the front to the back building off of our previous Microsoft Virtual Academy videos on

angularjs express chaos as well as MongoDB and this kind of ties everything together until one cohesive application that you can use as a framework of your understanding of the mean stack and go

off and make your own mean stack applications so that you can divide and conquer anything else no let’s start in some with some interest so my name is Helsing and I’m a developer evangelist

for San Francisco and I insist specifically I work with startups in San Francisco out of the top incubators and accelerators to drive adoption on Azure and to help them create apps for our

platforms so I in my spare time I also give quite a few talks to developer audiences and I am a huge web development nerd so I play around frameworks like this all the time I’m

also a volunteer computer science teacher at Mission High School in San Francisco and I’m a pretty avid traveler my personal site is below just a little plug hey guys so my name is Steven Kalin

faction my counterpart in San Francisco I also work with some of the accelerators down in San Francisco a couple of them like YC or start and what will do is will we create

integrations for between open-source technologies and Azure to kind of ease those gaps and help onboard startups to on Azure I’m a JavaScript junkie I run a sure I connect to a sure

basically from anything I’ve connected from microcontrollers as well as Windows phones androids iPhones and I love just creating JavaScript experiences on each of those platforms and what’s really

cool is that J’s phones everywhere and I’m super into that so now I’m actually on the bottom my side as well I think I did do a shameless plug as well so if you want to know more about me

you could definitely hit up my website and I guess we can move on so yeah so let’s go over what we’re going to talk about today we’re going to start with in this module talking about the main stack

going over each specific component what is going to do in our application and we’re actually going to show you a demo application as well walk you around that in the next module I’m going to go over

angularjs some basic concepts in angular and start creating our app locally and then Stephens going to build out the backend using node and Express he’s going to build up ap is that we’re going

to hit using our angular app eventually and then in the fourth module he’s going to integrate MongoDB for our datasource then module 5 will come back to me I’m going to tie everything together go and

you know actually call the AP is that Stephens created and show that application working live and then we’re going to deploy all of this to Azure and show you some more resources in the mean

stack community some other generators or things that you can use testing frameworks and conclude from there hello what can they okay great I was going to ask what can our users expect to know

before him but I home beat me to it so what what can our users expect to have to know in order to you know be very productive in this Microsoft Virtual Academy so because everything we’re

going to do is JavaScript we expect you to have a pretty good graph of JavaScript as well as some basic web development concepts such as you know what an MVC framework is going to be

we’re going to still go over quite a few of these things but it’ll help if you have that good foundation so again it’ll be great if you have a strong grasp of JavaScript if you’re familiar with HTML

CSS and with bootstrap or Twitter bootstrap rather which is just a great library for making beautiful front-end and if you want to look at other resources that might help there’s an

introduction to angularjs mva there is the very awesome you’ve got documents MongoDB jumpstart that Steven was actually part of and and it’s not listed here but there’s

actually an oj s MV as well ok yeah Stacy Mulcahy and then we did that one safety also worked on the angular MVA along with Christopher so Christopher’s waiting for the backs of those as you

can see so if you want to join the mba community please do there’s a lot of really great online learnings like what we just talked about there’s over 2 million registered users and there’s a

lot of really great relevant training even on open source technologies like the mean SEC so let’s really get into it what is mean SEC let’s actually show demo of our mean stack application and

I’m going to apologize in advance because this is an oxy exact version that we’re going to show in the end but it’s pretty darn close so as you can see there’s an application we’ve built here

called chirp need lightly styled at using Twitter bootstrap with very typical navigation header you might have seen we’re going to implement a login and registration system and people will

be able to post into the stream we’ve disabled a guest posting for now because let’s be honest we don’t know what all you are going to say but you’ll see us postings in the stream later on and by

the end once you actually authenticate you’ll be able to post into the stream as well I think our users should be able to register already right I’m pretty sure

ah you’re revealing our secrets I think it’s actually not working right now because I tried right before this on it didn’t work yeah cool sorry – if you go way better it’s probably better I live

yeah honestly you have a chat okay I go to the MBA Q&A chat if you want to say anything to us so up yeah let’s talk about why we’re actually

going to use a mean SEC well as I said before the mean stack is all built using javascript a lot of people say it’s really one language to rule them all because you can build your server in

JavaScript you can of course build out your front-end in JavaScript and angular even provides a nice framework for you to build out that nice MVC in the front end as well everything that we’re going

to use is completely open-source while date might be supported by larger corporations such as MongoDB or Joyent or Google everything that they’re making is open-source and you can go through

and access all of that no js’ also has a huge module library if you want to go and take components that you might need for example for authentication we’re actually going to use a module that

other people have built on top of that and it’s really easy to get started quickly with the mean stack because as you can see we’re going to build out a complete application in just a few hours

because since the front end and the back end is all using one language is extremely cohesive everything we’re using is extremely lightweight and not too much emergent to run that’s probably

why it’s pretty popular with web developers right I’m matching because the whole thing is written in JavaScript so if you’re just familiar with really good with JavaScript on the front end

you can make your way back through the back end and even through the database because even the database is really JavaScript like so really it’s actually quite friendly for if you just really

some of the front end volve meant and you kind of want to get into the back end of it yeah absolutely I was actually primarily a front-end developer but you know the means that

came along nodejs especially was so helpful because I said uh you know this I don’t want to necessarily build something monolithic with Apache or anything huge but hey if

I can start up a server in ten lines or less it must not be that Intimidators web of yeah now I can kind of call myself a full set JavaScript developer and pretty great so let’s actually talk

about all the components I’d go into the main stack as I said before angularjs is the a in the moon sack and it’s going to take care of our applications entire front end it’s a client-side MVC

framework so we’re going to build out models to communicate to our views which is HTML that you’re going to see basically and we’re also going to have separate out our application logic

inside controllers and this is similar to what you might do in the backend as well only you’re doing this strictly in the front end so you’re actually creating really good delineation between

your code and it keeps things very very clean image is is open source although it’s maintained by Google Google has dedicated a lot of really great engineers to work on angularjs and so

the driving force behind angular is they’re saying you know what HTML look like if HTML was designed to be for building web apps instead of for building you know documents or hypertext

I mean before angular most people I guess for just using jQuery right and I’m really just manipulating the Dom itself and I guess angular is really cool because it’s kind of written as for

the future of HTML and the case where you can just directly put in the HTML what you want to data bind and data binding really is just the concept of binding your data to your UI so that you

don’t have to explicitly say hey add this div additive or add this thing or change this value like you would do in jQuery instead you just simply change data and magically the you know the UI

changes and actually the vice-versa works as well so it makes it quite nice yeah and not to get into this too deeply but angular actually even injects some or makes available some attributes that

you can put directly into your HTML to be able to start changing things around so when you look at some angular code it’ll actually look quite a like just a really nicely formatted

really responsive HTML document as opposed to you know some HTML here and then a lot of the logic is actually updated in some JavaScript function in another file so when you’re looking at

angular a document you’ll actually be able to see oh you know this is where certain logic goes and it’s really clean and English is is also really really easy to test it’s built with you know

test-driven development in mind we’re not going to use too much testing today just for the sake of time but it’s it comes bundled with what’s called protractor yeah it’s built it’s bundled

with protractor and the angle documentation does a really really good job of saying how how can you build unit tests for everything that you’re doing and how do you do complete end-to-end

tests for your entire application so where can you get angular how do you install it it’s really really easy you can just go to the angularjs docs here whoops I am going to click into this

link and you can actually install it straight from the Google CDN which is what we’re going to do so you can get the minimum five files straight from Google just by

linking to it like so and so this pulls right off of the CDN so we don’t actually have to worry about maybe even like storing the file or serving it out itself right it just comes right off of

that yeah exactly and if you haven’t used to see the end before it’s really great because once multiple web sites and multiple people are hitting that same link it’ll it’ll

be cached and it’ll be much quicker for your users to access instead of you know your users pulling in down pulling the angular file down from your server you know another side they’re pulling down

exactly the same file so it’s nice to have that a better performance there yeah exactly we’re going to start out using the straight angular library but later on we’re actually going to

incorporate some additional modules that aren’t included in the basic package so to speak we’re going to be using some routings and resources so we’ll be getting to those files as we need them

so next let’s talk about nodejs node is the lightweight web server that we’re going to use and it’s built in Google’s the ACE JavaScript engine which is a venturing engine for Chrome it’s

extremely lightweight and efficient and as you can see here these are all the lines that it would take to just start running a server I’m not going to do this right now because Stevens going to

demo this later on his modules I don’t want to steal his thunder but as you can see it’s extremely simple you’re you just require the modules that you need and you create a server you just say hey

create a server run it on this port listen on this port and this is what you’ll send as a response to your clients and as you see is just sending hello world it’s extremely simple super

easy and you’ll install nodejs by actually going to the nodejs website and clicking download obviously a bit more difficult than you know just linking to a file from angular but you can actually

download the pretty easy windows installers here and you can also the binaries if you care to look at them as it notes here if you want to build from source you’ll need you know Python

2.6 to 2.7 but I just recommend getting the installer for today if you don’t have it already yeah most uh most of us are actually supported just right out of the box a binary floor you could just an

especially in fusing a bunch of using Center less WM based systems and Fedora based systems they have they have package managers which will just pull the version for you and you could just

do like a PT install to install the version though that you want and it’ll just get going if you are using a Debian system like Ubuntu or something

I do note that the module we called no Jeff and not node like we’ll be using on Windows so just FYI and let’s let’s talk about Express now Express and nodejs are kind of linked almost completely and

tightly and that’s because is actually a node module we’re going to get into exactly what modules mean for node but basically Express is a really really thin layer on top of node that makes it

much easier to interact with so whereas you saw in our code before we have to you know manually talk about what we’re going to send as the headers out and things like that in express a lot of

that will be sort of MAGIX away for you and abstract it away so that your calls are just so much more simple this is especially true if you’re making a lot of HTTP requests like we’re going to do

we’re also going to of course fill down API using Express because that’s what we’re going to use for all of our routing needs so it’s going to be a Web API yeah okay

and we’re going to you know layer our authentication piece on top of X practice in which cases as well Express also helps you organize your node app into a easy and cohesive and MVC

structure so your brows will be in one place your views will be in another place your logic will be elsewhere and that’s just again organized in your code it’s a lot easier than you know having

one monolithic that was your file for your server for instance so you’ll install Express as I said before once you’ve installed node we’re going to get into NPM later on but

that’s basically the module library that comes with notes that you can you know the node package manager that you can actually install these modules from that’s similar to like pip for Python or

I guess for jumps for Ruby or new get for dotnet it’s just a package manager which allows you to not necessarily force control your packages and we’ll talk about this more and instead you can

just keep it manifest and I’ll just install them whenever you need them yeah and as you can see here once you have node installed it’s pretty easy just called package manager and you say hey I

want to install Express and next MongoDB so this is what we’re going to use for our data store and it’s a talk no sequel database out there pretty much everyone’s using or talking about

MongoDB and that’s because yeah it’s really really great and it’s really really easy to use did you hear about MongoDB I guess they just announced about two weeks ago

MongoDB three which is apparently like something crazy like 95% faster or something like that so it’s actually pretty exciting that they’ve done a couple other changes to something more

deep more detailed features that you that we could talk about later but apparently that just came out so it’s pretty exciting oh that is exciting mangas ready really really fast and it’s

known for being extremely performant but you know faster is always better right yeah angular is also by the way coming out with a new version soon in a gear 2.0

that is going to solve a lot of the problems that people have found of angular not that many we still like angular but you know there’s always room for improvement

so Mongo has really JSON like syntax which makes it again really easy to use if the rest of your stack is already in JavaScript and it’s maintained by the MongoDB company but there used to be

called 10gen and they maintain Sam Sam yeah they change the name because hey if this is the product that you’re known for the most why not just name yourself that and its prime

only using just basic key value stores so you’ll download Mongo by going to MongoDB org and just go into downloads again and I’ll take you here and then we can see that we have installers binaries

for most most systems and you can also build right from source similar to similar to node so it’s very nice well this is not so long ago three that we talked about this is as you can see it’s

still two things on them yeah just so you guys don’t just confused and anything you want to add anything you want to prep our um no so I guess the cool thing is is maybe the why of mean

stock as well it’s not only because it’s JavaScript but it’s also quite flexible and scalable so a few of the things that are really nice is that MongoDB doesn’t actually enforce like

actual schemas so we can be agile it could change things as your business things change angular is really good because it’s a single page application so it’s really

responsive so you don’t really have to wait for pages to flip for things like that and no GF is actually quite scalable it’s a single threaded application but it’s really good about

handling asynchronous calls and managing a lot of different tasks at once which really creates a high level throughput for especially IO intensive tasks such as a web server which might have

thousands of requests a day and it can serve all those really quickly so not only is it’s all JavaScript based it’s actually quite performant and it’s something that you should take a look

into as a more modern application stack that you might be interested in migrating over to I think that’s about it for our module 5 section or module 1 projection Wow I am way early it’s still

the morning here in Seattle so as you know I know there’s a lot of viewers around the world so we’re just getting our day started so with that I guess we can we can go ahead and call this module

module completed we we’ve kind of brought in the fundamentals of the main stack we showed you the application that we’re going to build and in the next module we’re going to

start building right from scratch we’re going to start from empty folder build out the complete you know a well not the complete angular size but an angular side that doesn’t need a back-end and

just go straight from there every module that we’re going to create it will pick right off of where the last ones ended yes and all these are hosted on our github repository which is Christopher

it’s at Microsoft Microsoft learning black sure yeah so I pulled it up up here so if you want to go to my screen real quick its github comm slash Microsoft learning slash chirp we’re

going to actually go over each section in order and each section is going to have their own weave needs which will take you through the code that we’re going to go through so you could take a

look at that if you want to right now but we’re going to come back and get started with module 2 [Music]