Table of Contents
Course Description
The course description from MyPlan:
Introduction to client-side web development including markup, programming, protocols, libraries, frameworks, and techniques for creating effective, usable, dynamic, and responsive applications that meet user needs. Includes an introduction to web development roles within organizations, content management systems, and other tools to build and manage websites and applications.
Introduction
Before this class, I had a good amount of experience with web development. In previous projects and classes, I gained a good understanding of both frontend and backend development. In Spring 2020, I took INFO 340 which was taught by Jacob Morris. This class focused primarily on client-side development and went over things like React and Firebase.
This post will outline what I learned from the Spring 2020 INFO 340 course. It will be structured and organized very similar to my previous posts. In terms of content, my CSE 154 post would be the most similar. However, CSE 154 gave me a broad understanding of how web applications work as a whole. In INFO 340, I learned mostly how to create client-side applications along with Firebase features. This class did not have us create and develop server-side applications or APIs. Instead, we used things like Firebase and integrated them within our own client-side applications.
In Spring 2020, the University of Washington had to offer their courses in a completely remote format. As such, my experience may have been somewhat different to what the class usually would be like. Online classes were a new experience for me and I was able to learn a lot about managing my time. I outlined what I learned in an online quarter in another blog post here.
The code I have written for this class will not be publicly available. This is to prevent others from plagiarizing. Instead, I will try and offer the important lessons that I learned from each assignment. Prior to posting this publicly, on June 10, 2020, I emailed my instructor to read over this article to check for anything that might be deemed as academic misconduct. On June 18, 2020, I got approval from my instructor.
Problem Sets
Each week, we were assigned problem sets that covered material that we went over in the lectures. In each assignment, we were given problems to do and had to ensure that all the tests passed in order to get full credit. Although this class did not cover much about Jest and the unit tests, it was interesting to see how unit tests were used in web development. Overall, the problem sets were a good way to practice the skills we had learned in the lectures.
Problem Set 1 - 4
In the first few problem sets, they were mostly review since I had knowledge from previous classes. We covered the basics of HTML, CSS, JavaScript, and Bootstrap. Although I had knowledge from before, it was a great review and showed me some details that I did not know.
Problem Set 5
The fifth problem set had us create small web applications that used what we had learned in the previous weeks. More specifically, one of the problems had us add custom client-side validation using the HTML5 Form Validation API. Even though I had prior experience, I did not know about this particular API. This showed me how important it was to stay updated on modern best practices even with my prior experience. Technology is advancing so quickly that many things can become outdated or replaced with better standards.
Another problem in this set was to create a to-do list using JavaScript to work with DOM events. However, since this class focuses on teaching React, it also taught us to create JavaScript applications with a global program state variable. In CSE 154, we were not taught this specific approach and it was interesting to see a new way of creating web applications. By using this global state variable, we were also smoothly transitioned into creating React applications with props and state.
Problem Set 6
This problem set focused purely on using the Fetch API. In my web development experience, Asynchronous JavaScript and XML (AJAX) has become a standard that allows for a web application to update data without reloading the page. This way, it allows for better performance and a more seamless user experience. I think a very important thing to learn for web development is AJAX and how APIs can be integrated to create powerful applications.
Problem Set 7
Problem Set 7 focused on ES6 features like the class syntax, arrow functions, and modules. The class syntax and modules taught us to structure our applications similar to how a React application would be structured with components. Overall, these features showed me how staying organized and structured could make my code better and easier to understand.
Problem Set 8
In this problem set, we practiced creating React components and combining them to create complete applications. At this point, we had structured our normal JavaScript code in a way that felt similar to React. Using classes, modules, and a global state variable, we had already been building with a React-like mindset.
Problem Set 9
Next, we converted one of our previous exercises into a single-page application. We practiced using React Router to implement client-side routing to our applications. This was how a single-page application could be separated and organized into different paths.
Problem Set 10
Lastly, in Problem Set 10, we learned about Firebase and how to integrate the service for user authentication and as a realtime database. I think in web development, it is always important to look at different APIs and services to see how they can be integrated into an application. By combining these services, an application can be powered by other technologies while giving the user a seamless experience. Integrating other people's work is a way that allows for amazing applications to be built.
Projects
Throughout the quarter, we had to complete two projects. The first being a web application written in JavaScript to manipulate the DOM. The second project was a React application that could be completely new, or just a React version of the first project. Both assignments could be completed individually or in a group. Being completely remote, I decided to do the assignments individually.
For my project, I developed GroupShare, a scheduling tool that helps groups of people find ideal times to meet. It allowed people to create schedules and share them with each other to see their time conflicts.
Building the first project similar to a way that was taught in lecture and previous problem sets, it was very easy for me to convert it to a React application. By developing my project in pure JavaScript and React, I was able to learn about developing in both. I could see why the React developers decided to structure things into components with state and props since they were intuitive ways of representing a part of an application.
The main problem that I faced when I built my React application was how to manage my application's state. Using callback functions to update my application state from child components, I had to ensure that I was using pure functions that would not modify the existing state. Since my application's state was somewhat complex and had nested arrays, I made use of cloneDeep from Lodash to set the new state without modifying the existing state.
Overall Thoughts and Conclusion
I enjoyed the class even though it was offered remotely. Although there was a little overlap with my previous learning, it helped me understand the reasoning behind React and how React applications are structured. The class was focused more on client-side development and allowed me to learn more in-depth about the topic. The problem sets allowed for a quick and easy transition from normal JavaScript webpages to full React applications. It also showed me that I did not necessarily need a framework like React to build a complete application. Although React did make it easier, I learned that there are many different ways to approaching the same project.