To be honest, comparing with the assignment one, the experience of developing application is much more enjoyable for assignment three. During the recess week our group gathered together to code and really worked as a team. In addition, I tried to learn from my teammates and ask for more work. Yijiang, my front-end teammate has really helped me a lot with my coding style and documentation. During the process I also got some new ideas on how to “upgrade” user experience.
We were using Vue.js for front end framework. This is a very light-weight framework and is actually powerful. One of the most important concept in Vue is the “components”. A single page can be divided into components of components and this requires a lot of abstraction. To do this, I learnt to do a bit planning before I really start to code. After finish coding, I would go back and see whether I had an overkill or I need to abstract more (following Single Responsibility Principle).
Then is the CSS styling. From my previous development of NUSPartime, I developed a bad coding style for CSS, which is defining classes wrongly. At the beginning I abstracted all the padding, margin into classes; instead of adding “margin-top: 15px;”, I would create a class named “m-t-md”. As a result, the class attribute for an element usually was really long and was quite difficult to make changes or debug. I also had problems naming SASS variables until I learnt the general standard should be “object-attribute” and should not define variables before it is used. Yijiang had corrected all these styling problems when he was doing the code review and he spent time teaching me the correct way of doing it. He also told me that Bootstrap is useful but we do not have to import the whole file into the project. In addition, Bootstrap can be heavily customized, things like color themes can be changed easily. I think I really got started with front end development after I met Yijiang.
Next would be the user experience. I learnt that user experience does not only include UI part, processing speed should also be included. This is the first time for me to be exposed to Webpack. During the whole process of development, we do not only consider how nice the front end looks like, but also how large the webpage would be when it is transmitted to users. We modified jpg files, converted png to svg and included all relevant files into webpack configuration. All things are done only to optimize the loading speed of webpages and in fact it does worth the effort.
We successfully finished assignment 3 and I really had a good time with my teammates. I hope that my final project would be successful.