Day 38

AngularJS Associations

I thought the AngularJS assignments were pretty easy until we started associations. Before, we would just have an array that is our "database". Oh, one thing that should be mentioned is that all the assignments are done in just Angular. Nothing is being done with the other 3 parts of MEAN. Now, originally all the items in the array of objects only had one value per key. But with associations, there can be key with an array value that holds multiple values in itself. 

There is a workaround that you can do; whichever information that is being displayed, you can just push information into that factory. Imagine you can add users and teams. But you have to associate the users into teams and you can only have one team per user. But a team can have multiple users. The proper way to do this assignment is to add a team field to your players list in your player factory and then a users array in your team factory. But on the associations partial, you need to just show all the users that are currently existing and associate teams with them. So my workaround to this correct way is to add a team to the players and that was it. 

However on the next assignment that Kris gave us, it was basically the same thing but with users and parties and we had to work in groups so I did learn how to do it the proper way.

Day 37

Angular JS

Today I started AngularJS, the last part of MEAN. To give you guys a recap, MEAN stands for:

• MongoDB
• ExpressJS
• AngularJS
• NodeJS

Mongo is the database, Node is the web server that passes info to and from the client and the database. Express act as a Node module that relays information from the database to the web server and finally Angular act as the framework that receives and passes information to the web server from the client side. AngularJS uses HTTP requests to pass to and and receive information from the web server. To use it, there is a script to add into your HTML. Angular has its own controllers and a thing called factories. Factories is what passes information to the web server. Controllers directs what is happening on the page. That's just a quick view of Angular!

Day 36

Modularization

We did some old assignments such as the Wall as one of our last assignments for the chapter. Again it was nothing too crazy and it taught us how to do what we've done before but with the MEAN stack. I finished the 1955 API a day early so it allowed me to look back and review what I've learned so far. Before 1955, we learned how to modularize our code. Therefore we separate the Node server to one file, and every Model, Controller and Routes we had into each of its own file. It's a pretty arduous process but it makes the structure of my code a lot cleaner.

The 1955 API is just a simple assignment that allows you to add and delete and look at individual names that you've added. We would first add all the necessary mongoose.js files, routes file, model file, controller file etc. Then everything that we would've had on our server file, we split. So routes has all the routes but none of the functions, that's in the controllers. Model is made to set up the Schema and table in Mongo. But yeah...that's essentially modularizing project structure!

Day 35

MongoDB

Finally, we get to work with NoSQL! For those who don't know, NoSQL is known as Not Only SQL. In SQL, there are strict rules in how columns are changed. For example, let's say person 1 has height, weight attribute. And person 2 has height, eye color and hair color attributes. In SQL, you wouldn't be able to put these two people in the same table and you would actually have to construct multiple tables just to hold these two people! In MongoDB, all that doesn't matter and you can plug these people into the DB. So the first assignment is to work with the syntax of how to insert and manipulate data in Mongo.

The next thing we learned is Mongoose, which is just a layer between our server file and our MongoDB. Mongoose provides a bit more structure for MongoDB. Mongoose also lets us be able to insert and pull data from and to the database. Although similar, Mongoose has its own documentation and has its pros: built-in methods such has update() that allows for easier to understand and less verbose writing it out in MongoDB. Our assignments are all pretty straightforward and we've done them all before, but never in JS with its own JS DB. We're expected to finish the rest of MongoDB over the weekend and start on AngularJS next week!

Day 34

ExpressJS

Again, today we were hit with another recursion problem that was really difficult. Although in my opinion it was easier than yesterday's. The problem is to take a string (like 'abc') and return an array that lists all the combinations (['abc','acb','bac','bca','cab','cba']). It was a similar format to yesterday's, except the return array consists of all combination of the str. In yesterday's case, the substring that is being pushed into the array has an order (i.e. a cannot be after b etc.) but the length doesn't matter (can be 'a', can be 'ab' can be 'abc'). In today's problem, the length does matter, as the substrings that is being pushed into the array must be of the same length of the str that is taken in as a parameter. And also, the order doesn't matter (str of abc can return 'bac'). I tried doing the problem without recursion and I hit a problem; depending on the length of the string, thats how many for loops there must be to rearrange all the characters. The first for loop holds the index of one of the characters, the second for loop holds the second index and the last for loop rearranges the last index. Now if the string was 4 character, then it would be 4 for loops. I was thinking of doing a recursion inside a for loop since even a recursion would have limits, but I still couldn't find a solution. The answer key, as it turns out has a recursion inside the for loop so my mentality was right but I couldn't implement it in code. 

We did ExpressJS today and one of the exciting parts of using Express is the ability to use sockets. Sockets allow a non-blocking connection between the server and the user. All group chats and video games undergoes that kind of methodology. Anything that happens to the server is reflected to every single user in real time. One of the annoying things about Express is all the modules you have to install to make the program work. Sockets is confusing in the sense that every event that you fire from client to server or server to client, you have to write a listener function to that event on the opposite side. 

• Client-side emits handle to Server-side's listener which emits a function to the Client-side's listener for that specific server side function.

Day 33

NodeJS

Today was the first day that I had no idea how to do algorithms. The second algorithm was to write a function that takes in a string and returns an array that gives all possible in-order combination. For example, str = "abc" should return [" ","a","b","c", "ab", "ac", "bc", "abc"]. I wrote yesterday that it makes life easier to first write the non recursive form of this and I did do that...except I couldn't translate it into a recursive function. When Kris showed us his solution, it completely blew my mind and I think it blew everyone else's mind. So far, we've only returned a function by itself once, with this problem, you have to call itself (but with slightly different parameters) again. Even as Kris showed us a feature on Chrome's debugging feature where it showed us everything that is happening line by line, it didn't make sense. Seriously, I've never been so out of depth with algorithms and it does scare me at how unprepared I am.

We went through all of Node today. NodeJS is a backend server that is very useful because of how lightweight and compact it is for very specific purpose of real time functions in a software or website. Imagine a chatroom with 100,000 people, when you write something, the message should show to everyone at the same time and immediately. With other servers, this is not possible without a refresh of the page or if it is possible, causes a high amount of server load so the users in the chatroom would be severely limited. One node in NodeJS can handle 200,000 connections. But Node does have drawbacks, namely working with relational databases, like MySQL and anything that requires heavy computation.

All in all, the assignments again weren't too hard but there was a lot of information to absorb. There is a way of doing routes that makes it easier than how it was done in Django but it was really repetitive to write a code for every static, image files. This is what I mean:

//http server
var http = require('http');
var fs = require('fs');
//creating a server
server = http.createServer(function (request, response){
  response.writeHead(200, {'Content-type': 'text/html'});
  console.log('Request', request.url);
  if(request.url === '/'){
    fs.readFile('views/index.html', 'utf8', function (errors, contents){
      response.write(contents); 
      response.end();
    });
  } else if(request.url === '/dojo.html'){
    fs.readFile('views/dojo.html', 'utf8', function (errors, contents){
      response.write(contents);
      response.end();
    });
  } else if(request.url === '/stylesheet/style.css'){
    fs.readFile('stylesheet/style.css', 'utf8', function (errors, contents){
      response.write(contents);
      response.end();
    });
  } else {
      response.end('File not found!!!');
  }
});
server.listen(8000);
console.log("Running in localhost at port 8000");

Low and behold, our last assignment of the day was to find out how to write an import .js file that dynamically knows which folder to look in and render which file in the fold.er

Day 32

Advanced Javascript Topics

We are blazing through the MEAN stack at the moment. We've yesterday we've finished two chapters (fundamentals and OOP) and now we're going through all the advanced topics. These topics include callbacks and event handling. Callbacks are just functions that are passed through another function as a parameter. Why is it important? Delegation and event handling. Think of delegation as a parent function continuing whatever is coded into it and the callback being a function that runs in the background or along side the parent function. This is where event handling comes in, the callback function runs if the event is met or the callback returns something when a callback happens!

The assignments weren't too hard, it covered most basic callback functions. I don't know whether this is a good thing since I've heard callback functions are very useful and used a ton in industry or maybe callback functions is only as complicated as the functions you put into it. Anyways, that's it for today's post.

I also want to mention that algorithms has been kicked up a notch. After linked list last week in Python, we are now doing recursive functions for the first week of the 2nd stack. I remember hearing about it from CSE 143 students and I can see why it's so hard to grasp. The trick I learned so far is that recursions are essentially for loops or while loops. So, do the problem first using for or while loops and eventually translate that into a recursive function.