Understating the Udacity Offline First Project Wittr : Part 1
This part will explain the various tools used and why they were used and a bonus section where we recommend alternative or better tools .
This is a part in a series in which we try to demistify the Wittr project for student practice in Udacity Offline First course.
Whole project consists of various moving parts and is very well setup but can be daunting ,if one tries to jump at source code. In the next few sections we’ll go through each of the tool used.So, let’s begin…
Node JS
“Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient.”
Ew , that essentially mean it’s a server made of Javascript .
It does one thing ,runs as a process on a server that sits and just listens for requests , for which it responds with HTML JS CSS .
Express.js
Fast, unopinionated, minimalist web framework for Node.js
Why can’t they just tell what it does?Is a question you might ask .STOP!
Think .Still can’t figure out?Well neither can I.
Node.js needs to know how to handle those requests and what they mean.
Express provides that .
- **KNOCKS ON YOUR 8080 PORT**
- REQEUST — Hi, Im a POST request , for this address
- NODEJS — WHAT?
- EXPRESS — Follow me *Enters routes folder*,anywhere particular?
- REQUEST — Yes to route /cats/cats.jpg
- EXPRESS — Not again — __ — , right this way please,
- EXPRESS — Here’s your RESPONSE,take care of him please(response.send(OK))
Gulp.Js
Gulp says its a task runner and build automation tool. But does anyone knows what it means?
Let’s tone down the flash words, from what i know , I’d define this as
Gulp is a task runner and build automation tool.
Aww, shieeeet.Let me explain.When you want to work on a big project you might be doing following things-
- Bundling and minifying libraries and stylesheets.
- Refreshing your browser when you save a file.
- Running unit tests
- Running code analysis
- Less/Sass to CSS compilation
- Copying modified files to an output directory
Gulp can do all of that .Yes !
I’ll make an in-depth guide for gulp as well as soon as I know how to use Gulp, till then.
Babel
Basically , browsers are made by big companies who aren’t cool enough to use new javascript features , But you are hence you need something to turn your cool new Js code into old browser Gibberish babel does that.
Babel is a Javascript Compiler.
You can try BABEL HERE.
Browserify
Maybe you have 5 HTML pages , what are you going to do now…
NOOB- <script src=”/js/main.js”></script>
NOOB- <script src=”/js/main1.js”></script>
NOOB- <script src=”/js/main2.js”></script>
NOOB- <script src=”/js/main3.js”></script>
NOOB- <script src=”/js/main4.js”></script>
ME(an intellectual)- <script src=”/js/bundle.js”></script>
This lets you bundle and you can also use
var module=require(‘myuselessmodule.js’)
That’s it for now see you in the next tutorial. :)