Javascript

The remaining three weeks of class were mainly devoted to the development of our final projects. In that time we we also covered React in more depth and went over some some Computer Science fundamental, data structure and algorithms.

I am not quite sure why I am so fond of React. Perhaps it feels like it gives needed structure to the front-end. And adding even more structure, we covered Redux. Redux provides a predictable state container for JavaScript apps. What that means is that handles the state for your entire application, it provides a single source of truth. For something that is relatively simple, it is difficult to grasp exactly why you would need or want to use Redux. Through abstraction it provides predictable methods of accessing and modifying state. I would go on to use it along with React in my group’s final project.

This was our second week of covering React and one of our final weeks of learning new content. We covered the stuff necessary in making more featureful Single-Page Applications, AJAX calls, conditional rendering, and the use of React Router. As this was the final week before we began working on our Final Projects, the homework this week was optional. I am really glad I choose take it on.

The previous week’s homework was considerably trivial use of React compared to this weeks. Going through the awesome Reactjs Docs, as a class, we pretty much covered everything that is in the Getting Started section. And it is pretty interesting that that is essentially it for React functionality.

So this is where the fun started. React is such joy to work with. Having once source for truth makes a lot sense. I have been picking up ES6 & ES7 features for a while now, and now its interesting seeing things like object destruturing and spread and rest used in a library. I really was not having much fun working on the front end, until now. I guess its the way that problems are approached, from Reacts perspective. And there’s something about keeping keeping a component’s markup, css, and logic in one place that I find really appealing. I can’t say exactly why.

It has been a challenging last couple of weeks. We concurrently covered testing, both unit and functional, and completed our second group project. One of the toughest aspects of our group project is simply coming up with an idea for an application. We kicked around a few ideas, but eventually led drawing game, kind of like Pictionary, where one player has a clue and other player must guess what the drawer is, drawing. We came across WebSockets, which allows for peer to peer communication between over TCP. This would allow us to share what the person is drawing on their Canvas. We used Socket.io, which implements WebSockets and ties in nicely with Node. Also using Socket.io, I implemented a chat function, which was also used as a method the messages that control the functions of the game.

This was a short week in terms of new material, as it was running concurrently with the planning of our second group project. We build off the knowledge we gained last week in building our own ORM, and used an off the shelf model, Sequelize. I found Sequelize itself to be pretty easy to use, since it is promise based. Dealing with callbacks can get messy. Our project this week was merely to refactor last week’s project, were we created are own ORM, using Sequelize.

This week we dove deeper into Express and covered Handlebars.js, a html templating engine. HTML templating provides a bridge between our JavaScript and our content, allowing us to decouple our HTML structure of the data within. Handlebars provides pretty easy to understand syntax and even allows block expression. As an example, let say I had list of burgers I want to iterate through and add each burger as a list item, it would look like this:

We are starting to put it all together. Our project this week was to create a friend recommendation app not dissimilar from Tinder. It is almost a full-stack app, it doesn’t quite have data persistence through a database. Class is starting to get complicated, but when you step back and think about things, the concepts make more sense. When you are running a web server, it makes perfect sense that your server won’t serve something it has no idea about, such as static files, unless you explicitly do so. We had been using Github Pages, which is perfectly fine for serving static sites and does all of the heavy lifting in terms of hosting a site. Setting up route with Express.js is actually pretty simple. And for our assignment, we also set up a rudimentary API to store and access data locally.

This last week I became reaquainted with MySQL. It’s not so bad. The syntax is relatively straightforward. The keywords are close to to natural language. This was another week getting familiar with the power of Node.js. It is really easy to integrate some really powerful tools.

Our assignment this week was to create backend for store using MySQL running on Node.js.Working with MySQL was pretty straightforward, updating, selecting from, and inserting into the database. The challenge I faced this week was dealing with asynchronous JavaScript. I found some of my function calls would sort of get take effect at the same time, or at some unforeseen time. I dealt with this my implementing callbacks. I am going to look into other ways of tackling this problem. The new hotness in ES7 is Async / Await, which offers solutions with asynchronous code. Async actually implements Promises, which was the last great hope with dealing with funny timing. So before I tackle async / await, I need to get a handle on promises.

This week was surprisingly challenging. What makes this program interesting is that we often are giving just enough tools to complete assignment. The examples we covered in class were not as complex as the assignment turned out to be. Albeit, it could be me overcomplicating things. I tried to abstract this project as completely as possible. I also tried to cover every edge case, every error.

This weeks project was a bit of remix. Our third week project was to produce a Hangman game in Javascript, using the browser for user input. This week, we did the same, only using Node.js. We were also to include constructors. My first roadblock came early on, trying to change an array in a different class. It took me a day of thinking, but I realized that I should not try and change the value of an array, just change the value of a reference to that array. Side-efects.

This has been my favorite week of learning yet. This was our introduction to Node.js, which is a JavaScript runtime engine. What that all means is that it allow us to use JavaScript outside of the browser. That opens up doors.

Prior to Node.js developers had to learn a second language for the backend, such as PHP or Java. Now, no need. With just one language a developer can handle the tasks of both the front and backend of the stack.