Reorganising the code

Loading...

Do curso por University of London

Web Application Development with JavaScript and MongoDB

486 classificações

University of London

Web Application Development with JavaScript and MongoDB

486 classificações

Curso 4 de 6 em Specialization Responsive Website Development and Design

In this course, you will develop more advanced web application programming skills. You will learn how to control data read and write access using methods, publish and subscribe. You will learn how to access your database and server shells using command line tools. You will use the SimpleSchema system to validate data and generate input forms automatically. You will see a complete collaborative code editing environment, TextCircle, being built from scratch. At the end of this course, you will be able to: - use Meteor methods to control data write access - use publish and subscribe to control data read access - install and use advanced Meteor packages - add user accounts to your applications - implement complex MongoDB filters - use the MongoDB and meteor server shells - define data validations schemas using SimpleSchema - generate data input forms automatically using SimpleSchema In this course, you will complete: 2 programming assignments taking ~4 hours each to complete 4 quizzes, each taking ~20 minutes to complete multiple practice quizzes, each taking ~5 minutes to complete Participation in or completion of this online course will not confer academic credit for University of London programmes

Na lição

SimpleSchemas, autoform and code re-organisation

Welcome to the final module of 'Web Application Development with JavaScript and MongoDB!' In this module we will create a well organised application using special Meteor folders and we will organise templates into multiple files. We will also learn how to use the iron:router package to create multiple page applications and we will generate data entry forms automatically using SimpleSchema and autoform. Finally, we will validate user data automatically using SimpleSchema. Enjoy!

Reorganising the code8:58

Conheça os instrutores

Dr Matthew Yee-King
Lecturer
Computing Department, Goldsmiths, University of London

[MUSIC]

Welcome to the first lesson in this new module.

What we're going to do now is a bit of housekeeping.

It's a little bit dull, but

it's a good point to do it because we've written a lot of code and

we've got this great big JavaScript file that's full of all these different things.

And what I wanna do is show you the standard

way that you might reorganize your code in media.

When you get to this point of having a fairly complicated application.

And the reason for doing it is essentially that in the future,

it makes it easier to work with the code and to find the things that you want.

And also, if you then get to the point where maybe other people are working on

your code, it becomes simpler because you can have different people working on

different things, and it's just easier to work that way.

So yes.

It's time to sort of our make our app look a bit more like a serious bit of

programming.

Okay. So let's just go through the code and

put it into the right places.

And as I go I will explain why we are putting it in those different places.

All right, so here's my application folder.

And let's just have a sort of dig around in there.

So what have I got so far?

I've got my three sorta top level files which we created right in the beginning

when we created the app.

So we have a CSS file, an HTML file, and a JavaScript file.

And then I've got this client folder and you remember I used that to put

some configuration stuff in there about the account system, the user accounts, and

also I put some CSS in there, which is for the text editor.

But let me explain what the client folder actually does.

When you run that meteor command, meteor basically takes all the code that you've

written and reorganized it into chunks of meaningful code.

And so the first thing it does is it looks in the client folder and

collects all the JavaScript together and

combines it with any JavaScript you've got sitting outside of the client folder.

So in this case, accounts and textcircle.js.

Squashes it together and minifies it, which is a way of

kinda removing all the unwanted space from the code to make it as small as possible.

So that when someone accesses it, it downloads quicker, right?

So it gets all the JavaScript and squashes it together.

And so the person connecting to your site gets everything that's in the client

folder plus anything that's outside of the client folder at the top level.

But sometimes there are things that should only go to the server right?

So if you remember, if we look at this file here.

We've got a block which says if (Meteor.isServer) right there.

So there's no point in having that, that will be removed anyway and

not sent to the client so what we do, is there's a special folder called server

wherein we can put code that only needs to go to the server.

So let's create that folder.

And then we're gonna split, take out the code that is only needed for

the server, and put it in the server folder.

So the code is here,

so if (Meteor.isServer), let's grab the whole of that.

If statement there.

Oops, not down to the method.

So we grab the whole of the contents of that if there, and I get a new file.

Paste it in, and I'm saving this into server folder main.js.

So main.js is a sort of file that Meteor will look for, and

it will load that one first.

So in case anything depends on it.

So the first one we create would normally be called main.js.

And actually I don't need this if statement anymore, because if this is in

the server folder it's automatically gonna be guaranteed that we are the server.

So we don't need that anymore.

So we get rid of that and tab it back in.

So there's my server code, right?

And my next step is to basically make sure

that the client code is going to the client, right?

So I've got this isClient stuff here.

So I can grab all of that, all of that client stuff and

take it out, and then create a new file again, paste it in there.

And this one I'm gonna save into the client folder as main.js.

So this is, if you like, the sort of main set of code that's going to the clients.

And again, I don't need the if statement anymore so I can just knock that out.

And tab it back in and there we go.

So now I've got two main.js files.

One that's only got code for the server.

One that's only got code for the client.

And let's just sort of check that on the application structure there.

So there's my client main and my server main.

So my next step is to look for code that's gonna go to both.

So both the client and the server get some of the code and I can find that.

And I'm gonna create a folder called shared,

which has things which are shared between the client and the server.

And so I have go back to the main file, so Meteor methods are shared.

And so I take those and put them in a main folder like that,

sorry in a new file, and that goes into shared again main.js..

Okay.

Or because it's just methods, it could be called methods.js, but that's okay, and

we leave that like that, so save that.

Save this file.

This is now the main.js file that we sort of created right at the beginning,

the sort of one that we've been working on throughout the course has now only got

some helper functions, which only the client needs and some collections.

So I'm gonna take these helper functions and

put them in my client main.js file.

So I write those at the bottom right there.

So remember that we have the one that sort of got the current document and

the one that fixed those fields in the objects.

Okay, so that's that.

And then the final thing is the collections.

Now both this client and the server need the collections.

But it's just a little convention that we would, instead of putting it in shared.

So we could put the collections in shared, but

normally we'd put them in a folder called lib.

And lib basically gets dealt with first.

So it means we're guaranteed to have the collections ready.

So I've created a folder called lib and I'm now gonna save these collections.

Into a new file in lib called collections.js.

It could be called main.js, but just because it only has collections in it,

it's gonna be called collections, right.

So there we have it.

And so there's my complete application structure there.

And actually this is now empty so I can get rid of it.

And actually,

the server doesn't need to know about the CSS because it's not rendering HTML.

Indeed, it doesn't need to know about HTML either.

So I can put both of those into the client folder.

So there we have it, my complete fixed structure.

So I've got my client folder, which is code that's gonna get processed and

minified and sent to the client.

I've got my lib folder, which gets dealt with first and

there it sets up all the collections, which everything else kinda depends on.

I've got my server folder, which gets sort of managed together and minified, and

sent to the server only.

And so I've got my sort of server sensitive stuff in there.

And then I've got my shared folder, which is stuff that gets minified and

sent to both the client and the server.

So the final step is, to basically see if it works.

So we're just going to make sure those files are saved.

And it saved them all, and

that is my main.js.

Right, so then I've got them all in there and.

Whoops!

And they're all in there.

And now I'm ready to run the Meteor command and see if I've got any errors.

I think there might be one or two glitches, but we can,

considering I've completely reorganized the application, but we'll have a look.

Okay, app is running.

And let's just see if it's really running.

This looks good.

Okay, that's kind of working.

And so I can see that there's some stuff working there, so that's good.

So the basic application seems to be working still after all that refactoring.

So there we go, so I reorganized my code.

And you should probably try and do that to your application at this point as well.

[MUSIC]

Explore nosso catálogo

Registre-se gratuitamente e obtenha recomendações, atualizações e ofertas personalizadas.

O Coursera proporciona acesso universal à melhor educação do mundo fazendo parcerias com as melhores universidades e organizações para oferecer cursos on-line.

© 2019 Coursera Inc. Todos os direitos reservados.

Baixar na App Store

Baixar no Google Play