Quinn Cheong

Quinn Cheong

Place where I document my failures and successes for personal analysis.

Introduction

This module introduces you to Frontend development. Things might change, but the bulk of project involves using VueJS and CSS to development a web application. It is a big upgrade from using PHP in WAD1. Even though it is not explicity required, I strongly suggest diving straight and using Vue for your project as it really makes development so much easier. Many people will be stuck using Vanilla JS and you don’t really want that as it will be really painful having to directly manage the DOM.

You can view our project for WAD2 on Github or read these series of posts:

Module Overview

IS213 is all developing web applications. There is no backend needed, and you can just directly use something easy like Firebase as a simple Data Store. There are no extra points for spinning up backend servers. Additionally, the bulk of the project marks comes from handling complex logic and Frontend State, and the module is not exactly about desinging “beautiful frontends”.

You start off by learning about HTML CSS, followed by learning some Javascript and Bootstrap (A CSS framework which makes styling your web applications extremely easy). Finally, you end off with VueJS. VueJS, Bootstrap, and JS are all tested. Hence, if you use them in your project, it acts as study for finals.

This module took up about 10-20h per week, more during project season. Most of the time spent was doing in-class exercises and also touching up on project features.

Component Breakdown

  1. Class Participation (10%)
  2. Project (30%)
  3. Lab Test (25%)
  4. Finals (35%)

Grade Breakdown

If you are aiming for A/A+, you will need to score well on all components. I scored well on all components.

If you are aiming for B+/A-, focus on Lab Test and finals, and do average for the Project.

General Strategy

This module seems like Memory Techniques, but is actually a Deliberate Practice focused module. You just need to ensure that you complete the necessary work and you should automatically be able to remember the needed items for finals.

Most of the finals preparation will come WHILE you are doing your project (if you use Bootstrap, Vue and Javascript).

Project Strategy

For many of us, this will be our first time doing Frontend Development, and playing around with VueJS, JS, CSS and Bootstrap. That being said, you need to work doubly hard for this module. The start is always the toughest. Once you muscle through the initial learning curve, you will code at a much faster pace.

For this module, here are the key tips to score well:

  1. Start the Project early. Many groups submitted the project an hour before deadline. I submitted our project 1min before the deadline and the experience was definitely not nice.
  2. Ensure that you don’t have bugs. You application can be medium-sized but should be as bug free as you can make it. Observe the console in your browser and try to remove any error messages that show up.
  3. There will be BTL (Beyond-the-labs) to earn extra mark. Always complete all of them. They are very good ways to learn, and will reward you with free marks.
  4. Don’t spend too much time on building a very “nice looking” web application. The module is graded on functionality. Think of using libraries to make your applications more complex, and thing of using things like mapbox or other open source libraries.
  5. A strong backend is not needed. At least at the time of this writing, you don’t need to spin up servers or even use the cloud much. Just use Firebase or MongoDB to store your data. You would probably not yet have touched on security, so you don’t need to focus much on security for this module. Good practice is to never expose your API Keys to the public. For this module, double check with your prof if it’s ok. There is are no requirements on having to use a SQL or NoSQL DB, so jsut choose the simplest DB and go along with it.
  6. Mock your data early. When you begin developing, have a separate simple JSON file that includes the schema of some mock data that you are going to use. Do not wait until you get the API up and running before starting to link everything. Copy dummy data from the API, paste it into a file, then use that for development.
  7. You don’t need anything fancy like Cloud or Kubernetes. I have seen groups that do it, and if you’re able to you should. But this course doesn’t require that in order to score. You will face things like CORS errors when you’re trying to deploy your application. Then, you can use the cloud to help you hack your way through. You can read more about it at Save My World Part 3. These are where I breakdown the technical challenges we faced along the way.
  8. You will use APIs, and will probably need some way to get data and save into DB. A few ways: (1) Save your Data into JSON and manually load it everytime your DB is corrupted or goes out of sync during testing. (2) Write a script to retrieve the Data and save it into your DB. I did this option. Remember to ensure your API limits do not burst. (3) Write some FE endpoints to repopulate the DB. You can do this as well!.
  9. Keep deployment easy. Use something like netlify as it is very simple. You will run into CORs though, so you need to allocate some time to debug CORS.

It is also highly recommended that you use Postman for API testing. If you haven’t used this before, I strong suggest taking some time to learn it. I can assure you that many developers in the real world use this, and this is essential for API testing. With Postman, you can interact with external APIs and call them without having to setup your backend server.

Now less on technical but more on group strategy:

  1. Brainstorm a good problem statement. It helps. Alot.
  2. Have diff group members working on different features (best is different HTML pages). From experience, your feature should be small enough such that only 1 group member works on 1 feature. I have seen groups where 2+ members work on a single feature and it gets very messy.
  3. Use Figma for your brainstorming. You would have learnt about it during IDP, and use it to your advantage. SMU Modules build on top of each other and using what you learnt from previous modules is always the way to go.
  4. Don’t spend too long on 1 feature. Once stuck, ask the group and try to unblock each other.

Lab Test Strategy

There are 2 lab tests if I remember correctly.

The first LT focuses alot on HTML and Bootstrap, and tests a little on algorithms. The first LT was quite hard for me and I did not manage to reach the last question. The bootstrap/css question will probably be something difficult/tricky like: (1) Overlay colored text on top of picture at a specific spot (have to use some form of absolute css position to score for this), (2) creating tables using html css bootstrap with specific table configurations (diff colors etc). The best way to deliberately practice for this is to ensure you complete every single in-class exercise. It will help you immensely.

The second LT I think was half bootstrap half vue. This was easier than the previous labtest and you should have enough time. I know quite a few people scored full marks for this LT. The questions are not algorithm-like, but instead tests you on how you use Vue, Bootstrap and CSS. If you have been doing your project well, this lab test should be quite simple. Again, Vue would have been taught later in the semester. Hence, if you used Vue in your project early on, this would be easier. Note to manage your time well, if you are stuck on a question just move on first. Come back to it later.

Class Participation Strategy

I don’t remember there being much class participation in this module. Just communicating and raising hands once every 1-2 lesson should do the trick.

Finals Strategy

I can’t remember much about finals, so I will not be giving any tips as I don’t want to be misleading in anyway. I can only remember that it was written, there were some Vue and Vanilla JS questions to ask (fill in the blanks, what is wrong with the code-ish).

Conclusion

This module focuses a lot on Front-end Development and is your first app that you’re going to build (and hopefully deploy!) If you deploy it this module, you’ll understand how to do deployment and you can use it for future internships or modules. It’s certainly helpful. Looking back, I was immensely happy with the application even though it wasn’t very aesthetic, because we built a lot of cool features and we learnt how to debug CORS + hack it using the Cloud! It’s definitely a great experience and a module I enjoyed very much.

Happy building! :)

You May Also Enjoy